/* Page-only styles for /about. Loaded after style.css.
   Playful, but crafted: one vine to follow, choreographed reveals, six hidden surprises.
   Motion "from" states live only under prefers-reduced-motion: no-preference and .ab.is-js,
   so without JS or with reduced motion everything is simply visible and still. */

.ab {
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --grad: linear-gradient(100deg, var(--root), var(--trunk) 40%, var(--leaf) 70%, var(--ember));
  position: relative; isolation: isolate; overflow-x: clip;
}

/* ===================================================================
   The vine
   =================================================================== */
.vine {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; overflow: visible;
}
.vs-root { stop-color: var(--root); }
.vs-trunk { stop-color: var(--trunk); }
.vs-leaf { stop-color: var(--leaf); }
.vs-ember { stop-color: var(--ember); }
.vt-0 { stop-color: #fff; stop-opacity: .95; }
.vt-1 { stop-color: var(--ember); stop-opacity: .55; }
.vt-2 { stop-color: var(--ember); stop-opacity: 0; }
.vine path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vine__ghost { stroke: var(--line); stroke-width: 2; stroke-dasharray: 1 9; }
.vine__line { stroke: url(#vineGrad); stroke-width: 3.5; }
.vine__glow { stroke: url(#vineGrad); stroke-width: 12; opacity: .12; }
.vine__tip { opacity: 0; transition: opacity .4s; }
.vine.is-drawing .vine__tip { opacity: 1; }
.vine__halo { fill: url(#vineTip); transform-box: fill-box; transform-origin: center; animation: ab-breathe 1.8s ease-in-out infinite; }
.vine__dot { fill: #fff; stroke: var(--ember); stroke-width: 2; }
.vine__twig { stroke: url(#vineGrad); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--out); }
.vine .vine__leaf { transform-box: fill-box; transform-origin: 0% 50%; transform: scale(0) rotate(-25deg); transition: transform .9s var(--bounce) .3s; }
.vine .vine__leafShape { fill: url(#leafG); }
.vine .vine__leaf--ember .vine__leafShape { fill: url(#leafE); }
.vine .vine__leaf--trunk .vine__leafShape { fill: url(#leafT); }
.vine .vine__rib { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: .7; }
.vine__bloom.is-lit .vine__twig { stroke-dashoffset: 0; }
.vine__bloom.is-lit .vine__leaf { transform: scale(1.15); }
.kicker--hero .kicker__dot { position: relative; inset: auto; margin: 0; background: var(--ember); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ember) 22%, transparent); }
@media (max-width: 760px) {
  .vine__line { stroke-width: 2.5; }
  .vine__glow { stroke-width: 8; }
}

/* Content sits above the vine; section backgrounds sit below it */
.ab .section > .wrap { position: relative; z-index: 2; }

/* ---------- Chapter kickers (vine nodes) ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; z-index: 1;
  font-weight: 600; font-size: .95rem; letter-spacing: .02em; color: var(--trunk);
}
html[data-lang="ar"] .kicker { letter-spacing: 0; }
.kicker { position: relative; }
.kicker__dot {
  position: absolute; top: 50%; margin-top: -8px; inset-inline-start: calc(-1 * min(28px, var(--gutter) / 2) - 8px);
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line);
  transition: box-shadow .5s, background .5s, transform .6s var(--bounce);
}
.kicker__dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--ember); opacity: 0; transform: scale(.4);
}
.kicker__dot.is-lit { background: var(--ember); box-shadow: inset 0 0 0 2px var(--ember), 0 0 0 5px color-mix(in srgb, var(--ember) 22%, transparent); transform: scale(1.15); }
.kicker__dot.is-lit::after { animation: ab-ping 1.1s var(--out) 1; }

/* ---------- Split headings ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
html[data-lang="ar"] .split .w { padding-bottom: .2em; margin-bottom: -.2em; padding-top: .1em; margin-top: -.1em; }
.split .w__i { display: inline-block; }
.split .hl {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: ab-sheen 8s ease-in-out infinite;
}
.split .w:nth-child(1) { --i: 0; } .split .w:nth-child(2) { --i: 1; } .split .w:nth-child(3) { --i: 2; }
.split .w:nth-child(4) { --i: 3; } .split .w:nth-child(5) { --i: 4; } .split .w:nth-child(6) { --i: 5; }
.split .w:nth-child(7) { --i: 6; } .split .w:nth-child(8) { --i: 7; } .split .w:nth-child(9) { --i: 8; }
.split .w:nth-child(10) { --i: 9; } .split .w:nth-child(11) { --i: 10; } .split .w:nth-child(12) { --i: 11; }

/* ===================================================================
   Hero
   =================================================================== */
.ab .hero-about {
  isolation: auto; z-index: auto;
  padding: clamp(118px, 14vw, 170px) 0 clamp(150px, 16vw, 230px);
  background:
    radial-gradient(60vw 40vw at 82% 30%, color-mix(in srgb, var(--trunk) 16%, transparent), transparent 70%),
    radial-gradient(50vw 40vw at 0% 100%, color-mix(in srgb, var(--ember) 14%, transparent), transparent 70%),
    radial-gradient(40vw 30vw at 40% 0%, color-mix(in srgb, var(--root) 10%, transparent), transparent 70%),
    var(--bg);
}
.hero-about__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "text orbit" "facts facts" "hint hint";
  align-items: center; column-gap: clamp(24px, 4vw, 64px);
}
.hero-about__text { grid-area: text; }
.ab .hero-about__title { max-width: 13ch; font-size: clamp(2.7rem, 6.2vw, 5.6rem); }
.hero-about__lede { max-width: 30rem; }
.hero-about__facts { grid-area: facts; max-width: none; margin-top: clamp(32px, 4vw, 56px) !important; }
.ab .hero-about::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--root) 26%, transparent) 1.1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 65% at 72% 42%, #000, transparent 72%);
  mask-image: radial-gradient(60% 65% at 72% 42%, #000, transparent 72%);
}
.hero-about__facts li {
  --c: var(--root);
  position: relative; overflow: hidden; border-top: 0; padding: 28px 24px 24px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 44px -34px rgba(16, 27, 46, .45);
  transition: transform .5s var(--bounce), box-shadow .4s;
}
.hero-about__facts li:nth-child(2) { --c: var(--trunk); }
.hero-about__facts li:nth-child(3) { --c: var(--ember); }
.hero-about__facts li:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 30px 50px -30px color-mix(in srgb, var(--c) 60%, rgba(16, 27, 46, .5)); }
.fact__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c);
  transition: transform .5s var(--bounce);
}
.fact__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-about__facts li:hover .fact__icon { transform: rotate(-8deg) scale(1.1); }
.fact__bar {
  position: absolute; top: 0; inset-inline: 0; height: 4px; background: var(--root);
  transform-origin: 0 50%;
}
html[dir="rtl"] .fact__bar { transform-origin: 100% 50%; }
.hero-about__facts li:nth-child(2) .fact__bar { background: var(--trunk); }
.hero-about__facts li:nth-child(3) .fact__bar { background: var(--ember); }
.hero-about__hint {
  grid-area: hint; margin-top: 36px; justify-self: start; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 10px 10px 12px; border: 0; border-radius: 999px; text-align: start; font-size: .98rem; color: var(--ink);
  background: color-mix(in srgb, var(--ember) 13%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ember) 45%, transparent), 0 18px 34px -24px color-mix(in srgb, var(--ember) 80%, transparent);
  transition: transform .4s var(--bounce), box-shadow .3s;
}
.hero-about__hint:hover { transform: translateY(-2px) scale(1.01); box-shadow: inset 0 0 0 1.5px var(--ember), 0 22px 40px -22px color-mix(in srgb, var(--ember) 90%, transparent); }
.hint__spark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--ember); }
.hint__spark svg { width: 18px; height: 18px; fill: #fff8e8; animation: ab-twinkle 2.4s ease-in-out infinite; }
.hint__text b { font-weight: 600; }
.hint__text { color: var(--muted); }
.hint__text b { color: var(--ink); }
.hint__cta { padding: 7px 14px; border-radius: 999px; background: var(--night); color: #fff; font-weight: 600; font-size: .9rem; }
:root[data-theme="dark"] .hint__cta { background: var(--ember); color: #1a1206; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hint__cta { background: var(--ember); color: #1a1206; } }

/* The name as a clickable texture */
.ab .hero-about__word {
  z-index: 3; border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  inset-inline-end: -2vw; bottom: -.18em;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--root) 22%, transparent);
  transition: -webkit-text-stroke-color .4s;
}
.ab .hero-about__word:hover, .ab .hero-about__word:focus-visible { -webkit-text-stroke-color: color-mix(in srgb, var(--trunk) 55%, transparent); }
.ab .hero-about__word:focus-visible { outline-offset: -12px; }
.nw { display: inline-block; }

/* ---------- Thought orbit ---------- */
.orbit {
  grid-area: orbit; position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; justify-self: center;
  container-type: inline-size;
}
.orbit::before {
  content: ""; position: absolute; inset: 16%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--trunk) 34%, transparent) 12%, transparent 30%, color-mix(in srgb, var(--ember) 36%, transparent) 48%, transparent 64%, color-mix(in srgb, var(--leaf) 30%, transparent) 80%, transparent);
  filter: blur(22px); animation: ab-spin 16s linear infinite;
}
.orbit__stage { position: absolute; inset: 0; will-change: transform; }
.orbit__mote { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #ffd88f; box-shadow: 0 0 8px 2px color-mix(in srgb, var(--ember) 70%, transparent); opacity: 0; animation: ab-mote 4.2s ease-out infinite; }
.orbit__mote:nth-child(5) { animation-delay: .8s; --mx: -22px; }
.orbit__mote:nth-child(6) { animation-delay: 1.7s; --mx: 18px; width: 4px; height: 4px; }
.orbit__mote:nth-child(7) { animation-delay: 2.5s; --mx: -8px; }
.orbit__mote:nth-child(8) { animation-delay: 3.3s; --mx: 26px; width: 3px; height: 3px; }
.orbit__mote:nth-child(9) { animation-delay: 2.1s; --mx: -30px; width: 3px; height: 3px; }
.orbit__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit__ring { fill: none; stroke: color-mix(in srgb, var(--root) 26%, transparent); stroke-width: 1.2; stroke-dasharray: 2 7; transform-box: view-box; transform-origin: 250px 250px; }
.orbit__ring--1 { stroke: color-mix(in srgb, var(--ember) 40%, transparent); animation: ab-spin 50s linear infinite; }
.orbit__ring--2 { animation: ab-spin 90s linear infinite reverse; }
.orbit__ring--3 { stroke-dasharray: 1 11; stroke-width: 2; animation: ab-spin 140s linear infinite; }
.orbit__track { position: absolute; inset: 0; animation: ab-spin 80s linear infinite; }
.orbit__track--b { animation-duration: 120s; animation-direction: reverse; }
.orbit:hover .orbit__track, .orbit:hover .orbit__track .chip, .orbit:hover .orbit__ring { animation-play-state: paused; }
.orbit__slot {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}
.orbit__track--a .orbit__slot { --r: 31cqi; }
.orbit__track--b .orbit__slot { --r: 43cqi; }
.orbit__slot--1 { --a: -60deg; } .orbit__slot--2 { --a: 60deg; } .orbit__slot--3 { --a: 180deg; }
.orbit__slot--4 { --a: -100deg; } .orbit__slot--5 { --a: -25deg; } .orbit__slot--6 { --a: 45deg; }
.orbit__slot--7 { --a: 128deg; } .orbit__slot--8 { --a: 200deg; }
.chip, .bulb {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  animation: ab-spin 80s linear infinite reverse;
}
.orbit__track--b .chip, .orbit__track--b .bulb { animation-duration: 120s; animation-direction: normal; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px 8px 11px; border-radius: 999px; font-size: clamp(.78rem, 3.4cqi, .95rem); font-weight: 600;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 0 var(--line), 0 10px 26px -14px rgba(16, 27, 46, .45), inset 0 0 0 1px var(--line);
  transition: scale .45s var(--bounce), box-shadow .3s;
}
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--root)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--root)) 18%, transparent); }
.chip--trunk { --c: var(--trunk); } .chip--leaf { --c: var(--leaf); } .chip--ember { --c: var(--ember); }
.chip:hover { scale: 1.12; box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--c, var(--root)) 70%, transparent), inset 0 0 0 1.5px var(--c, var(--root)); }

