/* Ana sayfa. Hareketle ilgili her kural .fx altındadır; .fx yoksa sayfa düz görünür. */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.page-home {
  --h-bg: #FFF6DC;
  --h-fg: #1E1A12;
  --h-muted: #6B6455;
  --glow: rgba(255, 176, 31, 0.62);
  --display: linear-gradient(180deg, #B86A00, #8A5A00);
  --ember: 196, 120, 0;
  --night: #0C0B09;
  --night-2: #1A1713;
  --night-line: #322D26;
  --night-fg: #F5F1E8;
  --night-muted: #B9B2A3;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  .page-home {
    --h-bg: #0C0B09;
    --h-fg: #F5F1E8;
    --h-muted: #B9B2A3;
    --glow: rgba(255, 176, 31, 0.44);
    --display: linear-gradient(180deg, #FFE08A, #FFB01F);
    --ember: 255, 200, 90;
  }
}
html:has(.page-home), .page-home { overflow-x: clip; }
.page-home main { max-width: none; padding: 0; }
.page-home .top { position: fixed; inset: 12px 0 auto; margin: 0; }
.page-home .bottom { max-width: 1120px; }
.sprite { position: absolute; width: 0; height: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--sun-top), var(--sun-bottom)); transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; }

/* Açılış */
.intro-veil { display: none; }
.fx.intro .intro-veil {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; color: var(--ink);
  background: linear-gradient(135deg, var(--sun-top), var(--sun-bottom));
  animation: veil 0.7s 0.75s var(--ease) forwards;
}
.intro-veil .mark { width: 112px; height: 112px; color: var(--ink); animation: pop 0.75s var(--ease) both; }
.intro-veil .mark .cut { fill: var(--sun-top); }
.intro-veil .mark .cut-stroke { stroke: var(--sun-top); }
@keyframes veil { to { transform: translateY(-101%); visibility: hidden; } }
@keyframes pop { from { transform: scale(0.3) rotate(-24deg); opacity: 0; } 60% { transform: scale(1.12) rotate(6deg); opacity: 1; } to { transform: none; } }

/* Üst bölüm */
.kv { position: relative; background: var(--h-bg); color: var(--h-fg); }
.kv-sticky { position: relative; display: flex; flex-direction: column; align-items: center; padding: 112px 16px 56px; text-align: center; overflow: hidden; }
.sun { position: absolute; left: 50%; top: 66%; width: min(150vw, 1200px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--glow), transparent 72%); pointer-events: none; }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.fx .embers { display: block; }
.copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--h-muted); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun-bottom); }
.display { margin: 14px 0 0; font-weight: 800; font-size: clamp(60px, min(16vw, 16svh), 160px); line-height: 1.02; letter-spacing: -0.045em; }
.display > span:last-child { display: block; }
.swap { display: grid; justify-items: center; perspective: 700px; }
.swap > span { grid-area: 1 / 1; padding: 0 0.04em 0.12em; background: var(--display); -webkit-background-clip: text; background-clip: text; color: transparent; }
.swap > span:not(:first-child) { display: none; }
.door { display: block; margin-top: -0.14em; }
.lede { margin: 16px 0 0; max-width: 580px; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.45; color: var(--h-muted); }
.stores { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.store { display: block; min-width: 148px; padding: 9px 20px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; text-align: center; }
.store small { display: block; font-size: 12px; font-weight: 500; opacity: 0.72; }

.stage { --pw: min(280px, 68vw, 44svh); position: relative; z-index: 2; width: var(--pw); margin-top: 44px; }
.ring { display: none; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px dashed color-mix(in srgb, var(--sun-bottom) 60%, transparent); pointer-events: none; }
.ring.r1 { width: calc(var(--pw) * 2.3); }
.ring.r2 { width: calc(var(--pw) * 3.2); border-style: dotted; }
.fly { display: none; position: absolute; left: 50%; top: 42%; z-index: 3; width: clamp(46px, 8vw, 92px); aspect-ratio: 1; }
.fly svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.26)); }
.f1 { --x: calc(-1 * clamp(146px, 33vw, 440px)); --y: -22svh; --z: 34px; --t: 5.1s; --r: -14deg; }
.f2 { --x: clamp(146px, 33vw, 440px); --y: -28svh; --z: 26px; --t: 6.3s; --r: 12deg; }
.f3 { --x: calc(-1 * clamp(150px, 26vw, 340px)); --y: 14svh; --z: 20px; --t: 5.7s; --r: 16deg; }
.f4 { --x: clamp(150px, 27vw, 350px); --y: 12svh; --z: 38px; --t: 4.8s; --r: -18deg; }
.f5 { --x: calc(-1 * clamp(120px, 40vw, 560px)); --y: 2svh; --z: 16px; --t: 7s; --r: 8deg; }
.f6 { --x: clamp(120px, 41vw, 570px); --y: -6svh; --z: 18px; --t: 6.7s; --r: -9deg; }

