/* fourfifty production – reines CSS, kein JavaScript (CSP script-src 'none').
   Alle Animationen nur bei prefers-reduced-motion: no-preference; Scroll-Effekte nur, wo der Browser
   animation-timeline kann – sonst ist alles sofort sichtbar. */

:root {
  --space: #0A0613; --night: #140c24; --night-2: #1b1030; --line: #2a1d40;
  --cream: #F5F3EE; --muted: #b9b0c9;
  --purple: #8533B7; --purple-lt: #E3C6F6;
  --gold: #E2B04A; --green: #8DBA4E; --blue: #4FA8E8; --pink: #E86FA6; --teal: #3CB8A8;
  --display: 'Clash Display', 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --max: 1120px;
  --pad: 24px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --c { syntax: "<integer>"; inherits: false; initial-value: 0; }

@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--space); color: var(--cream); font: 400 17px/1.65 var(--body);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
a { color: var(--purple-lt); text-underline-offset: 3px; }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--purple); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: #000; font-weight: 700;
        padding: 10px 16px; border-radius: 10px; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; color: #000; }

/* ---------- Himmel im Hintergrund ---------- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
       background: radial-gradient(1200px 600px at 85% -10%, #3a1460 0%, transparent 60%),
                   radial-gradient(900px 500px at -10% 30%, #1d0f38 0%, transparent 60%), var(--space); }
.stars { position: absolute; inset: -50%; display: block; background-repeat: repeat; }
.s1 { background-image: radial-gradient(1px 1px at 20px 30px, #fff9, transparent 60%),
                        radial-gradient(1px 1px at 140px 90px, #fff7, transparent 60%),
                        radial-gradient(1px 1px at 80px 160px, #fff8, transparent 60%),
                        radial-gradient(1px 1px at 200px 220px, #fff6, transparent 60%);
      background-size: 240px 240px; }
.s2 { background-image: radial-gradient(1.5px 1.5px at 60px 80px, #E3C6F6cc, transparent 60%),
                        radial-gradient(1.5px 1.5px at 300px 260px, #fffb, transparent 60%),
                        radial-gradient(1.5px 1.5px at 180px 380px, #E2B04Aaa, transparent 60%);
      background-size: 420px 420px; }
.s3 { background-image: radial-gradient(2px 2px at 120px 140px, #fff, transparent 60%),
                        radial-gradient(2px 2px at 520px 420px, #E3C6F6, transparent 60%);
      background-size: 700px 700px; opacity: .8; }
.aurora { position: absolute; width: 70vmax; height: 70vmax; right: -25vmax; top: -30vmax; display: block;
          background: conic-gradient(from 0deg, #8533B755, #E86FA633, #4FA8E833, #8533B755);
          border-radius: 50%; filter: blur(80px); opacity: .55; }

/* Scroll-Fortschritt */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0);
            background: linear-gradient(90deg, var(--purple), var(--pink), var(--gold)); display: none; }

/* ---------- Kopf ---------- */
.foot, main > section, .prose { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
       gap: 8px 16px; padding-block: 18px; flex-wrap: wrap;
       padding-inline: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
       background: #0A061300; border-bottom: 1px solid transparent; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none;
        font: 600 20px/1 var(--display); letter-spacing: .01em; view-transition-name: logo; }
.mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
        background: radial-gradient(circle at 30% 30%, #b06ee0, var(--purple) 55%, #4d1a70);
        font: 600 14px/1 var(--display); color: #fff; box-shadow: 0 0 0 4px #8533b733, 0 0 24px #8533b766;
        transition: transform .5s var(--ease); }