.orbit__core {
  position: absolute; left: 50%; top: 50%; width: 22cqi; height: 22cqi; translate: -50% -50%;
  display: grid; place-items: center; pointer-events: none;
}
.orbit__seed {
  width: 54%; height: 54%; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff 0 12%, #ffe2b0 22%, var(--ember) 48%, color-mix(in srgb, var(--trunk) 60%, var(--ember)) 100%);
  box-shadow: 0 0 30px 8px color-mix(in srgb, var(--ember) 45%, transparent), 0 0 90px 30px color-mix(in srgb, var(--trunk) 22%, transparent);
  animation: ab-breathe 3.2s ease-in-out infinite;
}
.orbit__ping { position: absolute; inset: 14%; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ember) 60%, transparent); animation: ab-ping 3.2s var(--out) infinite; }
.orbit__ping--2 { animation-delay: 1.6s; border-color: color-mix(in srgb, var(--trunk) 60%, transparent); }
.orbit.is-bright .orbit__seed { animation: ab-flash 1.2s var(--out) 1, ab-breathe 3.2s ease-in-out 1.2s infinite; }

.orbit__spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--ember) 60%, transparent); animation: ab-twinkle 3s ease-in-out infinite; }
.orbit__spark--1 { left: 18%; top: 22%; }
.orbit__spark--2 { left: 80%; top: 14%; animation-delay: .8s; background: var(--trunk); }
.orbit__spark--3 { left: 88%; top: 70%; animation-delay: 1.5s; }
.orbit__spark--4 { left: 12%; top: 78%; animation-delay: 2.1s; background: var(--leaf); }
.orbit__spark--5 { left: 56%; top: 6%; animation-delay: 1.1s; width: 4px; height: 4px; }

