/* ============================================================================
   Ambassador Presentations — base layout, components and motion.
   Variant "splitshape": each slide splits the screen; the photo is the hero
   inside a big organic window that bleeds off one edge, a blurred colour-graded
   copy of the same photo glows faintly behind everything, and the words sit on a
   two-hue palette surface on the other side.
   Only transform / opacity / filter / SVG attributes ever animate.
   Theme tokens live on each screen ([data-theme]) so a leaving screen keeps its
   look all the way through the cross-fade.
   ============================================================================ */

:root {
  --vh: 100vh;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --font-eco: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-fd: "Fredoka", "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-ft: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  --gutter: clamp(16px, 3vw, 54px);
  --top-h: clamp(48px, 6.5vh, 68px);
  --btn-h: clamp(60px, 7.6vh, 84px);
  --bleed: 6vw;

  /* Type scale: huge for the back of the hall (question 46px, bullets 51px at 1440×900; 61/66 at 1920×1080). */
  --fs-q: clamp(28px, 2.6vw + 1vh, 62px);
  --fs-b: clamp(32px, 2.6vw + 1.5vh, 76px);
  --fs-btn: clamp(20px, 1.1vw + .85vh, 32px);
  --fs-ui: clamp(15px, .85vw + .35vh, 21px);

  --q-fit: 1;
  --b-fit: 1;
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: #2D1B4E;
  color: #111;
  font-family: var(--font-eco);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: manipulation;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, p { margin: 0; }
svg { display: block; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus { outline: none; }
:focus-visible { outline: 4px solid var(--ring, #fff); outline-offset: 4px; }
.screen:focus-visible { outline: none; }
/* programmatic focus after a pointer-driven render: no ring until the presenter actually presses Tab */
.focus-quiet:focus-visible { outline: none; }
/* visually hidden, still read by assistive tech (the persistent live region) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

#app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100vh; height: var(--vh); overflow: hidden; background: #2D1B4E; }
.screen {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
  font-family: var(--font, var(--font-eco));
  color: var(--ink, #111);
  background: var(--surface-grad, var(--surface, #2D1B4E));
  animation: screenIn .6s var(--ease-soft) both;
}
/* the leaving screen holds under the new one while it fades in on top: a true cross-fade, no dip */
.screen.is-leaving { z-index: 1; pointer-events: none; animation: screenOut .7s var(--ease-soft) both; }
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes screenOut { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

canvas.particles { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#confetti { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ----------------------------------------------------------------------------
   Full-bleed blurred, colour-graded copy of the photo behind everything
   ---------------------------------------------------------------------------- */
.backdrop {
  position: absolute;
  top: -6%; right: -6%; bottom: -6%; left: -6%;
  z-index: 0;
  background-size: cover;
  background-position: var(--focus, 50% 50%);
  filter: blur(34px) saturate(1.35);
  opacity: var(--bd-alpha, .45);
  mix-blend-mode: var(--bd-blend, normal);
  pointer-events: none;
  animation: fadeIn 1.2s var(--ease-soft) both;
}
.backdrop-tint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: var(--surface-grad, var(--surface)); opacity: var(--tint-alpha, .5); pointer-events: none; }
/* calm reading surface behind the words: the surface colour, fading out toward the photo */
.veil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, var(--veil-a) 0%, var(--veil-b) 46%, transparent 72%); }
.slide.photo-left .veil { background: linear-gradient(to left, var(--veil-a) 0%, var(--veil-b) 46%, transparent 72%); }

/* ----------------------------------------------------------------------------
   Slide: split grid
   ---------------------------------------------------------------------------- */
.slide { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-rows: minmax(0, 1fr); }
.slide.photo-left { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }

.col-text {
  position: relative;
  z-index: 4;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 3.4vh, 40px);
  min-width: 0;
  min-height: 0;
  padding: calc(var(--top-h) + 3vh) calc(var(--gutter) * .35) calc(var(--btn-h) + 5vh) var(--gutter);
}
.slide.photo-left .col-text { grid-column: 2; padding-left: calc(var(--gutter) * .8); padding-right: var(--gutter); }

.col-photo { position: relative; z-index: 2; grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
.slide.photo-left .col-photo { grid-column: 1; }

/* ----------------------------------------------------------------------------
   Header: home pill, progress steps, presentation chip
   ---------------------------------------------------------------------------- */
.top {
  position: absolute;
  z-index: 6;
  top: clamp(10px, 1.6vh, 20px);
  left: var(--gutter);
  right: var(--gutter);
  height: var(--top-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  animation: fadeDown .7s var(--ease-out) both;
}
.top > * { pointer-events: auto; }
.home-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  height: 44px;
  padding: 0 18px 0 12px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-weight: 800;
  font-size: var(--fs-ui);
  font-family: var(--font-display, inherit);
  transition: transform .2s var(--ease-out);
}
.home-link svg { width: 1.25em; height: 1.25em; }
.home-link:hover { transform: translateY(-2px) scale(1.03); }
.home-link:active { transform: scale(.97); }

.progress { display: flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 999px; background: var(--chip-bg); height: 44px; }
.step { position: relative; display: grid; place-items: center; min-width: 44px; height: 44px; }
.step i { display: block; width: clamp(24px, 2vw, 40px); height: 12px; border-radius: 999px; background: var(--step); transition: transform .35s var(--ease-pop); }
.step:hover i { transform: scaleY(1.25); }
.step[aria-current="step"] i { background: var(--step-on); transform: scaleX(1.55); animation: stepPulse 2.4s ease-in-out infinite; }
@keyframes stepPulse { 0%, 100% { transform: scaleX(1.55); } 50% { transform: scaleX(1.55) scaleY(1.3); } }

.chip-name {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-weight: 800;
  font-size: var(--fs-ui);
  font-family: var(--font-display, inherit);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Words
   ---------------------------------------------------------------------------- */
.question {
  font-family: var(--font-display, inherit);
  font-size: calc(var(--fs-q) * var(--q-fit));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
  animation: riseIn .8s var(--ease-out) both;
  animation-delay: .35s;
}
.q-group { display: grid; gap: clamp(4px, .9vh, 12px); min-width: 0; }
.kicker {
  margin: 0;
  width: max-content;
  max-width: 100%;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(18px, 1.2vw + 1.2vh, 38px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: underline wavy var(--kicker-accent, currentColor);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
  transform: rotate(-2deg);
  transform-origin: left bottom;
  animation: fadeDown .7s var(--ease-out) both;
  animation-delay: .2s;
}
.kicker::before { content: "\2726"; display: inline-block; margin-right: .35em; font-size: .7em; color: var(--kicker-accent, currentColor); vertical-align: .12em; }
.kw { position: relative; white-space: nowrap; isolation: isolate; }
.kw::after {
  content: "";
  position: absolute;
  z-index: -1; /* behind the letters: the stroke never crosses a descender */
  left: -1%;
  right: -1%;
  bottom: -.2em;
  height: .3em;
  background: var(--doodle) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  animation: doodleIn .7s var(--ease-out) forwards;
  animation-delay: 1.15s;
  pointer-events: none;
}
@keyframes doodleIn { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }

.bullets { display: flex; flex-direction: column; gap: clamp(8px, 2vh, 28px); }
.bullet {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 26px);
  font-family: var(--font-display, inherit);
  font-size: calc(var(--fs-b) * var(--b-fit));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.012em;
  min-width: 0;
  animation: bulletIn .75s var(--ease-out) both;
  animation-delay: var(--d, 1s);
}
.bullet-text { min-width: 0; white-space: nowrap; }
.bullets.can-wrap .bullet-text { white-space: normal; }
/* filled two-colour icon that matches the phrase, on a soft-cornered coloured chip */
.mark {
  flex: none;
  display: grid;
  place-items: center;
  width: .98em;
  height: .98em;
  border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
  background: var(--mk, var(--mk-1));
  color: #fff;
  box-shadow: 0 .08em 0 rgba(0, 0, 0, .12) inset, 0 .18em .5em -0.15em rgba(0, 0, 0, .3);
  animation: popIn .6s var(--ease-pop) both;
  animation-delay: calc(var(--d, 1s) + .15s);
}
.mark svg { width: 66%; height: 66%; overflow: visible; }
.mark .cut { fill: var(--mk, var(--mk-1)); }
.mark .cut-stroke { stroke: var(--mk, var(--mk-1)); }
.bullet:nth-child(1) .mark { --mk: var(--mk-1); }
.bullet:nth-child(2) .mark { --mk: var(--mk-2); border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%; }
.bullet:nth-child(3) .mark { --mk: var(--mk-3); border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%; }
.bullet:nth-child(1) .mark svg { animation: markBob 4s 2.8s ease-in-out infinite; }
.bullet:nth-child(2) .mark svg { animation: markBob 4s 3.3s ease-in-out infinite; }
.bullet:nth-child(3) .mark svg { animation: markBob 4s 3.8s ease-in-out infinite; }
@keyframes markBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6%) rotate(-8deg); } }

@keyframes riseIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: var(--bd-alpha, 1); } }
@keyframes bulletIn {
  0% { opacity: 0; transform: translateX(var(--from, -60px)); }
  62% { opacity: 1; transform: translateX(calc(var(--from, -60px) * -.14)); }
  100% { opacity: 1; transform: none; }
}
@keyframes popIn { from { opacity: 0; transform: scale(.2) rotate(-20deg); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------------
   Photo window: the hero. Sized from the column plus a bleed off the screen edge.
   ---------------------------------------------------------------------------- */
.photo-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top-h) + 2.5vh);
  bottom: calc(var(--btn-h) + 5.5vh);
}
.slide.photo-left .photo-stage { bottom: 3vh; }
.slide.anchor-bottom .photo-stage { bottom: -1.5vh; }

