/* SITE-1 Motion System v9
   Modern kinetic motion inspired by contemporary school/admissions sites.
   Desktop/tablet = cinematic + ambient. Phone = lightweight + smooth. */

:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-soft: cubic-bezier(.22, .61, .36, 1);
  --motion-blue: #2b4eff;
  --motion-navy: #0e1133;
  --motion-pink: #ff7ab4;
  --motion-cyan: #58c7c8;
  --motion-orange: #ffb352;
}

/* Prevent the older reveal layer from fighting the new animation engine. */
html.js body.motion-v9 [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   PAGE TRANSITION
   -------------------------------------------------------------------------- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
}
.page-transition::before,
.page-transition span {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate3d(0, -101%, 0);
  will-change: transform;
}
.page-transition::before { background: var(--motion-navy); }
.page-transition span { background: var(--motion-blue); }
body.motion-leave .page-transition::before { animation: sabCurtainIn .42s var(--motion-ease) forwards; }
body.motion-leave .page-transition span { animation: sabCurtainIn .38s var(--motion-ease) .045s forwards; }
body.motion-enter .page-transition::before { animation: sabCurtainOut .72s var(--motion-ease) forwards; }
body.motion-enter .page-transition span { animation: sabCurtainOut .66s var(--motion-ease) .055s forwards; }
@keyframes sabCurtainIn { to { transform: translate3d(0, 0, 0); } }
@keyframes sabCurtainOut { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-101%,0); } }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
@media (min-width: 961px) {
  .site-header {
    transition: background .32s ease, box-shadow .32s ease, backdrop-filter .32s ease;
  }
  .site-header.scrolled {
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: 0 14px 42px rgba(14,17,51,.075);
  }
}

/* --------------------------------------------------------------------------
   HERO — KINETIC FIELD
   -------------------------------------------------------------------------- */
.hero-educal {
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 18%, rgba(151, 201, 255, .22), transparent 24%),
    radial-gradient(circle at 17% 84%, rgba(255, 169, 207, .18), transparent 25%),
    #f3f6ff;
}
.hero-educal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(43,78,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,78,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 82%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 82%);
}
.hero-educal-grid { z-index: 3; }
.hero-orb, .hero-dots, .hero-ring, .hero-blob, [data-kinetic] {
  will-change: transform;
}
body.motion-v9 [data-kinetic] { animation: none !important; }

.hero-ambient-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ambient-shape {
  position: absolute;
  display: block;
  opacity: .82;
  filter: saturate(1.06);
  transform: translate3d(0,0,0);
  will-change: transform;
}
.ambient-ring {
  width: 86px;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.16);
}
.ambient-ring-one { left: 4.5%; top: 15%; color: rgba(255,122,180,.78); }
.ambient-ring-two { right: 3.5%; top: 39%; width: 126px; color: rgba(88,199,200,.52); }
.ambient-disc {
  width: 26px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 12px 30px currentColor;
}
.ambient-disc-one { left: 44%; top: 11%; color: rgba(255,179,82,.52); background: #ffb352; }
.ambient-disc-two { right: 27%; bottom: 7%; width: 18px; color: rgba(43,78,255,.42); background: #2b4eff; }
.ambient-diamond {
  width: 22px;
  height: 22px;
  right: 15%;
  top: 15%;
  border-radius: 5px;
  background: linear-gradient(135deg, #7d66e7, #2b4eff);
  box-shadow: 0 14px 36px rgba(43,78,255,.24);
}
.ambient-orbit {
  left: 46%;
  bottom: 9%;
  width: 78px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(43,78,255,.34);
}
.ambient-orbit i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  left: 50%;
  top: -5px;
  background: #ff7ab4;
  box-shadow: 0 0 0 6px rgba(255,122,180,.12);
  transform-origin: 0 44px;
  animation: orbitDot 7s linear infinite;
}
@keyframes orbitDot { to { transform: rotate(360deg); } }

/* Hero entrance is driven with Web Animations API. These are safe fallback styles. */
.motion-v9 .hero-educal-copy,
.motion-v9 .hero-educal-visual { will-change: transform, opacity, filter; }
.motion-v9 .hero-main-photo,
.motion-v9 .hero-small-photo { will-change: transform; }

.hero-main-photo {
  box-shadow: 0 36px 90px rgba(14,17,51,.18), 0 8px 22px rgba(14,17,51,.08);
  transition: box-shadow .45s ease;
}
.hero-main-photo::before,
.hero-main-photo::after { display: none !important; }
.hero-small-photo {
  box-shadow: 0 25px 60px rgba(14,17,51,.18);
}
.hero-educal-visual:hover .hero-main-photo {
  box-shadow: 0 42px 110px rgba(14,17,51,.22), 0 10px 28px rgba(14,17,51,.1);
}

/* Modern marker underline that draws in after the heading. */
.marker-word { position: relative; z-index: 1; }
.marker-word::after {
  transform-origin: left center;
  transform: scaleX(0) rotate(-1.5deg);
  transition: transform .72s var(--motion-ease) .58s;
}
body.motion-ready .marker-word::after { transform: scaleX(1) rotate(-1.5deg); }

/* Scroll cue — no extra button, just a small animated signal. */
.hero-educal-copy::after {
  content: "";
  display: block;
  width: 1px;
  height: 46px;
  margin-top: 30px;
  background: linear-gradient(to bottom, rgba(43,78,255,.9), rgba(43,78,255,0));
  transform-origin: top;
  animation: scrollPulse 2.1s var(--motion-ease-soft) infinite;
}
@keyframes scrollPulse { 0%,100%{transform:scaleY(.28);opacity:.28} 52%{transform:scaleY(1);opacity:1} }

/* --------------------------------------------------------------------------
   TEXT / SECTION REVEALS
   -------------------------------------------------------------------------- */
.motion-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  margin-bottom: -.09em;
  padding-bottom: .09em;
}
.motion-word-inner { display: inline-block; will-change: transform, opacity; }

.motion-v9 .motion-section { will-change: transform, opacity, filter, clip-path; }
.motion-v9 .motion-image-reveal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.motion-v9 .motion-image-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(115deg, var(--motion-blue), #7661e7 55%, var(--motion-orange));
  transform: translate3d(-104%,0,0);
  pointer-events: none;
}
.motion-v9 .motion-image-reveal.is-motion-visible::after {
  animation: imageSweep 1.05s var(--motion-ease) both;
}
.motion-v9 .motion-image-reveal img {
  transition: transform 1.35s var(--motion-ease), filter .9s ease;
  transform: scale(1.085);
  filter: saturate(.86) contrast(.97);
}
.motion-v9 .motion-image-reveal.is-motion-visible img {
  transform: scale(1);
  filter: saturate(1) contrast(1);
}
@keyframes imageSweep {
  0% { transform: translate3d(-104%,0,0); }
  48% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(104%,0,0); }
}

