/*==================================================
    GERMAINE — AMBIENT PAGE BACKGROUND
    ------------------------------------------------
    Extracted from school-page.css.

    Twelve pages (Homepage, About, Admissions, Apply,
    Contact, Corporate Training, Course Detail, Courses,
    Graduate Hire, News, News Article, Partner With Us)
    were loading the whole 58KB school-page.css purely to
    get this decorative background. A selector audit against
    their markup showed they use NONE of the school-page
    components — only the .sp-page / .sp-page-bg / .sp-bg-*
    / .sp-blob layers below. Those pages now load this file
    instead, removing ~55KB of render-blocking CSS from the
    critical path of every page in that list.

    Real school and course pages continue to load the full
    school-page.css, which still contains these same rules,
    so their appearance is unchanged.

    Paint cost: the blobs use radial-gradients rather than
    filter:blur(190px), and the three permanently-animated
    fixed full-viewport layers (spMesh on .sp-page-bg,
    spGridDrift on .sp-bg-grid, and the sweep) no longer
    animate background-position, which is not a compositor
    property and forced a full-screen repaint every frame.
==================================================*/

.sp-page{ position:relative; isolation:isolate; }

.sp-page-bg{
    position:fixed; inset:0; z-index:-10; pointer-events:none;
    background:
        radial-gradient(ellipse 900px 600px at 10% 0%, rgba(236, 72, 153, .08), transparent 60%),
        radial-gradient(ellipse 800px 700px at 95% 30%, rgba(236, 72, 153, .06), transparent 60%),
        radial-gradient(ellipse 700px 600px at 20% 100%, rgba(236, 72, 153, .07), transparent 55%),
        linear-gradient(180deg,#FFFFFF,#FFFFFF);
    background-size:200% 200%, 200% 200%, 200% 200%, 100% 100%;
    /* spMesh animated background-position on a fixed, full-viewport
       element — a permanent full-screen repaint. The mesh is drawn at
       0.06-0.08 alpha so the 22s drift was not perceptible. */
}

/*---------- micro grid ----------*/
.sp-bg-grid{
    position:fixed; inset:-60px; z-index:-9; pointer-events:none;
    background-image:
        linear-gradient(rgba(16, 42, 92, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 92, .035) 1px, transparent 1px);
    background-size:46px 46px, 46px 46px;
}

/*---------- soft colour blobs ----------*/
.sp-bg-blobs{ position:fixed; inset:0; z-index:-8; pointer-events:none; overflow:hidden; }

.sp-blob{ position:absolute; border-radius:50%; will-change:transform; }

.sp-blob-1{ display:none; }

.sp-blob-2{
    width:760px; height:760px; top:12%; right:-260px;
    background-image:radial-gradient(closest-side, rgba(236, 72, 153, .14), rgba(236, 72, 153, .06) 46%, transparent 72%);
    animation:spBlobB 38s ease-in-out infinite;
}

.sp-blob-3{
    width:820px; height:820px; bottom:-300px; left:22%;
    background-image:radial-gradient(closest-side, rgba(236, 72, 153, .14), rgba(236, 72, 153, .06) 46%, transparent 72%);
    animation:spBlobC 36s ease-in-out infinite;
}

.sp-blob-4{
    width:700px; height:700px; bottom:6%; right:6%;
    background-image:radial-gradient(closest-side, rgba(255, 255, 255, .17), rgba(255, 255, 255, .07) 46%, transparent 72%);
    animation:spBlobA 28s ease-in-out infinite reverse;
}

.sp-blob-5{
    width:640px; height:640px; top:42%; left:42%;
    background-image:radial-gradient(closest-side, rgba(16, 42, 92, .14), rgba(16, 42, 92, .06) 46%, transparent 72%);
    animation:spBlobB 40s ease-in-out infinite reverse;
}

@keyframes spBlobA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(60px,44px) scale(1.08); } }
@keyframes spBlobB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-54px,60px) scale(.95); } }
@keyframes spBlobC{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(46px,-56px) scale(1.05); } }

/*---------- travelling light lines ----------*/
.sp-bg-lines{ position:fixed; inset:0; z-index:-7; pointer-events:none; overflow:hidden; }
.sp-light-line{ position:absolute; height:1px; width:52%; opacity:.5; }
.sp-line-cyan{ background:linear-gradient(90deg, transparent, rgba(236, 72, 153, .55), transparent); }
.sp-line-white{ background:linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); }
.sp-light-line-1{ top:16%; left:-60%; animation:spLineTravel 27s linear infinite; }
.sp-light-line-2{ top:54%; left:-60%; animation:spLineTravel 33s linear infinite 7s; }
.sp-light-line-3{ top:82%; left:-60%; animation:spLineTravel 30s linear infinite 14s; }
@keyframes spLineTravel{ 0%{ transform:translateX(0); } 100%{ transform:translateX(220vw); } }

/*---------- floating particles ----------*/
.sp-page-particles{ position:fixed; inset:0; z-index:-6; pointer-events:none; overflow:hidden; }
.sp-page-particles span{
    position:absolute; width:3px; height:3px; border-radius:50%;
    background:var(--pt-blue-2,#EC4899); opacity:.2;
    animation-name:spDrift; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
@keyframes spDrift{
    0%{ transform:translate(0,0); }
    33%{ transform:translate(14px,-20px); }
    66%{ transform:translate(-12px,12px); }
    100%{ transform:translate(0,0); }
}

/*---------- diagonal shine sweep ----------*/
.sp-bg-shine{ position:fixed; inset:0; z-index:-5; pointer-events:none; overflow:hidden; }
.sp-bg-shine::before{
    content:""; position:absolute; top:-20%; left:-30%; width:36%; height:140%;
    background:linear-gradient(115deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform:rotate(8deg); translate:0;
    animation:spShineSweep 19s ease-in-out infinite;
    will-change:translate;
}
@keyframes spShineSweep{ 0%,100%{ translate:0; } 50%{ translate:417% 0; } }

/*---------- mobile: retire always-on decorative motion ----------*/
@media(max-width:900px){
    .sp-blob{ animation:none; }
    .sp-bg-lines,
    .sp-bg-shine{ display:none; }
    .sp-page-particles span{ animation:none; }
}

/*---------- reduced motion ----------*/
@media (prefers-reduced-motion: reduce){
    .sp-blob,
    .sp-light-line,
    .sp-page-particles span,
    .sp-bg-shine::before{ animation:none !important; }
    .sp-bg-blobs,
    .sp-bg-lines,
    .sp-page-particles,
    .sp-bg-shine{ display:none; }
}