/* =========================================================================
   home-cool.css
   Scope: index.html (body[data-page="home"])
   Goal: layer premium motion + depth on top of home-editorial.css WITHOUT
         changing the brand palette (navy / gold / clay / ivory).
   Load AFTER home-editorial.css so equal-specificity rules win.
   All motion is gated behind prefers-reduced-motion: no-preference.
   ========================================================================= */

/* ---- SCROLL PROGRESS BAR ------------------------------------------------ */
.ath-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--brand-gold) 0%, var(--warm, #C97B4A) 100%);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform .1s linear;
  pointer-events: none;
}
html[dir="rtl"] .ath-progress { transform-origin: 100% 50%; }

/* ---- HERO: no extra aurora layer (main page gradient only) ------------- */
body[data-page="home"] .hero::after { content: none !important; }

/* ---- HERO TITLE: gold→clay shimmer on the emphasised word -------------- */
body[data-page="home"] .hero__title em {
  padding: 0;
  background: linear-gradient(100deg,
              var(--brand-gold) 0%,
              var(--warm, #C97B4A) 30%,
              var(--brand-gold-soft) 50%,
              var(--warm, #C97B4A) 70%,
              var(--brand-gold) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--warm, #C97B4A); /* fallback where background-clip:text unsupported */
}
@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"] .hero__title em { animation: athShimmer 6s linear infinite; }
}
@keyframes athShimmer { to { background-position: 220% center; } }

/* ---- HERO META STATS: tabular alignment while counting ----------------- */
body[data-page="home"] .hero__meta .stat__num { font-variant-numeric: tabular-nums; }

/* ---- EDITORIAL FILL: slow orbital rings + floating monogram ------------ */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"] .editorial-fill__rings {
    animation: athSpin 55s linear infinite;
    transform-origin: 60% 40%;
  }
  body[data-page="home"] .editorial-fill__rings::after {
    animation: athSpin 38s linear infinite reverse;
  }
  body[data-page="home"] .editorial-fill__mono {
    animation: athFloat 7s ease-in-out infinite;
  }
}
@keyframes athSpin  { to { transform: rotate(360deg); } }
@keyframes athFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---- HERO VISUAL: subtle inner glow only -------------------------------- */
body[data-page="home"] .hero__visual .editorial-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(50% 35% at 75% 18%, rgba(201, 123, 74, 0.22) 0%, transparent 70%),
    radial-gradient(60% 40% at 15% 85%, rgba(231, 196, 164, 0.1) 0%, transparent 70%);
}

/* ---- TRUST STRIP: glowing dots + edge shimmer -------------------------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"] .trust-strip .marquee__dot {
    animation: athDotPulse 2.4s ease-in-out infinite;
  }
  body[data-page="home"] .trust-strip .marquee__track {
    animation-duration: 42s;
  }
}
@keyframes athDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.75; }
}

/* ---- THREE SCHOOLS: 3D tilt + glossy cursor spotlight ------------------ */
body[data-page="home"] .school-card { perspective: 1100px; }
body[data-page="home"] .school-card::after {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--cs, 1));
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
  background:
    radial-gradient(42% 42% at var(--mx, 50%) var(--my, 38%), rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(180deg, rgba(11, 23, 48, 0.05) 0%, rgba(11, 23, 48, 0.72) 100%),
    var(--card-tone, linear-gradient(135deg, #2A3656, #0B1730));
}
body[data-page="home"] .school-card:hover { --cs: 1.02; }
body[data-page="home"] .school-card:hover::after {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--cs, 1.02));
}

/* ---- PILLARS: subtle hover depth --------------------------------------- */
body[data-page="home"] .pillars .card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* ---- NEWS CARDS: home uses news-page dark style (no tilt) -------------- */
body[data-page="home"] .news-grid--home .news-card__media {
  transform: none !important;
}
body[data-news-mode="list"] .news-card__media--opening,
body[data-page="home"] .news-grid--home .news-card__media--opening {
  background: url(/assets/uploads/news/opening-kids-excited.jpg) center/cover no-repeat !important;
}

/* ---- APPROACH VISUAL: cursor-reactive warm glow ------------------------ */
body[data-page="home"] .split__visual { isolation: isolate; }
body[data-page="home"] .split__visual .editorial-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46% 40% at var(--mx, 30%) var(--my, 20%), rgba(201, 123, 74, 0.28), transparent 65%);
  transition: background 0.2s ease;
}

/* ---- CTA: cursor-reactive warm glow on inner card ---------------------- */
body[data-page="home"] .cta-final__inner {
  transition: box-shadow 0.3s ease;
}
body[data-page="home"] .cta-final__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(34% 50% at var(--mx, 88%) var(--my, 6%), rgba(201, 123, 74, 0.22), transparent 60%);
  transition: background 0.2s ease;
}

/* ---- HERO + CTA BUTTONS: magnetic pull + light sheen ------------------- */
body[data-page="home"] .hero__actions .btn,
body[data-page="home"] .cta-final__actions .btn {
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.7,.2,1),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
body[data-page="home"] .hero__actions .btn > *,
body[data-page="home"] .cta-final__actions .btn > * {
  position: relative;
  z-index: 1;
}
body[data-page="home"] .hero__actions .btn::after,
body[data-page="home"] .cta-final__actions .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-160%) skewX(-18deg);
  transition: transform .7s ease;
}
body[data-page="home"] .hero__actions .btn:hover::after,
body[data-page="home"] .cta-final__actions .btn:hover::after {
  transform: translateX(260%) skewX(-18deg);
}

/* ---- LINK ARROWS: animated trailing rule ------------------------------- */
body[data-page="home"] .link-arrow {
  position: relative;
}
body[data-page="home"] .link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: var(--warm, #C97B4A);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
body[data-page="home"] .link-arrow:hover::after { transform: scaleX(1); }
html[dir="rtl"] body[data-page="home"] .link-arrow::after { transform-origin: 100% 50%; }

/* ---- HOME REVEAL: richer entrance (blur + lift + micro-scale) ----------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"] .reveal {
    transform: translateY(28px) scale(.985);
    filter: blur(6px);
    transition: opacity .8s var(--ease), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s var(--ease);
  }
  body[data-page="home"] .reveal.is-visible {
    transform: none;
    filter: blur(0);
  }
}

/* ---- REDUCED MOTION: strip the sheen sweep ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero__actions .btn::after,
  body[data-page="home"] .cta-final__actions .btn::after { display: none; }
}