/* Cards feel tactile rather than just bouncing upward. */
.category-card,
.news-card,
.admission-steps article,
.cycle-long,
.principle-row {
  position: relative;
  isolation: isolate;
  transition: transform .42s var(--motion-ease), box-shadow .42s ease, border-color .3s ease, background .3s ease;
}
@media (hover:hover) and (pointer:fine) {
  .category-card:hover,
  .news-card:hover,
  .admission-steps article:hover {
    transform: translateY(-9px) scale(1.012);
    box-shadow: 0 24px 58px rgba(14,17,51,.12);
  }
  .category-card::before,
  .news-card::before,
  .admission-steps article::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(43,78,255,.16), transparent 62%);
    transition: opacity .25s ease;
  }
  .category-card:hover::before,
  .news-card:hover::before,
  .admission-steps article:hover::before { opacity: 1; }
}

/* Button shine is intentionally fast and clean. */
.btn, .nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before, .nav-cta::before {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -45%;
  width: 26%;
  z-index: -1;
  opacity: 0;
  background: rgba(255,255,255,.34);
  transform: rotate(18deg) translateX(0);
  transition: transform .62s var(--motion-ease), opacity .25s ease;
}
@media (hover:hover) and (pointer:fine) {
  .btn:hover::before, .nav-cta:hover::before { opacity: 1; transform: rotate(18deg) translateX(560%); }
}

/* Ribbon motion — a contemporary information ticker, deliberately slow. */
.school-ribbon { overflow: hidden; background: var(--motion-navy); color: #fff; }
.school-ribbon-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 62px;
  padding-inline: 28px;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: clamp(.9rem, 1.2vw, 1.08rem);
  animation: schoolTicker 24s linear infinite;
}
.school-ribbon-track span { white-space: nowrap; }
.school-ribbon-track i { color: var(--motion-orange); font-style: normal; font-size: .72em; }
.school-ribbon:hover .school-ribbon-track { animation-play-state: paused; }
@keyframes schoolTicker { to { transform: translate3d(-50%,0,0); } }

/* --------------------------------------------------------------------------
   SOCIAL LINKS
   -------------------------------------------------------------------------- */
