/* ============================================================================
   MIDNIGHT NAVY & GOLD — shared site theme
   ─────────────────────────────────────────────────────────────────────────
   සියලුම public පිටු මෙම එකම ගොනුව භාවිතා කරයි. වර්ණ වෙනස් කිරීමට
   පහත :root තුළ ඇති අගයන් පමණක් සංස්කරණය කරන්න.
   ============================================================================ */

:root{
  /* Brand navy + එහි ගැඹුරු අනුවාද (background = #1b2c62) */
  --navy:        #2a4488;
  --navy-600:    #24397a;
  --navy-800:    #142049;
  --ink:         #1b2c62;   /* page background */
  --ink-2:       #223a7a;   /* raised surface (modals, tickets) */
  --inset:       #142049;   /* input / sunken fields */

  /* Gold accent (#ffcb08) */
  --gold:        #ffcb08;
  --gold-bright: #ffdb54;
  --gold-deep:   #c99a00;

  --text:        #f2f5fc;
  --muted:       #b3bfe0;
  --dim:         #8394c4;

  --ok:          #34d399;
  --warn:        #fbbf24;
  --err:         #f87171;

  --line:        rgba(255,203,8,.18);
  --line-soft:   rgba(255,255,255,.09);
  --glass:       rgba(255,255,255,.05);
  --glass-2:     rgba(255,255,255,.09);

  --r-xl: 26px; --r-lg: 18px; --r-md: 12px; --r-sm: 8px;
  --nav-h: 74px;
  --pad-y: clamp(64px, 9vw, 118px);
  --font: 'Outfit','Noto Sans Sinhala',system-ui,sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  font-family:var(--font); background:var(--ink); color:var(--text);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; line-height:1.65;
  min-height:100vh; display:flex; flex-direction:column;
}
body > footer{ margin-top:auto; }
a{ text-decoration:none; color:inherit; }
img,video{ display:block; max-width:100%; }
ul{ list-style:none; }
::selection{ background:var(--gold); color:var(--ink); }

.wrap{ width:min(1240px, 100% - 10vw); margin-inline:auto; }
.wrap-sm{ width:min(880px, 100% - 10vw); margin-inline:auto; }
.wrap-xs{ width:min(520px, 100% - 10vw); margin-inline:auto; }
.sec{ padding:var(--pad-y) 0; position:relative; }
.sec-sm{ padding:clamp(40px,6vw,72px) 0; position:relative; }

