/* This file controls the website intro only. */

html:has(.swdm-intro),
body.swdm-intro-standalone {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #010203;
}

html.swdm-intro-pending body {
  background: #000;
}

html.swdm-intro-pending body > :not(#swdm-intro-root) {
  visibility: hidden;
}

html.swdm-intro-pending #swdm-intro-root:empty::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  background: #000;
}

.swdm-intro {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --pad: clamp(14px, 3vmin, 36px);
  --title: clamp(2rem, 8.8vmin, 7rem);
  --final-title: clamp(1.7rem, 6.8vmin, 5.8rem);
  --small: clamp(.58rem, 1.55vmin, 1rem);
  --logo-size: clamp(140px, 34vmin, 430px);
  --panel-w: min(96vw, 1220px);
  --panel-h: clamp(260px, 52svh, 540px);
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  min-height: 100svh;
  max-width: 100vw;
  color: #f1f4f5;
  background: #000;
  font-family: "Arial Black", Impact, Arial, sans-serif;
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.swdm-intro.is-ending {
  pointer-events: none;
  animation: swdmIntroExit .55s ease-in forwards;
}

.swdm-intro.is-paused,
.swdm-intro.is-paused *,
.swdm-intro.is-paused::before,
.swdm-intro.is-paused::after,
.swdm-intro.is-paused *::before,
.swdm-intro.is-paused *::after {
  animation-play-state: paused !important;
}

.swdm-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(91, 95, 101, .22), transparent 36%),
    linear-gradient(135deg, #000 0%, #070809 44%, #181b20 62%, #020304 100%);
  opacity: 0;
  animation: graphiteWake 20s ease forwards;
}

.swdm-intro__atmosphere,
.swdm-intro__name-reveal,
.swdm-intro__dd-stage,
.swdm-intro__service-stage,
.swdm-intro__final-lockup {
  position: absolute;
  inset: 0;
}

.swdm-intro__atmosphere {
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  animation: atmosphereWake 20s ease forwards;
}

.swdm-intro__smoke {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle at 30% 50%, rgba(210, 220, 224, .12), transparent 22%),
    radial-gradient(circle at 66% 40%, rgba(110, 116, 122, .14), transparent 26%),
    radial-gradient(circle at 55% 70%, rgba(88, 92, 96, .13), transparent 30%);
  filter: blur(18px);
  opacity: .55;
  animation: smokeDrift 20s ease-in-out forwards;
}

.swdm-intro__name-reveal {
  z-index: 2;
  display: grid;
  place-items: center;
  padding:
    calc(var(--pad) + var(--safe-top))
    calc(var(--pad) + var(--safe-right))
    calc(var(--pad) + var(--safe-bottom))
    calc(var(--pad) + var(--safe-left));
  box-sizing: border-box;
  pointer-events: none;
  animation: nameStage 20s ease forwards;
}

.swdm-intro__name-reveal::before,
.swdm-intro__name-reveal::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  width: clamp(58px, 9vmin, 132px);
  height: min(64svh, 620px);
  background: #b40000;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.swdm-intro__name-reveal::before {
  left: calc(50% - clamp(66px, 10vmin, 150px));
  animation: stripeRight 20s ease forwards;
}

.swdm-intro__name-reveal::after {
  right: calc(50% - clamp(66px, 10vmin, 150px));
  animation: stripeLeft 20s ease forwards;
}

.swdm-intro__name-reveal span {
  position: relative;
  z-index: 1;
  max-width: 94vw;
  color: #d9dddf;
  font-size: var(--title);
  font-weight: 900;
  line-height: .86;
  letter-spacing: clamp(.02em, .6vmin, .09em);
  text-align: center;
  animation: metalName 20s ease forwards;
}

.swdm-intro__dd-stage {
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
}

.swdm-intro__process-float {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72vw, 980px);
  height: min(46svh, 390px);
  max-width: calc(100vw - (var(--pad) * 2));
  max-height: calc(100svh - 170px);
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 1vmin, 16px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  animation: processFilmStage 20s ease forwards;
}

.swdm-intro__process-float img {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  opacity: .5;
  padding: clamp(3px, .55vmin, 8px);
  outline: 1px solid rgba(160, 168, 174, .18);
  outline-offset: -1px;
  background: rgba(2, 3, 4, .76);
  filter: grayscale(.26) brightness(.62) contrast(1.18);
}

