@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#0b1020;
  --panel:rgba(255,255,255,.16);
  --panel-strong:rgba(255,255,255,.28);
  --text:#f8fafc;
  --text-dark:#0f172a;
  --muted:rgba(12,18,34,.72);
  --border:rgba(255,255,255,.28);
  --shadow:0 24px 80px rgba(3,8,20,.22);
  --radius:28px;
  --radius-sm:20px;
  --container:1240px;
  --slide-pad:clamp(22px,4vw,48px);
  --safe-bottom:max(22px, env(safe-area-inset-bottom));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 20%, rgba(248,177,149,.22), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(144,196,255,.18), transparent 30%),
    linear-gradient(180deg, #0a0f1d 0%, #0f1327 100%);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,textarea,select{font:inherit}
a{color:inherit}
.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:#fff;color:#000;padding:10px 14px;border-radius:999px;
}
.skip-link:focus{left:12px}

.app-shell{position:relative;height:100dvh;height:100vh;min-height:100svh;overflow:hidden;isolation:isolate}
.ambient{position:fixed;inset:auto;pointer-events:none;filter:blur(60px);opacity:.65;z-index:0}
.ambient-a{width:34vw;height:34vw;min-width:260px;min-height:260px;left:-8vw;top:-8vw;border-radius:50%;background:radial-gradient(circle,#ffcf85 0%,rgba(255,171,95,.35) 35%,transparent 72%);animation:blobA 14s ease-in-out infinite}
.ambient-b{width:36vw;height:36vw;min-width:280px;min-height:280px;right:-10vw;bottom:-12vw;border-radius:50%;background:radial-gradient(circle,#7fc8ff 0%,rgba(127,200,255,.34) 35%,transparent 72%);animation:blobB 18s ease-in-out infinite}
.pointer-aura{
  position:fixed;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 28%, transparent 68%);
  opacity:.88;mix-blend-mode:screen;filter:blur(28px);pointer-events:none;z-index:1;
  transform:translate3d(-999px,-999px,0);
}
.progress-line{position:fixed;left:0;top:0;width:100%;height:4px;background:rgba(255,255,255,.1);z-index:30}
.progress-line span{display:block;height:100%;width:0;background:linear-gradient(90deg,#fff,#ffd18b);box-shadow:0 0 30px rgba(255,255,255,.55)}
.app-badge{
  position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:35;
  padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(8,12,24,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:rgba(255,255,255,.86);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:var(--shadow);
}
.chapter-nav{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:35;
  display:flex;flex-direction:column;gap:10px;
}
.chapter-dot{
  width:44px;height:44px;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:rgba(8,12,24,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:rgba(255,255,255,.74);display:grid;place-items:center;cursor:pointer;
  transition:transform .26s ease, background .26s ease, border-color .26s ease, color .26s ease, box-shadow .26s ease;
}
.chapter-dot:hover,.chapter-dot:focus-visible{transform:translateX(-4px);outline:none;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.14)}
.chapter-dot.is-active{background:#fff;color:#111827;border-color:#fff;box-shadow:0 20px 45px rgba(0,0,0,.18)}
.chapter-dot span{font-size:11px;font-weight:800;letter-spacing:.1em}

.slides{
  position:relative;z-index:2;height:100%;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y pinch-zoom;
  scrollbar-width:none;
}
.slide{
  position:relative;min-height:100dvh;min-height:100svh;min-height:100vh;scroll-snap-align:start;
  padding:calc(72px + env(safe-area-inset-top)) var(--slide-pad) calc(72px + var(--safe-bottom));
  display:grid;align-items:center;contain:layout paint;
}
.slide-backdrop{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.78), transparent 32%),
    radial-gradient(circle at 50% 95%, rgba(255,255,255,.18), transparent 36%);
}
.slide-hero{background:linear-gradient(140deg,#ffe8d8 0%,#ffd4b6 34%,#ffc5bb 100%)}
.slide-origin{background:linear-gradient(140deg,#e9ffe4 0%,#d3f1bf 36%,#c2efd7 100%)}
.slide-personality{background:linear-gradient(140deg,#dff4ff 0%,#cae8ff 36%,#d9d4ff 100%)}
.slide-numerology{background:linear-gradient(140deg,#f2dcff 0%,#edcfff 36%,#ffd2e6 100%)}
.slide-finale{background:linear-gradient(140deg,#fff1cf 0%,#ffe6a2 36%,#d8f6d8 100%)}

.slide-grid{
  position:relative;z-index:2;width:min(100%,var(--container));margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:clamp(26px,5vw,54px);align-items:center;
}
.slide-copy{color:var(--text-dark)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--shadow);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#334155;
}
.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:#111827;animation:pulse 2s infinite}
h1,h2{margin:16px 0 0;font-size:clamp(2.4rem,7vw,5.4rem);line-height:.95;letter-spacing:-.05em;font-weight:900;max-width:10ch}
h1 span,h2 span{position:relative;display:inline-block}
h1 span::after,h2 span::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:rgba(255,255,255,.62);z-index:-1;border-radius:999px;
}
.lead{
  margin:18px 0 0;max-width:60ch;font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.7;color:rgba(15,23,42,.82);
}
.story-bubble{
  margin-top:20px;width:min(100%,680px);padding:22px 22px 18px;border:none;cursor:pointer;text-align:left;
  border-radius:32px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.62);
  box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#0f172a;
  transition:transform .24s ease, box-shadow .24s ease;
}
.story-bubble:hover,.story-bubble:focus-visible{transform:translateY(-2px);box-shadow:0 28px 90px rgba(2,6,23,.22);outline:none}
.story-text{display:block;font-size:clamp(1rem,1.75vw,1.08rem);line-height:1.8;min-height:6em}
.story-meta{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#475569;font-weight:800}
.story-progress{display:flex;gap:7px}
.story-progress em{display:block;width:10px;height:10px;border-radius:999px;background:rgba(148,163,184,.46);transition:width .24s ease, background .24s ease}
.story-progress em.is-on{width:34px;background:#111827}
.card-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px;max-width:760px}
.card-row-compact{max-width:560px}
.glass{
  background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.mini-card,.info-card,.source-note{border-radius:24px;padding:18px}
.mini-card strong,.card-kicker,.source-note strong{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#475569}
.mini-card p,.source-note p{margin:8px 0 0;font-size:15px;line-height:1.6;color:#0f172a}
.info-card h3{margin:8px 0 12px;font-size:1.12rem;color:#0f172a}
.info-card ul{margin:0;padding-left:18px;color:#1e293b;display:grid;gap:8px;line-height:1.5}
.tilt-card{transform-style:preserve-3d;transition:transform .18s ease}

.slide-visual{display:grid;justify-items:center}
.character-scene{position:relative;width:min(100%,420px);aspect-ratio:1/1.24}
.character-scene::before{
  content:'';position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:42%;height:6%;border-radius:50%;
  background:rgba(15,23,42,.16);filter:blur(6px)
}
.character-shell{position:absolute;inset:0;display:grid;place-items:center}
.character-wrap{
  position:relative;width:100%;height:100%;animation:floaty 4.8s ease-in-out infinite;
}
.character-wrap[data-pose="explain"]{animation-duration:4.2s}
.character-wrap[data-pose="celebrate"]{animation-duration:3.7s}
.character-wrap[data-pose="timeline"]{animation-duration:4.4s}

.character-svg{width:100%;height:100%;overflow:visible}
.hand-right,.prop-layer,.face-layer,.glass-layer,.confetti-layer{transform-origin:center;transform-box:fill-box}
.character-wrap[data-pose="hero"] .hand-right{animation:handHero 3.4s ease-in-out infinite}
.character-wrap[data-pose="explain"] .hand-right{animation:handExplain 2.8s ease-in-out infinite}
.character-wrap[data-pose="timeline"] .hand-right{animation:handLaptop 3.1s ease-in-out infinite}
.character-wrap[data-pose="celebrate"] .hand-right{animation:handCelebrate 2.7s ease-in-out infinite}
.character-wrap[data-pose="cool"] .glass-layer{display:block}
.character-wrap[data-pose="cool"] .hand-right{animation:thumbs 3.2s ease-in-out infinite}
.character-wrap[data-pose="hero"] .prop-card,
.character-wrap[data-pose="cool"] .prop-card,
.character-wrap[data-pose="timeline"] .prop-card{display:none}
.character-wrap[data-pose="hero"] .prop-laptop,
.character-wrap[data-pose="cool"] .prop-laptop,
.character-wrap[data-pose="celebrate"] .prop-laptop,
.character-wrap[data-pose="explain"] .prop-laptop{display:none}
.character-wrap[data-pose="celebrate"] .prop-card{display:block}
.character-wrap[data-pose="explain"] .prop-card{display:block}
.character-wrap[data-pose="timeline"] .prop-laptop{display:block}
.character-wrap[data-pose="hero"] .confetti-layer,
.character-wrap[data-pose="explain"] .confetti-layer,
.character-wrap[data-pose="timeline"] .confetti-layer{display:none}
.character-wrap[data-pose="celebrate"] .confetti-layer{display:block;animation:confetti 2.8s linear infinite}
.character-wrap[data-mood="wink"] .eye-right-open{display:none}
.character-wrap[data-mood="wink"] .eye-right-wink{display:block}
.character-wrap[data-mood="cool"] .glass-layer{display:block}
.character-wrap[data-mood="cool"] .eye-left-open,
.character-wrap[data-mood="cool"] .eye-right-open,
.character-wrap[data-mood="cool"] .eye-right-wink{opacity:0}
.character-wrap[data-mood="happy"] .mouth-smile{display:none}
.character-wrap[data-mood="happy"] .mouth-happy{display:block}
.eye-right-wink,.glass-layer,.mouth-happy{display:none}

.floating-chips{position:absolute;inset:0;pointer-events:none;z-index:1}
.floating-chips span{
  position:absolute;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#334155;font-size:12px;font-weight:700;letter-spacing:.04em;box-shadow:var(--shadow);
  animation:chipFloat 6s ease-in-out infinite;
}
.floating-chips span:nth-child(1){left:9%;top:13%}
.floating-chips span:nth-child(2){right:18%;top:18%;animation-delay:.4s}
.floating-chips span:nth-child(3){left:12%;bottom:18%;animation-delay:.9s}
.floating-chips span:nth-child(4){right:8%;bottom:14%;animation-delay:1.2s}
.floating-chips span:nth-child(5){left:38%;top:12%;animation-delay:1.5s}
.floating-chips span:nth-child(6){right:42%;bottom:10%;animation-delay:1.8s}


.slide-future{background:
  radial-gradient(circle at 18% 18%, rgba(255,208,150,.34), transparent 26%),
  radial-gradient(circle at 50% 12%, rgba(255,255,255,.58), transparent 24%),
  radial-gradient(circle at 84% 82%, rgba(126,196,255,.22), transparent 26%),
  linear-gradient(140deg,#edf2ff 0%,#dfe8ff 34%,#d7e7ff 100%)}
.slide-future .slide-copy{color:#0f172a}
.slide-future .eyebrow{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.8);color:#334155}
.slide-future h2{color:#07153b;text-shadow:0 10px 28px rgba(255,255,255,.18)}
.slide-future .lead{color:rgba(15,23,42,.92);max-width:58ch}
.slide-future .story-bubble,.slide-future .source-note{background:rgba(255,255,255,.76);border-color:rgba(255,255,255,.82)}
.slide-future .story-text,.slide-future .source-note p{color:#0f172a}
.slide-future .story-meta,.slide-future .mini-card strong,.slide-future .source-note strong{color:#475569}
.slide-future .source-note a{color:#0f172a;font-weight:800;text-decoration-thickness:2px;text-underline-offset:3px}
.slide-future .floating-chips span{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.74);color:#475569}


.scroll-hint{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:35;
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;
  background:rgba(8,12,24,.28);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:rgba(255,255,255,.82);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.scroll-hint i{display:block;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:hint 1.7s ease-in-out infinite}

.error-page{
  min-height:100vh;display:grid;place-items:center;padding:32px;
  background:linear-gradient(180deg,#0b1020 0%,#111833 100%);
}
.error-card{
  width:min(100%,720px);padding:34px;border-radius:34px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);
}
.error-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#a5b4fc}
.error-card h1{max-width:none;margin-top:10px;color:#fff;font-size:clamp(2rem,6vw,4rem)}
.error-card p{font-size:1.08rem;line-height:1.75;color:rgba(255,255,255,.78);max-width:54ch}
.error-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-radius:18px;text-decoration:none;
  border:1px solid rgba(255,255,255,.18);font-weight:800;letter-spacing:.03em;transition:transform .22s ease, background .22s ease, border-color .22s ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);outline:none}
.btn-primary{background:#fff;color:#111827;border-color:#fff}
.btn-secondary{background:rgba(255,255,255,.09);color:#fff}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes handHero{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(0,-6px) rotate(-8deg)}}
@keyframes handExplain{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-4px,-8px) rotate(-12deg)}}
@keyframes handLaptop{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(4px,-6px) rotate(8deg)}}
@keyframes handCelebrate{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(2px,-16px) rotate(-14deg)}}
@keyframes thumbs{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(5px,-5px) rotate(12deg)}}
@keyframes confetti{0%{transform:translateY(-4px)}100%{transform:translateY(8px)}}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes hint{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(5px) rotate(45deg);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.18);opacity:1}}
@keyframes blobA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(30px,18px,0)}}
@keyframes blobB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-22px,-28px,0)}}

@media (max-width: 1024px){
  .slide-grid{grid-template-columns:1fr;gap:20px}
  .slide-copy{order:1}
  .slide-visual{order:2}
  .character-scene{width:min(100%,380px)}
}

@media (max-width: 720px){
  .slide-future h2{font-size:clamp(2.2rem,12vw,4rem)}
  .slide-future .lead{font-size:1rem;line-height:1.65}
  .app-badge{top:14px;padding:10px 14px;font-size:10px;letter-spacing:.11em}
  .chapter-nav{right:10px;gap:8px}
  .chapter-dot{width:38px;height:38px;border-radius:14px}
  .slide{padding-top:76px;padding-bottom:92px}
  h1,h2{max-width:12ch}
  .story-bubble{padding:20px 18px 16px;border-radius:28px}
  .story-text{min-height:7.2em}
  .card-row,.card-row-compact{grid-template-columns:1fr;max-width:none}
  .floating-chips span{font-size:11px;padding:8px 12px}
  .scroll-hint{bottom:12px;padding:10px 14px;font-size:10px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .slides{scroll-snap-type:y proximity}
  .pointer-aura,.floating-chips{display:none}
}

.slides::-webkit-scrollbar{display:none}
.story-bubble,.info-card,.mini-card,.source-note,.chapter-dot,.app-badge{will-change:transform}

@media (hover:none), (pointer:coarse){
  .slides{scroll-snap-type:y proximity}
  .pointer-aura{display:none}
  .ambient{filter:blur(42px);opacity:.54}
  .glass,.story-bubble,.app-badge,.chapter-dot,.scroll-hint{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .story-bubble:hover,.story-bubble:focus-visible,.chapter-dot:hover,.chapter-dot:focus-visible,.btn:hover,.btn:focus-visible{transform:none}
  .tilt-card{transform:none !important}
  .floating-chips span:nth-child(n+4){display:none}
}