/* ==========================================================================
   EducationistGuru – motion
   Springy, quick and quiet: things settle into place like a phone UI rather than float around.
   Only transform / opacity / clip-path are animated, so it stays smooth on budget phones.
   Everything here switches off for visitors who ask their device for reduced motion.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* fast start, long soft landing */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* small overshoot, like a spring */
  --ease-snap: cubic-bezier(.2, .9, .25, 1.1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --t-fast: .18s;
  --t-mid: .42s;
  --t-slow: .8s;
}

/* Page-to-page transitions (Chrome, Edge, Safari 18+; others simply load normally) -------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.announce { view-transition-name: announce; }
.mobile-bar { view-transition-name: mobile-bar; }
::view-transition-old(root) { animation: vt-out .22s var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px) scale(.992); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* Smooth scrolling is done in motion.js (eased wheel scrolling); native smoothing would fight it. */
html.has-smooth-scroll { scroll-behavior: auto; }

/* Intro: logo draws in, ring completes, curtain lifts (about one second) -------------------- */
.show-intro .intro {
  display: flex; position: fixed; inset: 0; z-index: 300; background: var(--paper); align-items: center; justify-content: center;
  pointer-events: none; animation: intro-lift .55s var(--ease-in) .78s forwards;
}
.show-intro .intro img { position: relative; width: 132px; height: auto; animation: intro-logo .7s var(--ease-spring) both; }
.intro-ring { position: absolute; width: 196px; height: 196px; border-radius: 50%; border: 2px solid var(--saffron-line); }
.intro-ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--saffron); border-right-color: var(--saffron);
  animation: intro-spin .8s var(--ease-out) both; }
@keyframes intro-logo { from { opacity: 0; transform: translateY(14px) scale(.86); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-spin { from { transform: rotate(-120deg); opacity: 0; } to { transform: rotate(240deg); opacity: 1; } }
@keyframes intro-lift { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.show-intro .intro { clip-path: inset(0 0 0 0); }

/* Scroll reveal ------------------------------------------------------------------------------ */
.js [data-reveal] {
  /* translate/scale (not transform) so hover lifts on the same element still work */
  opacity: 0; translate: 0 26px; scale: .985; filter: blur(4px);
  transition: opacity .7s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-out), filter .7s var(--ease-out), transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .25s, background-color .25s, color .25s;
  --d: calc(var(--i, 0) * 70ms);
  transition-delay: var(--d), var(--d), var(--d), var(--d), 0s, 0s, 0s, 0s, 0s; /* stagger the reveal, never the hover */
}
.js [data-reveal].is-in { opacity: 1; translate: none; scale: none; filter: none; }
.js [data-reveal="clip"] { opacity: 1; filter: none; translate: none; scale: none; clip-path: inset(18% 8% 18% 8% round 24px); transition: clip-path 1.1s var(--ease-out); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js .row-card, .js .results > .empty, .js .results > .nudge { animation: rise .55s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 10) * 40ms); }
@keyframes rise { from { opacity: 0; translate: 0 16px; } }

/* Headline words slide up from a mask */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--wi, 0) * 55ms + 80ms); }
.js [data-split].is-in .w > span { transform: none; }

/* Buttons: spring press, soft lift, ripple ------------------------------------------------- */
.btn, .icon-btn, .chip, .heart, .finder-tab, .nav-link, .pager a, .sl-remove, .nudge-close {
  transition: transform .45s var(--ease-spring), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow .35s var(--ease-out);
}
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(42, 28, 20, .55); }
.btn:active, .icon-btn:active, .chip:active, .heart:active, .pager a:active { transform: scale(.95); transition-duration: .12s; }
.icon-btn:hover, .chip:hover { transform: translateY(-1px); }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: currentColor; opacity: .18; transform: scale(0); animation: ripple .65s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
[data-magnetic] { will-change: transform; }

/* Nav underline */
.main-nav .nav-link { position: relative; }
.main-nav .nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--saffron); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .45s var(--ease-out); }
.main-nav .nav-link:hover::after, .main-nav .nav-link.is-active::after { transform: scaleX(1); }
.nav-link .chev { transition: transform .45s var(--ease-spring); }