/* Telefon */
.phone { position: relative; width: var(--pw); aspect-ratio: 9 / 18.9; }
.bezel { position: absolute; inset: 0; padding: 3.4%; border-radius: 15% / 7.2%; background: linear-gradient(145deg, #4A453C, #14120F 42%, #2B2721); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
.island { position: absolute; z-index: 4; left: 50%; top: 2.6%; width: 30%; height: 3.4%; border-radius: 99px; background: #000; transform: translateX(-50%); }
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12.4% / 5.9%; background: #121110; color: #F5F1E8; font-size: calc(var(--pw) / 21); line-height: 1.3; text-align: left; }
.scr { position: absolute; inset: 0; padding: 3.1em 1.15em 1.2em; display: flex; flex-direction: column; gap: 0.8em; opacity: 0; transform: scale(0.96); transition: opacity 0.45s, transform 0.55s var(--ease); }
.scr.on { opacity: 1; transform: none; }
.scr h3 { margin: 0; font-size: 1.5em; letter-spacing: -0.02em; }
.scr small { color: #B3AB9C; font-size: 0.82em; }
.app-top { font-weight: 800; font-size: 1.32em; letter-spacing: -0.03em; }
.app-top em { font-style: normal; color: #FFC233; }
.search { padding: 0.6em 0.9em; border-radius: 0.9em; background: #272420; color: #B3AB9C; font-size: 0.92em; }
.chips, .pay { display: flex; gap: 0.45em; }
.chips span, .pay span { padding: 0.32em 0.8em; border-radius: 99px; background: #272420; font-size: 0.86em; font-weight: 600; }
.chips .on, .pay .on { background: #FFC233; color: #1E1A12; }
.row { display: flex; align-items: center; gap: 0.75em; padding: 0.55em; border-radius: 1em; background: #1D1B18; }
.row svg { width: 2.4em; height: 2.4em; flex: none; }
.row b { display: block; font-size: 0.98em; }
.pay { margin-top: auto; }
.pay span { flex: 1; text-align: center; padding-block: 0.6em; }
.hint { text-align: center; }
.cta-app { padding: 0.8em; border-radius: 1em; background: #FFC233; color: #1E1A12; font-weight: 800; text-align: center; }
.scr-prep { align-items: center; text-align: center; }
.pan { position: relative; display: grid; place-items: center; width: 8.2em; height: 8.2em; margin-top: 1em; }
.pan > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #FFC233; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 150 400; }
.pan .ic { width: 4.2em; height: 4.2em; }
.tl { list-style: none; margin: 0.4em 0 0; padding: 0; width: 100%; display: grid; gap: 0.55em; text-align: left; }
.tl li { display: flex; align-items: center; gap: 0.6em; color: #8D8676; font-size: 0.95em; }
.tl li::before { content: ''; width: 0.72em; height: 0.72em; border-radius: 50%; background: #34302A; flex: none; }
.tl li.d { color: #F5F1E8; }
.tl li.d::before { background: #4CC38A; }
.tl li.a { color: #FFC233; font-weight: 700; }
.tl li.a::before { background: #FFC233; box-shadow: 0 0 0 0.26em rgba(255, 194, 51, 0.26); }
.scr-map { padding: 0; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-bg { fill: #1B1916; }
.m-block { fill: #24211C; }
.m-park { fill: #1E3326; }
.m-road { fill: none; stroke: #39342C; stroke-width: 11; stroke-linecap: round; }
.m-route-bg { fill: none; stroke: #5A4A22; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.m-route { fill: none; stroke: #FFC233; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 1)); }
.m-end { fill: #F5F1E8; }
.m-start { fill: #E5533D; }
.m-halo { fill: rgba(255, 194, 51, 0.28); }
.m-dot { fill: #FFC233; stroke: #1E1A12; stroke-width: 3; }
.sheet { position: absolute; left: 0.8em; right: 0.8em; bottom: 0.8em; padding: 0.85em 1em; display: grid; gap: 0.2em; border-radius: 1.2em; background: rgba(18, 17, 16, 0.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #34302A; }
.sheet b { font-size: 1.1em; }
.sheet .bar { height: 0.32em; margin-top: 0.4em; border-radius: 9px; background: #34302A; overflow: hidden; }
.sheet .bar i { display: block; height: 100%; width: 66%; border-radius: inherit; background: #FFC233; }
.scr-done { align-items: center; justify-content: center; text-align: center; }
.tick { display: grid; place-items: center; width: 7em; height: 7em; border-radius: 50%; background: #FFC233; }
.tick svg { width: 4.4em; height: 4.4em; fill: none; stroke: #1E1A12; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.scr-done p { margin: 0; color: #B3AB9C; }

/* Şerit */
.marquee { position: relative; z-index: 4; overflow: hidden; padding: 14px 0; background: linear-gradient(90deg, var(--sun-top), var(--sun-bottom)); color: var(--ink); }
.track { display: flex; align-items: center; gap: 30px; width: max-content; font-weight: 800; font-size: clamp(26px, 4.4vw, 52px); letter-spacing: -0.03em; white-space: nowrap; }
.track svg { width: 1em; height: 1em; }

/* İki hizmet */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; padding: clamp(56px, 10vh, 110px) 16px 0; }
.duo > div { display: grid; }
.svc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(380px, 46vw, 520px); padding: 32px; overflow: hidden; border-radius: 32px; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s var(--ease); }
.svc-food { background: linear-gradient(150deg, var(--sun-top), var(--sun-bottom)); color: var(--ink); }
.svc-market { background: linear-gradient(150deg, #2B2721, var(--night)); color: var(--night-fg); }
.svc h2 { position: relative; margin: 0; font-size: clamp(48px, 7vw, 84px); line-height: 1; letter-spacing: -0.045em; }
.svc-food h2 b { color: #8A5A00; }
.svc-market h2 b { color: #FFC233; }
.svc p { position: relative; margin: 10px 0 0; max-width: 420px; font-size: clamp(17px, 2vw, 21px); line-height: 1.4; }
.svc-food p { color: #4A3A12; }
.svc-market p { color: var(--night-muted); }
.svc-art { position: absolute; inset: 0 0 auto; height: 62%; }
.svc-art svg { position: absolute; aspect-ratio: 1; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.28)); }
.svc-art .a1 { left: 10%; top: 16%; width: 34%; --r: -12deg; --t: 5.4s; }
.svc-art .a2 { left: 52%; top: 6%; width: 27%; --r: 14deg; --t: 6.2s; }
.svc-art .a3 { left: 62%; top: 50%; width: 22%; --r: -8deg; --t: 4.9s; }
.fx .svc-art svg { animation: bob var(--t) ease-in-out infinite alternate; }

/* Kelime kelime açıklama */
.say { padding: clamp(96px, 18vh, 200px) 16px; }
.say p { max-width: 1040px; margin: 0 auto; font-size: clamp(32px, 5.8vw, 76px); line-height: 1.12; font-weight: 750; letter-spacing: -0.035em; text-align: center; }
.fx .say .w { opacity: 0.14; transition: opacity 0.35s; }
.fx .say .w.on { opacity: 1; }

/* Sipariş hikayesi */
.story { background: var(--night); color: var(--night-fg); }
.story-in { --pw: min(260px, 60vw); position: relative; display: grid; gap: 40px; justify-items: center; max-width: 1120px; margin: 0 auto; padding: 88px 16px; }
.steps { display: grid; gap: 36px; width: 100%; }
.step b { display: block; color: #FFC233; font-size: 15px; letter-spacing: 0.08em; }
.step h2 { margin: 6px 0 10px; font-size: clamp(50px, 9vw, 112px); line-height: 1; letter-spacing: -0.045em; }
.step p { margin: 0; max-width: 460px; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--night-muted); }
.rail { display: none; }

/* Özellik kartları */
.bento { max-width: 1120px; margin: 0 auto; padding: clamp(72px, 14vh, 140px) 16px 0; }
.b-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.b-cell { grid-column: span 3; display: grid; }
.b-cell.wide { grid-column: span 4; }
.b-cell.slim { grid-column: span 2; }
.b-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: 28px; overflow: hidden; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s var(--ease); }
.b-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(440px circle at var(--sx, 50%) var(--sy, 0%), color-mix(in srgb, var(--sun) 26%, transparent), transparent 66%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.b-card:hover::before { opacity: 1; }
.b-card h2 { position: relative; margin: 0 0 6px; font-size: clamp(24px, 2.9vw, 34px); letter-spacing: -0.03em; line-height: 1.1; }
.b-card p { position: relative; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.45; }
.b-art { position: absolute; inset: 0 0 auto; height: 58%; display: grid; place-items: center; overflow: hidden; }
.belts { display: grid; gap: 12px; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.belt { display: flex; gap: 12px; width: max-content; }
.belt span { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 22px; background: var(--surface-muted); }
.belt svg { width: 50px; height: 50px; }
.radar { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sun-bottom); opacity: 0.35; }
.radar svg { width: 70px; height: 70px; }
.payart { display: flex; align-items: center; gap: 24px; }
.coin { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--sun-top), var(--sun-bottom)); color: var(--ink); font-size: 46px; font-weight: 800; box-shadow: 0 12px 26px rgba(184, 106, 0, 0.35); }
.plastic { position: relative; width: 136px; height: 88px; border-radius: 14px; background: linear-gradient(135deg, #2B2721, #0C0B09); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.32); }
.plastic::before { content: ''; position: absolute; left: 14px; top: 18px; width: 28px; height: 21px; border-radius: 5px; background: var(--sun); }
.plastic::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 16px; height: 6px; border-radius: 3px; background: #5B5549; }
.shieldart { display: grid; justify-items: center; gap: 10px; }
.shieldart svg { width: 92px; height: 92px; }
.nope { display: flex; gap: 8px; }
.nope span { padding: 4px 12px; border-radius: 99px; background: var(--surface-muted); color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: line-through; }

/* Başvurular */
.join { max-width: 1120px; margin: 0 auto; padding: clamp(80px, 15vh, 150px) 16px; }
.join > h2 { margin: 0 0 28px; font-size: clamp(42px, 8vw, 96px); line-height: 1; letter-spacing: -0.045em; text-align: center; }
.join-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.glow { display: grid; height: 100%; padding: 2px; border-radius: 30px; background: var(--border); }
.fx .glow { background: conic-gradient(from var(--a), transparent 0 58%, var(--sun-top) 76%, var(--sun-bottom) 88%, transparent); animation: turn 5s linear infinite; }
.glow-in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 32px; border-radius: 28px; background: var(--surface); }
.glow-in svg { width: 72px; height: 72px; }
.glow-in h3 { margin: 8px 0 0; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.03em; }
.glow-in p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
.btn-sun { display: inline-block; margin-top: auto; padding: 13px 24px; border-radius: 99px; background: linear-gradient(135deg, var(--sun-top), var(--sun-bottom)); color: var(--ink); font-weight: 800; text-decoration: none; transform: translate(var(--bx, 0), var(--by, 0)); transition: transform 0.25s var(--ease); }
.glow-in p + .btn-sun { margin-top: 14px; }

/* Kapanış */
.finale { padding: clamp(96px, 18vh, 190px) 16px; overflow: hidden; text-align: center; color: var(--ink); background: linear-gradient(135deg, var(--sun-top), var(--sun-bottom)); }
.finale .mark { width: 104px; height: 104px; color: var(--ink); }
.finale .mark .cut { fill: var(--sun-top); }
.finale .mark .cut-stroke { stroke: var(--sun-top); }
.finale h2 { margin: 10px 0 0; font-size: clamp(54px, 13vw, 176px); line-height: 0.98; letter-spacing: -0.05em; }
.finale p { margin: 16px auto 0; max-width: 520px; font-size: clamp(17px, 2.2vw, 21px); }

/* Hareket */
.fx .kv-sticky { padding-bottom: 0; }
.fx .swap > span { display: block; opacity: 0; transform: translateY(58%) rotateX(-72deg); filter: blur(10px); transition: opacity 0.6s, transform 0.7s var(--ease), filter 0.6s; }
.fx .swap > span.on { opacity: 1; transform: none; filter: none; }
.fx .swap > span.off { opacity: 0; transform: translateY(-58%) rotateX(72deg); filter: blur(10px); }
.fx .eyebrow .dot { animation: blink 1.6s ease-in-out infinite; }
.fx .sun { animation: breathe 6s ease-in-out infinite; }
.fx .copy > * { animation: rise 1s var(--ease) both; }
.fx .copy > *:nth-child(2) { animation-delay: 0.08s; }
.fx .copy > *:nth-child(3) { animation-delay: 0.18s; }
.fx .copy > *:nth-child(4) { animation-delay: 0.28s; }
.fx.intro .copy > * { animation-delay: 0.95s; }
.fx .ring { display: block; }
.fx .ring.r1 { animation: spin 38s linear infinite; }
.fx .ring.r2 { animation: spin 62s linear infinite reverse; }
.fx .fly { display: block; transform: translate(-50%, -50%) translate(calc(var(--x) * (0.42 + 0.58 * var(--p, 0)) + var(--mx, 0) * var(--z)), calc(var(--y) * (0.42 + 0.58 * var(--p, 0)) + var(--my, 0) * var(--z))); transition: transform 0.6s var(--ease); }
.fx .fly svg { animation: bob var(--t) ease-in-out infinite alternate; }
.fx .pan > svg:first-child { animation: spin-plain 1.5s linear infinite; }
.fx .marquee .track { animation: marquee 30s linear infinite; }
.fx .belt { animation: marquee 22s linear infinite; }
.fx .belt:nth-child(2) { animation-direction: reverse; animation-duration: 28s; }
.fx .radar i { animation: ping 2.6s ease-out infinite; }
.fx .radar i:nth-child(2) { animation-delay: 0.85s; }
.fx .radar i:nth-child(3) { animation-delay: 1.7s; }
.fx .coin { animation: flip 3.6s var(--ease) infinite; }
.fx .plastic { animation: sway 4.4s ease-in-out infinite alternate; }
.fx .shieldart svg { animation: bob 3.4s ease-in-out infinite alternate; }
.fx .finale .mark { animation: wobble 3s ease-in-out infinite; }
.fx .finale h2 { transform: scale(calc(0.74 + 0.5 * var(--p, 0.5))); }
.fx .btn-sun:hover { filter: brightness(1.06); }
.fx .rv { opacity: 0; transform: translateY(44px) scale(0.97); filter: blur(10px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), filter 0.85s var(--ease); transition-delay: var(--d, 0ms); }
.fx .rv.in { opacity: 1; transform: none; filter: none; }

@media (min-height: 561px) {
  .fx .kv { height: 240svh; }
  .fx .kv-sticky { position: sticky; top: 0; height: 100svh; }
  .fx .copy { transform: translateY(calc(var(--p, 0) * -150px)) scale(calc(1 - 0.14 * var(--p, 0))); opacity: calc(1 - var(--p, 0) * 2.3); }
  .fx .stage { position: absolute; top: 0; left: 50%; margin: 0; perspective: 1400px; transform: translate(-50%, calc((1 - var(--p, 0)) * 71svh + var(--p, 0) * (50svh - var(--pw) * 1.05))); }
  .fx .kv .phone { transform-origin: 50% 0; transform: rotateX(calc((1 - var(--p, 0)) * 34deg)) scale(calc(0.9 + 0.1 * var(--p, 0))); }

  .fx .story { height: 520svh; }
  .fx .story-in { position: sticky; top: 0; height: 100svh; padding: 92px 16px 22px; gap: 22px; grid-template-rows: auto 1fr; --pw: min(220px, 52vw, max(130px, calc((100svh - 354px) / 2.1))); }
  .fx .steps { position: relative; min-height: 200px; text-align: center; }
  .fx .step { position: absolute; inset: 0 0 auto; display: grid; justify-items: center; opacity: 0; transform: translateY(36px); filter: blur(8px); transition: opacity 0.45s, transform 0.55s var(--ease), filter 0.45s; }
  .fx .step.on { opacity: 1; transform: none; filter: none; }
  .fx .rail { display: flex; position: absolute; left: 50%; bottom: 20px; gap: 8px; transform: translateX(-50%); }
  .rail i { width: 8px; height: 8px; border-radius: 99px; background: var(--night-line); transition: width 0.3s, background 0.3s; }
  .rail i.on { width: 30px; background: #FFC233; }
}
@media (min-height: 561px) and (min-width: 860px) {
  .fx .story-in { grid-template-columns: 1fr auto; grid-template-rows: 1fr; align-items: center; justify-items: start; padding: 0 32px; gap: 40px; --pw: min(300px, 44svh); }
  .fx .steps { text-align: left; align-self: center; height: 340px; }
  .fx .step { justify-items: start; }
}
@media (max-width: 760px) {
  .b-cell, .b-cell.wide, .b-cell.slim { grid-column: span 6; }
  .b-card { min-height: 340px; padding: 22px; }
}

@keyframes rise { from { opacity: 0; transform: translateY(34px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.14); opacity: 0.8; } }
@keyframes blink { 50% { opacity: 0.25; transform: scale(0.7); } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin-plain { to { transform: rotate(360deg); } }
@keyframes bob { from { transform: translateY(-12px) rotate(calc(var(--r, 8deg) * -1)); } to { transform: translateY(14px) rotate(var(--r, 8deg)); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes ping { from { transform: scale(0.42); opacity: 0.8; } to { transform: scale(1.5); opacity: 0; } }
@keyframes flip { 0%, 30% { transform: rotateY(0); } 60%, 100% { transform: rotateY(720deg); } }
@keyframes sway { from { transform: rotate(-9deg) translateY(4px); } to { transform: rotate(7deg) translateY(-6px); } }
@keyframes wobble { 0%, 100% { transform: rotate(-9deg) scale(1); } 50% { transform: rotate(9deg) scale(1.1); } }
@keyframes turn { to { --a: 360deg; } }