/* Bikin Motion v2 art direction for /motion-course. Load AFTER course.css.
   World: violet night sky + cloud-white islands, flowing ribbons = motion, illustrated planets/props,
   tilted colour cards, cloud section breaks, game-style pressable buttons. Illustrations: /assets/img/v2/. */
:root{
  --shadow-light:0 18px 40px -20px rgba(30,20,80,.42);
  --shadow-dark:0 26px 56px -22px rgba(8,3,36,.75);
  --rust:#5B34E0;
  --violet:#6A3CF0;
  --pink-soft:#FFD9EE;
  --mint-soft:#CDF7EB;
  --sun-deep:#C99400;
  --line-dark:rgba(185,166,255,.18);
  --z-deco:0;--z-content:1;--z-nav:50;
}

/* ---------- type ---------- */
body.course{font-size:18px;letter-spacing:.002em}
.course h1,.course h2,.course h3{font-family:var(--display);font-optical-sizing:auto;letter-spacing:-.025em}
.course h1{font-weight:800;font-size:clamp(40px,6.4vw,84px);line-height:.98}
.course h2{font-weight:800;font-size:clamp(32px,4.6vw,56px);line-height:1.02}
.course h3{font-weight:700;letter-spacing:-.015em}
.course .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6}
.course .navy .lead,.course .purple .lead{color:rgba(246,243,255,.86)}
.hand{font-family:var(--hand);font-weight:500}
.hl{color:var(--ink)}
.hl::before{background:var(--sun);border-radius:.3em;transform:rotate(-1.6deg);top:.12em;bottom:.04em}

