/* ===========================================================================
   AP Course — student-facing styles.
   Two themes, one set of variables. Everything animated respects
   prefers-reduced-motion, because some students genuinely cannot take it.
   =========================================================================== */

:root{
  --v1:#7c5cff;   /* violet  */
  --v2:#00d4ff;   /* cyan    */
  --v3:#ffd166;   /* gold    */
  --v4:#ff5d8f;   /* pink    */
  --ok:#3ddc84;
  --no:#ff5f56;

  --bg:#07080f;
  --bg2:#0d0f1d;
  --surf:rgba(255,255,255,.045);
  --surf2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --fg:#eceefb;
  --dim:#9ba0c8;
  --shadow:0 18px 50px -18px rgba(0,0,0,.8);
  --glow:0 0 0 1px rgba(124,92,255,.35), 0 12px 40px -12px rgba(124,92,255,.55);
  --r:18px;
  --ease:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"]{
  --bg:#f4f5ff;
  --bg2:#ffffff;
  --surf:rgba(20,22,45,.035);
  --surf2:rgba(20,22,45,.06);
  --line:rgba(20,22,45,.11);
  --fg:#131530;
  --dim:#5e638c;
  --shadow:0 18px 50px -22px rgba(60,50,140,.35);
  --glow:0 0 0 1px rgba(124,92,255,.30), 0 14px 40px -14px rgba(124,92,255,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Inter",sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;
  transition:background .45s var(--ease), color .45s var(--ease);
}

/* the drifting charges behind everything */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}

/* ------------------------------------------------------------------ header */
header#top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.1em;
  padding:.9em clamp(1rem,4vw,2.6rem);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.5em;text-decoration:none;color:var(--fg);font-weight:800;letter-spacing:-.02em}
.brand .bolt{font-size:1.15rem;display:inline-block;animation:zap 5s var(--ease) infinite}
@keyframes zap{0%,86%,100%{transform:rotate(0) scale(1)}90%{transform:rotate(-12deg) scale(1.25)}94%{transform:rotate(9deg) scale(1.15)}}
.spacer{flex:1}
#crumbs{color:var(--dim);font-size:.86rem;display:flex;gap:.45em;align-items:center;flex-wrap:wrap}
#crumbs a{color:var(--dim);text-decoration:none;transition:color .2s}
#crumbs a:hover{color:var(--v2)}

/* theme toggle */
.tog{
  position:relative;width:44px;height:44px;border-radius:14px;cursor:pointer;
  background:var(--surf);border:1px solid var(--line);color:var(--fg);
  display:grid;place-items:center;transition:.3s var(--ease);
}
.tog:hover{background:var(--surf2);transform:translateY(-2px) rotate(-6deg)}
.tog svg{position:absolute;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
         stroke-linecap:round;transition:.5s var(--ease)}
.tog .sun{opacity:0;transform:rotate(-90deg) scale(.4)}
.tog .moon{opacity:1;transform:rotate(0) scale(1);fill:currentColor;stroke:none}
:root[data-theme="light"] .tog .sun{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .tog .moon{opacity:0;transform:rotate(90deg) scale(.4)}
.tog .rays{transform-origin:12px 12px;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

main{flex:1;position:relative;z-index:1}
.pad{max-width:1120px;margin:0 auto;width:100%;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2.6rem)}
.pad.narrow{max-width:600px}
.pad.top{padding-top:clamp(2.5rem,7vw,5rem)}

/* -------------------------------------------------------------------- hero */
.hero{
  max-width:1180px;margin:0 auto;width:100%;
  padding:clamp(2.5rem,8vw,6rem) clamp(1rem,4vw,2.6rem) clamp(2rem,6vw,4rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .heroArt{order:-1;max-width:420px}
}

/* the Envato plasma shot, floated and framed */
.heroArt{position:relative;border-radius:26px;overflow:visible}
.heroArt picture{display:block;border-radius:26px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(124,92,255,.75), 0 0 0 1px var(--line);
  animation:float 9s var(--ease) infinite;transform-origin:center;}
.heroArt img{display:block;width:100%;height:auto;
  /* the source is dark-on-black; lift it a touch on the light theme */
  transition:filter .45s var(--ease)}
:root[data-theme="light"] .heroArt img{filter:saturate(1.12) contrast(1.04)}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(-.6deg)}
  50%{transform:translateY(-16px) rotate(.5deg)}
}
.heroArt:after{
  content:"";position:absolute;inset:-14% -10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(124,92,255,.42),transparent 72%);
  filter:blur(28px);animation:breathe 7s var(--ease) infinite;
}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

/* little sparks orbiting the frame */
.spark{position:absolute;width:9px;height:9px;border-radius:50%;pointer-events:none;
       background:var(--v2);box-shadow:0 0 14px 3px var(--v2);opacity:.9}
