/* Kemne Ki? — dark canvas, live colour.
 *
 * Built on the ui-ux-pro-max system for "educational video channel, research backed,
 * trustworthy, mobile first", then pushed toward the antigravity.google feel the owner
 * asked for: a near-monochrome ground, very large type, and multi-colour light that
 * moves with the pointer.
 *
 * Three departures from the generated system, each for a reason it could not know:
 *
 *  1. Typography. It paired Crimson Pro with Atkinson Hyperlegible. Right mood, but
 *     neither face has Bengali glyphs and this site is Bangla-first. Anek Bangla carries
 *     the Bengali; Atkinson Hyperlegible is kept for Latin because it was drawn by the
 *     Braille Institute to make characters hard to confuse, which is the correct
 *     instinct for a project about explaining things plainly.
 *
 *  2. Dark ground rather than the light institutional palette. The owner asked for it,
 *     and colour reads as light on dark, which is what makes the aurora work at all.
 *
 *  3. Motion is limited to opacity, transform and background-position — properties the
 *     compositor animates without repainting. The audience is on cheap phones and
 *     metered data, so a beautiful page that drains a battery is a failed page.
 */

:root {
  /* The five hues the whole site borrows from. Saturated enough to read as colour on a
     dark ground, light enough to keep text above 4.5:1 when used as foreground. */
  --h-indigo: 235 89% 66%;
  --h-violet: 276 82% 68%;
  --h-cyan:   190 92% 60%;
  --h-amber:   38 95% 62%;
  --h-rose:   345 88% 66%;

  --bg:        #07090F;
  --bg-raised: #0E1220;
  /* Near-opaque, not a translucent white: text contrast must not depend on
     which hue the aurora happens to be showing behind it. */
  --surface:   #10162A;
  --fg:        #F2F5FB;
  --fg-muted:  #A9B6D0;
  --border:    rgba(255, 255, 255, .10);

  --font-bn: 'Anek Bangla', 'Noto Sans Bengali', system-ui, sans-serif;
  --font-en: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;

  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  /* clamp() rather than fixed sizes: Bengali sets wider than Latin, and a headline that
     fits on a laptop wraps into four lines on a 360px phone. */
  --step-4: clamp(2.2rem, 6.5vw, 4.4rem);

  --space-1: .5rem;  --space-2: 1rem;  --space-3: 1.5rem;
  --space-4: 2.5rem; --space-5: 4.5rem;

  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Pointer position, updated by script. Defaults put the light in the upper middle so
     the page looks deliberate before the mouse has moved, and on touch devices where it
     never will. */
  --mx: 50%;
  --my: 22%;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-bn);
  font-size: var(--step-0);
  /* Bengali conjuncts stack above and below the baseline; 1.5 crowds them. */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- the aurora ----
   Two fixed layers. The first drifts on its own so the page is alive when untouched;
   the second tracks the pointer. Both are behind everything and ignore input. */
body::before, body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
}

/* Sized and placed so every hue has a visible centre on screen. The first attempt used
   inset:-20vmax and a heavy blur, which parked most of the colour outside the viewport
   and left the page looking flat black. Radial gradients are already soft; blurring
   them again only costs a compositor pass. */
body::before {
  background:
    radial-gradient(58vmax 52vmax at 12% -6%,  hsl(var(--h-indigo) / .70), transparent 60%),
    radial-gradient(52vmax 46vmax at 88% 2%,   hsl(var(--h-violet) / .62), transparent 60%),
    radial-gradient(56vmax 50vmax at 78% 72%,  hsl(var(--h-cyan)   / .48), transparent 62%),
    radial-gradient(48vmax 44vmax at 6% 78%,   hsl(var(--h-rose)   / .44), transparent 62%),
    radial-gradient(40vmax 36vmax at 48% 42%,  hsl(var(--h-amber)  / .28), transparent 66%);
  filter: saturate(135%);
  animation: drift 34s var(--ease) infinite alternate;
}

/* The pointer light. Mix-blend screen so it adds light rather than painting over the
   text beneath it. */
body::after {
  z-index: -1;
  background: radial-gradient(34vmax 34vmax at var(--mx) var(--my),
              hsl(var(--h-cyan) / .55), transparent 58%);
  mix-blend-mode: screen;
  transition: background-position .2s linear;
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.03); }
}

/* A faint grain over the gradients. Without it, large soft gradients band visibly on
   8-bit panels, which is exactly the cheap phone this audience uses. */
body > * { position: relative; }

/* The colour is behind everything, so text needs its own ground to stay legible. A
   vertical scrim darkens the middle of the page without flattening the edges where the
   aurora does its work. */
main::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,9,15,.20) 0%, rgba(7,9,15,.42) 55%, rgba(7,9,15,.66) 100%);
}

h1, h2, h3 { line-height: 1.28; margin: 0 0 var(--space-2); font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 var(--space-2); }

a { color: hsl(var(--h-cyan)); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid hsl(var(--h-cyan)); outline-offset: 3px; border-radius: 6px;
}