.swdm-intro__process-float img:nth-child(1) {
  object-position: center;
}

.swdm-intro__process-float img:nth-child(2) {
  object-position: center;
}

.swdm-intro__process-float img:nth-child(3) {
  object-position: center;
}

.swdm-intro__process-float img:nth-child(4) {
  object-position: center;
}

.swdm-intro__word-burst {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: clamp(4px, 1vmin, 10px);
  text-align: center;
  opacity: 0;
  animation: wordBurst 20s ease forwards;
}

.swdm-intro__word-burst span {
  color: #9ca3a8;
  font-size: clamp(1.2rem, 5.6vmin, 4.6rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: .08em;
}

.swdm-intro__service-stage {
  z-index: 4;
  display: grid;
  place-items: center;
  padding:
    calc(var(--pad) + var(--safe-top))
    calc(var(--pad) + var(--safe-right))
    calc(var(--pad) + var(--safe-bottom))
    calc(var(--pad) + var(--safe-left));
  box-sizing: border-box;
  pointer-events: none;
}

.swdm-intro__service-panel {
  position: absolute;
  width: var(--panel-w);
  height: var(--panel-h);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(180px, .92fr);
  align-items: stretch;
  overflow: hidden;
  border: 0;
  background: rgba(2, 3, 4, .14);
  box-shadow: 0 34px 70px rgba(0,0,0,.44);
  opacity: 0;
  transform: translateX(18vw) scale(.88);
}

.swdm-intro__service-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(120deg, transparent 0 24%, rgba(255,255,255,.06) 38%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.05) 58%, transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 34%, rgba(0,0,0,.16));
  opacity: 0;
  transform: translateX(-12%) skewX(-10deg);
  pointer-events: none;
}

.swdm-intro__service-panel img {
  align-self: center;
  justify-self: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background: rgba(2, 3, 4, .62);
  filter: contrast(1.06) saturate(.9) brightness(.84);
}

.swdm-intro__service-panel div {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: clamp(7px, 1.1vmin, 14px);
  min-width: 0;
  overflow: hidden;
  padding: clamp(14px, 3vmin, 40px);
  background:
    linear-gradient(90deg, rgba(3,4,5,.48), rgba(3,4,5,.84)),
    radial-gradient(circle at 20% 40%, rgba(150, 158, 164, .16), transparent 46%);
}

