/* --- TABLE OF CONTENTS ---
 * File: animations.css
 * 
 * 1. Animation Core (The State Machine)
 * ========================================= */

/* =============================================
   Animation Core (The State Machine)
   Classes toggled by Javascript Observer
============================================= */

/* Setup - Initial Hidden States */
.scene-content .stagger-1,
.scene-content .stagger-2,
.scene-content .stagger-3,
.scene-content .stagger-4,
.scene-container .stagger-1,
.scene-container .stagger-2,
.scene-container .stagger-3,
.scene-container .stagger-4 {
    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;
}

.hero-text-mask {
    overflow: hidden;
    display: block;
    padding-bottom: 10px;
}

.hero-text-mask .stagger-1,
.hero-text-mask .stagger-2 {
    transform: translateY(120%);
    /* Masked periscope effect */
}

/* Active Entrance Animations */
.scene.active .stagger-1  {
    animation: slideUp var(--duration-base) var(--physics-overshoot) forwards;
    animation-delay: 0.1s;
    will-change: transform, opacity;
}

.scene.active .stagger-2  {
    animation: slideUp var(--duration-base) var(--physics-overshoot) forwards;
    animation-delay: calc(0.1s + var(--delay-stagger));
    will-change: transform, opacity;
}

.scene.active .stagger-3  {
    animation: slideUp var(--duration-base) var(--physics-overshoot) forwards;
    animation-delay: calc(0.1s + (var(--delay-stagger) * 2));
    will-change: transform, opacity;
}

.scene.active .stagger-4  {
    animation: slideUp var(--duration-base) var(--physics-overshoot) forwards;
    animation-delay: calc(0.1s + (var(--delay-stagger) * 3));
    will-change: transform, opacity;
}

/* Exit Animations (When Scrolling away bi-directionally) */
.scene.exit .stagger-1,
.scene.exit .stagger-2,
.scene.exit .stagger-3,
.scene.exit .stagger-4  {
    animation: fadeDownOut 0.5s var(--physics-anticipate) forwards;
    will-change: transform, opacity;
}

/* Base Keyframes */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideRightIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeDownOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(4px);
    }
}

/* Background Geometry Scale Animation */
.scene.active .bg-geometry  {
    animation: scaleGeo 1.5s var(--physics-heavy) forwards;
    will-change: transform, opacity;
}

@keyframes scaleGeo {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 0.03;
    }
}


/* Local Cascades (e.g. within a grid) */
.scene.active .gallery-item.delay-1  {
    animation: cardPop 0.6s var(--physics-spring) forwards;
    animation-delay: 0.2s;
    opacity: 0;
    will-change: transform, opacity;
}

.scene.active .gallery-item.delay-2  {
    animation: cardPop 0.6s var(--physics-spring) forwards;
    animation-delay: 0.35s;
    opacity: 0;
    will-change: transform, opacity;
}

.scene.active .gallery-item.delay-3  {
    animation: cardPop 0.6s var(--physics-spring) forwards;
    animation-delay: 0.5s;
    opacity: 0;
    will-change: transform, opacity;
}

@keyframes cardPop {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* The Living State - Continuous floating motion for active elements */
@keyframes slowFloat {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

.scene.active .floating-state  {
    animation: slowFloat 6s ease-in-out infinite;
    will-change: transform, opacity;
}





/* Extracted from sections.css */
@keyframes heroSceneExit {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.97);
        filter: blur(2px);
    }
}

/* Extracted from sections.css */
@keyframes kbZoomIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

/* Extracted from sections.css */
@keyframes kbZoomOut {
    from {
        transform: scale(1.12);
    }

    to {
        transform: scale(1.0);
    }
}

/* Extracted from sections.css */
@keyframes heroTitleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* Extracted from sections.css */
@keyframes revealMaskUp {
    0% {
        transform: translateY(110%) rotate(5deg);
        opacity: 0;
    }

    100% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }
}

/* Extracted from sections.css */
@keyframes fadeSlideUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Extracted from sections.css */
@keyframes buttonPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Extracted from sections.css */
@keyframes shapeExpand {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Extracted from sections.css */
@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Extracted from sections.css */
@keyframes sfElasticPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Extracted from sections.css */
@keyframes sfDriftIn {
    0% {
        opacity: 0;
        transform: translateX(100px) skewX(-10deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) skewX(0);
    }
}

/* Extracted from sections.css */
@keyframes sfHeavyDrop {
    0% {
        opacity: 0;
        transform: translateY(-100px) scale(1.1);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Extracted from sections.css */
@keyframes catSequence1 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(100px) rotate(10deg) scale(0.8);
    }

    5% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(0) rotate(0) scale(1);
    }

    25% {
        transform: translate(-50%, -50%) translateY(-10px);
    }

    30% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    35% {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(-50%) rotate(-5deg) scale(0.9);
    }

    100% {
        opacity: 0;
    }
}

/* Extracted from sections.css */
@keyframes catSequence2 {

    0%,
    30% {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(50%) rotate(5deg) scale(0.9);
    }

    35% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(0) rotate(0) scale(1);
    }

    60% {
        transform: translate(-50%, -50%) translateY(-10px);
    }

    85% {
        transform: translate(-50%, -50%) translateY(0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(-5px);
    }
}

