/* =========================================================================
   1minai — landing page
   Brand tokens follow /style-guide.md. Fonts are self-hosted in assets/fonts.
   ========================================================================= */

@font-face{
  font-family:'Baloo 2';
  font-style:normal; font-weight:700;
  font-display:swap;
  src:url(assets/fonts/baloo2-700.woff2) format('woff2');
}
@font-face{
  font-family:'Nunito';
  font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url(assets/fonts/nunito-400-700.woff2) format('woff2');
}

/* ---------- tokens ---------- */

:root{
  /* cast palette — identical in both themes */
  --lav:#C9B6F0;
  --coral:#F08A8A;
  --mint:#A8DDC3;
  --sky:#9CC4E8;
  --graphite:#A8ADB8;
  --bulb:#F7C948;

  /* light ground */
  --bg:#F7F6F3;
  --bg-sunk:#F1EFE9;
  --card:#FFFFFF;
  --ink:#1E2235;
  --ink-2:#5A5E75;
  --ink-3:#8B90A6;
  --line:rgba(30,34,53,.10);
  --line-2:rgba(30,34,53,.16);
  --bulb-ink:#9A7106;
  --logo-ink:#1E2235;
  --logo-fil:#FFFFFF;
  --shadow-s:0 2px 8px rgba(30,34,53,.06);
  --shadow-m:0 12px 32px rgba(30,34,53,.09);
  --shadow-l:0 28px 64px rgba(30,34,53,.13);
  --orb-a:.42;
  --glow:none;

  /* rhythm */
  --wrap:1140px;
  --gut:clamp(20px,5vw,40px);
  --sec:clamp(88px,12vh,140px);
  --r-s:12px;
  --r-m:20px;
  --r-l:30px;
}

:root[data-theme="dark"]{
  --bg:#13162A;
  --bg-sunk:#0E1122;
  --card:#1E2340;
  --ink:#F4F3EF;
  --ink-2:#A8AECB;
  --ink-3:#767C9C;
  --line:rgba(244,243,239,.12);
  --line-2:rgba(244,243,239,.20);
  --bulb-ink:#F7C948;
  --logo-ink:#F4F3EF;
  --logo-fil:#1E2235;
  --shadow-s:0 2px 8px rgba(0,0,0,.30);
  --shadow-m:0 12px 32px rgba(0,0,0,.38);
  --shadow-l:0 28px 64px rgba(0,0,0,.50);
  --orb-a:.30;
  --glow:0 0 70px rgba(247,201,72,.14);
}

/* ---------- base ---------- */

*,*::before,*::after{box-sizing:border-box}

/* .btn is display:inline-flex, which would otherwise beat the [hidden] default */
[hidden]{display:none !important}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .45s ease,color .45s ease;
}

h1,h2,h3,.display{
  font-family:'Baloo 2','Nunito',sans-serif;
  font-weight:700;
  line-height:1.12;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.005em;
}

p{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit}

::selection{background:var(--bulb);color:#1E2235}

:focus-visible{outline:3px solid var(--bulb);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bulb-ink);
}

.lede{color:var(--ink-2);max-width:46ch}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--card);color:var(--ink);padding:12px 20px;border-radius:0 0 var(--r-s) 0;
  box-shadow:var(--shadow-m);font-weight:700;
}
.skip-link:focus{left:0}

/* =========================================================================
   parallax backdrop
   ========================================================================= */

.backdrop{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.orb{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:var(--orb-a);
  will-change:transform;
  transition:opacity .45s ease;
}
/* The backdrop is position:fixed, so every orb must sit inside the viewport box —
   depth (set in the markup) is what sweeps them around as the page scrolls.
   Mixed signs keep the composition changing rather than sliding as one sheet. */
.orb-1{width:44vmax;height:44vmax;left:-14vmax;top:-12vmax;background:var(--lav)}
.orb-2{width:34vmax;height:34vmax;right:-12vmax;top:14vmax;background:var(--mint)}
.orb-3{width:38vmax;height:38vmax;left:2vmax;top:44vmax;background:var(--sky)}
.orb-4{width:30vmax;height:30vmax;right:-8vmax;top:56vmax;background:var(--coral)}
/* yellow reads hotter than the pastels at the same alpha — hold it back */
.orb-5{width:26vmax;height:26vmax;left:26vmax;top:-6vmax;background:var(--bulb);
       opacity:calc(var(--orb-a) * .55)}

.grain{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(var(--line) .6px,transparent .6px);
  background-size:22px 22px;
}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.35}

/* =========================================================================
   chrome — progress, bulb, dot nav
   ========================================================================= */

.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;
  background:transparent;transform-origin:0 50%;
}
.progress span{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--lav),var(--bulb));
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

