/* ==========================================================================
   Chamila Madushan Science — design system
   Midnight + Ember. Shared by every page.
   ========================================================================== */

@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-opsz.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"JB Mono";src:url(../fonts/jbmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Gemunu Libre";src:url(../fonts/gemunu-800.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0D80-0DFF,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Sinhala";src:url(../fonts/noto-si-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0D80-0DFF,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Sinhala";src:url(../fonts/noto-si-500.woff2) format("woff2");font-weight:500 600;font-display:swap;unicode-range:U+0D80-0DFF,U+200C-200D,U+25CC}

:root{
  --mid:#070B14; --mid-2:#0C1324; --mid-3:#141D35; --mid-4:#1D2848;
  --ivory:#F4F1EA; --ivory-2:#EBE6DC; --paper:#FFFFFF;
  --ink:#0B1222; --ink-2:#3B4459; --ink-3:#7C8397;
  --ember:#FF5A1F; --ember-2:#FF8A3D; --amber:#FFC23D;
  --blue:#3D6BFF; --cyan:#3FD0F0; --mint:#2FD69A; --rose:#FF5C8A;
  --line-d:rgba(255,255,255,.09); --line-d2:rgba(255,255,255,.16);
  --line-l:rgba(11,18,34,.09);  --line-l2:rgba(11,18,34,.16);

  --f-display:"Bricolage","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-mono:"JB Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-si-d:"Gemunu Libre","Noto Sans Sinhala",sans-serif;
  --f-si:"Noto Sans Sinhala","Inter",sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --r-sm:14px; --r:22px; --r-lg:32px; --r-xl:44px;
  --gut:clamp(20px,4vw,56px);
  --max:1360px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.55;color:var(--ink);background:var(--ivory);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a,button,label,input,select,textarea{-webkit-tap-highlight-color:transparent}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:8px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.si-d{font-family:var(--f-si-d)}
.si{font-family:var(--f-si)}
/* the highlighted words inside a heading: same font, second colour */
.hl{color:var(--ember)}
.on-dark .hl{color:var(--ember-2)}
.mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* film grain over everything — very light */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------------- brand mark ---------------- */
.brand{display:inline-flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;flex:none;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 16px -8px rgba(0,0,0,.6)}
.brand-t{line-height:1}
.brand-t b{display:block;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.02em}
.brand-t small{display:block;margin-top:4px;font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--ember)}

/* ---------------- buttons ---------------- */
.btn{--h:56px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--h);
  padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:-.005em;white-space:nowrap;
  isolation:isolate;overflow:hidden;transition:color .5s var(--ease-out),border-color .5s var(--ease-out)}
.btn .lbl{position:relative;display:inline-block;overflow:hidden;height:1.25em;line-height:1.25em}
.btn .lbl span{display:block;transition:transform .55s var(--ease-out)}
.btn .lbl span+span{position:absolute;left:0;top:100%}
.btn .arr{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-right:-12px;flex:none;
  transition:transform .55s var(--ease-out)}
.btn .arr svg{width:14px;height:14px}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);
  transition:transform .6s var(--ease-out)}
.btn-ember{background:linear-gradient(180deg,#FF6A2E,#F24B12);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px -8px rgba(255,90,31,.6)}
.btn-ember::before{background:#fff}
.btn-ember .arr{background:rgba(255,255,255,.2)}
.btn-ghost-d{color:#fff;border:1px solid var(--line-d2);background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost-d::before{background:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink::before{background:var(--ember)}
.btn-ink .arr{background:rgba(255,255,255,.14)}
.btn-ghost-l{color:var(--ink);border:1px solid var(--line-l2)}
.btn-ghost-l::before{background:var(--ink)}
.btn-sm{--h:44px;padding:0 20px;font-size:14px}

/* eyebrow / section index */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow i{font-style:normal;color:var(--ember)}
.on-dark .eyebrow{color:rgba(255,255,255,.55)}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600}

/* ---------------- custom cursor (desktop) ---------------- */
.cursor,.cursor-ring{position:fixed;left:0;top:0;z-index:120;pointer-events:none;border-radius:50%;opacity:0}
.cursor{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--ember)}
.cursor-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,90,31,.55);
  display:grid;place-items:center;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .35s,border-color .35s}
.cursor-ring span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:#fff;opacity:0;transition:opacity .25s;text-transform:uppercase}
.cursor-ring.is-hover{width:88px;height:88px;margin:-44px 0 0 -44px;background:var(--ember);border-color:var(--ember)}
.cursor-ring.is-hover span{opacity:1}
.cursor-ring.is-link{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(255,90,31,.9)}
@media (hover:hover) and (pointer:fine){ .cursor-on .cursor,.cursor-on .cursor-ring{opacity:1} }

/* ---------------- page transition ---------------- */
.pt{position:fixed;inset:0;z-index:200;pointer-events:none;visibility:hidden}
.pt.is-active{pointer-events:auto;visibility:visible}
.pt-l{position:absolute;inset:-2px 0;transform:translateY(101%)}
.pt-a{background:var(--ember)}
.pt-b{background:var(--mid);display:grid;place-items:center}
.pt-mark{display:flex;flex-direction:column;align-items:center;gap:22px;color:#fff;opacity:0}
.pt-mark img{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 20px 50px -18px rgba(255,90,31,.55)}
.pt-mark .pt-label{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,4vw,52px);letter-spacing:-.03em;overflow:hidden}
.pt-mark .pt-label span{display:inline-block}
.pt-mark .pt-sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.5);text-transform:uppercase}
html.pt-enter .pt{visibility:visible}
html.pt-enter .pt-l{transform:none}
html.pt-enter .pt-mark{opacity:1}

