/* ============================================================
   KAPPROMPT — "Eine Reise durch die Welt der KI"
   A one-page journey: each chapter is its own visual world.
   ============================================================ */
@font-face{font-family:'Inter';font-weight:200;font-display:swap;src:url('../fonts/inter-200.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:900;font-display:swap;src:url('../fonts/inter-900.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/instrument-serif-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:italic;font-display:swap;src:url('../fonts/instrument-serif-400-italic.woff2') format('woff2');}
@font-face{font-family:'Anton';font-weight:400;font-display:swap;src:url('../fonts/anton-400.woff2') format('woff2');}

:root{
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --cond:'Anton',Impact,'Inter',sans-serif;
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--sans);background:#02030a;color:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:26px;}

.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* ---------------- floating pill nav (reads on any world) ---------------- */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:18px;padding:8px 8px 8px 16px;
  background:rgba(10,12,20,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:9999px;}
.nav .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:#fff;}
.nav .brand img{height:22px;}
.nav .brand .p{font-weight:400;color:#7ca8ff;}
.nav .links{display:flex;gap:16px;}
.nav .links a{font-size:13px;color:rgba(255,255,255,.62);letter-spacing:.01em;transition:color .2s;}
.nav .links a:hover{color:#fff;}
.nav .chip{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#04060f;
  background:#7ca8ff;border-radius:9999px;padding:8px 14px;}
@media(max-width:720px){.nav .links{display:none;}}

/* ---------------- shared chapter eyebrow ---------------- */
.chapter{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px;}
.chapter .num{font-variant-numeric:tabular-nums;opacity:.6;}
.chapter .bar{width:34px;height:1px;background:currentColor;opacity:.45;}

/* ============================================================
   WORLD 1 — COSMIC (hero: brain -> earth)
   ============================================================ */
.hero{position:relative;height:240vh;background:radial-gradient(ellipse at 50% 30%,#0a1430 0%,#02030a 60%,#000 100%);}
.hero-sticky{position:sticky;top:0;height:100svh;width:100%;overflow:hidden;display:flex;align-items:center;}
#cosmos{position:absolute;inset:0;z-index:0;}
.hero-sticky .wrap{position:relative;z-index:2;width:100%;}
.hero .chapter{color:#7ca8ff;}
.hero h1{font-weight:200;font-size:clamp(3rem,9.5vw,8rem);line-height:.95;letter-spacing:-.045em;max-width:15ch;}
.hero h1 b{font-weight:600;background:linear-gradient(110deg,#58e0ff,#7ca8ff 40%,#a98bff 70%,#ffb24d);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .lede{margin-top:26px;font-size:clamp(1rem,1.4vw,1.2rem);color:#aab2c5;max-width:48ch;line-height:1.6;}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;
  align-items:center;gap:8px;color:#8b93a3;font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
.hero-scroll .ln{width:1px;height:36px;background:linear-gradient(#7ca8ff,transparent);animation:drift 1.8s ease-in-out infinite;}
@keyframes drift{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ============================================================
   WORLD 2 — AMBER (Hungry Tiger: spiced glow)
   ============================================================ */
.amber{background:#281006;color:#faae33;padding-block:clamp(110px,16vh,200px);position:relative;overflow:hidden;}
.amber::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 78% 18%,rgba(250,174,51,.16),transparent 45%),
             radial-gradient(circle at 12% 90%,rgba(209,37,92,.14),transparent 40%);pointer-events:none;}
.amber .wrap{position:relative;z-index:1;}
.amber .chapter{color:#faae33;}
.amber h2{font-family:var(--cond);font-weight:400;font-size:clamp(3.4rem,11vw,9rem);line-height:.86;
  letter-spacing:.005em;text-transform:uppercase;color:#faae33;}
.amber h2 .red{color:#d1255c;}
.amber .lede{margin-top:24px;font-size:clamp(1.05rem,1.5vw,1.3rem);color:#e7b466;max-width:56ch;line-height:1.55;}
.amber-marquee{margin:48px 0 64px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.amber-marquee .t{display:flex;width:max-content;font-family:var(--cond);text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;letter-spacing:.01em;animation:mqx 32s linear infinite;}
.amber-marquee .t span{padding-inline:.3em;color:transparent;-webkit-text-stroke:1.4px rgba(250,174,51,.5);}
.amber-marquee .t span.f{color:#faae33;-webkit-text-stroke:0;}
@keyframes mqx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.fact{background:#402011;border-radius:16px;padding:30px;transition:transform .15s ease;transform-style:preserve-3d;position:relative;overflow:hidden;}
.fact .sheen{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,230,170,.22),transparent 60%);}
.fact:hover .sheen{opacity:1;}
.fact .stat{font-family:var(--cond);font-size:clamp(2.6rem,5vw,3.8rem);line-height:.9;color:#faae33;text-transform:uppercase;}
.fact .label{margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#d1255c;}
.fact .body{margin-top:12px;font-size:15px;line-height:1.55;color:#e7b466;}
@media(max-width:720px){.facts{grid-template-columns:1fr;}}

/* ============================================================
   WORLD 3 — GALLERY (TWOMUCH: light, lime, floating object)
   ============================================================ */
.gallery{background:#e5e7eb;color:#000;padding-block:clamp(100px,15vh,190px);}
.gallery .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;}
.gallery .chapter{color:#000;}
.gallery .chip-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:-.01em;
  background:#f4f4f4;border:1px solid #d6d8dc;border-radius:9999px;padding:5px 12px;margin-bottom:18px;}
.gallery h2{font-weight:600;font-size:clamp(2.4rem,5vw,4rem);line-height:.98;letter-spacing:-.035em;color:#000;}
.gallery h2 mark{background:#e2ff70;color:#000;padding:0 .12em;border-radius:4px;}
.gallery .lede{margin-top:22px;font-size:clamp(1rem,1.3vw,1.12rem);color:#444;max-width:44ch;line-height:1.55;letter-spacing:-.01em;}
.gallery .meta{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;}
.gallery .meta .tag{font-size:12px;background:#f4f4f4;border:1px solid #d6d8dc;border-radius:9999px;padding:6px 12px;color:#000;letter-spacing:-.01em;}
.stage{position:relative;height:clamp(420px,58vh,640px);border-radius:18px;overflow:hidden;background:#dfe2e7;}
.stage spline-viewer{position:absolute;inset:0;z-index:1;width:100%!important;height:100%!important;}
.stage canvas{width:100%!important;height:100%!important;}
.stage .fb{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;color:#7a7f88;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:0 24px;}
.stage .pip{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:8px;font-size:12px;
  background:#fff;border:1px solid #d6d8dc;border-radius:9999px;padding:6px 12px;letter-spacing:-.01em;}
.stage .pip i{width:9px;height:9px;border-radius:50%;background:#e2ff70;display:inline-block;box-shadow:0 0 0 2px #000 inset;}
.stage .cover{position:absolute;right:7px;bottom:7px;width:150px;height:34px;background:#dfe2e7;border-radius:10px;z-index:3;}
@media(max-width:820px){.gallery .grid{grid-template-columns:1fr;gap:30px;}}

/* ============================================================
   WORLD 4 — CINEMA (Sequel: achromatic, editorial serif, scrub)
   ============================================================ */
.cinema-intro{background:#000;color:#fff;padding-block:clamp(100px,15vh,180px);text-align:center;}
.cinema-intro .chapter{color:#cccccc;justify-content:center;}
.cinema-intro h2{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,9vw,8rem);line-height:1;letter-spacing:-.03em;}
.cinema-intro h2 em{font-style:italic;color:#f5f5f0;}
.cinema-intro .lede{margin:26px auto 0;font-weight:300;font-size:clamp(1rem,1.4vw,1.2rem);color:#999;max-width:48ch;line-height:1.6;}

.scrub{position:relative;width:100%;height:340vh;background:#000;}
.scrub-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.6vh,22px);overflow:hidden;}
.scrub-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,11vw,9rem);line-height:.92;letter-spacing:-.03em;white-space:nowrap;will-change:transform,opacity;color:#fff;}
.scrub-card{position:relative;width:min(92vw,calc(54svh * 1.7751));height:min(54svh,92vw / 1.7751);aspect-ratio:1200/676;border-radius:10px;overflow:hidden;outline:1px solid rgba(255,255,255,.1);will-change:transform;box-shadow:rgba(0,0,0,.45) 0 20px 60px;}
.scrub-card canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.scrub-card .vig{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.4);}
.scrub-loader{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:#000;color:#999;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .6s;}
.scrub-loader.hidden{opacity:0;pointer-events:none;}
.cinema-cap{background:#000;color:#999;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.5rem);padding-block:0 100px;}

/* ============================================================
   WORLD 5 — QUIET (closing)
   ============================================================ */
.quiet{background:radial-gradient(ellipse at 50% 60%,#0a1430,#02030a 70%);color:#fff;padding-block:clamp(120px,18vh,220px);text-align:center;}
.quiet .chapter{color:#7ca8ff;justify-content:center;}
.quiet h2{font-weight:200;font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:1.05;letter-spacing:-.04em;max-width:20ch;margin-inline:auto;}
.quiet h2 b{font-weight:600;background:linear-gradient(110deg,#58e0ff,#a98bff);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#000;color:#8b93a3;border-top:1px solid rgba(255,255,255,.1);padding-block:54px;}
.footer .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;margin-bottom:40px;}
.footer .fb{display:flex;align-items:center;gap:12px;}
.footer .fb img{height:40px;}
.footer .fb .nm{font-size:17px;color:#fff;font-weight:700;}
.footer .fb .nm .p{color:#7ca8ff;font-weight:400;}
.footer .legal{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:760px;}
.footer h4{font-size:13px;color:#fff;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;}
.footer p{font-size:13px;line-height:1.6;color:#7b8392;max-width:46ch;margin-bottom:8px;}
.footer a{color:#7ca8ff;}
.footer a:hover{text-decoration:underline;}
.footer .copy{margin-top:34px;font-size:13px;color:#6c7484;border-top:1px solid rgba(255,255,255,.08);padding-top:24px;}
.footer .copy b{color:#cfd5e0;font-weight:600;}
@media(max-width:720px){.footer .legal{grid-template-columns:1fr;gap:28px;}}