/* ============================================================================
   Birlik International School — Advanced Motion Layer
   Effects, animations, transitions & background motion. Pairs with motion.js.
   Everything here is progressive enhancement: the site works fully without it,
   and every effect respects prefers-reduced-motion.
   ========================================================================== */

/* ------------------------------------------------------------ 0. Tokens */
:root {
    --fx-out:    cubic-bezier(.16, 1, .3, 1);      /* ease-out-expo feel   */
    --fx-spring: cubic-bezier(.34, 1.56, .64, 1);  /* playful overshoot    */
    --fx-soft:   cubic-bezier(.4, 0, .2, 1);
}

::selection { background: var(--gold); color: var(--navy-dark); }

@media (min-width: 861px) {
    ::-webkit-scrollbar { width: 12px; }
    ::-webkit-scrollbar-track { background: var(--bg-soft); }
    ::-webkit-scrollbar-thumb { background: linear-gradient(var(--teal), var(--navy)); border-radius: 8px; border: 3px solid var(--bg-soft); }
    ::-webkit-scrollbar-thumb:hover { background: var(--navy); }
}

/* ---------------------------------------- 1. Cross-page view transitions */
/* MPA view transitions (Chromium): pages melt into each other instead of a
   hard white flash. The header, progress bar and floating buttons get their
   own snapshot names so they stay rock-steady while content moves. */
@view-transition { navigation: auto; }

.site-header  { view-transition-name: site-header; }
.topbar       { view-transition-name: topbar; }
.wa-float     { view-transition-name: wa-float; }
.back-to-top  { view-transition-name: back-to-top; }
.tour-tab     { view-transition-name: tour-tab; }

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: fx-vt-out .26s cubic-bezier(.4, 0, 1, 1) both; }
    ::view-transition-new(root) { animation: fx-vt-in  .38s var(--fx-out) both; }
}
@keyframes fx-vt-out { to   { opacity: 0; transform: translateY(-14px) scale(.995); } }
@keyframes fx-vt-in  { from { opacity: 0; transform: translateY(18px)  scale(.995); } }

/* Entrance for every page load (also layers nicely under view transitions) */
@media (prefers-reduced-motion: no-preference) {
    main { animation: fx-page-in .55s var(--fx-out) both; }
}
@keyframes fx-page-in { from { opacity: 0; transform: translateY(14px); } }

/* -------------------------------------------------- 2. Scroll progress bar */
.fx-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 260;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--gold), var(--teal) 55%, var(--navy-700));
    pointer-events: none; view-transition-name: fx-progress;
}
/* CSS scroll-driven animation where supported; motion.js drives it elsewhere */
@supports (animation-timeline: scroll()) {
    .fx-progress { animation: fx-progress-grow linear both; animation-timeline: scroll(root); }
}
@keyframes fx-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------ 3. Smart sticky header */
.site-header { transition: transform .38s var(--fx-soft), box-shadow .25s ease, background .25s ease; }
.site-header.fx-hide { transform: translateY(-110%); }
.site-header.is-scrolled { background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }

.brand__logo { transition: transform .45s var(--fx-spring); }
.brand:hover .brand__logo { transform: rotate(-7deg) scale(1.08); }

/* Springier dropdown + sliding sub-links */
@media (min-width: 861px) {
    .primary-nav__sub { transform: translateY(14px) scale(.97); transform-origin: top left; transition: opacity .22s ease, transform .32s var(--fx-spring), visibility .22s; }
}
.primary-nav__sub a { transition: transform .2s var(--fx-out), color .2s ease, background .2s ease; }
.primary-nav__sub a:hover { transform: translateX(4px); }

/* --------------------------------------- 4. Hero: living background layers */
/* Aurora blobs injected by motion.js — blurred theme-coloured light that
   slowly breathes behind the hero, and leans toward the mouse. */