.bulb-btn{
  position:fixed;top:20px;right:20px;z-index:70;
  width:54px;height:54px;border-radius:50%;padding:0;
  border:1.5px solid var(--line-2);
  background:var(--card);box-shadow:var(--shadow-m);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .2s cubic-bezier(.2,1.4,.4,1),border-color .2s;
}
.bulb-btn:hover{transform:scale(1.09) rotate(-8deg);border-color:var(--bulb)}
.bulb-btn:active{transform:scale(.96)}
.bulb-btn svg{width:26px;height:26px}
.bulb-btn .glass{fill:var(--bulb);transition:fill .35s}
.bulb-btn .rays{stroke:var(--bulb);transition:opacity .35s}
.bulb-btn .base{fill:var(--ink);opacity:.5}
:root[data-theme="dark"] .bulb-btn .glass{fill:#3D4370}
:root[data-theme="dark"] .bulb-btn .rays{opacity:0}

.dotnav{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:60;
  display:grid;gap:16px;
}
@media (max-width:1080px){ .dotnav{display:none} }
.dotnav a{
  display:block;width:9px;height:9px;border-radius:50%;
  background:var(--line-2);position:relative;
  transition:background .25s,transform .25s;
}
.dotnav a::after{
  content:attr(data-label);
  position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink-2);background:var(--card);border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;box-shadow:var(--shadow-s);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.dotnav a:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.dotnav a:hover{background:var(--ink-3)}
.dotnav a[aria-current="true"]{background:var(--bulb);transform:scale(1.5)}

/* =========================================================================
   section rhythm + reveal
   ========================================================================= */

section{padding-block:var(--sec);position:relative}
.sec-head{display:grid;gap:14px;max-width:52ch}
.sec-head h2{font-size:clamp(1.85rem,4.4vw,3rem)}

.rv{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--d,0) * 80ms);
}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* =========================================================================
   hero
   ========================================================================= */

.hero{
  min-height:100svh;padding-block:clamp(90px,14vh,140px) clamp(84px,12vh,120px);
  display:grid;align-content:center;position:relative;
}
.hero .wrap{display:grid;justify-items:center;gap:26px;text-align:center}

.wm{
  width:min(500px,80%);height:auto;
  filter:drop-shadow(var(--shadow-m));
}
.wm-l{transform-box:fill-box;transform-origin:50% 100%}
.wm-one{fill:var(--lav)}
.wm-m{fill:var(--graphite)}
.wm-dot{fill:var(--logo-ink)}
.wm-n{fill:var(--coral)}
.wm-a{fill:var(--mint)}
.wm-i{fill:var(--sky)}

/* letter-drop, mirroring the brand-intro end card */
.js .wm-l{animation:drop .62s cubic-bezier(.18,1.2,.35,1) both;animation-delay:calc(var(--i) * 85ms + 120ms)}
.js .wm-bulb{animation:pop .5s cubic-bezier(.2,1.7,.4,1) both;animation-delay:660ms;transform-box:fill-box;transform-origin:50% 90%}
@keyframes drop{
  from{opacity:0;transform:translateY(-38%) scaleY(1.14)}
  60%{opacity:1}
  to{opacity:1;transform:none}
}
@keyframes pop{
  from{opacity:0;transform:scale(.3)}
  to{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .js .wm-l,.js .wm-bulb{animation:none}
}

.hero h1{
  /* 7.4vw so the nowrap swipe line still clears the gutters on a 320px phone */
  font-size:clamp(1.6rem,7.4vw,3.2rem);max-width:16ch;
}
/* the brand's yellow swipe: navy text on solid bulb yellow, both themes */
.hero h1 .beat{
  color:#1E2235;position:relative;white-space:nowrap;
  padding:0 .16em;margin:0 -.06em;
}
.hero h1 .beat::before{
  content:"";position:absolute;inset:.1em 0 .06em;
  background:var(--bulb);border-radius:.14em;z-index:-1;
  transform:scaleX(0);transform-origin:0 50%;
  animation:swipe .55s cubic-bezier(.2,.8,.3,1) both 1.05s;
}
@keyframes swipe{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){ .hero h1 .beat::before{animation:none;transform:none} }

.hero .sub{color:var(--ink-2);max-width:44ch;font-size:1.06rem}

.hero-cast{
  display:flex;gap:clamp(10px,2.4vw,22px);align-items:center;justify-content:center;
  margin-top:6px;
}
.hero-cast img{
  width:clamp(44px,6vw,64px);height:clamp(44px,6vw,64px);
  border-radius:50%;object-fit:cover;
  border:3px solid var(--card);box-shadow:var(--shadow-m),var(--glow);
  will-change:transform;
}
.hero-cast img:nth-child(1){object-position:50% 40%}
.hero-cast img:nth-child(2){object-position:50% 34%}
.hero-cast img:nth-child(3){object-position:50% 26%}
.hero-cast img:nth-child(4){object-position:50% 40%}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Nunito',sans-serif;font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .2s cubic-bezier(.2,1.3,.4,1),box-shadow .2s,background .2s,border-color .2s;
}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{
  background:var(--bulb);color:#1E2235;box-shadow:var(--shadow-m);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.btn-primary:active{transform:translateY(-1px)}
.btn-ghost{
  background:transparent;color:var(--ink);border-color:var(--line-2);
}
.btn-ghost:hover{border-color:var(--ink-3);transform:translateY(-3px)}

.scroll-cue{
  position:absolute;left:50%;bottom:clamp(24px,5vh,48px);transform:translateX(-50%);
  display:grid;justify-items:center;gap:8px;
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);
}
.scroll-cue i{
  display:block;width:1.5px;height:34px;background:linear-gradient(var(--ink-3),transparent);
  animation:cue 1.9s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){ .scroll-cue i{animation:none} }