.swdm-intro__service-panel p {
  margin: 0;
  color: #f3f5f6;
  max-width: 100%;
  font-size: clamp(1.24rem, 4.55vmin, 4.15rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}

.swdm-intro__recap {
  display: grid;
  gap: clamp(2px, .45vmin, 6px);
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #b9c0c5;
  font-family: Arial, sans-serif;
  font-size: clamp(.56rem, 1.42vmin, .9rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: .035em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.swdm-intro__recap li {
  position: relative;
  padding-left: 1.05em;
}

.swdm-intro__recap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .47em;
  width: .45em;
  height: 1px;
  background: #8d969b;
}

.swdm-intro__service-panel.is-machining img {
  padding: clamp(4px, 1.2vmin, 14px);
  box-sizing: border-box;
}

.swdm-intro__service-panel.is-design {
  animation: serviceDesign 20s ease forwards;
}

.swdm-intro__service-panel.is-development {
  animation: serviceDevelopment 20s ease forwards;
}

.swdm-intro__service-panel.is-machining {
  animation: serviceMachining 20s ease forwards;
}

.swdm-intro__service-panel.is-design::before {
  animation: serviceSoftShine 20s 7.8s ease forwards;
}

.swdm-intro__service-panel.is-development::before {
  animation: serviceSoftShine 20s 10.8s ease forwards;
}

.swdm-intro__service-panel.is-machining::before {
  animation: serviceSoftShine 20s 13.8s ease forwards;
}

.swdm-intro__final-lockup {
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(6px, 1.2vmin, 14px);
  padding:
    calc(var(--pad) + var(--safe-top))
    calc(var(--pad) + var(--safe-right))
    calc(var(--pad) + var(--safe-bottom))
    calc(var(--pad) + var(--safe-left));
  text-align: center;
  opacity: 0;
  pointer-events: none;
  animation: finalLockup 20s ease forwards;
}

.swdm-intro__final-lockup::before,
.swdm-intro__final-lockup::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  width: min(74vw, 880px);
  height: clamp(10px, 1.7vmin, 22px);
  background: linear-gradient(90deg, transparent 0, rgba(110, 0, 0, .14) 10%, #520000 32%, #980000 50%, #520000 68%, rgba(110, 0, 0, .14) 90%, transparent 100%);
  opacity: 0;
  filter: blur(5px) brightness(.82);
  pointer-events: none;
}

.swdm-intro__final-lockup::before {
  top: calc(50% - clamp(30px, 5.2vmin, 68px));
  animation: finalTypeALineRight 20s ease forwards;
}

.swdm-intro__final-lockup::after {
  top: calc(50% + clamp(18px, 3.8vmin, 52px));
  animation: finalTypeALineLeft 20s ease forwards;
}

.swdm-intro__final-lockup p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #eef2f3;
  font-size: var(--final-title);
  font-weight: 900;
  line-height: .86;
  letter-spacing: .07em;
}

.swdm-intro__final-lockup span {
  position: relative;
  z-index: 1;
  color: #c4c9cc;
  font-family: Arial, sans-serif;
  font-size: var(--small);
  font-weight: 900;
  letter-spacing: clamp(.08em, 1vmin, .22em);
}

.swdm-intro__skip {
  position: absolute;
  right: calc(clamp(12px, 3vw, 34px) + var(--safe-right));
  bottom: calc(clamp(12px, 3vw, 34px) + var(--safe-bottom));
  z-index: 10;
  min-width: 96px;
  min-height: 44px;
  border: 1px solid rgba(188, 198, 204, .56);
  background: rgba(4, 5, 7, .74);
  color: #f2f5f6;
  padding: 10px 15px;
  font: 900 .72rem Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(188, 198, 204, .20);
}

.swdm-intro__skip:hover,
.swdm-intro__skip:focus-visible {
  outline: none;
  border-color: #f0f4f6;
  box-shadow: 0 0 26px rgba(220, 226, 230, .38);
}

.swdm-intro__pause-note {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(62px, 9vmin, 104px) + var(--safe-bottom));
  z-index: 11;
  max-width: min(90vw, 680px);
  color: rgba(210, 216, 220, .76);
  font-family: Arial, sans-serif;
  font-size: clamp(.7rem, 1.8vmin, 1rem);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(0, 0, 0, .92);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .22s ease, transform .22s ease;
}