/* ── Ambient background ───────────────────────────────────── */
.ambient{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.ambient::after{
  content:''; position:absolute; inset:0; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orb{ position:absolute; border-radius:50%; filter:blur(110px); opacity:.5; animation:drift 30s var(--ease) infinite alternate; }
.orb-1{ width:640px; height:640px; top:-18%; left:-10%; background:radial-gradient(circle,#2a4488,#142049 70%); }
.orb-2{ width:520px; height:520px; bottom:-14%; right:-8%; background:radial-gradient(circle,#c99a00,#142049 72%); opacity:.32; animation-delay:-11s; }
.orb-3{ width:420px; height:420px; top:44%; left:38%; background:radial-gradient(circle,#24397a,#1b2c62 70%); animation-delay:-20s; }
@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(60px,50px) scale(1.09); }
  100%{ transform:translate(-50px,80px) scale(.95); }
}

/* ── Typography ───────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); padding:8px 16px; border-radius:100px;
  background:rgba(255,203,8,.08); border:1px solid var(--line);
}
h1,h2,h3,h4{ line-height:1.15; letter-spacing:-.025em; font-weight:800; }
.h-page{ font-size:clamp(34px,5.4vw,62px); font-weight:900; margin:20px 0 16px; }
.h-sec{ font-size:clamp(30px,4.4vw,52px); margin:20px 0 14px; }
.sub{ color:var(--muted); font-size:clamp(15px,1.6vw,17.5px); max-width:62ch; }
.gold-text{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold-bright) 30%,var(--gold) 50%,var(--gold-bright) 70%,var(--gold-deep));
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:goldShimmer 5s linear infinite;
}
@keyframes goldShimmer{ to{ background-position:-220% center; } }
.sec-head{ margin-bottom:52px; }
.sec-head.center{ text-align:center; }
.sec-head.center .sub{ margin-inline:auto; }
.muted{ color:var(--muted); }
.dim{ color:var(--dim); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:100px; font-weight:600; font-size:15px;
  font-family:inherit; border:1px solid transparent; cursor:pointer;
  position:relative; overflow:hidden; text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn i{ font-size:14px; }
.btn-gold{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#231a06; box-shadow:0 10px 30px rgba(255,203,8,.22); }
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(255,203,8,.34); }
.btn-ghost{ background:var(--glass); color:var(--text); border-color:var(--line-soft); backdrop-filter:blur(12px); }
.btn-ghost:hover{ background:var(--glass-2); border-color:var(--line); transform:translateY(-3px); }
.btn-ok{ background:rgba(52,211,153,.14); color:var(--ok); border-color:rgba(52,211,153,.3); }
.btn-ok:hover{ background:var(--ok); color:#052e20; transform:translateY(-3px); }
.btn-sm{ padding:10px 20px; font-size:14px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ── Card ─────────────────────────────────────────────────── */
.card{
  background:linear-gradient(160deg, var(--glass-2), var(--glass));
  border:1px solid var(--line-soft); border-radius:var(--r-xl);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  position:relative; overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.09), transparent 55%);
}
.card:hover{ transform:translateY(-7px); border-color:var(--line); box-shadow:0 28px 60px rgba(0,0,0,.45); }
.card.flat:hover{ transform:none; }

/* ── Spring Pop (animation #32) — bouncy spring rotate on hover ──
   Card එකක් උඩ mouse තිබ්බාම bouncy spring එකකින් scale + rotate වී
   pop වේ. අනෙක් cards වලට කිසිම බලපෑමක් නැත. */
.card{ transition:transform .5s cubic-bezier(.34,1.56,.64,1), border-color .4s, box-shadow .4s var(--ease); }
.card:hover{ transform:scale(1.08) rotate(4deg); border-color:var(--line); box-shadow:0 26px 52px rgba(0,0,0,.42); z-index:2; }
.card.flat:hover{ transform:scale(1.04) rotate(2deg); }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } }

.pad{ padding:30px 28px; }
.pad-sm{ padding:22px 20px; }
.card h3{ font-size:19px; margin-bottom:9px; }
.card p{ color:var(--muted); font-size:14.5px; }

.icon-badge{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  font-size:21px; color:var(--gold); margin-bottom:18px;
  background:rgba(255,203,8,.09); border:1px solid var(--line);
}

/* ── Grids ────────────────────────────────────────────────── */
.grid{ display:grid; gap:22px; }
.g-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.g-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.g-4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

/* ── Nav ──────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 5vw; transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent; flex-shrink:0;
}
.nav.stuck{
  background:rgba(18,29,66,.86); backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px); border-bottom-color:var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; letter-spacing:-.02em; flex-shrink:0; }
.brand img{ height:40px; width:auto; }
.brand .mark{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  display:grid; place-items:center; font-size:17px; color:#231a06;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
}
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:9px 15px; border-radius:100px; font-size:14.5px; font-weight:500;
  color:var(--muted); transition:color .25s, background .25s;
}
.nav-links a:hover{ color:var(--text); background:var(--glass); }
.nav-links a.active{ color:var(--gold); background:rgba(255,203,8,.09); font-weight:600; }
.nav-act{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.burger{ display:none; font-size:20px; cursor:pointer; padding:8px; color:var(--text); }
.mob-only{ display:none; }

/* ── Announcement ticker ──────────────────────────────────── */
.ann{
  display:flex; align-items:center; gap:14px; padding:11px 5vw;
  background:linear-gradient(90deg, rgba(255,203,8,.13), rgba(42,68,136,.16));
  border-bottom:1px solid var(--line); font-size:14px;
}
.ann > i{ color:var(--gold); flex-shrink:0; }
.ann-vp{ overflow:hidden; flex:1; }
.ann-track{ display:flex; gap:56px; white-space:nowrap; animation:ticker 34s linear infinite; }
.ann-track span{ color:var(--muted); }
.ann:hover .ann-track{ animation-play-state:paused; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ── Portal tabs (logged-in student pages) ────────────────── */
.portal-tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:34px;
  padding:6px; border-radius:100px; width:fit-content; max-width:100%;
  background:var(--glass); border:1px solid var(--line-soft);
}
.portal-tabs a{
  padding:10px 20px; border-radius:100px; font-size:14.5px; font-weight:500;
  color:var(--muted); white-space:nowrap; transition:color .25s, background .25s;
}
.portal-tabs a:hover{ color:var(--text); background:var(--glass-2); }
.portal-tabs a.active{
  color:#231a06; font-weight:600;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
}

/* ── Profile header ───────────────────────────────────────── */
.profile{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.avatar{
  width:74px; height:74px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-size:29px; font-weight:900; color:#231a06;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
}
.profile-info{ flex:1; min-width:200px; }
.profile-info h1{ font-size:clamp(22px,3vw,30px); }

/* ── Stat tiles ───────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.stat{ padding:24px 20px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--line-soft); text-align:center; }
.stat .n{ font-size:clamp(24px,3.2vw,34px); font-weight:900; letter-spacing:-.03em; }
.stat .l{ font-size:13px; color:var(--dim); margin-top:4px; }

/* ── Page header (inner pages) ────────────────────────────── */
.page-head{ padding:clamp(44px,6vw,80px) 0 clamp(30px,4vw,48px); text-align:center; }
.page-head .sub{ margin-inline:auto; }

/* ── Media / thumbs ───────────────────────────────────────── */
.thumb{ position:relative; aspect-ratio:16/9; background:var(--navy-800); overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .thumb img{ transform:scale(1.07); }
.thumb .ph{ width:100%; height:100%; display:grid; place-items:center; font-size:40px; color:rgba(255,203,8,.34); }
.thumb-tall{ aspect-ratio:4/3; }
.play-ov{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to top, rgba(15,24,58,.75), rgba(15,24,58,.15));
}
.play-ov span{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,203,8,.96); color:#231a06; font-size:18px; padding-left:3px;
  transition:transform .4s var(--ease);
}
.card:hover .play-ov span{ transform:scale(1.14); }
.chip{
  position:absolute; top:14px; left:14px; z-index:3; font-size:11.5px; font-weight:600;
  padding:6px 12px; border-radius:100px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(15,24,58,.72); backdrop-filter:blur(8px); border:1px solid var(--line); color:var(--gold);
}
.meta{ display:flex; align-items:center; gap:9px; color:var(--dim); font-size:13.5px; margin-top:12px; flex-wrap:wrap; }
.meta i{ color:var(--gold); }

/* ── Price ────────────────────────────────────────────────── */
.price{ font-size:23px; font-weight:900; letter-spacing:-.03em; }
.price small{ font-size:11px; color:var(--dim); font-weight:600; margin-left:4px; }
.price.free{ color:var(--ok); }

/* ── Forms ────────────────────────────────────────────────── */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:7px; font-weight:500; }
.field input, .field textarea, .field select{
  width:100%; padding:13px 16px; border-radius:var(--r-md); font:inherit; font-size:15px;
  background:rgba(15,24,58,.55); border:1px solid var(--line-soft); color:var(--text);
  transition:border-color .3s, box-shadow .3s;
}
.field select option{ background:var(--ink-2); color:var(--text); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,203,8,.13);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input[type=file]{ padding:11px 14px; cursor:pointer; }
.field input[type=file]::file-selector-button{
  font:inherit; font-size:13px; font-weight:600; margin-right:12px; cursor:pointer;
  padding:7px 14px; border-radius:100px; border:0;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#231a06;
}
.hint{ font-size:12.5px; color:var(--dim); margin-top:6px; }

.alert{ padding:14px 18px; border-radius:var(--r-md); font-size:14.5px; margin-bottom:18px; display:flex; gap:10px; align-items:flex-start; }
/* .ok/.err ප්‍රධාන නම් වන අතර, පැරණි පිටු වල .success/.error ද භාවිතා වේ. */
.alert.ok, .alert.success{ background:rgba(52,211,153,.11); border:1px solid rgba(52,211,153,.3); color:#6ee7b7; }
.alert.err, .alert.error{ background:rgba(248,113,113,.11); border:1px solid rgba(248,113,113,.3); color:#fca5a5; }
.alert.warn{ background:rgba(251,191,36,.11); border:1px solid rgba(251,191,36,.3); color:#fcd34d; }
.alert.info{ background:rgba(255,203,8,.09); border:1px solid var(--line); color:var(--gold-bright); }

/* ── Badges ───────────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; font-size:12px; font-weight:600; }
.badge.ok{ background:rgba(52,211,153,.14); color:var(--ok); }
.badge.warn{ background:rgba(251,191,36,.14); color:var(--warn); }
.badge.err{ background:rgba(248,113,113,.14); color:var(--err); }
.badge.gold{ background:rgba(255,203,8,.13); color:var(--gold); }

/* ── Table ────────────────────────────────────────────────── */
.table-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line-soft); }
table.tbl{ width:100%; border-collapse:collapse; min-width:560px; }
table.tbl th, table.tbl td{ padding:14px 18px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line-soft); }
table.tbl th{ color:var(--gold); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; background:var(--glass); }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl tbody tr{ transition:background .25s; }
table.tbl tbody tr:hover{ background:var(--glass); }

/* ── CTA band ─────────────────────────────────────────────── */
.cta-band{
  border-radius:var(--r-xl); padding:clamp(38px,5.5vw,66px) clamp(28px,5vw,58px); text-align:center;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-800) 60%, var(--ink) 100%);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,203,8,.20), transparent 68%);
  top:-46%; right:-8%;
}
.cta-band > *{ position:relative; }
.cta-band h2{ font-size:clamp(26px,3.8vw,42px); margin-bottom:14px; }