/* Egg: tiny light bulb on the outer orbit */
.egg { -webkit-tap-highlight-color: transparent; }
.bulb {
  width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, #ffd48a 30%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ember) 55%, transparent), 0 0 0 5px color-mix(in srgb, var(--ember) 12%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--ember) 70%, transparent);
  transition: scale .4s var(--bounce), background .4s, box-shadow .4s;
}
.bulb:hover { scale: 1.2; }
.seed:hover svg, .bird:hover svg { scale: 1.08; }
.seed svg, .bird svg { transition: scale .35s var(--bounce); }
.firefly:hover .firefly__body { scale: 1.3; }
.bulb svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ember-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bulb__rays { opacity: 0; stroke: var(--ember); transform-origin: 16px 15px; transform: scale(.6); transition: opacity .3s, transform .5s var(--bounce); }
.bulb__glass { transition: fill .3s, stroke .3s; }
.bulb.is-on { background: color-mix(in srgb, var(--ember) 22%, var(--surface)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 18%, transparent), 0 0 34px 6px color-mix(in srgb, var(--ember) 45%, transparent); }
.bulb.is-on .bulb__glass { fill: #ffd48a; stroke: var(--ember-ink); }
.bulb.is-on .bulb__fil { stroke: var(--ember-ink); }
.bulb.is-on .bulb__rays { opacity: 1; transform: scale(1.08); animation: ab-rays 1.4s ease-in-out infinite; }

/* ===================================================================
   Name
   =================================================================== */
.ab .name { position: relative; overflow: clip; }
.ab .name__mark { position: relative; top: auto; display: grid; place-items: center; padding: 6%; }
.name__halo {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--trunk) 35%, transparent);
  animation: ab-spin 60s linear infinite;
}
.name__halo--2 { inset: 9%; border-style: dotted; border-width: 3px; border-color: color-mix(in srgb, var(--ember) 40%, transparent); animation-duration: 40s; animation-direction: reverse; }
.name__logo {
  position: relative; border: 0; padding: 0; background: none; border-radius: 50%; display: block; width: 100%;
  transition: transform .6s var(--bounce);
}
.name__logo:hover { transform: rotate(-4deg) scale(1.03); }
.name__logo:focus-visible { outline-offset: 6px; border-radius: 50%; }
.name__logo img { width: 100%; border-radius: 50%; box-shadow: 0 30px 60px -30px rgba(16, 27, 46, .35); }
.name__glow {
  position: absolute; left: 41%; top: 46.5%; width: 18%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 210, .95), color-mix(in srgb, var(--ember) 55%, transparent) 40%, transparent 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .8s;
}
.name__glow.is-lit { opacity: 1; animation: ab-breathe 2.6s ease-in-out infinite; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .name__logo img { box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 30px 70px -30px rgba(0,0,0,.7); } }

.name__body h2 .hl { padding-inline-end: .05em; }
.prose__q {
  position: relative; color: var(--ink); font-size: 1.12em; padding-inline-start: 22px;
}
.prose__q::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .3em; bottom: .3em; width: 4px; border-radius: 4px;
  background: linear-gradient(var(--ember), var(--trunk)); transform-origin: 50% 0;
}

.ab .complement {
  position: relative; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1.5fr); overflow: visible;
  box-shadow: none; gap: 0;
}
.complement__half { padding: 26px; border-radius: var(--r-md); }
.ab .complement > div + div { background: none; }
.complement__half--a { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); border-start-end-radius: 0; border-end-end-radius: 0; }
.ab .complement .complement__half--b {
  background: color-mix(in srgb, var(--trunk) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trunk) 30%, transparent);
  border-start-start-radius: 0; border-end-start-radius: 0;
}
.complement__plus {
  align-self: center; justify-self: center; z-index: 1;
  width: 46px; height: 46px; margin-inline: -23px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ember); color: #1a1206; box-shadow: 0 0 0 6px var(--surface), 0 10px 24px -8px color-mix(in srgb, var(--ember) 80%, transparent);
  transition: transform .7s var(--bounce);
}
.complement__plus svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.complement__plus.is-lit { transform: rotate(180deg) scale(1.08); }
.complement__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.complement__tags li {
  font-size: .9rem; font-weight: 500; padding: 5px 12px; border-radius: 999px; color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trunk) 28%, transparent);
  transition: transform .4s var(--bounce), background .3s, color .3s;
}
.complement__tags li:hover { transform: translateY(-3px) rotate(-3deg); background: var(--trunk); color: #fff; }
.complement__tags li:nth-child(even):hover { transform: translateY(-3px) rotate(3deg); background: var(--leaf); }
@media (max-width: 860px) {
  .ab .name__mark { max-width: 300px; justify-self: start; }
  .ab .name__mark img { max-width: none; }
  .ab .complement { grid-template-columns: 1fr; grid-template-rows: auto 0 auto; }
  .complement__plus { margin: -23px 0; }
  .complement__half--a { border-radius: var(--r-md) var(--r-md) 0 0; }
  .ab .complement .complement__half--b { border-radius: 0 0 var(--r-md) var(--r-md); }
}

/* ===================================================================
   Scenes
   =================================================================== */
.tile { position: relative; transition: transform .6s var(--bounce), box-shadow .5s; }
.tile img { transform: scale(1.2); scale: 1; transition: scale 1s var(--out); will-change: transform; }
.tile:hover { box-shadow: 0 30px 50px -28px rgba(16, 27, 46, .6); }
.tile:hover img { scale: 1.06; }
.tile__cap {
  position: absolute; inset-inline-start: 12px; bottom: 12px; z-index: 1; max-width: calc(100% - 24px);
  padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--night);
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px);
  transform: translateY(160%); transition: transform .5s var(--bounce);
}
.tile:hover .tile__cap { transform: none; }
@media (hover: none) { .tile__cap { transform: none; } }
.scenes__grid .tile:nth-child(odd):hover { transform: rotate(-.8deg) translateY(-4px); }
.scenes__grid .tile:nth-child(even):hover { transform: rotate(.8deg) translateY(-4px); }