/* Mega menus: drop, scale and stagger ------------------------------------------------------ */
.mega { transform: translateX(-50%) translateY(10px) scale(.975); transform-origin: 50% 0; transition: opacity .2s ease, transform .5s var(--ease-spring), visibility 0s linear .5s; }
.mega.is-open { transform: translateX(-50%); transition: opacity .2s ease, transform .5s var(--ease-spring), visibility 0s; }
.mega-sm { transform: translateY(10px) scale(.975); transform-origin: 100% 0; }
.mega-sm.is-open { transform: none; }
.mega .mega-col, .mega .mega-list li, .mega .mega-foot { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .5s var(--ease-out); }
.mega.is-open .mega-col, .mega.is-open .mega-list li, .mega.is-open .mega-foot { opacity: 1; transform: none; }
.mega.is-open .mega-col:nth-child(2), .mega.is-open .mega-list li:nth-child(2) { transition-delay: .04s; }
.mega.is-open .mega-col:nth-child(3), .mega.is-open .mega-list li:nth-child(3) { transition-delay: .08s; }
.mega.is-open .mega-col:nth-child(4), .mega.is-open .mega-list li:nth-child(4) { transition-delay: .12s; }
.mega.is-open .mega-col:nth-child(5), .mega.is-open .mega-list li:nth-child(5) { transition-delay: .16s; }
.mega.is-open .mega-col:nth-child(n+6) { transition-delay: .2s; }
.mega.is-open .mega-foot { transition-delay: .18s; }
.mega li a { transition: color var(--t-fast), transform .35s var(--ease-out); }
.mega li a:hover { transform: translateX(3px); }
.mega-list a { transition: background-color var(--t-fast), transform .35s var(--ease-out); }
.mega-list a:hover { transform: translateX(3px); }

/* Drawer / sheet / search / modal --------------------------------------------------------- */
.drawer { transition: visibility 0s linear .55s; }
.drawer.is-open { transition: visibility 0s; }
.drawer-backdrop { opacity: 0; transition: opacity .4s ease; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer-panel { transform: translateX(104%); transition: transform .55s var(--ease-out); }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-panel > * { opacity: 0; transform: translateX(18px); transition: opacity .3s ease, transform .5s var(--ease-out); }
.drawer.is-open .drawer-panel > * { opacity: 1; transform: none; }
.drawer.is-open .drawer-panel > :nth-child(2) { transition-delay: .05s; }
.drawer.is-open .drawer-panel > :nth-child(3) { transition-delay: .08s; }
.drawer.is-open .drawer-panel > :nth-child(4) { transition-delay: .11s; }
.drawer.is-open .drawer-panel > :nth-child(5) { transition-delay: .14s; }
.drawer.is-open .drawer-panel > :nth-child(n+6) { transition-delay: .17s; }

.sheet { transition: visibility 0s linear .55s; }
.sheet.is-open { transition: visibility 0s; }
.sheet-panel { transform: translateX(104%); transition: transform .55s var(--ease-out); }
.sheet.is-open .sheet-panel { transform: none; }
.sl-item { animation: sl-in .5s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
.sl-item.is-leaving { animation: sl-out .32s var(--ease-in) forwards; }
@keyframes sl-in { from { opacity: 0; transform: translateX(24px) scale(.96); } }
@keyframes sl-out { to { opacity: 0; transform: translateX(40px) scale(.94); height: 0; padding-block: 0; margin-block: -4px; border-width: 0; } }

.search-overlay { transition: opacity .25s ease, visibility 0s linear .3s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.search-overlay.is-open { transition: opacity .25s ease, visibility 0s; }
.search-box { transform: translateY(-18px) scale(.98); opacity: 0; transition: transform .55s var(--ease-spring), opacity .25s ease; }
.search-overlay.is-open .search-box { transform: none; opacity: 1; }
.suggest li { animation: rise .35s var(--ease-out) both; }

.modal { transition: visibility 0s linear .4s; }
.modal.is-open { transition: visibility 0s; }
.modal-backdrop { opacity: 0; transition: opacity .3s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal.is-open .modal-backdrop { opacity: 1; }
.modal-dialog { opacity: 0; transform: translateY(22px) scale(.94); transition: opacity .25s ease, transform .55s var(--ease-spring); }
.modal.is-open .modal-dialog { opacity: 1; transform: none; }
.filters { transition: transform .55s var(--ease-out); }

/* Gentle prompt */
.nudge-card { opacity: 0; transform: translateY(26px) scale(.94); transform-origin: 100% 100%; transition: opacity .3s ease, transform .6s var(--ease-spring), visibility 0s linear .6s; }
.nudge-card.is-open { opacity: 1; transform: none; transition: opacity .3s ease, transform .6s var(--ease-spring), visibility 0s; }

/* Toast */
.toast { animation: toast-in .5s var(--ease-spring) both; }
.toast.is-leaving { animation: toast-out .3s var(--ease-in) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 20px) scale(.92); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 12px) scale(.96); } }

/* Hearts */
.heart.is-popping svg { animation: heart-pop .55s var(--ease-spring); }
.heart.is-popping::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--saffron); animation: heart-ring .6s var(--ease-out) forwards; pointer-events: none; }
@keyframes heart-pop { 0% { transform: scale(1); } 30% { transform: scale(1.38); } 60% { transform: scale(.88); } 100% { transform: scale(1); } }
@keyframes heart-ring { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.5); } }
.sl-count.is-bumping { animation: bump .5s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.45); } }