/* ── Empty state ──────────────────────────────────────────── */
.empty{
  grid-column:1 / -1; padding:60px 28px; text-align:center; border-radius:var(--r-lg);
  border:1px dashed var(--line); background:var(--glass); color:var(--dim); font-size:15px;
}
.empty i{ display:block; font-size:34px; color:var(--gold); opacity:.5; margin-bottom:14px; }

/* ── Footer ───────────────────────────────────────────────── */
footer{ border-top:1px solid var(--line-soft); padding:62px 0 30px; background:rgba(15,24,58,.55); }
.f-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.f-grid h4{ font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); margin-bottom:18px; font-weight:600; }
.f-grid li{ margin-bottom:11px; }
.f-grid li a{ color:var(--muted); font-size:14.5px; transition:color .25s; }
.f-grid li a:hover{ color:var(--gold); }
.f-about p{ color:var(--muted); font-size:14.5px; margin:16px 0 22px; max-width:42ch; }
.socials{ display:flex; gap:10px; }
.socials a{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--line-soft); color:var(--muted);
  transition:all .3s var(--ease);
}
.socials a:hover{ color:#231a06; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); transform:translateY(-3px); border-color:transparent; }
.f-bot{ border-top:1px solid var(--line-soft); padding-top:24px; text-align:center; color:var(--dim); font-size:13.5px; }

/* ── Scroll reveal ────────────────────────────────────────────
   '.js' class එක <head> තුළ inline script එකකින් එකතු වේ. JS අසමත්
   වුවහොත් content එක සාමාන්‍ය ලෙසම පෙනේ — කිසිවිටෙක හිස් පිටුවක් නොවේ. */
.js .rv{ opacity:0; transform:translateY(34px) scale(.98); filter:blur(6px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.js .rv.in{ opacity:1; transform:none; filter:none; }

/* ── Extra "full" animations (site-wide) ─────────────────────── */
/* button light-sweep on hover */
.btn::after{
  content:''; position:absolute; top:0; left:-130%; width:60%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transition:left .6s var(--ease); pointer-events:none;
}
.btn:hover::after{ left:140%; }
/* icon-badge pops when its card is hovered */
.icon-badge{ transition:transform .5s var(--ease), background .4s, color .4s; }
.card:hover .icon-badge{ transform:translateY(-4px) rotate(-8deg) scale(1.1); }
/* eyebrow gentle glow */
.eyebrow{ transition:box-shadow .4s, border-color .4s; }
.card:hover .eyebrow, .sec-head:hover .eyebrow{ box-shadow:0 0 18px rgba(255,203,8,.22); }
/* links with arrow icons: arrow slides on hover */
a:hover > .fa-arrow-right, .btn:hover .fa-arrow-right, a:hover .fa-arrow-right{ transform:translateX(4px); }
.fa-arrow-right{ transition:transform .35s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .gold-text{ animation:none; }
  .btn::after{ display:none; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px){
  .f-grid{ grid-template-columns:1fr 1fr; }
  .f-about{ grid-column:1 / -1; }
}
@media (max-width: 820px){
  .burger{ display:block; }
  .mob-only{ display:block; }
  .desk-only{ display:none; }
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
    padding:20px 5vw 30px; background:rgba(20,32,73,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line-soft); transform:translateY(-120%);
    transition:transform .45s var(--ease); max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ padding:13px 16px; font-size:16px; }
}
@media (max-width: 560px){
  .f-grid{ grid-template-columns:1fr; }
  .pad{ padding:24px 22px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; }
}