.scenes__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 28px; }
.ab .scenes__more { margin-top: 0; display: inline-flex; align-items: center; gap: 10px; }
.scenes__arrow { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--bounce); }
.scenes__more:hover .scenes__arrow { transform: translateX(6px); }
html[dir="rtl"] .scenes__arrow { transform: scaleX(-1); }
html[dir="rtl"] .scenes__more:hover .scenes__arrow { transform: scaleX(-1) translateX(6px); }

/* Egg: the seed (a realistic flower when planted) */
.seed { width: 92px; height: 112px; padding: 0; border: 0; background: none; flex: none; margin-bottom: -14px; border-radius: 16px; }
.seed svg { width: 100%; height: 100%; overflow: visible; }
.seed__bean { transform-box: fill-box; transform-origin: 50% 80%; transition: transform .5s var(--bounce), opacity .4s; }
.seed__stem { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1s var(--out); }
.seed__leaf { transform-box: fill-box; transform: scale(0) rotate(-20deg); transition: transform .8s var(--bounce); }
.seed__leaf--l { transform-origin: 100% 100%; transition-delay: .5s; }
.seed__leaf--r { transform-origin: 0% 100%; transition-delay: .7s; }
.seed__flower { transform-box: view-box; transform-origin: 45px 30px; transform: scale(0); transition: transform .6s var(--out) .85s; }
.seed__layer { transform-box: view-box; transform-origin: 45px 30px; transition: transform 1.3s var(--bounce); }
.seed__layer--b { transform: scale(.3) rotate(-40deg); transition-delay: .95s; }
.seed__layer--f { transform: scale(.2) rotate(50deg); transition-delay: 1.1s; }
.seed__layer--i { transform: scale(0) rotate(-60deg); transition-delay: 1.3s; }
.seed.is-grown .seed__stem { stroke-dashoffset: 0; }
.seed.is-grown .seed__leaf { transform: none; }
.seed.is-grown .seed__flower { transform: none; }
.seed.is-grown .seed__layer { transform: none; }
.seed.is-grown .seed__bean { transform: scale(.4); opacity: 0; }
.seed__peek { transform-box: view-box; transform-origin: 45px 90px; transition: transform .4s var(--out), opacity .3s; }
.seed.is-grown .seed__peek { transform: scale(0); opacity: 0; }
.seed:not(.is-grown) .seed__peek { animation: ab-sway 3.4s ease-in-out infinite; }
.seed.is-grown .seed__plant { transform-box: view-box; transform-origin: 45px 96px; animation: ab-sway 5s ease-in-out 2.4s infinite; }
.seed.is-grown .seed__layer--f { animation: ab-breathe-soft 4s ease-in-out 2.6s infinite; }
.seed:not(.is-grown) .seed__bean { animation: ab-nudge 5s ease-in-out 3s infinite; }
.seed:hover:not(.is-grown) .seed__bean { animation: ab-jiggle .6s ease-in-out; }

/* ===================================================================
   Beliefs: zig-zag along the vine
   =================================================================== */
.ab .beliefs__list { position: relative; display: flex; flex-direction: column; gap: 0; grid-template-columns: none; --gap: clamp(48px, 7vw, 110px); }
.beliefs__spine { position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 0; }
.belief { position: relative; width: calc(50% - var(--gap) / 2); padding: 0; border: 0; }
.belief:nth-of-type(odd) { align-self: flex-start; }
.belief:nth-of-type(even) { align-self: flex-end; }
.belief + .belief { margin-top: clamp(-90px, -6vw, -40px); }
.belief__bud {
  position: absolute; top: 34px; width: 20px; height: 20px; border-radius: 50%; z-index: 1;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line);
  transition: background .5s, box-shadow .5s, transform .6s var(--bounce);
}
.belief:nth-of-type(odd) .belief__bud { inset-inline-end: calc(var(--gap) / -2 - 10px); }
.belief:nth-of-type(even) .belief__bud { inset-inline-start: calc(var(--gap) / -2 - 10px); }
.belief__bud::before {
  content: ""; position: absolute; top: 9px; height: 2px; width: calc(var(--gap) / 2 - 10px);
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 0%, transparent));
  transform: scaleX(0); transition: transform .6s var(--out) .15s;
}
.belief:nth-of-type(odd) .belief__bud::before { inset-inline-end: 100%; transform-origin: 100% 50%; }
.belief:nth-of-type(even) .belief__bud::before { inset-inline-start: 100%; transform-origin: 0 50%; }
html[dir="rtl"] .belief:nth-of-type(odd) .belief__bud::before { transform-origin: 0 50%; }
html[dir="rtl"] .belief:nth-of-type(even) .belief__bud::before { transform-origin: 100% 50%; }
.belief:nth-of-type(odd) .belief__bud::before { background: linear-gradient(270deg, var(--c), transparent); }
html[dir="rtl"] .belief:nth-of-type(odd) .belief__bud::before { background: linear-gradient(90deg, var(--c), transparent); }
html[dir="rtl"] .belief:nth-of-type(even) .belief__bud::before { background: linear-gradient(270deg, var(--c), transparent); }
.belief__bud.is-lit { background: var(--c); box-shadow: inset 0 0 0 2px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent); transform: scale(1.1); }
.belief__bud.is-lit::before { transform: scaleX(1); }
.belief:nth-of-type(1) { --c: var(--root); } .belief:nth-of-type(2) { --c: var(--trunk); }
.belief:nth-of-type(3) { --c: var(--leaf); } .belief:nth-of-type(4) { --c: var(--ember); }
.belief:nth-of-type(5) { --c: var(--root); } .belief:nth-of-type(6) { --c: var(--leaf); }

