/* ===== Extras: motion, depth, interactivity ===== */

/* Scroll progress + cursor glow */
.topbar{position:fixed;inset:0 0 auto 0;height:4px;z-index:80;background:linear-gradient(90deg,var(--purple-500),var(--lav),var(--gold));transform:scaleX(0);transform-origin:left;pointer-events:none}
.cursor-glow{position:fixed;left:0;top:0;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(168,110,230,.18),transparent 65%);opacity:0;transition:opacity .4s;will-change:transform}
.cursor-glow.on{opacity:1}
@media (hover:none){.cursor-glow{display:none}}

/* Hero canvas + shimmer */
#net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-grid{z-index:1}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.7em) rotate(3deg);animation:wordIn .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes wordIn{to{opacity:1;transform:none}}
.hero h1 em{background:linear-gradient(100deg,var(--lav),#fff,var(--gold),var(--lav));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite;padding-bottom:.08em}
.hero h1 em .w{background:inherit;-webkit-background-clip:text;background-clip:text}
@keyframes shimmer{to{background-position:-250% 0}}
.hero-visual{perspective:1000px}
.glass{transform:rotate(1.5deg) rotateX(var(--px,0deg)) rotateY(var(--py,0deg));transition:transform .25s ease-out;will-change:transform}
.glass:hover{transform:rotateX(var(--px,0deg)) rotateY(var(--py,0deg)) translateY(-4px)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.glass{position:relative}
.float-chip{position:absolute;padding:10px 16px;border-radius:14px;background:#fff;color:var(--purple-900);font-weight:700;font-size:.82rem;box-shadow:0 18px 36px -14px rgba(0,0,0,.5);animation:bob 5s ease-in-out infinite;display:flex;gap:8px;align-items:center}
.float-chip i{width:9px;height:9px;border-radius:50%;background:#34c27a;box-shadow:0 0 0 4px rgba(52,194,122,.2)}
.float-chip.c1{top:-14px;left:-26px}
.float-chip.c2{bottom:56px;right:-22px;animation-delay:-2.5s}
.float-chip.c2 i{background:var(--gold);box-shadow:0 0 0 4px rgba(232,194,106,.3)}
@keyframes bob{50%{transform:translateY(-10px)}}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:26px;height:42px;border:2px solid rgba(255,255,255,.4);border-radius:20px;transform:translateX(-50%);z-index:1}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Marquee */
.marquee{background:var(--gold);color:var(--purple-900);overflow:hidden;transform:rotate(-1.2deg);margin:-34px -2% 0;position:relative;z-index:3;box-shadow:0 20px 40px -20px rgba(0,0,0,.45)}
.marquee-track{display:flex;width:max-content;animation:scrollx 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;padding:16px 28px;white-space:nowrap;display:flex;align-items:center;gap:56px}
.marquee span::after{content:"\2726";font-size:.9rem;color:var(--purple-600)}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* Tilt cards */
.card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .2s ease-out,box-shadow .3s,border-color .3s,opacity .8s cubic-bezier(.2,.7,.2,1);will-change:transform}
.card:hover,.card[aria-expanded="true"]{--ty:-6px}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(168,110,230,.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::after{opacity:1}
.ico{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.card:hover .ico{transform:rotate(-8deg) scale(1.12)}

/* Quiz */
.quiz{background:radial-gradient(800px 400px at 90% 0%,rgba(217,184,255,.35),transparent 60%),var(--paper)}
.quiz-card{background:#fff;border-radius:28px;padding:40px;box-shadow:var(--shadow);border:1px solid #ece4f4;position:relative;overflow:hidden}
.quiz-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--purple-600),var(--gold))}
.q-dots{display:flex;gap:8px;margin-bottom:24px}
.q-dots i{height:6px;flex:1;border-radius:6px;background:#eadff5;transition:background .4s}
.q-dots i.on{background:var(--purple-600)}
.q-step{animation:slideIn .5s cubic-bezier(.2,.8,.2,1)}
.q-step[hidden]{display:none}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}}
.q-step h3{font-size:1.7rem;margin-bottom:6px}
.hint{color:var(--muted);margin-bottom:22px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
.opts.one{grid-template-columns:1fr}
.opt{font:inherit;font-weight:700;text-align:left;padding:18px 18px 18px 56px;border-radius:16px;border:2px solid #e6dcef;background:#fdfbff;cursor:pointer;position:relative;color:var(--ink);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.opt::before{content:"";position:absolute;left:18px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;border:2px solid #c9b5dd;transition:all .2s}
.opts:not(.one) .opt::before{border-radius:8px}
.opt:hover{transform:translateY(-3px);border-color:var(--purple-500);box-shadow:0 14px 26px -16px rgba(78,36,120,.5)}
.opt.sel{border-color:var(--purple-600);background:#f4ecfb}
.opt.sel::before{background:var(--purple-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/80% no-repeat;border-color:var(--purple-600)}
.opt small{display:block;font-weight:500;color:var(--muted);font-size:.82rem}
.q-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn[disabled]{opacity:.45;pointer-events:none}
.res-list{list-style:none;display:grid;gap:12px;margin:18px 0 24px}
.res-list li{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:16px;background:#f7f0fc;animation:slideIn .5s both}
.res-list b{font-family:'Fraunces',serif;font-size:1.1rem;display:block}
.res-list span.n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font-weight:800;color:var(--purple-900)}

/* Nav active + magnetic */
.links a.active:not(.btn)::after{width:100%}
.links a.active:not(.btn){opacity:1;color:var(--gold)}
.magnetic{transition:transform .2s ease-out,box-shadow .2s,background .2s}

/* Section flourishes */
.sec-head h2::after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin:16px auto 0;background:linear-gradient(90deg,var(--purple-600),var(--gold));transform:scaleX(0);transition:transform .8s .3s cubic-bezier(.2,.8,.2,1)}
.sec-head.in h2::after{transform:scaleX(1)}
.steps li:hover .num{transform:scale(1.15) rotate(-6deg)}
.num{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.checklist{transition:box-shadow .4s}
.checklist.done{box-shadow:0 0 0 3px var(--gold),var(--shadow)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:120}

@media (max-width:860px){
  .glass,.glass:hover{transform:none}
  .float-chip{display:none}
  .marquee{margin-top:-20px}
  .opts{grid-template-columns:1fr}
  .quiz-card{padding:26px}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .w{opacity:1;transform:none}
  .marquee-track{animation:none}
  .cursor-glow,#net{display:none}
}