/* Cards lift ---------------------------------------------------------------------------- */
a.card, .card.is-linked, .mode-card, .post-card, .body-tile, .row-card, .quote-card, .cover-card, .dl-card, .hero-scholar, .scholar-card, .marquee li a, .state-tile, .contact-card {
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .25s, background-color .25s, color .25s;
}
a.card:hover, .card.is-linked:hover, .post-card:hover, .body-tile:hover, .quote-card:hover, .cover-card:hover, .dl-card:hover, .scholar-card:hover, .state-tile:hover, .contact-card:hover {
  transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(42, 28, 20, .5);
}
.row-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -26px rgba(42, 28, 20, .5); }
.hero-scholar:hover { transform: translateY(-3px) rotate(-.4deg); }
.mode-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); }
.mode-card:hover { --lift: -4px; box-shadow: 0 30px 50px -30px rgba(42, 28, 20, .55); }
.mode-go { transition: transform .5s var(--ease-spring), background-color .25s, color .25s, border-color .25s; }
.mode-card:hover .mode-go { transform: translateX(4px); background: var(--ink); color: #fff; border-color: var(--ink); }
.post-card .post-cover img, .video-thumb img { transition: transform 1s var(--ease-out), opacity .3s; }
.post-card:hover .post-cover img, .video-thumb:hover img { transform: scale(1.05); }
.video-thumb .play { transition: transform .5s var(--ease-spring), background-color .2s; }
.video-thumb:hover .play { transform: translate(-50%, -50%) scale(1.12); }
.state-tile i { transition: transform .5s var(--ease-spring), color .25s; }
.state-tile:hover i { transform: translateY(-50%) translateX(4px); }
.link-arrow::after { display: inline-block; transition: transform .45s var(--ease-spring); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Announcement bar rotation */
.announce-item { opacity: 0; transform: translateY(100%); transition: opacity .45s ease, transform .6s var(--ease-out); }
.announce-item.is-on { opacity: 1; transform: none; }
.announce-item.is-out { opacity: 0; transform: translateY(-100%); }
.no-js .announce-item:first-child { opacity: 1; transform: none; }
.announce-dot { animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px rgba(242, 90, 20, 0); } }

/* Hero */
.hero-orbits svg { animation: orbit 140s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.hero-scholar { animation: float 6s ease-in-out infinite 1.2s; }
@keyframes float { 50% { transform: translateY(-5px); } }
.finder-panel:not([hidden]) { animation: panel-in .45s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

/* Marquee */
.marquee-track { animation: marquee 48s linear infinite; }
.marquee.is-reverse .marquee-track { animation-direction: reverse; animation-duration: 56s; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Journey */
.journey-slide { opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .5s ease, transform .8s var(--ease-spring); }
.journey-slide.is-on { opacity: 1; transform: none; }
.journey-slide.is-past { opacity: 0; transform: translateY(-30px) scale(.94); }
.journey-icon { transition: transform .8s var(--ease-spring); }
.journey-slide.is-on .journey-icon { animation: icon-pop .8s var(--ease-spring); }
@keyframes icon-pop { from { transform: scale(.6) rotate(-12deg); } }
.journey-step { transition: opacity .5s ease; }
.js .journey .journey-step:not(.is-on) { opacity: .45; }
.journey-n { transition: background-color .35s, color .35s, border-color .35s, transform .5s var(--ease-spring); }
.journey-step.is-on .journey-n { transform: scale(1.08); }

/* Scholarship */
.scholar-chips li { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
.scholar-band.is-in .scholar-chips li, .no-js .scholar-chips li { opacity: 1; transform: none; }
.dial-fg { stroke-dashoffset: 99; transition: stroke-dashoffset 1.8s var(--ease-out) .3s; }
.scholar-dial.is-in .dial-fg { stroke-dashoffset: 0; }
.dial-eq { animation: float 5s ease-in-out infinite; }

/* Floating WhatsApp: a quiet pulse every few seconds */
.float-wa { transition: transform .5s var(--ease-spring), background-color .2s; }
.float-wa:hover { transform: scale(1.06); }
.float-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1f7a44; animation: wa-pulse 4s var(--ease-out) infinite 3s; pointer-events: none; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .8; } 35%, 100% { transform: scale(1.7); opacity: 0; } }

/* Forms */
.input, .select, .textarea { transition: border-color .2s, box-shadow .3s var(--ease-out); }
[data-lead-form].is-done .form-success, [data-review-form].is-done .form-success { display: block; animation: success-in .6s var(--ease-spring); }
[data-review-form].is-done .form-body { display: none; }
@keyframes success-in { from { opacity: 0; transform: scale(.94) translateY(8px); } }
.results.is-loading { opacity: .45; transition: opacity .15s; }
.chip-radio { transition: background-color .25s, color .25s, border-color .25s, transform .45s var(--ease-spring); }

/* Smooth open/close for FAQ and editor collapsibles where supported */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content, .prose details::details-content, .eg-faq details::details-content {
    block-size: 0; overflow: hidden; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete;
  }
  .faq details[open]::details-content, .prose details[open]::details-content, .eg-faq details[open]::details-content { block-size: auto; }
}
.faq summary::after { transition: transform .45s var(--ease-spring); }
.faq details[open] summary::after { transform: rotate(180deg); }

/* Header on scroll */
.site-header .brand img { transition: height .45s var(--ease-out); }
.site-header.is-scrolled .brand img { height: 50px; }
.site-header.is-scrolled .wrap { min-height: 68px; }
.site-header .wrap { transition: min-height .45s var(--ease-out); }

/* Reduced motion: show everything at once, keep only colour changes ----------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-split] .w > span, .scholar-chips li { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; filter: none !important; clip-path: none !important; }
  .marquee-track, .hero-orbits svg { animation: none !important; }
  .show-intro .intro { display: none; }
  @view-transition { navigation: none; }
}
@media (max-width: 640px) {
  .site-header.is-scrolled .brand img { height: 38px; }
  .site-header.is-scrolled .wrap { min-height: 58px; }
  .sheet-panel { transform: translateY(104%); }
  .js [data-reveal] { filter: none; }
}

/* motion.js did not run (blocked or failed): never leave content invisible */
.no-motion [data-reveal], .no-motion [data-split] .w > span, .no-motion .scholar-chips li, .no-motion .prose .eg-blk, .no-motion .prose .eg-blk * {
  opacity: 1 !important; translate: none !important; transform: none !important; filter: none !important; clip-path: none !important;
}