.swdm-intro.is-paused .swdm-intro__pause-note {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes nameStage {
  0%, 18% { opacity: 1; transform: scale(1); }
  23%, 100% { opacity: 0; transform: scale(2.6); }
}

@keyframes graphiteWake {
  0%, 6% { opacity: 0; }
  13%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes atmosphereWake {
  0%, 8% { opacity: 0; }
  16%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes metalName {
  0% { opacity: 0; color: #000; transform: scale(.96); }
  5%, 13% { opacity: 1; color: #5b6064; transform: scale(1); }
  18% { opacity: 1; color: #d9dddf; transform: scale(1.06); }
  23%, 100% { opacity: 0; color: #d9dddf; transform: scale(1.72); }
}

@keyframes stripeRight {
  0%, 5% { opacity: 0; transform: translate3d(-42vw, -50%, 0) scaleY(.72); }
  8%, 16% { opacity: .92; transform: translate3d(0, -50%, 0) scaleY(1); }
  22%, 100% { opacity: 0; transform: translate3d(42vw, -50%, 0) scaleY(1.06); }
}

@keyframes stripeLeft {
  0%, 5% { opacity: 0; transform: translate3d(42vw, -50%, 0) scaleY(.72); }
  8%, 16% { opacity: .82; transform: translate3d(0, -50%, 0) scaleY(1); }
  22%, 100% { opacity: 0; transform: translate3d(-42vw, -50%, 0) scaleY(1.06); }
}

@keyframes wordBurst {
  0%, 23% { opacity: 0; transform: scale(.85); }
  26%, 36% { opacity: 1; transform: scale(1); }
  40%, 100% { opacity: 0; transform: scale(1.18); }
}

@keyframes processFilmStage {
  0%, 22% { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  26% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  34% { opacity: 1; transform: translate(-50%, -50%) scale(.99); }
  37% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  41%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.03); }
}

@keyframes serviceDesign {
  0%, 42% { opacity: 0; transform: translateX(18vw) scale(.88); }
  45%, 55% { opacity: 1; transform: translateX(0) scale(1); }
  58%, 100% { opacity: 0; transform: translateX(-18vw) scale(.94); }
}

@keyframes serviceDevelopment {
  0%, 57% { opacity: 0; transform: translateX(18vw) scale(.88); }
  60%, 70% { opacity: 1; transform: translateX(0) scale(1); }
  73%, 100% { opacity: 0; transform: translateX(-18vw) scale(.94); }
}

@keyframes serviceMachining {
  0%, 72% { opacity: 0; transform: translateX(18vw) scale(.88); }
  75%, 85% { opacity: 1; transform: translateX(0) scale(1); }
  88%, 100% { opacity: 0; transform: translateX(-18vw) scale(.94); }
}

@keyframes serviceSoftShine {
  0% { opacity: 0; transform: translateX(-12%) skewX(-10deg); }
  18%, 58% { opacity: .85; transform: translateX(0) skewX(-10deg); }
  100% { opacity: 0; transform: translateX(8%) skewX(-10deg); }
}

@keyframes finalLockup {
  0%, 86% { opacity: 0; transform: scale(.86); }
  89%, 98.7% { opacity: 1; transform: scale(1); }
  99.4% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes finalTypeALineRight {
  0%, 86% { opacity: 0; filter: blur(8px) brightness(.72); transform: translateX(-105%) scaleX(.62); }
  89% { opacity: .46; filter: blur(6px) brightness(.78); transform: translateX(-86%) scaleX(.76); }
  93.5%, 96.5% { opacity: .92; filter: blur(.4px) brightness(.92); transform: translateX(-50%) scaleX(1); }
  98.7% { opacity: .56; filter: blur(5px) brightness(.78); transform: translateX(-18%) scaleX(.92); }
  100% { opacity: 0; filter: blur(9px) brightness(.68); transform: translateX(4%) scaleX(.82); }
}

@keyframes finalTypeALineLeft {
  0%, 86% { opacity: 0; filter: blur(8px) brightness(.72); transform: translateX(5%) scaleX(.62); }
  89% { opacity: .42; filter: blur(6px) brightness(.78); transform: translateX(-14%) scaleX(.76); }
  93.5%, 96.5% { opacity: .86; filter: blur(.4px) brightness(.92); transform: translateX(-50%) scaleX(1); }
  98.7% { opacity: .52; filter: blur(5px) brightness(.78); transform: translateX(-82%) scaleX(.92); }
  100% { opacity: 0; filter: blur(9px) brightness(.68); transform: translateX(-104%) scaleX(.82); }
}

@keyframes smokeDrift {
  0% { transform: translate3d(-2%, 2%, 0) scale(1); opacity: .42; }
  50% { transform: translate3d(2%, -2%, 0) scale(1.08); opacity: .62; }
  100% { transform: translate3d(5%, -4%, 0) scale(1.16); opacity: .18; }
}

@keyframes swdmIntroExit {
  to { opacity: 0; transform: scale(1.03); }
}

@media (max-width: 760px) {
  .swdm-intro {
    --title: clamp(1.55rem, 8.2vmin, 3.2rem);
    --final-title: clamp(1.35rem, 7.2vmin, 2.75rem);
    --logo-size: clamp(120px, 38vmin, 240px);
    --panel-w: min(96vw, 700px);
    --panel-h: clamp(250px, 54svh, 430px);
  }

  .swdm-intro__name-reveal::before,
  .swdm-intro__name-reveal::after {
    width: clamp(42px, 11vmin, 78px);
    height: min(58svh, 430px);
  }

  .swdm-intro__final-lockup::before,
  .swdm-intro__final-lockup::after {
    width: min(86vw, 560px);
    height: clamp(8px, 2.2vmin, 16px);
  }

  .swdm-intro__process-float img {
    width: 100%;
    height: 100%;
    opacity: .34;
  }

  .swdm-intro__process-float {
    width: min(96vw, 760px);
    height: min(44svh, 350px);
    max-height: calc(100svh - 150px);
    gap: clamp(5px, 1.4vmin, 9px);
  }

  .swdm-intro__service-panel {
    grid-template-columns: minmax(0, .95fr) minmax(128px, 1.05fr);
    grid-template-rows: 1fr;
  }

  .swdm-intro__service-panel img {
    width: 100%;
    height: 100%;
  }

  .swdm-intro__service-panel div {
    min-height: 0;
    padding: clamp(10px, 3vmin, 22px);
    gap: clamp(5px, 1.5vmin, 10px);
  }

  .swdm-intro__service-panel p {
    font-size: clamp(1rem, 6.2vw, 2.35rem);
    line-height: .94;
  }

  .swdm-intro__service-panel.is-development p {
    font-size: clamp(.94rem, 5.35vw, 2.05rem);
    letter-spacing: .018em;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .swdm-intro__recap {
    font-size: clamp(.46rem, 2.55vw, .72rem);
    line-height: 1.08;
    gap: 2px;
  }
}

body.swdm-intro-android-view .swdm-intro {
  --title: clamp(1.55rem, 8.2vmin, 3.2rem);
  --final-title: clamp(1.35rem, 7.2vmin, 2.75rem);
  --logo-size: clamp(120px, 38vmin, 240px);
  --panel-w: min(96vw, 700px);
  --panel-h: clamp(250px, 54svh, 430px);
}

body.swdm-intro-android-view .swdm-intro__name-reveal::before,
body.swdm-intro-android-view .swdm-intro__name-reveal::after {
  width: clamp(42px, 11vmin, 78px);
  height: min(58svh, 430px);
}

body.swdm-intro-android-view .swdm-intro__final-lockup::before,
body.swdm-intro-android-view .swdm-intro__final-lockup::after {
  width: min(86vw, 560px);
  height: clamp(8px, 2.2vmin, 16px);
}

body.swdm-intro-android-view .swdm-intro__process-float {
  width: min(96vw, 760px);
  height: min(44svh, 350px);
  max-height: calc(100svh - 150px);
  gap: clamp(5px, 1.4vmin, 9px);
}

body.swdm-intro-android-view .swdm-intro__process-float img {
  width: 100%;
  height: 100%;
  opacity: .34;
}

body.swdm-intro-android-view .swdm-intro__service-panel {
  grid-template-columns: minmax(0, .95fr) minmax(128px, 1.05fr);
  grid-template-rows: 1fr;
}

body.swdm-intro-android-view .swdm-intro__service-panel img {
  width: 100%;
  height: 100%;
}

body.swdm-intro-android-view .swdm-intro__service-panel div {
  min-height: 0;
  padding: clamp(10px, 3vmin, 22px);
  gap: clamp(5px, 1.5vmin, 10px);
}

body.swdm-intro-android-view .swdm-intro__service-panel p {
  font-size: clamp(1rem, 6.2vw, 2.35rem);
  line-height: .94;
}

body.swdm-intro-android-view .swdm-intro__service-panel.is-development p {
  font-size: clamp(.94rem, 5.35vw, 2.05rem);
  letter-spacing: .018em;
  overflow-wrap: normal;
  white-space: nowrap;
}

body.swdm-intro-android-view .swdm-intro__recap {
  font-size: clamp(.46rem, 2.55vw, .72rem);
  line-height: 1.08;
  gap: 2px;
}

@media (max-height: 520px) and (orientation: landscape) {
  .swdm-intro {
    --pad: clamp(8px, 2vmin, 16px);
    --title: clamp(1.25rem, 8svh, 2.2rem);
    --final-title: clamp(1.15rem, 7svh, 2rem);
    --logo-size: clamp(82px, 28svh, 150px);
    --panel-w: min(96vw, 980px);
    --panel-h: min(84svh, 360px);
    --small: clamp(.46rem, 2.4svh, .72rem);
  }

  .swdm-intro__process-float {
    width: min(84vw, 860px);
    height: min(50svh, 240px);
    max-height: calc(100svh - 78px);
  }

  .swdm-intro__service-panel {
    grid-template-columns: minmax(0, 1fr) minmax(170px, .86fr);
  }

  .swdm-intro__service-panel p {
    font-size: clamp(1rem, 6.7svh, 2.18rem);
  }

  .swdm-intro__service-panel div {
    padding: clamp(10px, 3svh, 22px);
  }

  .swdm-intro__recap {
    font-size: clamp(.42rem, 2.25svh, .62rem);
    line-height: 1.08;
    gap: 1px;
  }

}

@media (pointer: coarse), (max-width: 760px), (max-height: 520px) {
  .swdm-intro__smoke {
    filter: blur(12px);
    opacity: .42;
  }

  .swdm-intro__service-panel {
    box-shadow: 0 22px 42px rgba(0,0,0,.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .swdm-intro,
  .swdm-intro * {
    animation: none !important;
    transition: none !important;
  }
}