/*==================================================
GERMAINE — PERFORMANCE QUIET LAYER
Loaded last on every page.

Purpose: stop always-on DECORATIVE background motion that
repaints behind real content, without changing the design's
colours, layout or any interaction feedback.

What is stopped (all purely decorative, all infinite):
  .sp-blob-*            4 fixed 640-820px blobs drifting + scaling forever
  .sp-light-line-*      travelling light lines sweeping 220vw forever
  .sp-bg-shine::before  full-height diagonal shine sweep
  .sp-page-particles    floating drifting dots
  .alu-particle         floating dots on Alumni / Student Life heroes
  travelling conic-gradient panel borders (@property angle animation,
  which cannot be composited and repaints the panel every frame)

What is deliberately KEPT:
  - every hover/focus transition and button feedback
  - hero photo crossfades (content, not decoration)
  - the scroll-cue chevron
  - all blob/gradient COLOUR - the washes stay, they just hold still
==================================================*/

/* --- drifting background blobs: keep the colour wash, drop the motion --- */
.sp-blob{
    animation: none !important;
    will-change: auto !important;   /* release permanent GPU layers */
}

/* --- travelling lines & shine sweep: motion is all they are --- */
.sp-bg-lines,
.sp-bg-shine{ display: none !important; }

/* --- floating particles --- */
.sp-page-particles span{ animation: none !important; }
.sp-page-particles{ display: none !important; }
.alu-particle{ display: none !important; }

/* --- travelling conic-gradient borders (per-frame repaint) --- */
.alu-hero-panel::before,
.alu-form-panel::after,
.alu-stats::after{ animation: none !important; }

/*==================================================
NAVIGATION FIT
At roughly 1150-1400px the Level-3 nav had just enough
items to wrap onto two lines. Tightening spacing and type
a little in that band keeps it on one line; below 993px the
mobile panel takes over and is unaffected.
==================================================*/
@media (min-width: 993px) and (max-width: 1400px){
    .nav-links{ gap: 0; }
    .nav-links > li > a{
        font-size: .82rem;
        padding-left: 9px;
        padding-right: 9px;
        letter-spacing: 0;
    }
    .nav-links .nav-twoline .nav-line{ font-size: .8rem; }
}

/*==================================================
SCROLLING
Long image grids get containment so off-screen sections
are not re-laid-out while scrolling.
==================================================*/
.vl-grid,
.sp-prog-grid,
.cp-grid{ content-visibility: auto; contain-intrinsic-size: 1px 800px; }


/*==================================================
GTI-RESPONSIVE-PASS
Tablet / mobile refinements for the sections added or
reworked in this run. Desktop layout is untouched.
==================================================*/

/* ---- Virtual Learning cards: fees must never overflow ---- */
@media (max-width: 1024px){
    .vl-grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 640px){
    .vl-fee-row{ flex-direction: column; align-items: flex-start; gap: 2px; }
    .vl-fee-new{ font-size: 1.05rem; }
    .vl-card h3{ font-size: .95rem; }
    .vl-card-cta{ width: 100%; }
    .vl-filters{ gap: 8px; }
    .vl-filter{ font-size: .78rem; padding: 8px 13px; }
}

/* ---- Career Portal pills: wrap instead of overflowing ---- */
.sp-portals-row{ flex-wrap: wrap; }
@media (max-width: 640px){
    .sp-portal-item{ width: 100%; justify-content: flex-start; }
}

/* ---- Alumni form: single column on small screens ---- */
@media (max-width: 768px){
    .alu-row-compact{ grid-template-columns: 1fr !important; }
    .alu-pill-group{ gap: 8px; }
    .alu-pill-choice{ font-size: .82rem; }
}

/* ---- Long text must never force a horizontal scrollbar ---- */
@media (max-width: 640px){
    body{ overflow-x: hidden; }
    .vl-card, .sp-portal-item{ overflow-wrap: anywhere; }
}


/* ===== GTI-PERF-DEEP-2026 =====
   Removes continuously-running decorative work site-wide.
   Visual identity is preserved: colours, gradients and shadows
   stay, only the perpetual motion is stopped. */

/* stop every infinite decorative animation */
.sp-hv-blob,.sp-hv-hexgrid,.sp-hv-line,.sp-hv-particles,
.sp-blob,.sp-bg-lines,.sp-bg-shine,.sp-page-particles,
.alu-particle,.hero-particles,.floating,.float,.pulse,.glow,
[class*="particle"],[class*="-blob"],[class*="sparkle"]{
  animation:none!important;will-change:auto!important}
.sp-hv-particles,.sp-page-particles,.hero-particles,[class*="particle"]{display:none!important}

/* decorative pseudo-elements must not animate */
.sp-hv-frame-shine::before,.sp-hv-frame-shine::after,
.alu-hero-panel::before,.alu-form-panel::after,.alu-stats::after,
.sp-portals::before,.cp-card::before,.sp-prog-card::before{
  animation:none!important}

/* no perpetual gradient / background-position motion */
[style*="background-position"],.animated-gradient,.gradient-move{animation:none!important}

/* containment so off-screen sections cost nothing */
.vl-grid,.sp-prog-grid,.cp-grid{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* cheaper compositing: drop blur-based surfaces to solid ones */
.glassy,.glass,[class*="backdrop"]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* honour the user's motion preference everywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* GTI-REVEAL-IMMEDIATE */
.reveal,.reveal-up,.fade-up,.animate-on-scroll,[data-reveal]{opacity:1!important;transform:none!important;animation:none!important;visibility:visible!important}
/* GTI-REVEAL-IMMEDIATE-2 : content paints with its container, no scroll-gated reveal */
.reveal,.ab-reveal,.cu-reveal,.ct-reveal,.gh-reveal,.pw-reveal,.sc-reveal,.sp-reveal,.sl-reveal,
.reveal.is-visible,.ab-reveal.is-visible,.cu-reveal.is-visible,.ct-reveal.is-visible,
.gh-reveal.is-visible,.pw-reveal.is-visible,.sc-reveal.is-visible,.sp-reveal.is-visible,.sl-reveal.is-visible{
opacity:1!important;visibility:visible!important;transform:none!important;animation:none!important;transition:none!important}
/* no continuously animated gradient text */
.pt-word{animation:none!important}
/* decorative rings/blobs must never create a horizontal scrollbar */
body{overflow-x:clip}
/* GTI-NO-HSCROLL : fixed/absolute decorations must not widen the page */
html{overflow-x:clip}