/* Admission Guide 2026 design tokens: colours from the new logo (green swoosh + near-black "Guide").
   Site-wide. Dark theme: html[data-theme="dark"] (set by the head script and the theme toggle). */
:root {
  --ag-brand: #05664F;          /* logo green: accent, links, icons */
  --ag-brand-strong: #034D3B;   /* hover */
  --ag-brand-mid: #12A37A;
  --ag-brand-deep: #022C22;
  --ag-brand-soft: #E3F5EE;     /* tinted chip / icon background */
  --ag-on-brand: #FFFFFF;       /* text on a --ag-brand fill */
  --ag-ink: #0D0F10;            /* headings (logo "Guide") */
  --ag-text: #44544F;
  --ag-muted: #5B6B66;          /* 5.6:1 on white (WCAG AA for small text) */
  --ag-bg: #FFFFFF;
  --ag-bg-alt: #F4FBF8;
  --ag-surface: #FFFFFF;
  --ag-surface-2: #F7FCFA;
  --ag-line: #DCEFE6;
  --ag-gold: #F5B53F;
  --ag-glow: rgba(18, 163, 122, .18);
  --ag-grad: linear-gradient(135deg, #022C22 0%, #05664F 55%, #12A37A 100%);
  --ag-grad-text: linear-gradient(135deg, #05664F 0%, #12A37A 100%);
  --ag-shadow: 0 10px 30px rgba(2, 44, 34, .08);
  --ag-shadow-lg: 0 24px 60px rgba(2, 44, 34, .16);
  --ag-radius: 18px;
  --ag-radius-sm: 12px;
  --ag-ease: cubic-bezier(.2, .7, .2, 1);
  --ag-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[data-theme="dark"] {
  --ag-brand: #34D399;
  --ag-brand-strong: #6EE7B7;
  --ag-brand-mid: #10B981;
  --ag-brand-soft: rgba(52, 211, 153, .12);
  --ag-on-brand: #04221A;
  --ag-ink: #ECF7F2;
  --ag-text: #B7CBC3;
  --ag-muted: #86A097;
  --ag-bg: #0A1411;
  --ag-bg-alt: #0D1A16;
  --ag-surface: #11221D;
  --ag-surface-2: #152A24;
  --ag-line: #1E3A31;
  --ag-glow: rgba(52, 211, 153, .16);
  --ag-grad-text: linear-gradient(135deg, #6EE7B7 0%, #34D399 100%);
  --ag-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --ag-shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
}

/* ---------- Shared home building blocks (prefix agh-) ---------- */
.agh-home { font-family: var(--ag-font); color: var(--ag-text); background: var(--ag-bg); overflow-x: clip; }
/* Root safety net: nothing can widen the page sideways, no rubber-band
   panning, and any overscroll shows the theme colour instead of white.
   clip (not hidden) keeps the sticky header working; hidden on body is
   only the fallback for browsers without clip. */
html { background: var(--ag-bg); overflow-x: clip; overscroll-behavior-x: none; }
body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
.agh-section { position: relative; padding: clamp(64px, 8vw, 104px) 0; }
.agh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ag-brand); background: var(--ag-brand-soft); padding: 6px 14px; border-radius: 999px;
}
.agh-title { font-weight: 700; color: var(--ag-ink); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; margin: 14px 0 12px; }
.agh-hl { background: var(--ag-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.agh-lead { font-size: 1.05rem; line-height: 1.75; color: var(--ag-text); }
.agh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; border-radius: 999px; padding: 13px 28px; text-decoration: none; border: 1px solid transparent;
  transition: transform .3s var(--ag-ease), box-shadow .3s var(--ag-ease), background-color .3s, color .3s, border-color .3s;
}
.agh-btn:focus-visible { outline: 3px solid var(--ag-brand-mid); outline-offset: 3px; }
.agh-btn-primary { background: var(--ag-brand); color: var(--ag-on-brand); box-shadow: 0 10px 24px var(--ag-glow); }
.agh-btn-primary:hover { background: var(--ag-brand-strong); color: var(--ag-on-brand); box-shadow: 0 16px 34px var(--ag-glow); }
.agh-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.agh-btn-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.agh-btn-outline { background: transparent; color: var(--ag-ink); border-color: var(--ag-line); }
.agh-btn-outline:hover { border-color: var(--ag-brand); color: var(--ag-brand); }

/* Reading progress bar (home) */
.ag-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1031; pointer-events: none; /* above the header, below modals and alerts */
  transform-origin: 0 50%; transform: scaleX(var(--ag-p, 0));
  background: linear-gradient(90deg, #05664F, #12A37A, #6EE7B7);
}

/* ---------- Scroll reveal (js/ag-effects.js adds .is-in; html.ag-js is set by the head script) ---------- */
html.ag-js [data-ag-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ag-ease) var(--ag-d, 0ms), transform .8s var(--ag-ease) var(--ag-d, 0ms);
}
html.ag-js [data-ag-reveal="down"] { transform: translateY(-28px); }
html.ag-js [data-ag-reveal="left"] { transform: translateX(-36px); }
html.ag-js [data-ag-reveal="right"] { transform: translateX(36px); }
html.ag-js [data-ag-reveal="zoom"] { transform: scale(.92); }
html.ag-js [data-ag-reveal="fade"] { transform: none; }
html.ag-js [data-ag-reveal].is-in { opacity: 1; transform: none; }

/* Tilt (JS sets --ag-rx / --ag-ry) and magnetic (JS sets --ag-tx / --ag-ty) */
[data-ag-tilt] { transform: perspective(900px) rotateX(var(--ag-rx, 0deg)) rotateY(var(--ag-ry, 0deg)); transition: transform .45s var(--ag-ease); transform-style: preserve-3d; }
[data-ag-magnetic] { translate: var(--ag-tx, 0px) var(--ag-ty, 0px); transition: translate .35s var(--ag-ease); }

/* ---------- Shared keyframes ---------- */
@keyframes ag-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ag-spin-slow { to { transform: rotate(360deg); } }
@keyframes ag-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(18, 163, 122, .45); } 70% { box-shadow: 0 0 0 16px rgba(18, 163, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 163, 122, 0); } }
@keyframes ag-shimmer { 0% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(230%) skewX(-20deg); } }
@keyframes ag-gradient-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes ag-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ag-blob { /* transform only: runs on the GPU compositor (shape changes are invisible under the blur) */
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(24px, -18px) scale(1.06) rotate(8deg); }
  66% { transform: translate(-18px, 14px) scale(.96) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.ag-js [data-ag-reveal] { opacity: 1; transform: none; transition: none; }
  .agh-home *, .agh-home *::before, .agh-home *::after { animation: none !important; transition: none !important; }
}