/* =========================================================================
   the minute — 60s ring
   ========================================================================= */

.minute .wrap{display:grid;justify-items:center;gap:18px;text-align:center}
.minute .sec-head{justify-items:center;text-align:center}

.ring-wrap{position:relative;width:min(260px,64vw);aspect-ratio:1;margin-top:14px}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:var(--line);stroke-width:11}
.ring .fill{
  fill:none;stroke:var(--bulb);stroke-width:11;stroke-linecap:round;
  filter:drop-shadow(0 0 12px rgba(247,201,72,.45));
}
.ring-label{position:absolute;inset:0;display:grid;place-content:center;gap:4px;text-align:center}
#clock{
  font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:clamp(2.4rem,7vw,3.2rem);line-height:1;
  font-variant-numeric:tabular-nums;
}
.ring-cap{font-size:.8rem;color:var(--ink-2);max-width:15em;margin-inline:auto;text-wrap:balance}

.minute-done{
  max-width:34ch;font-size:1.05rem;
  animation:pop .5s cubic-bezier(.2,1.6,.4,1) both;
}
.minute-done strong{font-family:'Baloo 2',sans-serif;color:var(--bulb-ink)}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:65}

/* =========================================================================
   pillars + cast
   ========================================================================= */

.cast-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);
  margin-top:clamp(38px,6vw,60px);
}
@media (max-width:820px){ .cast-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .cast-grid{grid-template-columns:1fr} }

.host{
  --hue:var(--lav);
  position:relative;text-align:left;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-l);
  padding:22px 20px 20px;cursor:pointer;
  font:inherit;color:inherit;
  box-shadow:var(--shadow-s);
  display:grid;gap:12px;align-content:start;
  transition:transform .28s cubic-bezier(.2,1.1,.4,1),box-shadow .28s,border-color .28s;
  overflow:hidden;
}
.host::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--hue);
}
.host:hover,.host[aria-expanded="true"]{
  transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:var(--hue);
}
.host-b{--hue:var(--lav)}
.host-p{--hue:var(--coral)}
.host-k{--hue:var(--graphite)}
.host-g{--hue:var(--mint)}

.host .pic{
  width:74px;height:74px;border-radius:50%;overflow:hidden;
  border:3px solid var(--hue);box-shadow:var(--shadow-s);
  transition:transform .28s cubic-bezier(.2,1.3,.4,1);
}
.host:hover .pic,.host[aria-expanded="true"] .pic{transform:scale(1.06) rotate(-4deg)}
.host .pic img{width:100%;height:100%;object-fit:cover}
.host-b .pic img{object-position:50% 40%}
.host-p .pic img{object-position:50% 26%}
.host-k .pic img{object-position:50% 34%}
.host-g .pic img{object-position:50% 40%}

.host .name{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.3rem;line-height:1}
.host .pillar{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
}
.host .role{color:var(--ink-2);font-size:.92rem;line-height:1.55}

.host .quote{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.2,.8,.3,1),opacity .3s;
  opacity:0;
}
.host[aria-expanded="true"] .quote{grid-template-rows:1fr;opacity:1}
.host .quote > span{
  overflow:hidden;display:block;font-size:.92rem;line-height:1.55;
  color:var(--ink);border-left:3px solid var(--hue);padding-left:12px;
}
.host .more{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:6px;
}
.host .more::after{content:"+";font-size:1rem;line-height:1;transition:transform .3s}
.host[aria-expanded="true"] .more::after{transform:rotate(45deg)}

.cast-note{margin-top:22px;font-size:.9rem;color:var(--ink-3);max-width:56ch}

/* =========================================================================
   curriculum
   ========================================================================= */