.belief__card {
  position: relative; overflow: hidden; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-lg);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line), 0 24px 40px -36px rgba(16, 27, 46, .5);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--out), box-shadow .5s;
}
.belief__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 16%, transparent), transparent 70%);
}
.belief__card:hover::before { opacity: 1; }
.belief__card:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent), 0 34px 50px -34px color-mix(in srgb, var(--c) 70%, rgba(16, 27, 46, .6)); }
.belief.is-lit .belief__card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 24px 40px -36px rgba(16, 27, 46, .5); }
.belief__no {
  position: absolute; inset-inline-end: 22px; top: 12px; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 45%, transparent); letter-spacing: -.04em;
  font-family: var(--f-latin);
}
.belief__icon { width: 52px; height: 52px; margin-bottom: 16px; overflow: visible; fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.belief h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); }
.belief p { margin-top: 8px; color: var(--muted); }
/* icon personalities on hover */
.belief__card:hover .ic-infinity path { stroke-dasharray: 18 6; animation: ab-dash 1.2s linear infinite; }
.ic-star__star { transform-box: fill-box; transform-origin: center; fill: color-mix(in srgb, var(--c) 18%, transparent); }
.belief__card:hover .ic-star__star { animation: ab-spin-pop 1s var(--bounce); }
.ic-ball__ball { transform-box: fill-box; transform-origin: 50% 100%; fill: color-mix(in srgb, var(--c) 22%, transparent); }
.ic-ball__arc { stroke-dasharray: 3 5; }
.belief__card:hover .ic-ball__ball { animation: ab-bounce .8s var(--out) infinite; }
.ic-heart path { transform-box: fill-box; transform-origin: center; fill: color-mix(in srgb, var(--c) 18%, transparent); }
.belief__card:hover .ic-heart path { animation: ab-beat 1s ease-in-out infinite; }
.ic-ask__q, .ic-ask__dot { transform-box: view-box; transform-origin: 24px 24px; }
.ic-ask__dot { fill: var(--c); }
.belief__card:hover .ic-ask__bubble { animation: ab-wobble .8s ease-in-out; transform-box: fill-box; transform-origin: 30% 100%; }
.ic-sprout__l, .ic-sprout__r { transform-box: fill-box; fill: color-mix(in srgb, var(--c) 22%, transparent); }
.ic-sprout__l { transform-origin: 100% 100%; } .ic-sprout__r { transform-origin: 0 100%; }
.belief__card:hover .ic-sprout__l { animation: ab-leaf-l 1s var(--bounce); }
.belief__card:hover .ic-sprout__r { animation: ab-leaf-r 1s var(--bounce) .1s; }

@media (max-width: 760px) {
  .ab .beliefs__list { gap: 18px; --gap: 0px; }
  .beliefs__spine { inset-inline-start: 10px; }
  .belief { width: auto; padding-inline-start: 40px; align-self: stretch !important; }
  .belief + .belief { margin-top: 0; }
  .belief .belief__bud { inset-inline-start: 0 !important; inset-inline-end: auto !important; }
  .belief .belief__bud::before { inset-inline-start: 100% !important; inset-inline-end: auto !important; width: 20px; transform-origin: 0 50% !important; background: linear-gradient(90deg, var(--c), transparent) !important; }
  html[dir="rtl"] .belief .belief__bud::before { transform-origin: 100% 50% !important; background: linear-gradient(270deg, var(--c), transparent) !important; }
}

/* ===================================================================
   Onward + firefly
   =================================================================== */
.ab .onward { padding-top: clamp(64px, 9vw, 120px); }
.onward__wrap { position: relative; }
.onward__card { position: relative; }
.onward__dots i { transition: transform .5s var(--bounce), box-shadow .5s; }
.onward__card.is-lit .onward__dots i { animation: ab-dot-pop 2.4s var(--bounce) infinite; }
.onward__card.is-lit .onward__dots i:nth-child(2) { animation-delay: .2s; }
.onward__card.is-lit .onward__dots i:nth-child(3) { animation-delay: .4s; }
.onward__dots .t-root { color: #6f9ed6; } .onward__dots .t-trunk { color: #5fb3bd; } .onward__dots .t-crown { color: #e39a3b; }

.firefly {
  position: absolute; z-index: 3; top: 26px; inset-inline-end: 16%; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: none; display: grid; place-items: center;
  animation: ab-wander 13s ease-in-out infinite; transition: translate .5s var(--bounce), opacity .4s;
}
.firefly__body { position: relative; width: 13px; height: 13px; border-radius: 50%; background: #fff2c4; box-shadow: 0 0 8px 3px #ffd56b, 0 0 30px 12px rgba(255, 190, 80, .6); }
.firefly__body::before, .firefly__body::after { content: ""; position: absolute; top: -7px; width: 9px; height: 12px; border-radius: 50%; background: rgba(230, 240, 255, .55); animation: ab-flap .12s ease-in-out infinite alternate; }
.firefly__body::before { left: -6px; transform-origin: 100% 100%; }
.firefly__body::after { right: -6px; transform-origin: 0 100%; }
.firefly__glow { position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 120, .5), transparent 70%); animation: ab-blink 2.2s ease-in-out infinite; }
.firefly.is-caught { animation: none; opacity: 0; pointer-events: none; }

/* Egg: a robin perched on the vine */
.bird {
  position: absolute; left: 0; top: 0; z-index: 3; width: 58px; height: 49px; padding: 0; border: 0; background: none;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.bird.is-here { opacity: 1; pointer-events: auto; }
.bird svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; filter: drop-shadow(0 3px 3px rgba(16, 27, 46, .22)); }
:root[data-theme="dark"] .bird svg { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7)) drop-shadow(0 0 10px rgba(255, 220, 170, .25)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bird svg { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7)) drop-shadow(0 0 10px rgba(255, 220, 170, .25)); } }
html[dir="rtl"] .bird svg { transform: scaleX(-1); }
.bird.is-here svg { animation: ab-land .7s var(--bounce) both; }
.bird__all, .bird__head, .bird__wing, .bird__tail { transform-box: view-box; }
.bird__head { transform-origin: 42px 22px; }
.bird__wing { transform-origin: 38px 27px; }
.bird__tail { transform-origin: 19px 35px; }
.bird__all { transform-origin: 31px 53px; }
.bird.is-here:not(.is-flying) .bird__head { animation: ab-head 6.5s ease-in-out 1.2s infinite; }
.bird.is-here:not(.is-flying) .bird__wing { animation: ab-flick 7.3s ease-in-out 2s infinite; }
.bird.is-here:not(.is-flying) .bird__tail { animation: ab-tail 3.1s ease-in-out infinite; }
.bird.is-here:not(.is-flying) .bird__all { animation: ab-hop 9s ease-in-out 3s infinite; }
.bird.is-flying .bird__wing { animation: ab-flap .14s ease-in-out infinite alternate; }
.bird.is-flying .bird__legs { opacity: 0; }
.bird:hover:not(.is-flying) .bird__head { animation: ab-head-quick .9s ease-in-out; }