.footer-social-block { margin-top: 24px; }
.footer-social-block > span {
  display: block;
  margin-bottom: 11px;
  color: rgba(255,255,255,.48);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .66rem;
  font-weight: 800;
}
.footer-socials { display: flex; gap: 9px; }
.footer-socials a,
.social-rail a {
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform .32s var(--motion-ease), background .28s ease, color .28s ease, border-color .28s ease;
}
.footer-socials a {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
}
.footer-socials a:hover { transform: translateY(-6px) scale(1.06); background: #fff; color: var(--motion-navy); border-color:#fff; }
.footer-socials svg,
.social-rail svg,
.mobile-socials svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }
.footer-socials svg path,
.social-rail svg path,
.mobile-socials svg path { fill: currentColor; stroke: none; }
.footer-socials svg rect,.footer-socials svg circle,
.social-rail svg rect,.social-rail svg circle,
.mobile-socials svg rect,.mobile-socials svg circle { fill: none; }
.footer-socials svg .social-dot,.social-rail svg .social-dot,.mobile-socials svg .social-dot { fill: currentColor; stroke: none; }

.social-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 70;
  display: grid;
  gap: 7px;
  padding: 10px 7px;
  border: 1px solid rgba(14,17,51,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 52px rgba(14,17,51,.11);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  transform: translateY(-50%);
}
.social-rail > span {
  position: absolute;
  right: calc(100% + 9px);
  top: 50%;
  translate: 0 -50%;
  rotate: -90deg;
  white-space: nowrap;
  color: #7a7d8f;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .58rem;
  font-weight: 850;
}
.social-rail a { width: 38px; height: 38px; border-radius: 50%; color: var(--motion-navy); }
.social-rail a:hover { transform: scale(1.14) rotate(5deg); background: var(--motion-blue); color:#fff; }

.mobile-socials { display:flex; flex-wrap:wrap; gap:9px; padding:18px 0 2px; }
.mobile-socials a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:9px 13px;
  border:1px solid rgba(14,17,51,.1);
  border-radius:999px;
  color:var(--motion-navy);
  text-decoration:none;
  font-size:.72rem;
  font-weight:750;
}

/* --------------------------------------------------------------------------
   DESKTOP / TABLET DEPTH
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .hero-educal-visual { perspective: 1200px; }
  .hero-main-photo { transform-style: preserve-3d; }
  .feature-image-stack { will-change: transform; }
  .footer-cta-shape { will-change: transform; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .ambient-ring-one { left: 2%; top: 12%; }
  .ambient-ring-two { right: -2%; top: 46%; width: 100px; }
  .ambient-disc-one { left: 76%; top: 10%; }
  .ambient-orbit { left: 7%; bottom: 4%; }
  .school-ribbon-track { animation-duration: 29s; min-height: 56px; }
  .social-rail { display: none; }
}

/* --------------------------------------------------------------------------
   PHONE — same identity, much lighter motion
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-educal::after { background-size: 34px 34px; opacity: .35; }
  .hero-ambient-field { opacity: .62; }
  .ambient-ring { width: 58px; border-width: 1.5px; }
  .ambient-ring-one { left: -18px; top: 8%; }
  .ambient-ring-two { right: -34px; top: 62%; width: 74px; }
  .ambient-disc-one { left: 82%; top: 10%; width: 16px; }
  .ambient-disc-two { left: 12%; right:auto; bottom: 8%; width: 12px; }
  .ambient-diamond, .ambient-orbit { display: none; }
  .hero-educal-copy::after { height: 30px; margin-top: 20px; opacity: .65; }
  .school-ribbon-track { min-height: 49px; gap:20px; padding-inline:20px; font-size:.78rem; animation-duration:36s; }
  .motion-v9 .motion-image-reveal::after { display:none; }
  .motion-v9 .motion-image-reveal img { transition: none; transform:none; filter:none; }
  .social-rail { display:none; }
  .category-card, .news-card, .admission-steps article { transition-duration:.25s; }
}

/* Respect reduced-motion while keeping a little life for this intentionally animated site. */
@media (prefers-reduced-motion: reduce) {
  .school-ribbon-track { animation-duration: 58s; }
  .ambient-orbit i { animation-duration: 16s; }
  .hero-educal-copy::after { animation-duration: 4.5s; }
  .btn::before, .nav-cta::before { display:none; }
}

@media (max-width: 1180px) { .social-rail { display:none; } }

/* Brand-aware social hover states. */
@media (hover:hover) and (pointer:fine) {
  .social-link.social-facebook:hover { background:#1877f2 !important; color:#fff !important; border-color:#1877f2 !important; }
  .social-link.social-instagram:hover { background:linear-gradient(135deg,#833ab4,#fd1d1d 55%,#fcb045) !important; color:#fff !important; border-color:transparent !important; }
  .social-link.social-tiktok:hover { background:#111 !important; color:#fff !important; border-color:#111 !important; }
}