/* =========================================================================
   BSS motion layer
   Loaded only when config('bss.motion') is on (BSS_MOTION in .env).
   Works on top of every theme. Visitors whose device asks for reduced
   motion get a still version (see the end of this file).

   1. Logo intro    – the three logo squares slide together, then lift away
   2. Hero glow     – deep teal hero with turning orbit rings and glowing dots
   3. Accent word   – italic serif word with a hand-drawn underline
   4. Kicker dots   – three logo-coloured squares, the first one pulsing
   5. Hero rise     – kicker, title, text and buttons rise in one after another
   6. Light runner  – a streak of light running along the stats band
   ========================================================================= */

:root {
    --bss-glow: #9fd6ef;        /* light glow (logo light teal, lifted) */
    --bss-glow-2: #45a7c2;      /* logo light teal */
    --bss-logo-mid: #2886a2;    /* logo mid teal */
    --bss-logo-deep: #1b5968;   /* logo deep teal */
    --bss-night: #07303c;       /* hero background */
    --bss-ease: cubic-bezier(.2, .7, .2, 1);
}
html.bss-intro { --intro: 1.7s; } /* hero animations wait for the intro */

/* 1. Logo intro ---------------------------------------------------------- */
.bss-intro-overlay { display: none; }
html.bss-intro .bss-intro-overlay {
    display: flex; position: fixed; inset: 0; z-index: 2000;
    align-items: center; justify-content: center; pointer-events: none;
    background: radial-gradient(55% 45% at 50% 45%, #eaf5f9, #fff 70%);
    animation: bss-intro-out .75s var(--bss-ease) 1.5s forwards;
}
.bss-intro-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.bss-intro-mark { position: relative; width: 112px; height: 94px; }
/* Same proportions as the logo: three stepped squares with white gaps */
.bss-sq { position: absolute; display: block; }
.bss-sq--back  { left: 5.6%; top: 0; width: 88.8%; height: 98%; background: var(--bss-glow-2); animation: bss-from-right .75s var(--bss-ease) .05s both; }
.bss-sq--mid   { left: 0; top: 13.8%; width: 74.7%; height: 86.2%; background: var(--bss-logo-mid); box-shadow: 0 0 0 3px #fff; animation: bss-from-left .75s var(--bss-ease) .2s both; }
.bss-sq--front { left: 0; top: 32.7%; width: 56.6%; height: 67.3%; background: var(--bss-logo-deep); box-shadow: 0 0 0 3px #fff; transform-origin: 0 100%; animation: bss-pop .6s var(--bss-ease) .45s both; }
.bss-intro-word { display: flex; flex-direction: column; align-items: center; line-height: 1.15; animation: bss-word .6s var(--bss-ease) .75s both; }
.bss-intro-word strong { font-family: var(--bss-font-head, Inter, sans-serif); font-weight: 800; font-size: 1.5rem; color: var(--bss-logo-deep); }
.bss-intro-word small { font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #1f6f86; }

@keyframes bss-from-right { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes bss-from-left  { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes bss-pop        { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
@keyframes bss-word       { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bss-intro-out  { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* 2. Hero glow and orbit rings -------------------------------------------- */
.bss-hero.bss-glow {
    --bss-ink: #07303c;          /* the photo fades into this colour */
    --bss-ink-rgb: 7, 48, 60;
    background:
        radial-gradient(55% 60% at 10% 35%, rgba(69, 167, 194, .24), transparent 70%),
        radial-gradient(40% 50% at 92% 8%, rgba(159, 214, 239, .12), transparent 70%),
        var(--bss-night);
}
.bss-glow > .container { z-index: 1; }
.bss-orbits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bss-arc { position: absolute; border-radius: 50%; border: 1px solid rgba(159, 214, 239, .26); }
.bss-arc--l { width: 820px; height: 820px; left: -560px; top: -60px; animation: bss-spin 40s linear -12s infinite; }
.bss-arc--r { width: 940px; height: 940px; right: -640px; top: -140px; border-color: rgba(159, 214, 239, .16); animation: bss-spin 56s linear -20s infinite reverse; }
/* Comet trail along the ring, ending at the bright dot on top */
.bss-arc::before {
    content: ""; position: absolute; inset: -1px; border-radius: 50%;
    background: conic-gradient(transparent 0deg, transparent 230deg, rgba(159, 214, 239, .95) 359deg, transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.bss-arc--r::before { background: conic-gradient(rgba(159, 214, 239, .85) 0deg, transparent 130deg, transparent 360deg); }
.bss-arc::after {
    content: ""; position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%;
    background: #d6f0fb; box-shadow: 0 0 14px 4px rgba(159, 214, 239, .75);
}
.bss-arc i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--bss-glow-2); box-shadow: 0 0 12px 3px rgba(69, 167, 194, .7); }
.bss-arc i:nth-child(1) { bottom: -4px; left: calc(50% - 4px); }
.bss-arc i:nth-child(2) { top: calc(50% - 4px); left: -4px; }
.bss-arc i:nth-child(3) { top: calc(50% - 4px); right: -4px; }
@keyframes bss-spin { to { transform: rotate(360deg); } }

@media (max-width: 991.98px) {
    .bss-arc--l { width: 520px; height: 520px; left: -380px; top: 300px; }
    .bss-arc--r { width: 560px; height: 560px; right: -420px; top: -180px; }
}

/* 3. Accent word with a drawn underline ----------------------------------- */
.bss-em {
    position: relative; display: inline-block; white-space: nowrap;
    font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 700;
    font-size: 1.14em; line-height: .9; letter-spacing: 0; padding-right: .06em;
    color: var(--bss-glow);
}
.bss-em svg { position: absolute; left: 2%; bottom: -.1em; width: 96%; height: .24em; overflow: visible; }
.bss-em path {
    fill: none; stroke: var(--bss-glow-2); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
    stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: bss-draw 1.1s var(--bss-ease) calc(.9s + var(--intro, 0s)) forwards;
}
@keyframes bss-draw { to { stroke-dashoffset: 0; } }

/* 4. Kicker dots ----------------------------------------------------------- */
.bss-dots { display: inline-flex; gap: 5px; margin-right: .6rem; vertical-align: middle; position: relative; top: -1px; }
.bss-dots i { display: block; width: 7px; height: 7px; }
.bss-dots i:nth-child(1) { background: var(--bss-glow); position: relative; animation: bss-dot 2.4s ease-in-out infinite; }
.bss-dots i:nth-child(2) { background: var(--bss-glow-2); }
.bss-dots i:nth-child(3) { background: var(--bss-logo-mid); }
.bss-dots i:nth-child(1)::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--bss-glow); animation: bss-ring 2.4s ease-out infinite; }
@keyframes bss-dot  { 50% { transform: scale(1.35); opacity: .6; } }
@keyframes bss-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.8); opacity: 0; } }

/* 5. Hero rise ------------------------------------------------------------- */
.bss-rise { animation: bss-rise .9s var(--bss-ease) calc(var(--d, 0s) + var(--intro, 0s) + .1s) both; }
@keyframes bss-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Smoother scroll reveals for the rest of the page */
[data-reveal] { transition: opacity .9s var(--bss-ease), transform .9s var(--bss-ease); }

/* 6. Light running along the stats band ------------------------------------ */
.bss-runner { position: relative; overflow: hidden; }
.bss-runner::before, .bss-runner::after {
    content: ""; position: absolute; left: 0; width: 200px; height: 2px; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bss-glow), transparent);
    box-shadow: 0 0 12px rgba(159, 214, 239, .8);
    animation: bss-run 7s linear infinite;
}
.bss-runner::before { top: 0; }
.bss-runner::after { bottom: 0; animation-direction: reverse; animation-delay: -3.5s; }
@keyframes bss-run { from { transform: translateX(-220px); } to { transform: translateX(100vw); } }

/* Reduced motion: keep the look, drop the movement ------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bss-intro-overlay { display: none !important; }
    .bss-arc, .bss-dots i, .bss-dots i::after, .bss-rise { animation: none !important; }
    .bss-runner::before, .bss-runner::after { display: none; }
    .bss-em path { animation: none; stroke-dashoffset: 0; }
}