.fx-aurora {
    position: absolute; inset: -12%; z-index: 0; pointer-events: none; opacity: .55;
    transform: translate3d(var(--pax, 0px), var(--pay, 0px), 0);
    transition: transform .9s var(--fx-soft);
}
.fx-aurora i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; filter: blur(58px); }
.fx-aurora i:nth-child(1) { width: 55%; height: 72%; left: -10%; top: -16%; background: radial-gradient(closest-side, var(--teal), transparent 72%); animation: fx-aur-1 24s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(2) { width: 46%; height: 62%; right: -8%; top: 8%; opacity: .75; background: radial-gradient(closest-side, var(--gold), transparent 70%); animation: fx-aur-2 31s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(3) { width: 40%; height: 56%; left: 30%; bottom: -26%; opacity: .6; background: radial-gradient(closest-side, #7fd4e8, transparent 70%); animation: fx-aur-3 27s ease-in-out infinite alternate; }
@keyframes fx-aur-1 { to { transform: translate3d(16%, 12%, 0) scale(1.22) rotate(18deg); } }
@keyframes fx-aur-2 { to { transform: translate3d(-13%, 16%, 0) scale(1.3); } }
@keyframes fx-aur-3 { to { transform: translate3d(10%, -15%, 0) scale(1.18); } }

/* Constellation particle canvas (motion.js) */
.fx-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__inner, .page-hero__inner { position: relative; z-index: 2; }

/* Hero exits with parallax depth as you scroll away (scroll-driven, no JS) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .hero__inner { animation: fx-hero-exit linear both; animation-timeline: view(); animation-range: exit 5% exit 90%; }
    }
}
@keyframes fx-hero-exit { to { opacity: .2; transform: translateY(-46px) scale(.985); } }

/* ------------------------------------------ 5. Hero title word cascade */
/* motion.js splits the H1 into words; each rises out of a blur in sequence. */
.fx-title .fx-w {
    display: inline-block; opacity: 0;
    transform: translateY(.55em) scale(.97) rotate(1.5deg); transform-origin: 0 80%;
    filter: blur(8px);
    animation: fx-word-in .8s var(--fx-out) forwards;
    animation-delay: calc(75ms * var(--i, 0) + 120ms);
}
.hero h1 .fx-w { color: inherit; }             /* plain words stay white   */
.hero h1 .fx-w--hl { color: var(--gold); }     /* highlight keeps the gold */
@keyframes fx-word-in { to { opacity: 1; transform: none; filter: blur(0); } }

/* Let the words own the entrance — stop the stagger group double-fading it */
[data-stagger] > .fx-title, [data-stagger].is-in > .fx-title { opacity: 1; transform: none; transition: none; }

/* Gold highlight gets a slow shimmering sheen after it lands */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .fx-title .fx-w--hl {
        background: linear-gradient(110deg, var(--gold) 30%, #ffedc9 50%, var(--gold) 70%);
        background-size: 250% 100%;
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: fx-word-in .8s var(--fx-out) forwards, fx-shimmer 5.5s ease-in-out infinite;
        animation-delay: calc(75ms * var(--i, 0) + 120ms), 1.5s;
    }
}
@keyframes fx-shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* Hero badge gently bobs */
@media (prefers-reduced-motion: no-preference) {
    .hero__badge { animation: fx-bob 6s ease-in-out infinite alternate; }
}
@keyframes fx-bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* --------------------------------------------- 6. Reveal upgrade: blur-in */
@media (prefers-reduced-motion: no-preference) {
    .reveal { filter: blur(7px); transition: opacity .8s var(--fx-out), transform .8s var(--fx-out), filter .8s var(--fx-out); }
    .reveal.is-in { filter: blur(0); }
}

/* Section title underline + eyebrow dashes draw themselves in on reveal */
.reveal .section-title::after { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--fx-out) .25s; }
.reveal.is-in .section-title::after { transform: scaleX(1); }
.section-head--center.reveal .section-title::after { transform-origin: center; }
.reveal .eyebrow::before, .reveal .eyebrow::after { transform: scaleX(0); transition: transform .6s var(--fx-out) .1s; }
.reveal.is-in .eyebrow::before, .reveal.is-in .eyebrow::after { transform: scaleX(1); }

/* -------------------------------- 7. Scroll-driven image parallax (no JS) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .split__media img, .director__media img {
            animation: fx-drift linear both; animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }
        .split__media--stack img:nth-child(2) { animation-name: fx-drift-alt; }
    }
}
@keyframes fx-drift     { from { transform: translateY(3.5%); }  to { transform: translateY(-3.5%); } }
@keyframes fx-drift-alt { from { transform: translateY(-3%); }   to { transform: translateY(3%); } }

/* --------------------------------------------- 8. Spotlight & glow cards */
/* motion.js adds .fx-spot and tracks the cursor via --mx / --my. A soft
   light follows the pointer, and .fx-border draws a glowing border segment
   near it (gradient-border + mask-composite technique). */
.fx-spot { position: relative; }
.fx-spot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 162, 61, .15), transparent 62%);
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%);
}
.fx-spot:hover::after { opacity: 1; }
.stats .fx-spot::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .14), transparent 62%); }

