/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS · PREMIUM MOTION LIBRARY
   ───────────────────────────────────────────────────────────────
   All @keyframes + reveal/transition utilities live here.
   Component CSS only references animation NAMES — definitions stay.
   Designed for high tactile feedback, organic flow, and fluid UI.
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   1 · ENTRANCE KEYFRAMES (Organic fluid reveals)
   ════════════════════════════════════════════════════════════════ */

@keyframes reveal-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-up-lg {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-down {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-left {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-zoom {
    from { opacity: 0; transform: scale(.93); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes reveal-zoom-spring {
    0%   { opacity: 0; transform: scale(.84); }
    65%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes blur-in {
    from { opacity: 0; filter: blur(12px); transform: translateY(16px) scale(.98); }
    to   { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes pop-in {
    0%   { opacity: 0; transform: translateY(12px) scale(.92); }
    70%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pill-in {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes detail-in {
    from { opacity: 0; transform: translateY(20px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes announcement-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes msg-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════════
   2 · LOOP / AMBIENT KEYFRAMES (Organic lifelike breathing)
   ════════════════════════════════════════════════════════════════ */

@keyframes shine-sweep {
    0%   { transform: translateX(-150%) skewX(-15deg); }
    50%  { transform: translateX(250%) skewX(-15deg); }
    100% { transform: translateX(250%) skewX(-15deg); }
}

@keyframes float-y {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

@keyframes logo-float {
    0%   { transform: translateY(0) rotate(-1.5deg); }
    50%  { transform: translateY(-6px) rotate(1.5deg); }
    100% { transform: translateY(0) rotate(-1.5deg); }
}

@keyframes breathe {
    0%, 100% { opacity: .55; filter: drop-shadow(0 0 2px rgba(227,10,23,0)); }
    50%      { opacity: 1; filter: drop-shadow(0 0 8px var(--accent-glow)); }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(1.35); }
}

@keyframes ping {
    0%   { transform: scale(1); opacity: .80; }
    100% { transform: scale(2.8); opacity: 0; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes skel-shimmer {
    0%   { background-position: 180% 0; }
    100% { background-position: -180% 0; }
}

@keyframes save-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.65); }
    70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

@keyframes color-cycle-dot {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50%      { box-shadow: 0 0 0 8px rgba(227,10,23,0); }
}

@keyframes wave-bar {
    0%, 60%, 100% { transform: scaleY(.3); }
    30%           { transform: scaleY(1); }
}

@keyframes orb-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(45px, 30px) scale(1.08) rotate(3deg); }
}

@keyframes orb-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-30px, -45px) scale(1.1) rotate(-3deg); }
}

@keyframes hero-orb-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(90px, 45px) scale(1.15) rotate(6deg); }
}

@keyframes hero-orb-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-60px, -75px) scale(1.22) rotate(-6deg); }
}

@keyframes hero-word {
    from { opacity: 0; transform: translateY(30px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes hero-underline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes ripple-out {
    from { opacity: .6; transform: scale(0); }
    to   { opacity: 0; transform: scale(2.6); }
}


/* ════════════════════════════════════════════════════════════════
   3 · VIEW TRANSITION KEYFRAMES (Grid ↔ Detail SPA animations)
   ════════════════════════════════════════════════════════════════ */

@keyframes view-leave {
    from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    to   { opacity: 0; transform: translateY(-20px) scale(.98); filter: blur(4px); }
}

@keyframes view-enter {
    from { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes view-enter-detail {
    from { opacity: 0; transform: translateY(36px) scale(.97); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}


/* ════════════════════════════════════════════════════════════════
   4 · HERO STORY-SCENE KEYFRAMES (Interactive hardware diagnostic)
   ════════════════════════════════════════════════════════════════ */

@keyframes phone-err-screen {
    0%, 60%   { opacity: 1; }
    65%, 95%  { opacity: 0; }
    97%, 100% { opacity: 1; }
}

@keyframes phone-ok-screen {
    0%, 60%   { opacity: 0; }
    65%, 95%  { opacity: 1; }
    97%, 100% { opacity: 0; }
}

@keyframes phone-err-icon {
    0%, 30%   { opacity: 1; transform: translate(37px, 57px) scale(1); }
    33%, 38%  { transform: translate(37px, 57px) scale(1.15); }
    40%, 60%  { opacity: 1; transform: translate(37px, 57px) scale(1); }
    65%, 95%  { opacity: 0; transform: translate(37px, 57px) scale(.5); }
    97%, 100% { opacity: 1; transform: translate(37px, 57px) scale(1); }
}

@keyframes phone-ok-icon {
    0%, 60%   { opacity: 0; transform: translate(37px, 57px) scale(.4) rotate(-25deg); }
    66%       { opacity: 1; transform: translate(37px, 57px) scale(1.18) rotate(0); }
    72%, 95%  { opacity: 1; transform: translate(37px, 57px) scale(1) rotate(0); }
    97%, 100% { opacity: 0; }
}

@keyframes cable-draw {
    0%        { stroke-dashoffset: 700; }
    20%, 100% { stroke-dashoffset: 0; }
}

@keyframes cable-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -200; }
}

@keyframes cable-flow-vis {
    0%, 30%    { opacity: 0; stroke: #ef4444; }
    34%, 60%   { opacity: .95; stroke: #e30a17; }
    65%, 95%   { opacity: .8; stroke: #10b981; }
    97%, 100%  { opacity: 0; }
}

/* USB-C plug slides UP into phone bottom */
@keyframes plug-c-in {
    0%        { transform: translateY(12px); opacity: .5; }
    18%, 95%  { transform: translateY(0);    opacity: 1; }
    97%, 100% { transform: translateY(12px); opacity: .5; }
}

/* USB-A plug slides RIGHT into laptop left side */
@keyframes plug-a-in {
    0%        { transform: translateX(-12px); opacity: .5; }
    18%, 95%  { transform: translateX(0);     opacity: 1; }
    97%, 100% { transform: translateX(-12px); opacity: .5; }
}

@keyframes pc-screen {
    0%, 18%    { fill: #08080e; }
    25%, 95%   { fill: #14141d; }
    97%, 100%  { fill: #08080e; }
}

@keyframes pc-code {
    0%, 22%    { opacity: 0; transform: translateX(-6px); }
    28%        { opacity: 1; transform: translateX(0); }
    60%        { opacity: .7; }
    72%        { opacity: 1; }
    95%, 100%  { opacity: 0; }
}

@keyframes pc-cursor {
    50%       { opacity: 0; }
}

@keyframes label-text {
    0%, 18%   { fill: #ef4444; }
    20%, 60%  { fill: #ffd0d4; }
    65%, 95%  { fill: #6ee7b7; }
    97%, 100% { fill: #ef4444; }
}

/* Spark particles travelling along the cable (uses offset-path) */
@keyframes spark-flow {
    0%   { offset-distance: 0%;   opacity: 0; transform: scale(.4); }
    8%   { opacity: 1; transform: scale(1); }
    92%  { opacity: 1; transform: scale(1); }
    100% { offset-distance: 100%; opacity: 0; transform: scale(.4); }
}

@keyframes spark-visible {
    0%, 30%   { opacity: 0; }
    34%, 95%  { opacity: 1; }
    97%, 100% { opacity: 0; }
}

/* Success ripple burst behind phone checkmark */
@keyframes success-burst {
    0%, 60%   { transform: scale(.3); opacity: 0; }
    66%       { transform: scale(.4); opacity: .95; }
    85%       { transform: scale(1.7); opacity: 0; }
    100%      { transform: scale(1.7); opacity: 0; }
}

@keyframes success-burst-2 {
    0%, 65%   { transform: scale(.3); opacity: 0; }
    72%       { transform: scale(.4); opacity: .65; }
    92%       { transform: scale(2.0); opacity: 0; }
    100%      { transform: scale(2.0); opacity: 0; }
}

/* Phone screen scan line during fixing */
@keyframes screen-scan {
    0%, 30%   { transform: translateY(-44px); opacity: 0; }
    35%       { transform: translateY(-44px); opacity: 1; }
    60%       { transform: translateY(44px);  opacity: 1; }
    65%, 100% { transform: translateY(44px);  opacity: 0; }
}

/* PC glow halo during processing */
@keyframes pc-halo {
    0%, 22%   { opacity: 0; transform: scale(.9); }
    30%, 90%  { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(.9); }
}

/* Gradient shimmer pass over text */
@keyframes text-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Diagonal glint sweep across surfaces (card hover) */
@keyframes glint-sweep {
    0%   { transform: translateX(-160%) skewX(-18deg); }
    100% { transform: translateX(220%)  skewX(-18deg); }
}

/* Smooth letter rise — used per-character on big titles */
@keyframes letter-rise {
    from { opacity: 0; transform: translateY(120%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Idle glow pulse for accent CTA */
@keyframes cta-glow {
    0%, 100% { box-shadow: 0 8px 24px var(--accent-soft), var(--inset-top); }
    50%      { box-shadow: 0 16px 36px var(--accent-glow), 0 0 0 6px var(--accent-soft), var(--inset-top); }
}

/* Spotlight cursor follow */
@keyframes spotlight-pulse {
    0%, 100% { opacity: .45; }
    50%      { opacity: .85; }
}


/* ════════════════════════════════════════════════════════════════
   5 · UTILITY CLASSES (Apply animations to DOM elements)
   ════════════════════════════════════════════════════════════════ */

.reveal       { animation: reveal-up      var(--dur-3) var(--ease-out)    both; }
.reveal-lg    { animation: reveal-up-lg   var(--dur-4) var(--ease-glide)  both; }
.reveal-down  { animation: reveal-down    var(--dur-3) var(--ease-out)    both; }
.reveal-zoom  { animation: reveal-zoom    var(--dur-3) var(--ease-spring) both; }
.reveal-blur  { animation: blur-in        var(--dur-4) var(--ease-glide)  both; }
.reveal-pop   { animation: pop-in         var(--dur-3) var(--ease-spring) both; }
.reveal-left  { animation: reveal-left    var(--dur-3) var(--ease-out)    both; }
.reveal-right { animation: reveal-right   var(--dur-3) var(--ease-out)    both; }
.reveal-fade  { animation: fade-in        var(--dur-3) var(--ease-out)    both; }

/* Stagger delays — composable on any reveal class */
.delay-0  { animation-delay:   0ms; }
.delay-1  { animation-delay:  60ms; }
.delay-2  { animation-delay: 120ms; }
.delay-3  { animation-delay: 180ms; }
.delay-4  { animation-delay: 240ms; }
.delay-5  { animation-delay: 320ms; }
.delay-6  { animation-delay: 420ms; }
.delay-7  { animation-delay: 540ms; }
.delay-8  { animation-delay: 680ms; }

/* View transition states (toggled by JS) */
.is-leaving  { animation: view-leave        var(--dur-2) var(--ease-out)   both;
               pointer-events: none; }
.is-entering { animation: view-enter        var(--dur-3) var(--ease-glide) both; }
.detail-view.is-entering { animation: view-enter-detail var(--dur-4) var(--ease-glide) both; }

/* Loading dots (3 squishy bouncing dots) — use .loading-dots > i × 3 */
.loading-dots {
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    height: 14px;
}
.loading-dots i {
    width: 5px;
    height: 5px;
    border-radius: var(--r-circle);
    background: currentColor;
    animation: wave-bar 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: bottom;
    will-change: transform;
}
.loading-dots i:nth-child(2) { animation-delay: .15s; }
.loading-dots i:nth-child(3) { animation-delay: .3s; }

/* Ping ring — pings out from a focal point */
.ping-ring {
    position: relative;
}
.ping-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: .3;
    animation: ping 1.8s var(--ease-out) infinite;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Color cycle (red pulse around active status dots) */
.dot-pulse {
    animation: color-cycle-dot 2s var(--ease-out) infinite;
    will-change: box-shadow;
}

/* Hover-tilt (Tactile 3D perspective with active spring feedback) */
.hover-tilt {
    transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out);
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
}
.hover-tilt:hover {
    transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) translateZ(6px);
    box-shadow: var(--shadow-lg);
}
.hover-tilt:active {
    transform: perspective(1000px) rotateX(1.5deg) rotateY(-1.5deg) translateZ(2px);
    transition-duration: var(--dur-1);
}


/* ════════════════════════════════════════════════════════════════
   6 · ON-SCROLL HEADER MORPH
   Body class .is-scrolled added by JS (toggle on scroll > 8px)
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 0) {
    .is-scrolled .site-header {
        height: calc(var(--header-h) - 16px);
        box-shadow: 0 4px 16px rgba(10, 10, 20, .06);
    }
    .is-scrolled .site-header .brand__logo {
        height: 60px;
        transform: scale(.96);
    }
    .site-header .brand__logo,
    .site-header { transition: height var(--dur-3) var(--ease-out), box-shadow var(--dur-3); }
    .site-header .brand__logo { transition: height var(--dur-3) var(--ease-out), transform var(--dur-3); }
}


/* ════════════════════════════════════════════════════════════════
   7 · REDUCE MOTION RESPECT
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}