/* ---------------- one page morphs into the next (Chrome, Edge, Safari; elsewhere pages simply change) ---------------- */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:vt-rise .5s cubic-bezier(.16,1,.3,1) both;mix-blend-mode:normal}
@keyframes vt-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes vt-in{from{opacity:0}}
@keyframes vt-out{to{opacity:0}}
/* parts that stay while the page changes */
.side{view-transition-name:side}
.top,.lx-top{view-transition-name:topbar}
::view-transition-old(side):only-child{animation:vt-side-out .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(side):only-child{animation:vt-side-in .55s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-side-out{to{transform:translateX(-102%)}}
@keyframes vt-side-in{from{transform:translateX(-102%)}}
/* a lesson's picture grows into the video */
.player{view-transition-name:hero-media}
::view-transition-group(hero-media){animation-duration:.6s;overflow:clip;border-radius:22px}
::view-transition-old(hero-media),::view-transition-new(hero-media){height:100%;object-fit:cover}
@media (max-width:980px){
  ::view-transition-new(root){animation:vt-in .3s ease-out both}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ---------------- helpers for motion ---------------- */
.split-line{overflow:hidden;display:block}
[data-reveal]{will-change:transform}
html.no-js [data-reveal],html.reduce [data-reveal]{opacity:1!important;transform:none!important}

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

/* ---------------- profile menu ---------------- */
.pm{position:relative;flex:none}
.pm-btn{position:relative;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;
  background:linear-gradient(135deg,#3D6BFF,#3FD0F0);transition:box-shadow .3s,transform .4s var(--ease-out)}
.pm.teacher .pm-btn,.pm.teacher .pm-h .av{background:linear-gradient(135deg,#FF8A3D,#F24B12)}
.pm.open .pm-btn{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.pm-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:170;width:276px;padding:8px;border-radius:22px;color:var(--ink);text-align:left;
  background:#fff;border:1px solid var(--line-l);
  box-shadow:0 34px 70px -28px rgba(11,18,34,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:100% 0;
  transition:opacity .25s,transform .45s var(--ease-out),visibility 0s .45s}
.pm.open .pm-pop{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .45s var(--ease-out),visibility 0s}
.pm-h{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;margin-bottom:6px;border-bottom:1px solid var(--line-l)}
.pm-h .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,#3D6BFF,#3FD0F0)}
.pm-h b{display:block;font-size:14.5px;line-height:1.3}
.pm-h span{font-size:12.5px;color:var(--ink-3)}
.pm-pop a{display:flex;align-items:center;gap:12px;height:44px;padding:0 10px;border-radius:13px;font-size:14px;font-weight:500;color:var(--ink-2);transition:background .25s,color .25s}
.pm-pop a svg{width:18px;height:18px;flex:none;color:var(--ink-3);transition:color .25s}
.pm-pop a.out{margin-top:6px;color:#C4380C}
.pm-pop a.out svg{color:#C4380C}
.pm-pop hr{margin:6px 10px;border:0;border-top:1px solid var(--line-l)}

.pm-pop.notices{width:312px}
.pm-pop.notices a{height:auto;padding:10px;align-items:flex-start}
.pm-pop .n-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.pm-pop .n-ic svg{width:17px;height:17px;color:inherit}
.pm-pop a b{display:block;font-size:13.5px;font-weight:650;color:var(--ink);line-height:1.35}
.pm-pop a small{display:block;font-size:12px;color:var(--ink-3)}
@media (max-width:980px){
  .pm-pop,.pm-pop.notices{position:fixed;left:12px;right:12px;top:68px;width:auto;transform-origin:50% 0}
}
@media (hover:hover){
  .pm-btn:hover{transform:scale(1.05)}
  .pm-pop a:hover{background:var(--ivory);color:var(--ink)}
  .pm-pop a:hover svg{color:var(--ink)}
  .pm-pop a.out:hover{background:#FFEDE4;color:#C4380C}
}
/* what a signed-in visitor sees instead of "Log in" */
.in-only{display:none!important}
html.is-in .in-only{display:inline-flex!important}
html.is-in .pm.in-only{display:block!important}
html.is-in .out-only{display:none!important}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:150;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  height:48px;padding:0 20px 0 16px;border-radius:999px;background:rgba(9,13,24,.9);color:#fff;font-size:14px;font-weight:500;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);opacity:0;pointer-events:none;white-space:nowrap}
.toast i{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember)}
@media (max-width:980px){ .toast{bottom:104px} }
@media (max-width:560px){ .brand{gap:9px} .brand img{width:38px;height:38px} .brand-t b{font-size:14.5px;white-space:nowrap} }
/* lighter effects on phones and tablets */
@media (max-width:900px){ .grain{display:none} }

/* hover effects only where a real mouse exists */
@media (hover:hover){
.btn:hover .lbl span{transform:translateY(-100%)}
.btn:hover .arr{transform:rotate(-45deg)}
.btn:hover::before{transform:translateY(0)}
.btn-ember:hover{color:var(--ink)}
.btn-ember:hover .arr{background:var(--ink);color:#fff}
.btn-ghost-d:hover{color:var(--ink);border-color:#fff}
.btn-ghost-l:hover{color:#fff;border-color:var(--ink)}
}