.spark.s1{top:-6px;left:16%;animation:drift1 6.5s var(--ease) infinite}
.spark.s2{bottom:-5px;right:22%;background:var(--v4);box-shadow:0 0 14px 3px var(--v4);
          animation:drift2 8s var(--ease) infinite}
.spark.s3{top:38%;right:-7px;background:var(--v3);box-shadow:0 0 14px 3px var(--v3);
          animation:drift3 7.2s var(--ease) infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);opacity:.9}50%{transform:translate(22px,14px) scale(1.5);opacity:.35}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.2);opacity:.75}50%{transform:translate(-26px,-16px) scale(.8);opacity:1}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);opacity:.85}50%{transform:translate(-14px,26px) scale(1.4);opacity:.4}}
.eyebrow{
  color:var(--v2);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:700;
  margin-bottom:1.1em;
}
.display{
  font-size:clamp(2.4rem,8.5vw,6.2rem);line-height:.95;letter-spacing:-.045em;font-weight:800;
}
.display span{display:block}
.display.sm{font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.05}
.display.xs{font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.15;letter-spacing:-.03em}
.shimmer{
  background:linear-gradient(100deg,var(--v1) 0%,var(--v2) 32%,var(--v3) 58%,var(--v4) 82%,var(--v1) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:slide 9s linear infinite;
  /* background-clip:text crops to the box, so descenders on y/g need headroom */
  padding-bottom:.12em;margin-bottom:-.12em;
}
@keyframes slide{to{background-position:280% 0}}
.lede{color:var(--dim);font-size:clamp(1rem,1.9vw,1.28rem);line-height:1.6;max-width:46ch;margin-top:1.4em}

.cta{
  display:inline-flex;align-items:center;gap:.6em;margin-top:2.2em;
  padding:.95em 1.7em;border-radius:99px;text-decoration:none;border:0;cursor:pointer;
  font-size:1rem;font-weight:700;color:#0a0b14;
  background:linear-gradient(100deg,var(--v2),var(--v1));
  box-shadow:0 10px 34px -10px rgba(124,92,255,.75);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .2s;
}
.cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 46px -12px rgba(124,92,255,.9);filter:brightness(1.06)}
.cta:active{transform:translateY(-1px) scale(.99)}
.cta.full{width:100%;justify-content:center;margin-top:.3em}
.cta:disabled{opacity:.65;cursor:progress}
.cta .arr{display:inline-block;animation:bob 1.9s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.stats{display:flex;gap:2.4em;margin-top:3.4em;flex-wrap:wrap}
.stat b{display:block;font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;
        background:linear-gradient(120deg,var(--v2),var(--v1));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--dim);font-size:.82rem;text-transform:uppercase;letter-spacing:.13em;font-weight:600}

.sec{font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:-.02em;margin-bottom:.2em}