/* ===================================================================
   Egg counter + celebration
   =================================================================== */
.eggs {
  position: fixed; z-index: 60; bottom: 16px; inset-inline-start: 16px; max-width: calc(100vw - 32px);
  display: grid; justify-items: start; gap: 10px; animation: ab-pop-in .6s var(--bounce) both;
}
.eggs[hidden] { display: none; }
.eggs__pill {
  display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 11px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: .92rem; font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -18px rgba(16, 27, 46, .5);
  transition: transform .35s var(--bounce);
}
.eggs__pill:hover { transform: translateY(-2px); }
.eggs__icon { width: 22px; height: 22px; flex: none; fill: #fff6e6; stroke: var(--ember-ink); stroke-width: 1.5; stroke-linejoin: round; animation: ab-wobble 1.2s ease-in-out 1s 2; }
.eggs__zig { fill: none; stroke: var(--ember); }
.eggs__count { font-variant-numeric: tabular-nums; color: var(--ember-ink); font-weight: 700; }
.eggs__ask { margin-inline-start: 4px; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: color-mix(in srgb, var(--ember) 18%, transparent); color: var(--ember-ink); }
.eggs__done { display: none; font-weight: 600; padding-inline-end: 8px; }
.eggs__bubble {
  position: relative; max-width: 300px; padding: 12px 16px; border-radius: 16px; font-size: .92rem; line-height: 1.45;
  background: var(--night); color: #f4efe6; box-shadow: 0 18px 40px -16px rgba(16, 27, 46, .6);
  animation: ab-pop-in .45s var(--bounce) both;
}
.eggs__bubble[hidden], .eggs__tip[hidden] { display: none; }
.eggs__bubble::after { content: ""; position: absolute; bottom: -6px; inset-inline-start: 26px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
.eggs.is-bump .eggs__pill { animation: ab-bump .6s var(--bounce); }
.eggs.is-done .eggs__pill { background: var(--night); color: #fff; box-shadow: 0 0 0 2px var(--ember), 0 18px 40px -14px rgba(227, 154, 59, .6); cursor: default; }
.eggs.is-done .eggs__text { display: none; }
.eggs.is-done .eggs__done { display: inline; }
.eggs.is-done .eggs__icon { animation: ab-wobble 1s ease-in-out 3; }

/* Discoverability: every unfound egg glints now and then (staggered), and lifts on hover */
.egg { cursor: pointer; }
.bulb, .seed, .bird, .firefly, .name__logo, .hero-about__word { --gl-x: 82%; --gl-y: 8%; }
.egg::after {
  content: ""; position: absolute; left: var(--gl-x); top: var(--gl-y); width: 18px; height: 18px; margin: -9px; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, #fff 0 18%, #ffe3a6 30%, transparent 62%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0; transform: scale(.2) rotate(0deg);
}
.seed { position: relative; }
.name__logo { --gl-x: 22%; --gl-y: 14%; }
.hero-about__word { --gl-x: 74%; --gl-y: 30%; }
.seed { --gl-x: 58%; --gl-y: 76%; }
.bird { --gl-x: 76%; --gl-y: 6%; }
.firefly { --gl-x: 70%; --gl-y: 22%; }
.egg.is-found::after { display: none; }
.ab .egg:not(.is-found):hover::after, .ab .egg:not(.is-found):focus-visible::after { animation: ab-glint 1s ease-in-out infinite; animation-delay: 0s !important; }
.egg.is-hinted::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px; border-radius: 50%; pointer-events: none; z-index: 4;
  border: 3px solid var(--ember); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 25%, transparent);
  animation: ab-hint-ring 1.2s var(--out) infinite;
}
.name__logo.is-hinted::before { width: 108%; height: 108%; margin: 0; left: -4%; top: -4%; }
.hero-about__word.is-hinted::before { width: 60%; height: 60%; margin: 0; left: 20%; top: 20%; border-radius: 40%; }
.hero-about__word.is-hinted { -webkit-text-stroke-color: var(--ember); }
.confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; display: block; width: 10px; height: 14px; border-radius: 2px 10px; }
.leaf-fall { position: absolute; z-index: 4; width: 14px; height: 9px; border-radius: 0 100% 0 100%; pointer-events: none; }

