/* fx.css — theme-change transitions, canvas layer, grain, reveals */

#field-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Film grain — SVG turbulence, no image asset */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* Scroll reveals */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed { opacity: 1; transform: none; }

/* ---- Transition overlay ----
   themes.js adds .fx-<name> to #fx-overlay, swaps data-theme at
   peak cover (~350ms), removes the class after the animation. */

#fx-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
}

/* ACID — rainbow conic spin + invert flash */
#fx-overlay.fx-acid {
    background: conic-gradient(#ff00c8, #c8ff00, #00f0ff, #ff6a00, #ff00c8);
    mix-blend-mode: difference;
    animation: fx-acid 0.75s ease-in-out;
}
@keyframes fx-acid {
    0% { opacity: 0; transform: rotate(0deg) scale(1.4); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: rotate(240deg) scale(1.4); }
}

/* GLITCH — jittering horizontal slice bars */
#fx-overlay.fx-glitch {
    background: repeating-linear-gradient(0deg,
        var(--accent) 0 12px, transparent 12px 34px,
        var(--ink) 34px 44px, transparent 44px 70px);
    animation: fx-glitch 0.65s steps(8);
}
@keyframes fx-glitch {
    0% { opacity: 0; transform: translateX(0); }
    15% { opacity: 1; transform: translateX(-18px) skewX(4deg); }
    35% { transform: translateX(14px) skewX(-6deg); }
    55% { opacity: 1; transform: translateX(-8px); }
    80% { transform: translateX(10px) skewX(3deg); }
    100% { opacity: 0; transform: translateX(0); }
}

/* BEAM — light columns rising, white flash */
#fx-overlay.fx-beam {
    background: repeating-linear-gradient(90deg,
        transparent 0 12%, var(--accent) 12% 14%, transparent 14% 24%);
    animation: fx-beam 0.7s ease-in;
}
@keyframes fx-beam {
    0% { opacity: 0; transform: translateY(100%); }
    45% { opacity: 0.9; }
    60% { opacity: 1; background: var(--ink); }
    100% { opacity: 0; transform: translateY(-100%); }
}

/* DISSOLVE — checkerboard noise steps across the screen */
#fx-overlay.fx-dissolve {
    background: conic-gradient(var(--bg) 25%, var(--ink) 0 50%,
        var(--bg) 0 75%, var(--ink) 0);
    background-size: 24px 24px;
    animation: fx-dissolve 0.7s steps(6);
}
@keyframes fx-dissolve {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; background-position: 12px 12px; }
}

/* SCAN — CRT power collapse to a horizontal line */
#fx-overlay.fx-scan {
    background: var(--bg);
    animation: fx-scan 0.7s ease-in-out;
}
#fx-overlay.fx-scan::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    background: var(--ink);
    box-shadow: 0 0 30px var(--accent);
}
@keyframes fx-scan {
    0% { opacity: 0; transform: scaleY(1); }
    40% { opacity: 1; transform: scaleY(1); }
    50% { transform: scaleY(0.004); }
    55% { transform: scaleY(0.004); }
    70% { transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); }
}

/* ZOOM — iris punch from screen center */
#fx-overlay.fx-zoom {
    background: var(--ink);
    animation: fx-zoom 0.65s ease-in-out;
}
@keyframes fx-zoom {
    0% { opacity: 0; clip-path: circle(0% at 50% 50%); }
    45% { opacity: 1; clip-path: circle(120% at 50% 50%); }
    60% { opacity: 1; }
    100% { opacity: 0; clip-path: circle(120% at 50% 50%); }
}

/* Arrow swarm — at the bottom, multiplied cues converge on the
   landed hire button. swarm.js positions + aims each arrow. */
.swarm-arrow {
    position: fixed;
    z-index: 25;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--aim, 0deg));
    transition: opacity 0.4s;
}
body.at-bottom .swarm-arrow {
    opacity: 0;
    animation: swarm-converge 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: var(--d, 0s);
}
/* Waves close on the CTA but dissolve at a respectful ring —
   --reach is capped short of the button so nothing runs under it. */
@keyframes swarm-converge {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--aim, 0deg)) translateX(0) scale(1);
    }
    12% { opacity: 0.9; }
    62% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--aim, 0deg)) translateX(var(--reach, 60px)) scale(1.6);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--aim, 0deg)) translateX(var(--reach, 60px)) scale(1.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    #fx-overlay { animation: none !important; opacity: 0 !important; }
    body.at-bottom .swarm-arrow { animation: none; }
}