.shape-wrap {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  margin: auto 0;
  --maxw: calc(42vw + var(--bleed));
  height: min(100%, calc(var(--maxw) / var(--ratio, 1)));
  aspect-ratio: var(--ratio, 1);
  animation: shapeIn 1.1s var(--ease-pop) backwards;
  animation-delay: .1s;
}
.slide.photo-right .shape-wrap { right: calc(-1 * var(--bleed)); transform-origin: 80% 50%; }
.slide.photo-left .shape-wrap { left: calc(-1 * var(--bleed)); transform-origin: 20% 50%; }
.slide.anchor-bottom .shape-wrap { top: auto; bottom: 0; margin: 0; transform-origin: 20% 100%; }
@keyframes shapeIn { from { opacity: 0; transform: scale(.8) rotate(-3deg); } to { opacity: 1; transform: none; } }

.tilt { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-style: preserve-3d; will-change: transform; }
.shape {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  background: var(--surface-2);
  clip-path: url(#clip-blob);
  animation: drift 14s ease-in-out infinite alternate;
}
.slide.anchor-bottom .shape { animation: none; }
.plx { position: absolute; top: -4%; right: -4%; bottom: -4%; left: -4%; }
.shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  filter: saturate(1.1) contrast(1.04);
  transform-origin: 50% 50%;
  will-change: transform;
}
.kb-a img { animation: kbA 34s var(--ease-soft) infinite alternate; }
.kb-b img { animation: kbB 38s var(--ease-soft) infinite alternate; }
.kb-c img { animation: kbC 36s var(--ease-soft) infinite alternate; }
/* the photo treatment: soft-light grade of the theme hues, a light multiply, drifting light, vignette, one shine */
.shape .grade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--grade); mix-blend-mode: soft-light; opacity: .95; }
.shape .tint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--tint); mix-blend-mode: multiply; opacity: .24; }
.shape .light { position: absolute; top: -25%; right: -25%; bottom: -25%; left: -25%; background: var(--light); mix-blend-mode: screen; opacity: .9; animation: lightDrift 24s var(--ease-soft) infinite alternate; will-change: transform; }
.shape .vignette { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(75% 75% at 50% 45%, transparent 52%, var(--vignette, rgba(0, 0, 0, .35)) 100%); opacity: .85; }
.shape .shine {
  position: absolute;
  top: -20%; right: -60%; bottom: -20%; left: -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .26) 50%, transparent 60%);
  animation: shine 9s ease-in-out infinite;
  animation-delay: 2.2s;
  mix-blend-mode: screen;
}
@keyframes drift { from { transform: translate3d(-1%, -.6%, 0) rotate(-.4deg); } to { transform: translate3d(1%, 1%, 0) rotate(.4deg); } }
@keyframes kbA { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-2%, 1.4%, 0); } }
@keyframes kbB { from { transform: scale(1.06) translate3d(1.2%, 1%, 0); } to { transform: scale(1.15) translate3d(-1.2%, -1.2%, 0); } }
@keyframes kbC { from { transform: scale(1.14) translate3d(-1.4%, .6%, 0); } to { transform: scale(1.04) translate3d(1%, -.8%, 0); } }
@keyframes lightDrift { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } }
@keyframes shine { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }

/* big soft blobs and rings drifting behind the window */
.bg-blob {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
  filter: blur(28px);
  opacity: .75;
  will-change: transform;
  animation: blobFloat 24s ease-in-out infinite alternate;
  pointer-events: none;
}
.bg-blob.a { width: 58%; left: -6%; top: 6%; background: var(--blob-a); }
.bg-blob.b { width: 50%; right: -8%; bottom: 4%; background: var(--blob-b); animation-duration: 29s; animation-direction: alternate-reverse; border-radius: 60% 40% 45% 55% / 45% 60% 40% 55%; }
.bg-blob.c { width: 34%; right: 12%; top: -4%; background: var(--blob-c); animation-duration: 19s; animation-delay: -6s; }
@keyframes blobFloat { from { transform: translate3d(0, 0, 0) rotate(0) scale(1); } to { transform: translate3d(7%, -9%, 0) rotate(28deg) scale(1.12); } }

.rings { position: absolute; z-index: 0; top: -5%; right: -5%; bottom: -5%; left: -5%; width: 110%; height: 110%; overflow: visible; pointer-events: none; }
.rings .r1 { fill: none; stroke: var(--ring-a, rgba(255, 255, 255, .8)); stroke-width: 1.3; stroke-dasharray: 3 4; stroke-linecap: round; transform-origin: 50% 50%; animation: spin 70s linear infinite; }
.rings .r2 { fill: none; stroke: var(--ring-b, rgba(255, 255, 255, .5)); stroke-width: .8; transform-origin: 50% 50%; animation: breathe 7s ease-in-out infinite alternate; }
.rings .r3 { fill: var(--ring-a, rgba(255, 255, 255, .8)); transform-origin: 50% 50%; animation: spin 46s linear infinite reverse; }
.slide.anchor-bottom .rings { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { from { transform: scale(.97); } to { transform: scale(1.03); } }

/* hearts orbiting the window. The ring is a square inscribed in the window's box (side = the box's height,
   every window with an orbit is wider than tall), so the circle the hearts travel never leaves the photo's
   column and no heart can pass behind the words. */
.orbit-box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.orbit { --hs: clamp(24px, 2.6vw, 48px); position: relative; height: 100%; aspect-ratio: 1; animation: spin 48s linear infinite; }
.home .orbit { height: 94%; }
.orbit-heart { position: absolute; width: var(--hs); height: var(--hs); margin: calc(var(--hs) * -.5) 0 0 calc(var(--hs) * -.5); animation: spin 48s linear infinite reverse; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .2)); }
.orbit-heart svg { width: 100%; height: 100%; animation: bob 2.6s ease-in-out infinite; }
.orbit-heart:nth-child(1) { left: 50%; top: 0; }
.orbit-heart:nth-child(2) { left: 100%; top: 50%; }
.orbit-heart:nth-child(3) { left: 50%; top: 100%; }
.orbit-heart:nth-child(4) { left: 0; top: 50%; }
.orbit-heart:nth-child(2) svg { animation-delay: -.7s; }
.orbit-heart:nth-child(3) svg { animation-delay: -1.4s; }
.orbit-heart:nth-child(4) svg { animation-delay: -2.1s; }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14%) scale(1.08); } }