/* ===================================================================
   Reveals (only when motion is welcome and JS is running)
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* hero entrance (pure CSS, plays on load) */
  .hero-about__title .w__i { animation: ab-rise 1s var(--out) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
  .hero-about__title .hl { animation: ab-rise 1s var(--out) both, ab-sheen 8s ease-in-out 1.6s infinite; animation-delay: calc(var(--i, 0) * 80ms + 120ms), 1.6s; }
  .kicker--hero { animation: ab-fade-up .8s var(--out) both; }
  .hero-about__lede { animation: ab-fade-up .9s var(--out) .55s both; }
  .fact__bar { animation: ab-bar 1s var(--out) both; }
  .hero-about__facts li { animation: ab-fade-up .9s var(--out) backwards; }
  .hero-about__facts li:nth-child(1), .hero-about__facts li:nth-child(1) .fact__bar { animation-delay: .75s; }
  .hero-about__facts li:nth-child(2), .hero-about__facts li:nth-child(2) .fact__bar { animation-delay: .9s; }
  .hero-about__facts li:nth-child(3), .hero-about__facts li:nth-child(3) .fact__bar { animation-delay: 1.05s; }
  .hero-about__hint { animation: ab-fade-up .9s var(--out) 1.8s both; }
  .orbit { animation: ab-orbit-in 1.4s var(--out) .2s both; }
  .orbit__slot .chip, .orbit__slot .bulb { opacity: 0; animation-name: ab-spin, ab-chip-in; animation-duration: 80s, .8s; animation-timing-function: linear, var(--bounce); animation-iteration-count: infinite, 1; animation-fill-mode: none, forwards; }
  .orbit__track--b .orbit__slot .chip, .orbit__track--b .orbit__slot .bulb { animation-duration: 120s, .8s; animation-direction: normal, normal; }
  .orbit__track--a .orbit__slot .chip { animation-direction: reverse, normal; }
  .orbit__slot--1 > * { animation-delay: 0s, .7s; } .orbit__slot--2 > * { animation-delay: 0s, .8s; } .orbit__slot--3 > * { animation-delay: 0s, .9s; }
  .orbit__slot--4 > * { animation-delay: 0s, 1s; } .orbit__slot--5 > * { animation-delay: 0s, 1.1s; } .orbit__slot--6 > * { animation-delay: 0s, 1.2s; }
  .orbit__slot--7 > * { animation-delay: 0s, 1.3s; } .orbit__slot--8 > * { animation-delay: 0s, 1.6s; }
  .ab .hero-about__word .nw { animation: ab-word-in 1.4s var(--out) both; }
  .ab .hero-about__word .nw:nth-child(2) { animation-delay: .12s; }
  .ab .hero-about__word .nw:nth-child(3) { animation-delay: .24s; }

  /* idle glints, staggered so only one or two shine at once */
  .egg:not(.is-found)::after { animation: ab-glint-idle 7s ease-in-out infinite; }
  .bulb::after { animation-delay: .5s !important; }
  .hero-about__word::after { animation-delay: 2.8s !important; }
  .name__logo::after { animation-delay: 1.6s !important; }
  .seed::after { animation-delay: 4s !important; }
  .bird::after { animation-delay: 5.2s !important; }
  .firefly::after { animation-delay: 3.4s !important; }

  /* scroll reveals */
  .ab.is-js .rv { transition: opacity .9s var(--out), transform 1s var(--out), clip-path 1.2s var(--out); }
  .ab.is-js .rv--up:not(.is-in) { opacity: 0; transform: translateY(28px); }
  .ab.is-js .rv--pop:not(.is-in) { opacity: 0; transform: scale(.82) rotate(-8deg); }
  .ab.is-js .rv--pop { transition-timing-function: var(--bounce); transition-duration: 1.2s; }
  .ab.is-js .split.rv .w__i { transform: translateY(105%); transition: transform 1s var(--out); transition-delay: calc(var(--i, 0) * 65ms); }
  html[data-lang="ar"] .ab.is-js .split.rv:not(.is-in) .w__i { transform: translateY(130%); }
  .ab.is-js .split.rv.is-in .w__i { transform: none; }
  .ab.is-js .rv--stagger > * { transition: opacity .9s var(--out), transform 1s var(--out); }
  .ab.is-js .rv--stagger:not(.is-in) > * { opacity: 0; transform: translateY(30px); }
  .ab.is-js .rv--stagger > :nth-child(2) { transition-delay: .14s; }
  .ab.is-js .rv--stagger > :nth-child(3) { transition-delay: .28s; }
  .ab.is-js .rv--stagger:not(.is-in) .prose__q::before { transform: scaleY(0); }
  .ab.is-js .prose__q::before { transition: transform 1.2s var(--out) .3s; }

  .ab.is-js .complement > * { transition: opacity .9s var(--out), transform 1.1s var(--out); }
  .ab.is-js .complement:not(.is-in) .complement__half--a { opacity: 0; transform: translateX(-50px); }
  .ab.is-js .complement:not(.is-in) .complement__half--b { opacity: 0; transform: translateX(50px); }
  html[dir="rtl"] .ab.is-js .complement:not(.is-in) .complement__half--a { transform: translateX(50px); }
  html[dir="rtl"] .ab.is-js .complement:not(.is-in) .complement__half--b { transform: translateX(-50px); }
  .ab.is-js .complement:not(.is-in) .complement__plus { opacity: 0; transform: scale(0) rotate(-180deg); }
  .ab.is-js .complement .complement__plus { transition: opacity .4s, transform .9s var(--bounce) .35s; }
  .ab.is-js .complement__tags li { transition: opacity .5s, transform .6s var(--bounce), background .3s, color .3s; }
  .ab.is-js .complement:not(.is-in) .complement__tags li { opacity: 0; transform: scale(.4); }
  .ab.is-js .complement.is-in .complement__tags li:nth-child(1) { transition-delay: .5s; }
  .ab.is-js .complement.is-in .complement__tags li:nth-child(2) { transition-delay: .56s; }
  .ab.is-js .complement.is-in .complement__tags li:nth-child(3) { transition-delay: .62s; }
  .ab.is-js .complement.is-in .complement__tags li:nth-child(4) { transition-delay: .68s; }
  .ab.is-js .complement.is-in .complement__tags li:nth-child(5) { transition-delay: .74s; }
  .ab.is-js .complement.is-in .complement__tags li:nth-child(6) { transition-delay: .8s; }
  .ab.is-js .complement.is-in .complement__tags li:nth-child(7) { transition-delay: .86s; }
  .ab.is-js .complement.is-in .complement__tags li:nth-child(8) { transition-delay: .92s; }
  .ab.is-js .complement.is-in .complement__tags li:hover { transition-delay: 0s; }

  .ab.is-js .rv--clip { clip-path: inset(100% 0 0 0 round var(--r-md)); }
  .ab.is-js .rv--clip.is-in { clip-path: inset(0 0 0 0 round var(--r-md)); }
  .ab.is-js .rv--clip:nth-child(2) { transition-delay: .12s; }
  .ab.is-js .rv--clip:nth-child(3) { transition-delay: .24s; }
  .ab.is-js .rv--clip:nth-child(4) { transition-delay: .36s; }
  .ab.is-js .rv--clip:nth-child(5) { transition-delay: .48s; }
  .ab.is-js .rv--clip.is-in:hover { transition-delay: 0s; }

  .ab.is-js .belief.rv:not(.is-in) .belief__card { opacity: 0; transform: translateX(-60px) rotate(-3deg); }
  .ab.is-js .belief.rv:nth-of-type(even):not(.is-in) .belief__card { transform: translateX(60px) rotate(3deg); }
  html[dir="rtl"] .ab.is-js .belief.rv:not(.is-in) .belief__card { transform: translateX(60px) rotate(3deg); }
  html[dir="rtl"] .ab.is-js .belief.rv:nth-of-type(even):not(.is-in) .belief__card { transform: translateX(-60px) rotate(-3deg); }
  .ab.is-js .belief.rv .belief__card { transition: opacity .8s var(--out), transform 1.1s var(--out), box-shadow .5s; }
  .ab.is-js .belief.rv.is-in .belief__card:hover { transition: transform .25s var(--out), box-shadow .5s; }
  .ab.is-js .belief__icon > * { stroke-dasharray: 160; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--out) .35s; }
  .ab.is-js .belief:not(.is-in) .belief__icon > * { stroke-dashoffset: 160; }
  .ab.is-js .belief:not(.is-in) .belief__no { opacity: 0; transform: translateY(20px); }
  .ab.is-js .belief__no { transition: opacity .8s .4s, transform 1s var(--bounce) .4s; }
  .ab.is-js .rv--up.scenes__foot:not(.is-in) .seed { transform: translateY(20px) scale(.6); }
  .seed { transition: transform .8s var(--bounce) .3s; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .ab.is-js .belief.rv:not(.is-in) .belief__card, html[dir="rtl"] .ab.is-js .belief.rv:not(.is-in) .belief__card { transform: translateY(40px) scale(.96) !important; }
}