.spine-stats{
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);
  margin-top:34px;padding-top:26px;border-top:1.5px solid var(--line);
}
.stat{display:grid;gap:2px}
.stat b{
  font-family:'Baloo 2',sans-serif;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1;
  color:var(--ink);
}
.stat span{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

.part-panel{
  margin-top:26px;background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r-l);padding:clamp(22px,3.4vw,36px);box-shadow:var(--shadow-m);
  margin-top:clamp(30px,4.6vw,46px);
}
.part-panel h3{font-size:clamp(1.25rem,2.6vw,1.65rem);margin-bottom:6px}
.part-panel .part-sum{color:var(--ink-2);font-size:.96rem;max-width:62ch}
.ep-list{
  list-style:none;margin:26px 0 0;padding:0;
  /* min() stops the 290px track forcing horizontal overflow on narrow phones */
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));
  gap:2px 26px;
}
.ep-list li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--line);
}
.ep-list li .n{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.86rem;
  color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:2.1ch;
}
.ep-list li .t{font-size:.95rem;line-height:1.5}
.ep-list li.live .n{color:var(--bulb-ink)}
.ep-list li.live .t::after{
  display:inline-block;white-space:nowrap;
  content:"live";margin-left:9px;font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#1E2235;background:var(--bulb);
  padding:2px 8px;border-radius:999px;vertical-align:2px;
}
.ep-list li .t a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--line-2)}
.ep-list li .t a:hover{border-bottom-color:var(--bulb)}
.ep-list li.next .n,.ep-list li.next .t{color:var(--ink-3)}
.ep-list li.next .t::after{
  display:inline-block;white-space:nowrap;
  content:"up next";margin-left:9px;font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);border:1.5px solid var(--line-2);
  padding:1px 8px;border-radius:999px;vertical-align:2px;
}

/* =========================================================================
   languages
   ========================================================================= */

.lang .wrap{display:grid;justify-items:center;text-align:center;gap:18px}
.lang .sec-head{justify-items:center;text-align:center}

.lang-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.lang-chip{
  font:inherit;font-weight:700;font-size:.9rem;
  background:var(--card);color:var(--ink-2);
  border:1.5px solid var(--line-2);border-radius:999px;padding:9px 18px;cursor:pointer;
  transition:transform .22s cubic-bezier(.2,1.2,.4,1),border-color .22s,color .22s,background .22s;
}
.lang-chip:hover{transform:translateY(-3px);color:var(--ink);border-color:var(--ink-3)}
.lang-chip[aria-selected="true"]{
  background:var(--bulb);color:#1E2235;border-color:var(--bulb);
}

.lang-line{
  margin-top:30px;min-height:4.2em;display:grid;place-content:center;
}
#tagline{
  /* CJK falls through to the platform's Noto/Hiragino/PingFang — no 5 MB webfont on a landing page */
  font-family:'Baloo 2','Noto Sans TC','Noto Sans JP','PingFang HK','PingFang SC',
              'Hiragino Sans','Microsoft JhengHei',sans-serif;
  font-weight:700;
  font-size:clamp(1.5rem,4.2vw,2.5rem);line-height:1.25;max-width:18ch;
  transition:opacity .26s ease,transform .26s ease;
}
#tagline.swap{opacity:0;transform:translateY(10px)}
.lang-note{font-size:.86rem;color:var(--ink-3);max-width:48ch}

/* =========================================================================
   follow
   ========================================================================= */

.follow .wrap{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-l);
  padding:clamp(38px,6vw,72px) clamp(24px,5vw,64px);
  box-shadow:var(--shadow-l);
  display:grid;justify-items:center;text-align:center;gap:18px;
  max-width:calc(var(--wrap) - 2 * var(--gut));
  position:relative;overflow:hidden;
}
.follow .wrap::before{
  content:"";position:absolute;inset:auto -20% -60% -20%;height:70%;
  background:radial-gradient(ellipse at 50% 100%,var(--bulb),transparent 70%);
  opacity:.16;pointer-events:none;
}
.follow h2{font-size:clamp(1.9rem,4.6vw,3rem);max-width:16ch}
.handle{
  font-family:'Baloo 2',sans-serif;font-size:clamp(1.1rem,2.4vw,1.4rem);
  color:var(--ink-2);
}
.follow .btn-primary{font-size:1.06rem;padding:17px 32px}
.li-soon{font-size:.84rem;color:var(--ink-3)}

/* =========================================================================
   footer
   ========================================================================= */

footer{
  border-top:1.5px solid var(--line);
  padding-block:44px;
}
footer .wrap{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-size:.86rem;color:var(--ink-3);
}
footer .wm-mini{width:104px;height:auto;opacity:.9}
footer a{text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px}
footer a:hover{border-color:var(--bulb);color:var(--ink)}