/* ------------------------------------------------------------- course grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.3em;margin-top:1.8em}
.card{
  position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6em 1.6em 1.4em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  transform-style:preserve-3d;
}
.card:before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgba(124,92,255,.22), transparent 62%);
}
.card:hover{border-color:transparent;box-shadow:var(--glow),var(--shadow)}
.card:hover:before{opacity:1}
.card .ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;
  margin-bottom:1.1em;background:linear-gradient(135deg,var(--v1),var(--v2));
  box-shadow:0 8px 24px -8px rgba(124,92,255,.7);
  transition:transform .4s var(--ease);
}
.card:hover .ico{transform:rotate(-10deg) scale(1.1)}
.card h3{font-size:1.2rem;letter-spacing:-.02em;line-height:1.25;position:relative}
.card p{color:var(--dim);font-size:.9rem;margin-top:.4em;position:relative}
.card .bar{height:5px;border-radius:99px;background:var(--surf2);margin-top:1.5em;overflow:hidden;position:relative}
.card .bar i{display:block;height:100%;border-radius:99px;width:0;
             background:linear-gradient(90deg,var(--v2),var(--v1));transition:width 1.1s .25s var(--ease)}
.card .cnt{display:block;color:var(--dim);font-size:.78rem;margin-top:.7em;position:relative;font-weight:600}

/* ------------------------------------------------------------ session list */
.sessions{list-style:none;margin-top:2em;display:flex;flex-direction:column;gap:.7em}
.sessions li{opacity:0;transform:translateY(14px);animation:rise .6s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
.sessions a,.sessions .row{
  display:flex;align-items:center;gap:1.1em;text-decoration:none;color:inherit;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:1.1em 1.3em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.sessions a:hover{transform:translateX(6px);border-color:transparent;box-shadow:var(--glow)}
.sessions .n{
  flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  font-weight:800;font-size:1rem;color:#0a0b14;
  background:linear-gradient(135deg,var(--v2),var(--v1));
  transition:transform .35s var(--ease);
}
.sessions a:hover .n{transform:rotate(-8deg) scale(1.08)}
.sessions .meta{flex:1;min-width:0}
.sessions .meta strong{display:block;font-size:1.03rem;letter-spacing:-.01em}
.sessions .meta span{color:var(--dim);font-size:.84rem}
.sessions .tag{flex:0 0 auto;font-size:.74rem;font-weight:700;padding:.4em .8em;border-radius:99px;white-space:nowrap}
.tag.open{background:rgba(61,220,132,.14);color:var(--ok)}
.tag.soon{background:var(--surf2);color:var(--dim)}
.sessions li.soon .row{opacity:.55}
.sessions li.soon .n{background:var(--surf2);color:var(--dim);box-shadow:none}

/* -------------------------------------------------------------------- gate */
.gate{
  background:var(--surf);border:1px solid var(--line);border-radius:26px;
  padding:clamp(1.8rem,5vw,3rem);text-align:center;box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.orb{
  width:82px;height:82px;margin:0 auto 1.4em;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--v1),var(--v2));font-size:2rem;
  box-shadow:0 0 0 0 rgba(124,92,255,.5);animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(124,92,255,.55)}
  70%{box-shadow:0 0 0 24px rgba(124,92,255,0)}
  100%{box-shadow:0 0 0 0 rgba(124,92,255,0)}
}
.gate .lede{margin-left:auto;margin-right:auto;margin-top:.7em}
.gate form{margin-top:2em;display:flex;flex-direction:column;gap:.8em;text-align:left}
.gate label{font-size:.82rem;color:var(--dim);font-weight:600}
.gate input{
  background:var(--bg2);border:2px solid var(--line);border-radius:14px;color:var(--fg);
  padding:1em 1.1em;font-size:1.3rem;letter-spacing:.14em;text-align:center;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;text-transform:uppercase;
  transition:border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.gate input::placeholder{letter-spacing:.1em;opacity:.35}
.gate input:focus{outline:none;border-color:var(--v1);box-shadow:0 0 0 5px rgba(124,92,255,.16);transform:scale(1.01)}
.err{
  color:var(--no);font-size:.88rem;background:rgba(255,95,86,.1);
  border:1px solid rgba(255,95,86,.35);border-radius:12px;padding:.75em .9em;
  animation:shake .42s var(--ease);
}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-7px)}}
.tiny{color:var(--dim);font-size:.76rem;line-height:1.5}
.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(0,0,0,.22);
         border-top-color:#0a0b14;border-radius:50%;animation:spin .7s linear infinite;margin-right:.55em}

/* ------------------------------------------------------------------ viewer
   main{} carries a z-index, which makes it a stacking context — a z-index on
   .viewer alone can never rise above the sticky header. So while the slides are
   open we simply take the page chrome away, which is what you want full-bleed
   anyway. */
body.viewing #top,
body.viewing #foot,
body.viewing #field{display:none}
body.viewing{overflow:hidden}

.viewer{position:fixed;inset:0;display:flex;flex-direction:column;background:#000;z-index:60;
        animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.vbar{display:flex;align-items:center;gap:.9em;padding:.55em 1em;flex:0 0 auto;
      background:var(--bg2);border-bottom:1px solid var(--line)}
.vbar .back{color:var(--dim);text-decoration:none;font-size:.87rem;transition:color .2s}
.vbar .back:hover{color:var(--v2)}
.vtitle{font-size:.9rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:10px;
       padding:.45em .8em;font-size:.79rem;cursor:pointer;transition:.2s}
.ghost:hover{border-color:var(--v1);color:var(--v1)}
.viewer iframe{flex:1;width:100%;border:0;background:#0d1117}

/* ------------------------------------------------------------------- misc */
footer#foot{
  position:relative;z-index:1;border-top:1px solid var(--line);color:var(--dim);font-size:.8rem;
  padding:1.4em clamp(1rem,4vw,2.6rem);display:flex;gap:.6em;flex-wrap:wrap;
}
.dot{opacity:.45}
.empty{color:var(--dim);background:var(--surf);border:1px dashed var(--line);border-radius:var(--r);
       padding:2.4em;text-align:center;margin-top:1.5em}

/* entrance */
.reveal{opacity:0;transform:translateY(22px);animation:rise .8s var(--ease) forwards;animation-delay:var(--d,0s)}

@media print{html,body{display:none!important}}

@media (max-width:640px){
  #crumbs{display:none}
  .stats{gap:1.6em}
  .sessions .tag{display:none}
}

/* Motion is decoration. If it is unwelcome, drop all of it. */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                     transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.sessions li{opacity:1;transform:none}
  .heroArt picture{transform:none}
  .spark{display:none}
  #field{display:none}
}