.wrap   { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2.5rem);  margin-inline: auto; }
:lang(en), .en { font-family: var(--font-en); }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 9, 15, .72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: .85rem 0; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: var(--step-1); color: var(--fg); text-decoration: none; }
/* The mark carries the whole palette, so the brand itself is the colour story. */
.brand .mark {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #07090F;
  background: linear-gradient(135deg, hsl(var(--h-indigo)), hsl(var(--h-violet)) 40%, hsl(var(--h-cyan)) 70%, hsl(var(--h-amber)));
}
.nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.nav a { color: var(--fg-muted); text-decoration: none; font-size: .95rem; transition: color .2s var(--ease); }
.nav a:hover, .nav a[aria-current] { color: var(--fg); }

/* ---- hero ---- */
.hero { padding: clamp(3rem, 11vw, 7rem) 0 var(--space-5); }
.eyebrow {
  display: inline-block; font-family: var(--font-en); font-size: .75rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; margin-bottom: var(--space-2);
  background: linear-gradient(90deg, hsl(var(--h-cyan)), hsl(var(--h-violet)), hsl(var(--h-amber)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* The headline gradient animates its own background position rather than its colours,
   which keeps it on the compositor. */
.hero h1 .grad {
  background: linear-gradient(100deg, hsl(var(--h-indigo)), hsl(var(--h-violet)) 30%, hsl(var(--h-cyan)) 60%, hsl(var(--h-amber)) 85%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sweep 12s linear infinite;
}
@keyframes sweep { to { background-position: 300% 0; } }
.lede { font-size: var(--step-1); color: #C3CDE2; max-width: 58ch; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem;
  border-radius: 999px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary {
  color: #07090F;
  background: linear-gradient(120deg, hsl(var(--h-cyan)), hsl(var(--h-indigo)) 55%, hsl(var(--h-violet)));
  box-shadow: 0 10px 30px hsl(var(--h-indigo) / .35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px hsl(var(--h-violet) / .45); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-ghost { color: var(--fg); background: var(--surface); border-color: var(--border); }
.btn-ghost:hover { transform: translateY(-2px); border-color: hsl(var(--h-cyan) / .6); }

/* ---- cards ----
   Each card owns a --hue. The border and glow are drawn from it, so the palette is
   distributed rather than repeated, and hover simply turns that card's light up. */
.grid { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative; display: block; padding: var(--space-3);
  background: linear-gradient(180deg, #141B31, #0D1222);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit; overflow: hidden; isolation: isolate;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(80% 60% at 50% 0%, hsl(var(--hue, var(--h-indigo)) / .30), transparent 70%);
  transition: opacity .28s var(--ease);
}
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  border-color: hsl(var(--hue, var(--h-indigo)) / .55);
  box-shadow: 0 18px 44px hsl(var(--hue, var(--h-indigo)) / .22);
}
.card:hover::before, .card:focus-visible::before { opacity: 1; }
.card h3 { margin-bottom: .3rem; }
.card p { color: var(--fg-muted); margin: 0; font-size: .96rem; }
.card-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  margin-bottom: var(--space-2); color: hsl(var(--hue, var(--h-indigo)));
  background: hsl(var(--hue, var(--h-indigo)) / .14);
  border: 1px solid hsl(var(--hue, var(--h-indigo)) / .28);
}

.badge {
  display: inline-block; font-family: var(--font-en); font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 999px;
  margin-bottom: .6rem;
}
.badge-live { background: hsl(152 70% 45% / .16); color: hsl(152 70% 62%); }
.badge-soon { background: rgba(255,255,255,.06); color: var(--fg-muted); }

/* ---- episodes ---- */
.episodes { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.episodes a {
  display: flex; align-items: center; gap: var(--space-2); padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.episodes a:hover {
  transform: translateX(4px); border-color: hsl(var(--h-cyan) / .55);
  background: linear-gradient(90deg, hsl(var(--h-cyan) / .22), var(--surface) 55%);
}
.episodes .n { font-family: var(--font-en); font-size: .8rem; color: hsl(var(--h-cyan) / .85); min-width: 2.4rem; font-weight: 700; }
.episodes .t { font-weight: 600; color: var(--fg); }

.notice {
  border: 1px solid hsl(var(--h-amber) / .35); background: hsl(var(--h-amber) / .09);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
}
.notice strong { color: hsl(var(--h-amber)); }

.section { padding: var(--space-5) 0; }
.section-head { margin-bottom: var(--space-3); }
.section-head p { color: #C3CDE2; margin: 0; }

footer.site-footer {
  border-top: 1px solid var(--border); padding: var(--space-4) 0; margin-top: var(--space-4);
  color: var(--fg-muted); font-size: .9rem;
}
footer.site-footer a { color: var(--fg-muted); }

/* ---- reveal ----
   Hidden until the script adds .in. The no-script fallback below means content is never
   invisible if JavaScript is blocked or fails. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  body::before { animation: none; }
}