/* ----------------------------------------------------------------------------
   Stickers by the window and the corner illustration in the text column
   ---------------------------------------------------------------------------- */
.sticker {
  position: absolute;
  z-index: 4;
  width: clamp(72px, 9vw, 160px);
  pointer-events: none;
  animation: stickerIn .8s var(--ease-pop) both;
  animation-delay: 1.7s;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .22));
}
.sticker.tl { left: 2%; top: 0; }
.sticker.bl { left: 2%; bottom: 2%; }
.slide.photo-left .sticker.tl, .slide.photo-left .sticker.bl { left: auto; right: 4%; }
.sticker > svg { width: 100%; height: auto; overflow: visible; animation: wobble 5.5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes stickerIn { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.corner-ill {
  position: absolute;
  z-index: 5;
  left: var(--gutter);
  bottom: 2.5vh;
  width: clamp(84px, 8.6vw, 160px);
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .16));
}
.corner-ill.big { width: clamp(120px, 12.5vw, 230px); }
.corner-ill > svg { width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; animation: sway 4.5s ease-in-out infinite alternate; }
.corner-ill.big > svg { animation: bob 5s ease-in-out infinite; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* stickers keep a dark "printed" outline in both worlds, whatever the ink colour */
.sticker, .corner-ill { color: var(--outline, #2D1B4E); }

/* generic illustration animation hooks (SVG attributes + transforms only) */
.ill .draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.1s var(--ease-out) forwards; animation-delay: calc(var(--dd, 1.4s) + (var(--i, 1) - 1) * .16s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ill .pop { opacity: 0; transform: scale(.1); animation: popIn .55s var(--ease-pop) forwards; animation-delay: var(--pd, 2.4s); transform-box: fill-box; transform-origin: var(--po, 50% 100%); }
.ill .twinkle { animation: twinkle 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
.ill .rays { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.ill .wave { animation: wavePulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
.ill .w2 { animation-delay: .35s; }
@keyframes wavePulse { 0%, 100% { opacity: .25; transform: translateX(0) scale(.92); } 50% { opacity: 1; transform: translateX(6%) scale(1); } }
.ill .blink { animation: blink 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.ill .cloud { animation: bob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* paper plane trail: white halo under a dashed theme-colour trail, plane flies the loop (SMIL) */
.plane-trail { position: absolute; z-index: 4; left: -2%; right: calc(var(--bleed) - 2%); top: -5%; height: 34%; pointer-events: none; overflow: visible; }
.slide.photo-left .plane-trail { left: calc(var(--bleed) - 2%); right: -2%; }
.plane-trail .halo { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 9; stroke-linecap: round; }
.plane-trail .trail { fill: none; stroke: var(--plane-trail, rgba(0, 0, 0, .5)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 12 14; animation: march 1.6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -52; } }
.plane-trail .plane { fill: var(--plane-fill, #fff); stroke: var(--plane-stroke, rgba(0, 0, 0, .4)); stroke-width: 3; stroke-linejoin: round; }
.plane-trail .plane-fold { fill: var(--plane-fold, rgba(0, 0, 0, .15)); stroke: var(--plane-stroke, rgba(0, 0, 0, .4)); stroke-width: 2.5; stroke-linejoin: round; }
.plane-trail .plane-g { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }

/* ----------------------------------------------------------------------------
   Next / Finish: a real 3D button (hard shade collapses when pressed), arrives last
   ---------------------------------------------------------------------------- */
.next-wrap {
  position: absolute;
  z-index: 7;
  right: var(--gutter);
  bottom: clamp(18px, 3.6vh, 42px);
  animation: btnIn .6s var(--ease-pop) both, wiggle 8s 5.5s ease-in-out infinite;
  animation-delay: 2.3s, 5.5s;
}
/* the hard 3D shade lives under the face; the face lifts (hover) or sinks onto it (press) with transform only */
.next-wrap::after {
  content: "";
  position: absolute;
  top: 7px; right: 0; bottom: -7px; left: 0;
  z-index: -1;
  border-radius: calc(var(--btn-h) * .36);
  background: var(--btn-shade, rgba(0, 0, 0, .35));
  pointer-events: none;
}
@keyframes btnIn { from { opacity: 0; transform: translateY(24px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes wiggle { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-3deg) scale(1.03); } 92% { transform: rotate(3deg) scale(1.03); } 95% { transform: rotate(-2deg); } 98% { transform: rotate(1.5deg); } }
.next {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  height: var(--btn-h);
  min-width: calc(var(--btn-h) * 2.9);
  padding: 0 1.15em 0 1.35em;
  border-radius: calc(var(--btn-h) * .36);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-btn);
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 18px 34px -10px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .28);
  transition: transform .2s var(--ease-pop), filter .2s;
  -webkit-tap-highlight-color: transparent;
}
.next:hover { transform: translateY(-2px) scale(1.035); filter: brightness(1.05); }
.next:active, .next.is-pressed { transform: translateY(6px) scale(.98); filter: brightness(.98); transition-duration: .09s; }
.next svg { width: 1.25em; height: 1.25em; flex: none; }
.next .arrow { animation: nudge 2.8s ease-in-out infinite; animation-delay: 3.6s; }
.next:hover .arrow { animation: none; transform: translateX(.2em); transition: transform .25s var(--ease-pop); }
.next .star { animation: spin 7s linear infinite; animation-delay: 3s; }
@keyframes nudge { 0%, 55%, 100% { transform: translateX(0); } 68% { transform: translateX(.32em); } 80% { transform: translateX(-.06em); } 90% { transform: translateX(.12em); } }

/* ----------------------------------------------------------------------------
   Home: diagonal split poster
   ---------------------------------------------------------------------------- */
.home { background: #2D1B4E; }
.half {
  position: absolute;
  display: block;
  overflow: hidden;
  color: var(--h-ink);
  font-family: var(--h-font);
  background: var(--h-bg);
  outline: none;
}
.half-eco { left: 0; top: 0; width: 58%; height: 100%; clip-path: polygon(0 0, 100% 0, 72.4% 100%, 0 100%); animation: halfInL .9s var(--ease-out) both; }
.half-friend { left: 42%; top: 0; width: 58%; height: 100%; clip-path: polygon(27.6% 0, 100% 0, 100% 100%, 0 100%); animation: halfInR .9s var(--ease-out) both; }
@keyframes halfInL { from { opacity: 0; transform: translateX(-6%); } to { opacity: 1; transform: none; } }
@keyframes halfInR { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
.half .backdrop { --bd-alpha: .38; }
.half .bg-blob { opacity: .65; }
.half-inner { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.half-eco .half-inner { left: 4vw; top: 9vh; width: 40vw; height: 84vh; align-items: flex-start; }
.half-friend .half-inner { right: 4vw; top: 12vh; width: 38vw; height: 81vh; align-items: flex-end; flex-direction: column-reverse; text-align: right; }
.home .shape-wrap { position: relative; top: auto; bottom: auto; margin: 0; --maxw: 40vw; height: min(58vh, calc(var(--maxw) / var(--ratio, 1))); animation-delay: .35s; transform-origin: 50% 50%; transition: transform .6s var(--ease-pop); }
.half-friend .shape-wrap { animation-delay: .5s; }
/* hover / focus tilt sits on the window (the pointer parallax writes .tilt's inline transform) */
.half:hover .shape-wrap { transform: scale(1.04) rotate(-2deg); }
.half:focus-visible .shape-wrap { transform: scale(1.04) rotate(-2deg); }
.half-friend:hover .shape-wrap { transform: scale(1.04) rotate(2deg); }
.half-friend:focus-visible .shape-wrap { transform: scale(1.04) rotate(2deg); }
.half-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(4px, 1vh, 12px); animation: riseIn .8s var(--ease-out) both; animation-delay: .7s; max-width: 100%; }
.half-friend .half-text { align-items: flex-end; animation-delay: .85s; }
/* the friendship words sit in a soft pool of plum light: white and pale pink stay ≥ 4.5:1 whatever the
   gradient, blob or photo does behind them (the eco half is dark ink on pastel and needs none) */
.half-friend .half-text::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30px; right: -44px; bottom: -30px; left: -44px;
  border-radius: 64px;
  background: rgba(38, 20, 72, .56);
  filter: blur(26px);
  pointer-events: none;
}
.pname { font-family: var(--h-display); font-size: clamp(32px, 3.6vw + .6vh, 78px); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.tagline { font-family: var(--font-hand); font-size: clamp(24px, 1.7vw + .7vh, 44px); font-weight: 700; line-height: 1.1; color: var(--h-hand, currentColor); transform: rotate(-1.5deg); transform-origin: left center; }
.half-friend .tagline { transform: rotate(1.5deg); transform-origin: right center; }
.begin {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: clamp(6px, 1.4vh, 16px);
  height: clamp(56px, 6.4vh, 72px);
  padding: 0 1.15em 0 1.35em;
  border-radius: 999px;
  background: var(--h-btn-bg);
  color: var(--h-btn-fg);
  font-family: var(--h-display);
  font-weight: 800;
  font-size: clamp(18px, 1.05vw + .55vh, 28px);
  box-shadow: 0 6px 0 var(--h-btn-shade, rgba(0, 0, 0, .3)), 0 14px 30px -10px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .28);
  transition: transform .2s var(--ease-pop);
}
.begin svg { width: 1.2em; height: 1.2em; animation: nudge 2.8s ease-in-out infinite; animation-delay: 2s; }
.half:hover .begin { transform: translateY(-3px) scale(1.05); }
.half:focus-visible .begin { transform: translateY(-3px) scale(1.05); outline: 4px solid var(--h-ring); outline-offset: 4px; }
.half:active .begin { transform: translateY(5px) scale(.98); box-shadow: 0 0 0 var(--h-btn-shade, rgba(0, 0, 0, .3)), 0 8px 16px -10px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .2); transition-duration: .09s; }

/* washi tape holding the home photo windows */
.tape {
  position: absolute;
  z-index: 5;
  width: clamp(76px, 8.6vw, 140px);
  height: clamp(24px, 2.3vw, 36px);
  background: var(--tape, rgba(255, 209, 102, .82));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .14);
  clip-path: polygon(0 0, 100% 0, 98% 18%, 100% 38%, 97% 58%, 100% 80%, 98% 100%, 0 100%, 2% 82%, 0 60%, 3% 40%, 0 20%);
  opacity: .94;
  pointer-events: none;
  animation: popIn .5s var(--ease-pop) both;
  animation-delay: 1s;
}
.tape::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 3px, transparent 3px 8px); opacity: .7; }
.tape.a { top: -2%; left: 10%; transform: rotate(-9deg); }
.tape.b { bottom: -1%; right: 8%; transform: rotate(7deg); animation-delay: 1.15s; }

.seam { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none; }
.seam svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.seam .seam-p { display: none; }
.seam .solid { stroke: rgba(255, 255, 255, .88); stroke-width: 7; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.seam .stitch { stroke: var(--seam-stitch, #FF7BAC); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 0 14 14 14; stroke-linecap: round; animation: stitch 3s linear infinite; }
@keyframes stitch { to { stroke-dashoffset: -42; } }

.home-title {
  position: absolute;
  z-index: 5;
  top: clamp(12px, 2.6vh, 30px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: clamp(10px, 1.4vh, 16px) clamp(22px, 2.4vw, 40px);
  border-radius: 999px;
  background: var(--title-bg);
  color: var(--title-fg);
  text-align: center;
  font-family: var(--font-eco);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .5);
  animation: titleIn .9s var(--ease-pop) both;
  animation-delay: .2s;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes titleIn { from { opacity: 0; transform: translate(-50%, -30px) scale(.8); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.home-title h1 { font-size: clamp(22px, 1.6vw + .8vh, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; display: inline-flex; align-items: center; gap: .4em; }
.home-title h1 svg { width: .9em; height: .9em; }
.home-title h1 svg:first-child { animation: twinkle 2.4s ease-in-out infinite; }
.home-title h1 svg:last-child { animation: twinkle 2.4s ease-in-out infinite; animation-delay: -1.2s; }
.home-title p { font-size: clamp(13px, .8vw + .35vh, 19px); font-weight: 700; opacity: .85; }

.hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(12px, 2.6vh, 30px);
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--title-bg);
  color: var(--title-fg);
  font-family: var(--font-eco);
  font-size: clamp(14px, .85vw + .4vh, 20px);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: hintIn 1s var(--ease-out) both;
  animation-delay: 1.4s;
}
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hint::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .6em; border-radius: 50%; background: currentColor; vertical-align: middle; animation: blinkDot 1.6s ease-in-out infinite; }
@keyframes blinkDot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ----------------------------------------------------------------------------
   Portrait (phones, tablets held upright): photo on top, words below
   ---------------------------------------------------------------------------- */
@media (orientation: portrait) {
  :root {
    --top-h: 52px;
    --btn-h: 60px;
    --gutter: 5vw;
    --fs-q: clamp(22px, min(6.2vw + .5vh, 3.7vh), 44px);
    --fs-b: clamp(26px, min(6.8vw + .7vh, 4.3vh), 52px);
    --fs-btn: clamp(18px, 4.8vw, 26px);
  }
  .slide, .slide.photo-left { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46fr) minmax(0, 54fr); }
  .veil, .slide.photo-left .veil { background: linear-gradient(to top, var(--veil-a) 0%, var(--veil-b) 40%, transparent 62%); }
  .col-photo, .slide.photo-left .col-photo { grid-column: 1; grid-row: 1; }
  .photo-stage, .slide.photo-left .photo-stage, .slide.anchor-bottom .photo-stage { left: 4vw; right: 4vw; top: calc(var(--top-h) + 12px); bottom: 0; }
  .col-text, .slide.photo-left .col-text { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: clamp(12px, 2.6vh, 26px); padding: 2.6vh var(--gutter) calc(var(--btn-h) + 3vh); }
  .bullets { gap: clamp(10px, 2vh, 20px); }
  .bullet-text { white-space: normal; }
  .shape-wrap, .slide.photo-right .shape-wrap, .slide.photo-left .shape-wrap, .slide.anchor-bottom .shape-wrap {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
    --maxw: 92vw;
    height: min(100%, calc(var(--maxw) / var(--ratio-p, var(--ratio, 1))));
    aspect-ratio: var(--ratio-p, var(--ratio, 1));
    transform-origin: 50% 50%;
  }
  .slide.anchor-bottom .shape { animation: drift 14s ease-in-out infinite alternate; }
  .slide.anchor-bottom .rings { display: block; }
  .shape img { object-position: var(--focus-p, var(--focus, 50% 50%)); }
  .backdrop { background-position: var(--focus-p, var(--focus, 50% 50%)); }
  .chip-name { display: none; }
  .top { grid-template-columns: auto 1fr; }
  .progress { justify-self: end; }
  .corner-ill { display: none; }
  .sticker { width: clamp(52px, 16vw, 84px); }
  .sticker.tl { top: 2%; left: -1%; right: auto; }
  .slide.photo-left .sticker.tl { top: 2%; right: -1%; left: auto; }
  .sticker.bl { bottom: 0; left: -1%; right: auto; }
  .slide.photo-left .sticker.bl { bottom: 0; right: -1%; left: auto; }
  .bg-blob { filter: blur(18px); }
  .orbit { --hs: 24px; height: 90%; }
  .plane-trail, .slide.photo-left .plane-trail { left: -2%; right: -2%; top: -6%; height: 36%; }
  .next-wrap { right: var(--gutter); bottom: 2.4vh; }
  .next { min-width: 46vw; }
  .bullet { align-items: flex-start; }
  .mark { width: .92em; height: .92em; margin-top: .1em; }

  /* home */
  .half-eco { left: 0; top: 0; width: 100%; height: 56%; clip-path: polygon(0 0, 100% 0, 100% 78.6%, 0 100%); }
  .half-friend { left: 0; top: 44%; width: 100%; height: 56%; clip-path: polygon(0 21.4%, 100% 0, 100% 100%, 0 100%); }
  .half-eco .half-inner { left: 4vw; right: 4vw; width: auto; top: 9.5vh; height: 33vh; flex-direction: row; align-items: center; gap: 3vw; }
  .half-friend .half-inner { left: 4vw; right: 4vw; width: auto; top: 13.5vh; height: 32vh; flex-direction: row-reverse; align-items: center; gap: 3vw; }
  .home .shape-wrap { position: relative; top: auto; right: auto; bottom: auto; left: auto; margin: 0; --maxw: 52vw; height: min(33vh, calc(var(--maxw) / var(--ratio, 1))); width: auto; aspect-ratio: var(--ratio, 1); }
  .half-text { flex: 1; min-width: 0; }
  .half-friend .half-text::before { top: -18px; right: -22px; bottom: -18px; left: -22px; border-radius: 32px; filter: blur(16px); }
  /* the sky-blue blob moves behind the photo, away from the white words */
  .half-friend .bg-blob.a { left: auto; right: -8%; top: -6%; }
  .pname { font-size: clamp(20px, 5.6vw, 42px); letter-spacing: -.03em; }
  .tagline { font-size: clamp(18px, 4.8vw, 26px); }
  .begin { height: 48px; font-size: clamp(15px, 4vw, 20px); margin-top: 4px; }
  .tape { width: 62px; height: 20px; }
  .seam .seam-l { display: none; }
  .seam .seam-p { display: block; }
  .home-title { padding: 8px 18px; }
  .home-title h1 { font-size: clamp(20px, 5.4vw, 30px); }
  .home-title p { font-size: 13px; }
  .hint { font-size: 13px; padding: 8px 16px; }
}

/* short portrait screens (e.g. 320×568): lower type floors and a tighter rhythm so the words always end
   above the button band; fitText() then guards the remainder */
@media (orientation: portrait) and (max-height: 640px) {
  :root {
    --fs-q: clamp(20px, min(6.2vw + .5vh, 3.7vh), 44px);
    --fs-b: clamp(22px, min(6.8vw + .7vh, 4.3vh), 52px);
  }
  .col-text, .slide.photo-left .col-text { gap: 10px; padding-top: 1.8vh; padding-bottom: calc(var(--btn-h) + 3.5vh); }
  .bullets { gap: 8px; }
  .bullet { line-height: 1.08; }
}
/* very narrow phones: the home cards make room for the title pill and keep the names on two lines even with
   fallback fonts */
@media (orientation: portrait) and (max-width: 340px) {
  .half-eco .half-inner { top: calc(2.6vh + 64px); height: 31vh; gap: 2vw; }
  .half-friend .half-inner { top: 12.5vh; height: 31vh; gap: 2vw; }
  .home .shape-wrap { --maxw: 46vw; }
  .pname { font-size: 18px; }
  .tagline { font-size: 16px; }
  .begin { height: 44px; font-size: 15px; }
}

/* short landscape windows (e.g. phones on their side): tighten the vertical rhythm, keep Next ≥ 56px and
   the home covers ≥ 200px */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --top-h: 44px; --btn-h: 56px; --fs-q: clamp(18px, 2.2vw + .8vh, 34px); --fs-b: clamp(20px, 2.3vw + 1.2vh, 40px); }
  .col-text { gap: 1.6vh; }
  .corner-ill { display: none; }
  .sticker.tl { top: 8%; }
  .home-title { padding: 6px 16px; }
  .home-title h1 { font-size: 20px; }
  .home-title p { font-size: 12px; }
  .half-eco .half-inner { top: 6vh; height: 88vh; }
  .half-friend .half-inner { top: calc(2.6vh + 54px); height: calc(100vh - 2.6vh - 54px - 2.5vh); }
  .home .shape-wrap { flex: none; height: min(50vh, calc(var(--maxw) / var(--ratio, 1))); }
  .pname { font-size: clamp(22px, 3vw, 30px); }
  .tagline { font-size: clamp(17px, 2.2vw, 22px); }
  .begin { height: 46px; font-size: 16px; margin-top: 2px; }
  .half-text { gap: 5px; }
}

/* engines without aspect-ratio (Safari ≤ 14, Firefox < 89, Chrome < 88): size the windows from the
   height explicitly so the photo never collapses */
@supports not (aspect-ratio: 1) {
  .shape-wrap { --h: min(calc(var(--vh) - var(--top-h) - var(--btn-h) - 8vh), calc(var(--maxw) / var(--ratio, 1))); height: var(--h); width: calc(var(--h) * var(--ratio, 1)); }
  .home .shape-wrap { --h: min(58vh, calc(var(--maxw) / var(--ratio, 1))); }
  .orbit { width: var(--h); height: var(--h); }
  .home .orbit { width: calc(var(--h) * .94); height: calc(var(--h) * .94); }
  .bg-blob { height: 0; }
  .bg-blob.a { padding-bottom: 58%; }
  .bg-blob.b { padding-bottom: 50%; }
  .bg-blob.c { padding-bottom: 34%; }
  @media (orientation: portrait) {
    .shape-wrap, .slide.photo-left .shape-wrap, .slide.photo-right .shape-wrap, .slide.anchor-bottom .shape-wrap { --h: min(calc(var(--vh) * .46 - var(--top-h) - 12px), calc(var(--maxw) / var(--ratio-p, var(--ratio, 1)))); height: var(--h); width: calc(var(--h) * var(--ratio-p, var(--ratio, 1))); }
    .home .shape-wrap { --h: min(33vh, calc(var(--maxw) / var(--ratio, 1))); width: calc(var(--h) * var(--ratio, 1)); }
    .orbit { width: calc(var(--h) * .9); height: calc(var(--h) * .9); }
  }
}

/* ----------------------------------------------------------------------------
   Reduced motion: no continuous motion, no parallax, quick opacity fades, everything visible
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .screen, .screen.is-leaving { animation: screenIn .25s ease both; }
  .screen.is-leaving { animation-name: screenOut; }
  .shape, .shape img, .shape .light, .shape .shine, .bg-blob, .rings .r1, .rings .r2, .rings .r3, .orbit, .orbit-heart, .orbit-heart svg,
  .sticker > svg, .corner-ill > svg, .ill .twinkle, .ill .rays, .ill .wave, .ill .blink, .ill .cloud,
  .step[aria-current="step"] i, .mark svg, .next .arrow, .next .star, .begin svg, .seam .stitch, .home-title h1 svg,
  .hint::after, .plane-trail .trail, .tape { animation: none !important; }
  .shape .shine { opacity: 0; }
  .next-wrap { animation: fadeQuick .25s ease both !important; }
  .top, .kicker, .question, .bullet, .mark, .shape-wrap, .sticker, .corner-ill, .backdrop, .half, .half-text, .home-title, .hint, .plane-trail {
    animation-name: fadeQuick !important;
    animation-duration: .25s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: both !important;
    animation-direction: normal !important;
  }
  .backdrop { animation-name: fadeIn !important; }
  .kw::after { animation: none !important; transform: none; opacity: 1; }
  .ill .draw { animation: none !important; stroke-dashoffset: 0 !important; }
  .ill .pop { animation: none !important; opacity: 1 !important; transform: none !important; }
  .tilt, .plx { transform: none !important; will-change: auto; }
  .next, .home-link, .begin, .home .shape-wrap, .step i { transition: none !important; }
  .shape img { filter: saturate(1.05); }
}
@keyframes fadeQuick { from { opacity: 0; } to { opacity: 1; } }