.logo:hover .mark { transform: rotate(-12deg) scale(1.08); }
.mark.sm { width: 26px; height: 26px; font-size: 10px; box-shadow: none; vertical-align: middle; margin-right: 6px; }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; view-transition-name: nav; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px;
             padding: 7px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.top nav a:hover { color: var(--cream); background: #ffffff0d; }
.top nav a[aria-current] { color: var(--cream); background: #8533b733; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 32px; padding-block: 64px 48px; }
.hero.small { display: block; padding-block: 48px 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-weight: 600;
           text-transform: uppercase; letter-spacing: .14em; font-size: 13px; margin: 0 0 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.4vw, 76px); letter-spacing: -.01em; }
.hero h1 { font-size: clamp(40px, 5vw, 64px); }
.hero.small h1 { font-size: clamp(34px, 5vw, 56px); }
h1 .line { display: block; }
h1 em { font-style: normal; color: var(--purple-lt); }
@supports (background-clip: text) {
  h1 em { background: linear-gradient(100deg, var(--purple-lt) 0%, #fff 25%, var(--pink) 50%, var(--purple-lt) 75%, #fff 100%);
          background-size: 300% 100%; background-clip: text; color: transparent; }
}
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 24px; }
p, li { text-wrap: pretty; }
.lead { font-size: 20px; color: var(--muted); max-width: 640px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Planet mit Umlaufbahnen */
.orbit { position: relative; aspect-ratio: 1; width: min(100%, 440px); justify-self: center; }
.planet { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center;
          background: radial-gradient(circle at 32% 28%, #c58cf0, var(--purple) 45%, #3b1257 80%);
          box-shadow: 0 0 60px #8533B799, 0 0 140px #8533B744, inset -18px -22px 40px #0006; }
.planet span { font: 600 clamp(28px, 4vw, 44px)/1 var(--display); letter-spacing: .02em; }
.ring { position: absolute; border-radius: 50%; border: 1px dashed #E3C6F633; }
.r1 { inset: 20%; } .r2 { inset: 9%; border-style: solid; border-color: #E3C6F61f; } .r3 { inset: 0; }
.moon { position: absolute; width: 14px; height: 14px; border-radius: 50%; }
.moon.gold { background: var(--gold); box-shadow: 0 0 16px var(--gold); top: -7px; left: calc(50% - 7px); }
.moon.pink { background: var(--pink); box-shadow: 0 0 16px var(--pink); left: -7px; top: calc(50% - 7px); }
.moon.blue { background: var(--blue); box-shadow: 0 0 16px var(--blue); width: 10px; height: 10px; right: -5px; top: calc(50% - 5px); }
.moon.green { background: var(--green); box-shadow: 0 0 16px var(--green); bottom: -7px; left: calc(50% - 7px); }
.moon.teal { background: var(--teal); box-shadow: 0 0 16px var(--teal); width: 9px; height: 9px; top: calc(14.6% - 4.5px); left: calc(14.6% - 4.5px); }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-block; overflow: hidden; isolation: isolate; background: var(--purple);
       color: #fff; text-decoration: none; font-weight: 600; padding: 13px 22px; border-radius: 999px;
       box-shadow: 0 8px 24px -8px #8533B7aa; transition: transform .25s var(--ease), background .2s, box-shadow .25s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-20deg);
              background: linear-gradient(90deg, transparent, #ffffff44, transparent); transition: transform .6s var(--ease); }
.btn:hover { background: #9b45d0; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -10px #8533B7; }
.btn:hover::after { transform: translateX(120%) skewX(-20deg); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.ghost { background: #ffffff08; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--cream); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--purple-lt); }
.btn.big { font-size: clamp(16px, 2.4vw, 20px); padding: 16px 28px; overflow-wrap: anywhere; }

/* ---------- Lauftext ---------- */
main > .ticker { display: flex; overflow: hidden; padding-block: 18px; max-width: none; padding-inline: 0;
                 border-block: 1px solid var(--line); background: #140c2499;
                 mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ticker li { font: 600 clamp(20px, 3vw, 30px)/1 var(--display); color: transparent; -webkit-text-stroke: 1px #E3C6F688;
             padding-inline: 28px; white-space: nowrap; display: flex; align-items: center; }
.ticker li::after { content: "✦"; color: var(--gold); -webkit-text-stroke: 0; font-size: .6em; margin-left: 56px; }
.ticker li:nth-child(3n+1) { color: var(--cream); -webkit-text-stroke: 0; }

/* ---------- Zahlen ---------- */
.stats ul { list-style: none; margin: 0; padding: 40px 0 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stats li { color: var(--muted); font-size: 15px; display: flex; flex-direction: column; }
.stats b { --c: var(--n); font: 600 clamp(40px, 6vw, 64px)/1 var(--display); color: var(--cream);
           counter-reset: c var(--c); margin-bottom: 6px; }
.stats b::after { content: counter(c); }
/* Zielwert als Klasse, weil die CSP keine style-Attribute erlaubt */
.n0 { --n: 0; } .n1 { --n: 1; } .n2 { --n: 2; } .n3 { --n: 3; } .n4 { --n: 4; } .n5 { --n: 5; } .n6 { --n: 6; } .n7 { --n: 7; } .n8 { --n: 8; } .n9 { --n: 9; } .n10 { --n: 10; } .n11 { --n: 11; } .n12 { --n: 12; } .n13 { --n: 13; } .n14 { --n: 14; } .n15 { --n: 15; } .n16 { --n: 16; } .n17 { --n: 17; } .n18 { --n: 18; } .n19 { --n: 19; } .n20 { --n: 20; } .n21 { --n: 21; } .n22 { --n: 22; } .n23 { --n: 23; } .n24 { --n: 24; } .n25 { --n: 25; } .n26 { --n: 26; } .n27 { --n: 27; } .n28 { --n: 28; } .n29 { --n: 29; } .n30 { --n: 30; }
.stats li:nth-child(2) b { color: var(--green); }
.stats li:nth-child(4) b { color: var(--gold); }

/* ---------- Blöcke & Karten ---------- */
.block { padding-block: 72px; border-top: 1px solid var(--line); }
.block-head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 16px; margin-bottom: 28px; }
.block-head .eyebrow { grid-column: 1 / -1; }
.block-head h2 { margin: 0; }
.block-head p:last-child { color: var(--muted); margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 18px; }

.card { --acc: var(--purple); position: relative; display: flex; flex-direction: column; overflow: hidden;
        border-radius: 20px; padding: 28px 24px 24px; border: 1px solid transparent;
        background: linear-gradient(var(--night), var(--night)) padding-box,
                    conic-gradient(from var(--a), var(--line) 0 60%, var(--acc) 75%, var(--line) 90%) border-box;
        transition: translate .35s var(--ease), box-shadow .35s; }
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
                background: radial-gradient(400px 200px at 80% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%); }
.card:hover { translate: 0 -6px; box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--acc) 70%, transparent); }
.card:hover::before, .card:focus-within::before { opacity: 1; }
.card-head, .card h3, .card p { position: relative; }
.num { position: absolute; right: 20px; bottom: 6px; font: 600 72px/1 var(--display); color: transparent;
       -webkit-text-stroke: 1px color-mix(in srgb, var(--acc) 35%, transparent); pointer-events: none; }
.card p { color: var(--muted); flex: 1; margin: 0 0 18px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.kind { color: var(--acc, var(--gold)); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; margin: 0; }
.cta { align-self: flex-start; color: var(--cream); font-weight: 600; text-decoration: none; }
.cta::before { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.cta span { display: inline-block; transition: transform .3s var(--ease); }
.card:hover .cta { color: var(--acc); }
.card:hover .cta span { transform: translateX(6px); }
.cta.off { color: var(--muted); font-weight: 500; }
.cta.off::before { content: none; }
.accent-gold { --acc: var(--gold); } .accent-purple { --acc: #b06ee0; } .accent-green { --acc: var(--green); }
.accent-blue { --acc: var(--blue); } .accent-pink { --acc: var(--pink); } .accent-teal { --acc: var(--teal); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.badge.live { background: #8dba4e22; color: var(--green); }
.badge.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.badge.soon { background: #e2b04a1f; color: var(--gold); }

/* ---------- Arbeitsweise ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.split p { color: var(--muted); }
.sticky { position: sticky; top: 100px; }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: pt; }
.points li { counter-increment: pt; position: relative; background: var(--night); border: 1px solid var(--line);
             border-radius: 16px; padding: 18px 20px 18px 68px; color: var(--muted);
             transition: border-color .3s, translate .3s var(--ease), background .3s; }
.points li::before { content: counter(pt, decimal-leading-zero); position: absolute; left: 20px; top: 16px;
                     font: 600 22px/1.2 var(--display); color: var(--gold); }
.points li:hover { border-color: #8533B788; translate: 4px 0; background: var(--night-2); }
.points strong { color: var(--cream); }

/* ---------- Kontakt ---------- */
.contact-box { position: relative; text-align: center; padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px);
               border-radius: 28px; border: 1px solid transparent; overflow: hidden;
               background: radial-gradient(600px 300px at 50% 0%, #8533B744, transparent 70%) padding-box,
                           linear-gradient(var(--night), var(--night)) padding-box,
                           conic-gradient(from var(--a), var(--purple), var(--pink), var(--gold), var(--blue), var(--purple)) border-box; }
.contact-box h2 { font-size: clamp(36px, 6vw, 64px); }
.contact-box p { color: var(--muted); max-width: 520px; margin-inline: auto; margin-bottom: 26px; }
.contact-box .eyebrow { justify-content: center; }

/* ---------- Bücher ---------- */
.books { display: grid; gap: 28px; }
.book { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 40px; align-items: center;
        background: var(--night); border: 1px solid var(--line); border-radius: 24px; padding: 32px;
        transition: border-color .3s; }
.book:hover { border-color: #8533B766; }
.cover { perspective: 900px; }
.cover img { border-radius: 6px; box-shadow: 0 18px 40px #0008; rotate: y -14deg;
             transition: rotate .6s var(--ease), scale .6s var(--ease), box-shadow .6s; }
.book:hover .cover img { rotate: y 0deg; scale: 1.03; box-shadow: 0 30px 60px -10px #8533B7aa; }
.book .kind { color: var(--gold); margin-bottom: 8px; }
.book .sub { color: var(--purple-lt); font-weight: 600; margin-top: -8px; }
.book p { color: var(--muted); }
.facts { list-style: none; padding: 0; color: var(--cream); margin: 0 0 24px; display: grid; gap: 6px; }
.facts li { padding-left: 26px; position: relative; }
.facts li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 13px; top: 3px; }

/* ---------- Textseiten ---------- */
.prose { padding-block: 48px 72px; max-width: 760px; }
.prose h1 { font-size: clamp(34px, 5vw, 52px); }
.prose h2 { font-size: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose p, .prose li { color: #ddd6e8; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--gold); }
.muted { color: var(--muted); font-size: 14px; }

/* ---------- Fuß ---------- */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
        padding-block: 32px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--cream); text-decoration: underline; }

.book > div, .card, .split > * { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; }

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-block: 24px 40px; }
  .orbit { width: min(64vw, 300px); order: -1; }
  .stats ul { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
}
@media (max-width: 760px) {
  .split, .book { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .cover { max-width: 240px; }
  h1 { font-size: clamp(34px, 10vw, 44px); }
  .lead { font-size: 18px; }
  .block { padding-block: 56px; }
  .block-head { grid-template-columns: 1fr; }
  .block-head p:last-child { margin-top: 8px; }
  .book { padding: 20px; gap: 24px; }
  .card { padding: 24px 20px 20px; }
  .top { padding-block: 10px; }
  .top nav { width: calc(100% + 24px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { flex: none; }
  .foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) { :root { --pad: 16px; } }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .s1 { animation: drift 180s linear infinite; }
  .s2 { animation: drift 120s linear infinite reverse, twinkle 5s ease-in-out infinite alternate; }
  .s3 { animation: drift 90s linear infinite, twinkle 3.5s ease-in-out infinite alternate-reverse; }
  .aurora { animation: spin 40s linear infinite; }
  .dot { animation: ping 2.2s ease-out infinite; }
  .badge.live i { animation: ping-green 2s ease-out infinite; }

  .hero .eyebrow, h1 .line, .hero .lead, .hero-cta, .hero.small > * { animation: rise .9s var(--ease) both; }
  .hero .eyebrow { animation-delay: .05s; }
  h1 .line:nth-child(1) { animation-delay: .12s; }
  h1 .line:nth-child(2) { animation-delay: .22s; }
  h1 .line:nth-child(3) { animation-delay: .32s; }
  .hero .lead { animation-delay: .45s; }
  .hero-cta { animation-delay: .58s; }
  .hero.small > :nth-child(2) { animation-delay: .1s; }
  .hero.small > :nth-child(3) { animation-delay: .2s; }
  h1 em { animation: shimmer 6s linear infinite; }

  .orbit { animation: pop 1.2s var(--ease) .2s both; }
  .planet { animation: float 6s ease-in-out infinite; }
  .r1 { animation: spin 14s linear infinite; }
  .r2 { animation: spin 26s linear infinite reverse; }
  .r3 { animation: spin 40s linear infinite; }

  .ticker ul { animation: marquee 32s linear infinite; }
  .ticker:hover ul { animation-play-state: paused; }

  .card:hover { animation: border-spin 2.4s linear infinite; }
  .contact-box { animation: border-spin 8s linear infinite; }

  ::view-transition-old(root) { animation: vt-out .25s ease both; }
  ::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }

  @supports (animation-timeline: view()) {
    .progress { display: block; animation: grow linear both; animation-timeline: scroll(root); }
    .top { animation: glass linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
    .card, .points li, .book, .stats li, .block-head, .split > div, .prose > * {
      animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
    .card:hover { animation: reveal linear both, border-spin 2.4s linear infinite; animation-timeline: view(), auto; }
    .contact-box { animation: reveal linear both, border-spin 8s linear infinite; animation-timeline: view(), auto;
                   animation-range: entry 0% entry 70%, normal; }
    .stats b { animation: count linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .cover img { animation: tilt linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .book:hover .cover img { animation: none; }
    .orbit { animation: pop 1.2s var(--ease) .2s both, sink linear both; animation-timeline: auto, scroll(root);
             animation-range: normal, 0 600px; }
  }
}
@supports not (animation-timeline: view()) {
  .top { background: #0A0613cc; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .top { background: #0A0613ee; border-bottom-color: var(--line); }
}

@keyframes drift { to { transform: translate3d(240px, 120px, 0); } }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 #E2B04A99; } 100% { box-shadow: 0 0 0 12px #E2B04A00; } }
@keyframes ping-green { 0% { box-shadow: 0 0 0 0 #8DBA4E99; } 100% { box-shadow: 0 0 0 8px #8DBA4E00; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes pop { from { opacity: 0; scale: .6; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes float { 50% { translate: 0 -10px; } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes border-spin { to { --a: 360deg; } }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes glass { to { background: #0A0613cc; backdrop-filter: blur(14px); border-bottom-color: var(--line); } }
@keyframes reveal { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes count { from { --c: 0; } to { --c: var(--n); } }
@keyframes tilt { from { rotate: y -26deg; } to { rotate: y 10deg; } }
@keyframes sink { to { translate: 0 80px; opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}