/* ===================================================================
   Layout tweaks for small screens
   =================================================================== */
@media (max-width: 860px) {
  .hero-about__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "orbit" "text" "facts" "hint"; }
  .orbit { width: min(86vw, 380px); margin: -12px auto 18px; }
  .hero-about__title { max-width: 12ch; }
}
@media (max-width: 700px) {
  .ab .hero-about { padding-bottom: 120px; }
  .ab .hero-about__word { font-size: 30vw; }
  .chip { padding: 6px 11px 6px 9px; gap: 6px; }
  .chip::before { width: 7px; height: 7px; }
  .bulb { width: 42px; height: 42px; padding: 7px; }
  .scenes__foot { align-items: center; }
  .ab .scenes__more { flex: 1; }
  .firefly { top: 14px; inset-inline-end: 8%; }
}

/* ===================================================================
   Reduced motion: still, visible, complete
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ab *, .ab *::before, .ab *::after, .eggs { animation: none !important; }
  .vine__tip { display: none; }
  .egg:not(.is-found)::after { opacity: .95; transform: scale(.85) rotate(45deg); }
  .egg.is-hinted::before { opacity: 1; transform: none; }
  .orbit__stage { transform: none !important; }
  .tile img { transform: none !important; }
}

/* ===================================================================
   Keyframes
   =================================================================== */
@keyframes ab-spin { to { rotate: 360deg; } }
@keyframes ab-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ab-ping { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes ab-flash { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.5); filter: brightness(1.6); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes ab-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes ab-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes ab-rise { from { transform: translateY(110%) rotate(4deg); } to { transform: none; } }
@keyframes ab-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ab-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ab-orbit-in { from { opacity: 0; transform: scale(.7) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes ab-chip-in { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
@keyframes ab-word-in { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes ab-rays { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes ab-wiggle-x { 0% { transform: scaleX(1); } 40% { transform: scaleX(.7); } 100% { transform: scaleX(1); } }
@keyframes ab-jiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes ab-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes ab-dash { to { stroke-dashoffset: -24; } }
@keyframes ab-spin-pop { 0% { transform: scale(1) rotate(0); } 50% { transform: scale(1.35) rotate(90deg); } 100% { transform: scale(1) rotate(144deg); } }
@keyframes ab-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-10px) scale(.95, 1.05); } 90% { transform: translateY(0) scale(1.12, .86); } }
@keyframes ab-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
@keyframes ab-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes ab-leaf-l { 0% { transform: scale(.3) rotate(30deg); } 100% { transform: none; } }
@keyframes ab-leaf-r { 0% { transform: scale(.3) rotate(-30deg); } 100% { transform: none; } }
@keyframes ab-dot-pop { 0%, 70%, 100% { transform: scale(1); box-shadow: none; } 80% { transform: scale(1.35); box-shadow: 0 0 14px 2px currentColor; } }
@keyframes ab-wander {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-46px, -18px); }
  40% { transform: translate(-80px, 16px); }
  60% { transform: translate(-30px, 30px); }
  80% { transform: translate(20px, -10px); }
}
@keyframes ab-blink { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes ab-land { 0% { transform: translateY(-30px) scale(.4); opacity: 0; } 60% { transform: translateY(2px) scale(1.06, .92); opacity: 1; } 100% { transform: none; } }
html[dir="rtl"] .bird.is-here svg { animation-name: ab-land-rtl; }
@keyframes ab-land-rtl { 0% { transform: scaleX(-1) translateY(-30px) scale(.4); opacity: 0; } 60% { transform: scaleX(-1) translateY(2px) scale(1.06, .92); opacity: 1; } 100% { transform: scaleX(-1); } }
@keyframes ab-head { 0%, 14%, 100% { transform: rotate(0); } 18%, 30% { transform: rotate(-14deg); } 34%, 50% { transform: rotate(8deg); } 54%, 60% { transform: rotate(0); } 63% { transform: rotate(16deg); } 66% { transform: rotate(0); } }
@keyframes ab-head-quick { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-18deg); } 65% { transform: rotate(10deg); } }
@keyframes ab-flick { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-16deg) translateY(-1px); } 92% { transform: rotate(0); } 95% { transform: rotate(-10deg); } }
@keyframes ab-tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes ab-hop { 0%, 72%, 84%, 100% { transform: none; } 75% { transform: translateY(-9px) translateX(3px); } 78% { transform: translateY(0) translateX(5px) scale(1.04, .94); } 80% { transform: translateY(-6px) translateX(2px); } 82% { transform: scale(1.03, .96); } }
@keyframes ab-flap { from { transform: scaleY(1) rotate(0); } to { transform: scaleY(-.7) rotate(-14deg); } }
@keyframes ab-breathe-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04) rotate(3deg); } }
@keyframes ab-mote { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--mx, 12px), -16cqi) scale(1.1); } }
@keyframes ab-glint { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
@keyframes ab-glint-idle { 0%, 88%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 93% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
@keyframes ab-hint-ring { 0%, 100% { transform: scale(.9); opacity: 1; } 50% { transform: scale(1.25); opacity: .55; } }
@keyframes ab-nudge { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-12deg) translateY(-2px); } 93% { transform: rotate(10deg); } 96% { transform: rotate(-4deg); } }
@keyframes ab-pop-in { from { opacity: 0; transform: translateY(20px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ab-bump { 0% { transform: scale(1); } 40% { transform: scale(1.15) rotate(-3deg); } 100% { transform: scale(1); } }