/* The eyebrow is a deliberate brand system: an event-style sticker pill (one per section, never tiny tracked caps). */
.eyebrow{display:inline-flex;align-items:center;gap:8px;justify-self:center;font:700 15px/1 var(--display);letter-spacing:0;text-transform:none;
  color:#fff;background:var(--violet);padding:9px 16px 10px;border-radius:999px;box-shadow:0 4px 0 #4A23C4;margin-bottom:16px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 3px rgba(255,210,63,.3)}
.navy .eyebrow,.purple .eyebrow{color:var(--ink);background:var(--sun);box-shadow:0 4px 0 var(--sun-deep)}
.navy .eyebrow::before,.purple .eyebrow::before{background:var(--violet);box-shadow:0 0 0 3px rgba(106,60,240,.25)}
.head:not(.center) .eyebrow{justify-self:start}

/* ---------- buttons: pressable game buttons ---------- */
.btn{font:800 19px var(--display);letter-spacing:-.01em;padding:16px 30px 17px;box-shadow:0 6px 0 rgba(8,3,36,.35);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),filter .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(8,3,36,.35)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(8,3,36,.35)}
.btn.sun{background:var(--sun);color:var(--ink);box-shadow:0 6px 0 var(--sun-deep),0 14px 34px -10px rgba(255,210,63,.65)}
.btn.sun:hover{box-shadow:0 8px 0 var(--sun-deep),0 18px 44px -10px rgba(255,210,63,.8);filter:saturate(1.08)}
.btn.sun:active{box-shadow:0 2px 0 var(--sun-deep),0 8px 18px -10px rgba(255,210,63,.6)}
.btn.ghost{box-shadow:inset 0 0 0 2px rgba(246,243,255,.55)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px #fff;background:rgba(255,255,255,.08)}
.btn.sm{padding:10px 18px 11px;font-size:15px;box-shadow:0 4px 0 var(--sun-deep)}

/* ---------- surfaces ---------- */
.course .navy{background:radial-gradient(70% 55% at 50% 0%,rgba(106,60,240,.55),transparent 70%),radial-gradient(60% 50% at 100% 100%,rgba(255,122,192,.16),transparent 70%),linear-gradient(#1E1450,#170E44 70%,#140C3B)}
.course .cream{background:radial-gradient(60% 45% at 85% 10%,rgba(185,166,255,.35),transparent 70%),radial-gradient(50% 40% at 5% 90%,rgba(79,224,190,.18),transparent 70%),var(--cream)}
.course .purple{background:radial-gradient(70% 50% at 50% 30%,rgba(140,107,255,.5),transparent 70%),linear-gradient(#3A1E9E,#25106A)}
.course section > .wrap{position:relative;z-index:var(--z-content)}
.nav{background:rgba(23,14,68,.88)}
.nav a.l{font-weight:700}
.brandmark .bm svg,.bm .bm-svg{display:block;width:100%;height:100%}

/* cloud section breaks (JS draws them into .wave.cloud) */
.wave.cloud{height:clamp(54px,7.5vw,118px)}

/* floating illustrated props */
.props,.hero-sky{position:absolute;inset:0;pointer-events:none;z-index:var(--z-deco)}
.fl{position:absolute;height:auto;filter:drop-shadow(0 18px 30px rgba(8,3,36,.45));animation:flo var(--t,9s) ease-in-out infinite alternate}
@keyframes flo{from{transform:translateY(-8px) rotate(-4deg)}to{transform:translateY(10px) rotate(4deg)}}
.pr-a{top:clamp(70px,9vw,120px);left:2%;width:clamp(64px,8vw,124px);--t:8s}
.pr-b{right:1.5%;bottom:clamp(60px,10vw,150px);width:clamp(84px,11vw,170px);--t:11s}
@media (max-width:760px){.pr-a{left:-14px;opacity:.85}.pr-b{right:-26px;opacity:.85}}

/* ---------- 1. hero ---------- */
.hero{padding-top:clamp(40px,6vw,80px)!important}
.hero-sky .drench{position:absolute;left:-12%;right:-12%;top:-2px;height:min(78%,780px);background:radial-gradient(60% 70% at 50% 20%,#7B52FF,var(--violet) 60%,#5428D8);
  border-radius:0 0 46% 54% / 0 0 26% 34%;box-shadow:0 30px 80px -30px rgba(106,60,240,.8)}
.hero .copy{position:relative;z-index:2}
.hero h1{color:#fff;text-shadow:0 4px 0 rgba(43,14,140,.45)}
.hero h1 .hl{color:var(--ink);text-shadow:none}
.hero .lead{color:rgba(255,255,255,.9)}
.hero h1 .h1spark{color:var(--sun)}
.hero-hand{position:absolute;right:-4%;top:clamp(400px,45vw,690px);width:min(40vw,580px);height:auto;z-index:1;filter:drop-shadow(0 30px 40px rgba(20,8,70,.45));
  animation:handin 1.2s var(--ease-out) both}
.hero-gegi{position:absolute;left:-4%;top:clamp(440px,47vw,720px);width:min(30vw,420px);height:auto;z-index:1;animation:gegiin 1.4s .15s var(--ease-out) both}
@keyframes handin{from{transform:translate(8%,10%) rotate(6deg);opacity:0}to{transform:none;opacity:1}}
@keyframes gegiin{from{transform:translate(-12%,6%);opacity:0}to{transform:none;opacity:1}}
.hp1{top:8%;left:4%;width:clamp(70px,9vw,140px);--t:10s}
.hp2{top:40%;right:3%;width:clamp(60px,7vw,110px);--t:12s;z-index:0}
.hp3{top:3%;right:20%;width:clamp(80px,10vw,150px);--t:7s}
.studio{z-index:2}
.studio .win{box-shadow:0 0 0 1px rgba(185,166,255,.35),0 40px 80px -30px rgba(8,3,36,.9),0 0 120px -20px rgba(140,107,255,.55)}
.peek{width:118px;left:-46px;bottom:-34px}
.gegi{display:block;width:100%;height:auto;user-select:none}
.hero-hand-m{display:none}
@media (max-width:900px){
  .hero-hand{top:auto;bottom:clamp(300px,52vw,420px);width:min(48vw,420px);right:-8%}
  .hero-gegi{top:auto;bottom:clamp(330px,56vw,460px);width:min(36vw,300px);left:-7%}
}
@media (max-width:760px){
  .hero-hand,.hero-gegi{display:none}
  .hero-hand-m{display:block;position:relative;z-index:1;width:118%;max-width:none;height:auto;margin:-18px -16% -84px auto;filter:drop-shadow(0 24px 30px rgba(20,8,70,.45))}
  .hero .wrap{gap:14px}
}
@media (max-width:560px){.hero-gegi{display:none}.hp3{right:4%}.peek{width:84px;left:-12px;bottom:-24px}}

/* ---------- 2. tilted colour cards ---------- */
.why{gap:clamp(18px,2.4vw,30px);padding-block:10px 6px}
.why article{position:relative;border-radius:28px;padding:18px 20px 24px;background:#fff;color:var(--ink);box-shadow:var(--shadow-light);
  transform:rotate(var(--r,0deg));transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.why article:nth-child(1){--r:-2.5deg;background:#fff}
.why article:nth-child(2){--r:2deg;background:var(--pink-soft);margin-top:18px}
.why article:nth-child(3){--r:-1.5deg;background:var(--mint-soft)}
.why article:nth-child(4){--r:2.5deg;background:var(--navy);color:var(--cream);margin-top:22px}
.why article:hover{transform:rotate(0deg) translateY(-8px);box-shadow:0 30px 60px -24px rgba(30,20,80,.5)}
.why .spot{margin:-34px -6px 2px;aspect-ratio:1/0.82;display:grid;place-items:center}
.why .spot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(30,20,80,.25))}
.why h3{font-size:clamp(21px,2vw,25px)}
.why p{opacity:.85;font-size:16.5px}
.why article:nth-child(4) p{opacity:.88}
@media (max-width:980px){.why{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:46px}}
@media (max-width:560px){.why{grid-template-columns:1fr;row-gap:40px}.why article:nth-child(n){margin-top:0}.why .spot{aspect-ratio:1/.7}}

/* ---------- shared card polish on dark sections ---------- */
.navy .feat,.navy .viz,.stage,.askcard{border-radius:26px}
.navy .feat{box-shadow:0 0 0 1px rgba(185,166,255,.2),0 30px 60px -30px rgba(8,3,36,.9)}
.tabs button{font-family:var(--display);font-weight:700}
.navy .tabs button[aria-selected="true"]{box-shadow:0 4px 0 var(--sun-deep)}
.fitp{border-radius:30px}
details.faq{border-radius:20px}
details.faq[open]{background:var(--violet);box-shadow:0 6px 0 #4A23C4,0 26px 50px -24px rgba(106,60,240,.7)}
details.faq summary{font-family:var(--display);font-weight:700}

/* ---------- checkout: rainbow ribbon band (event-page stripes) ---------- */
.rainbow{position:absolute;left:0;top:clamp(-10px,-1vw,0px);width:100%;height:clamp(70px,9vw,130px)}
.rainbow path{fill:none;stroke-width:16;stroke-linecap:round}
.ck-section{padding-top:clamp(110px,13vw,170px)!important}

/* ---------- 10. finale ---------- */
.final{padding-bottom:0!important}
.final .mascot{width:clamp(150px,18vw,220px)}
.final-hands{position:relative;z-index:1;display:block;width:min(980px,104%);height:auto;margin:clamp(10px,3vw,30px) auto 0;transform:translateY(6%)}

@media (prefers-reduced-motion:reduce){.fl,.hero-hand,.hero-gegi{animation:none!important}.why article{transition:none}}