/* Extracted from sections.css */
@keyframes exitThrowsLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    30% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(-150%);
        opacity: 0;
    }
}

/* Extracted from sections.css */
@keyframes exitThrowsRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    30% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(150%);
        opacity: 0;
    }
}

/* Extracted from sections.css */
@keyframes caretBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

/* Extracted from sections.css */
@keyframes statDescShimmer {
    0% {
        background-position: 200% center;
    }

    60% {
        background-position: -200% center;
    }

    100% {
        background-position: -200% center;
    }
}

/* Extracted from sections.css */
@keyframes ctaPulse {

    0%,
    100% {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    }

    50% {
        box-shadow: 0 12px 45px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(255, 255, 255, 0.12);
    }
}

/* Extracted from sections.css */
@keyframes waFloatPulse {

    0%,
    100% {
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    50% {
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0.12), 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}
/* ==========================================================================
   SST PRELOADER (Phase 3, deliverable 3.12 — includes/preloader.php)
   Print-house identity: logo over an ink-fill bar with CMYK ink dots.
   JS contract (js/global.js initPreloader): adds .sst-pre-exit to fade
   out, then removes the node. No-JS failsafe: sstPreAutoHide hides the
   overlay after 6s regardless (JS always exits by ~4s when it runs).
   ========================================================================== */
#sst-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #070c16 0%, #0f172a 60%, #0d1e33 100%);
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s ease;
    overflow: hidden;
    /* No-JS failsafe */
    animation: sstPreAutoHide 0.8s ease 6s forwards;
}

/* ── Glow Orbs behind preloader content ── */
#sst-preloader::before,
#sst-preloader::after {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    animation: sstOrbPulse 8s ease-in-out infinite alternate;
}
#sst-preloader::before {
    top: -80px;
    left: -80px;
    background: radial-gradient(circle, var(--color-brand-blue, #23a4d6) 0%, transparent 70%);
}
#sst-preloader::after {
    bottom: -80px;
    right: -80px;
    background: radial-gradient(circle, var(--color-brand-red, #E62B2B) 0%, transparent 70%);
    animation-delay: -4s;
}

#sst-preloader.sst-pre-exit {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.sst-pre-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
}
.sst-pre-logo {
    width: 130px;
    height: auto;
    animation: sstPreBreathe 2.8s ease-in-out infinite;
}
/* Ink-fill bar — fiber-optic glow track */
.sst-pre-track {
    width: 190px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.sst-pre-ink {
    height: 100%;
    width: 50%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--color-brand-blue, #23a4d6) 25%, #ffffff 50%, var(--color-brand-blue, #23a4d6) 75%, transparent);
    box-shadow: 0 0 12px var(--color-brand-blue, #23a4d6);
    animation: sstInkFeed 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* CMYK ink dots — with glowing shadows */
.sst-pre-cmyk {
    display: flex;
    gap: 0.75rem;
}
.sst-pre-cmyk span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: sstInkDrop 1.4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}
.sst-ink-c { background: #00AEEF; box-shadow: 0 0 8px rgba(0, 174, 239, 0.8); }
.sst-ink-m { background: #EC008C; box-shadow: 0 0 8px rgba(236, 0, 140, 0.8); animation-delay: 0.15s; }
.sst-ink-y { background: #FFF200; box-shadow: 0 0 8px rgba(255, 242, 0, 0.8); animation-delay: 0.3s; }
.sst-ink-k { background: #0c1424; box-shadow: 0 0 8px rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.4); animation-delay: 0.45s; }

.sst-pre-tag {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.45);
    margin: 0;
    animation: sstLetterExpand 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sstOrbPulse {
    0% { transform: scale(1) translate(0, 0); opacity: 0.1; }
    100% { transform: scale(1.15) translate(20px, -20px); opacity: 0.2; }
}
@keyframes sstPreBreathe {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 20px rgba(35, 164, 214, 0.2));
    }
    50% {
        transform: translateY(-6px) scale(1.02);
        filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 30px rgba(35, 164, 214, 0.35));
    }
}
@keyframes sstInkFeed {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(310%); }
}
@keyframes sstInkDrop {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.65; }
    50%      { transform: translateY(-6px) scale(1.1); opacity: 1; }
}
@keyframes sstLetterExpand {
    from { letter-spacing: 0.25em; opacity: 0; }
    to   { letter-spacing: 0.45em; opacity: 1; }
}
@keyframes sstPreAutoHide {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (min-width: 768px) {
    .sst-pre-logo  { width: 160px; }
    .sst-pre-track { width: 230px; }
}
/* Accessibility: reduced motion → static logo, quick fade, no bouncing */
@media (prefers-reduced-motion: reduce) {
    .sst-pre-logo, .sst-pre-ink, .sst-pre-cmyk span { animation: none; }
    .sst-pre-ink { width: 100%; transform: none; }
    #sst-preloader { transition-duration: 0.2s; }
}