.fx-border {
    position: absolute; inset: -1px; border-radius: inherit; z-index: 2;
    padding: 1.5px; opacity: 0; transition: opacity .35s ease; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--gold), transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
}
.fx-spot:hover .fx-border { opacity: 1; }

/* ------------------------------------------------- 9. 3D tilt with glare */
.fx-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-glare {
    position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
    z-index: 3; opacity: 0; transition: opacity .35s ease; pointer-events: none;
    background: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
}

/* --------------------------------------- 10. Buttons: ripple + magnetism */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: translateY(0) scale(.96); transition-duration: .08s; }
.fx-ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: currentColor; opacity: .28; transform: scale(0);
    animation: fx-ripple .65s var(--fx-out) forwards;
}
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }
.fx-mag { transition: transform .3s var(--fx-spring); will-change: transform; }

/* ------------------------------------------- 11. Accreditation marquee */
.accred__inner.fx-marquee {
    flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; padding: 26px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.fx-mq-track { display: flex; flex: none; align-items: center; animation: fx-marquee var(--mq-dur, 30s) linear infinite; }
.fx-marquee:hover .fx-mq-track { animation-play-state: paused; }
.fx-mq-group { display: flex; flex: none; align-items: center; gap: 56px; padding-right: 56px; }
.fx-mq-group .accred__badge { white-space: nowrap; text-align: left; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* ----------------------------------------- 12. Stats: gradient pop-in */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .stat__value {
        background: linear-gradient(125deg, #fff 25%, var(--gold) 85%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
@media (prefers-reduced-motion: no-preference) {
    .stat.reveal.is-in .stat__value { animation: fx-stat-pop .7s var(--fx-spring) .12s both; }
}
@keyframes fx-stat-pop { from { transform: scale(.55); } }

/* ------------------------------------ 13. Card media sheen sweep on hover */
.program-card__media, .news-card__media, .alumni-card__photo, .gallery-item { position: relative; overflow: hidden; }
.program-card__media::after, .news-card__media::after, .alumni-card__photo::after, .gallery-item::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
    transform: translateX(-130%) skewX(-8deg);
}
.program-card:hover .program-card__media::after,
.news-card:hover .news-card__media::after,
.alumni-card:hover .alumni-card__photo::after,
.gallery-item:hover::after { transform: translateX(130%) skewX(-8deg); transition: transform .85s var(--fx-out); }

/* -------------------------------------------------- 14. CTA band motion */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before {
    content: ""; position: absolute; inset: -45% -15%; z-index: -1;
    background:
        radial-gradient(36% 55% at 18% 30%, rgba(255, 255, 255, .30), transparent 70%),
        radial-gradient(28% 45% at 82% 72%, rgba(255, 255, 255, .18), transparent 70%);
    animation: fx-cta-drift 12s ease-in-out infinite alternate;
}
@keyframes fx-cta-drift { to { transform: translate3d(6%, 10%, 0) rotate(5deg) scale(1.1); } }
.cta-band::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: fx-scan 4.5s ease-in-out infinite;
}
@keyframes fx-scan { from { background-position: -70% 0; } to { background-position: 170% 0; } }

/* ---------------------------------------- 15. Floating utility buttons */
@media (prefers-reduced-motion: no-preference) {
    .wa-float { animation: fx-wa-ping 3.2s ease-out infinite; }
}
@keyframes fx-wa-ping {
    0%   { box-shadow: 0 8px 26px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .45); }
    60%  { box-shadow: 0 8px 26px rgba(37, 211, 102, .45), 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 8px 26px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, 0); }
}
.fx-ringsvg { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.fx-ringsvg circle { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; }

/* --------------------------------- 16. Ambient background: floating shapes */
.fx-has-float { position: relative; isolation: isolate; }
.fx-float { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-float i {
    position: absolute; display: block; width: var(--s, 26px); height: var(--s, 26px);
    animation: fx-float var(--d, 14s) ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes fx-float {
    from { transform: translate3d(0, 14px, 0) rotate(-10deg); }
    to   { transform: translate3d(0, -20px, 0) rotate(14deg); }
}
.fx-s--ring { border: 2.5px solid var(--teal); border-radius: 50%; opacity: .13; }
.fx-s--dot  { background: var(--gold); border-radius: 50%; opacity: .15; }
.fx-s--tri  { background: var(--teal); clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .1; }
.fx-s--sq   { border: 2.5px solid var(--gold); border-radius: 6px; opacity: .13; }
.fx-s--plus {
    opacity: .14;
    background:
        linear-gradient(var(--gold), var(--gold)) center / 100% 24% no-repeat,
        linear-gradient(var(--gold), var(--gold)) center / 24% 100% no-repeat;
}

/* --------------------------------------------- 17. Cinematic film grain */
.fx-grain {
    position: fixed; inset: 0; z-index: 1200; pointer-events: none; opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------- 18. Cursor light (desktop) */
.fx-cursor {
    position: fixed; left: 0; top: 0; width: 340px; height: 340px;
    margin: -170px 0 0 -170px; border-radius: 50%;
    pointer-events: none; z-index: 55; opacity: 0; transition: opacity .5s ease;
    mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(232, 162, 61, .32), transparent 65%);
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 34%, transparent), transparent 65%);
}

/* ----------------------------------- 20. Headline mask reveal (agency-style) */
/* motion.js wraps .section-title text in .fx-line; it rises out of a mask. */
.reveal .section-title { overflow: hidden; }
.reveal .section-title .fx-line {
    display: block; padding-bottom: .08em; margin-bottom: -.08em;
    transform: translateY(115%);
    transition: transform .85s var(--fx-out) .08s;
}
.reveal.is-in .section-title .fx-line { transform: none; }

/* ------------------------------------------------ 21. Image curtain veils */
/* motion.js drops .fx-veil into media containers; a navy→teal panel wipes
   away toward the left when the ancestor .reveal enters the viewport. */
.fx-veiled { position: relative; overflow: hidden; }
.fx-veil {
    position: absolute; inset: -1px; z-index: 4; pointer-events: none;
    background: linear-gradient(115deg, var(--navy), var(--teal));
    transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform .95s var(--fx-out) .12s;
}
.reveal:not(.is-in) .fx-veil { transform: scaleX(1); }

/* --------------------------------------- 22. Mission words light up in turn */
[data-words] .fx-mw { opacity: .13; transition: opacity .45s ease; transition-delay: calc(38ms * var(--i, 0)); }
.reveal.is-in [data-words] .fx-mw { opacity: 1; }

/* ------------------------------------ 23. Mobile menu: staggered link entry */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
    .primary-nav__list > li { opacity: 0; transform: translateX(28px); transition: opacity .38s var(--fx-out), transform .45s var(--fx-out); }
    .primary-nav.is-open .primary-nav__list > li { opacity: 1; transform: none; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(1)  { transition-delay: .05s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(2)  { transition-delay: .09s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(3)  { transition-delay: .13s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(4)  { transition-delay: .17s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(5)  { transition-delay: .21s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(6)  { transition-delay: .25s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(7)  { transition-delay: .29s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(8)  { transition-delay: .33s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(9)  { transition-delay: .37s; }
    .primary-nav.is-open .primary-nav__list > li:nth-child(10) { transition-delay: .41s; }
}

/* -------------------------------------------- 24. Condensing sticky header */
.site-header .brand { transition: transform .35s var(--fx-soft); transform-origin: left center; }
.site-header.is-scrolled .brand { transform: scale(.86); }

/* ------------------------------------------------- 19. Reduced motion off */
@media (prefers-reduced-motion: reduce) {
    .fx-aurora, .fx-canvas, .fx-grain, .fx-float, .fx-cursor, .fx-glare, .fx-border, .fx-ripple { display: none !important; }
    .fx-veil { display: none !important; }
    .reveal .section-title .fx-line { transform: none !important; transition: none; }
    [data-words] .fx-mw { opacity: 1 !important; transition: none; }
    .site-header .brand { transition: none; }
    .fx-progress { animation: none; }
    .wa-float, .hero__badge, .cta-band::before, .cta-band::after { animation: none !important; }
    .fx-title .fx-w { animation: none !important; opacity: 1; transform: none; filter: none; -webkit-text-fill-color: currentColor; background: none; }
    .fx-mq-track { animation: none !important; }
    .accred__inner.fx-marquee { flex-wrap: wrap; justify-content: center; }
    main { animation: none !important; }
    .reveal { filter: none !important; }
    .site-header { transition: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}