/**
 * Mini-Site Networks - Animations
 * All @keyframes definitions and animation-related CSS properties
 *
 * Canonical runtime file (loaded before `main.css` and `media.css`).
 * Contract: keep only animation/keyframes + animation-adjacent rules here.
 */

/* ========================================
   LED RING ANIMATION
   ======================================== */

/* Animated conic-gradient "LED ring" (extracted from RH nudges) */
@property --msn-led-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes msn-led-spin {
    from { --msn-led-angle: 0deg; }
    to { --msn-led-angle: 360deg; }
}

.msn-led-ring::before,
.msn-led-ring::after {
    /* Fallback: ensure `var(--msn-led-angle)` always resolves even if `@property` is unsupported. */
    --msn-led-angle: 0deg;
    animation: msn-led-spin 4s linear infinite;
}

/* ========================================
   MONO GLOW RING ANIMATION (customisable)
   ======================================== */

@property --msn-glow-ring-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes msn-glow-ring-spin {
    from { --msn-glow-ring-angle: 0deg; }
    to { --msn-glow-ring-angle: 360deg; }
}

.msn-glow-ring::before,
.msn-glow-ring::after {
    /* Fallback: ensure `var(--msn-glow-ring-angle)` always resolves even if `@property` is unsupported. */
    --msn-glow-ring-angle: 0deg;
    animation: msn-glow-ring-spin var(--msn-ring-speed, 4s) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .msn-glow-ring::before,
    .msn-glow-ring::after {
        animation: none !important;
    }
}

/* ========================================
  PERSONALIZATION PROMPT: ENTER ANIMATION
  ======================================== */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   WOBBLE ANIMATION
   ======================================== */

@keyframes msn-wobble {
    0% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(5px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.msn-wobble {
    animation: msn-wobble 420ms ease-in-out both;
}

/* ========================================
   SWIPE HINT ANIMATION
   ======================================== */

@keyframes msn-swipe-hint {
    0%, 20% { transform: translateX(0); opacity: 0.75; }
    60% { transform: translateX(22px); opacity: 1; }
    100% { transform: translateX(0); opacity: 0.75; }
}

.msn-swipe-hint .msn-swipe-anim {
    animation: msn-swipe-hint 1.6s ease-in-out infinite;
}

/* ========================================
   FLOAT ANIMATIONS
   ======================================== */

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

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

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 4s ease-in-out infinite 1s;
}

/* ========================================
   TRAVELING GLOW ANIMATION
   ======================================== */

@keyframes traveling-glow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.traveling-glow-border {
    position: relative;
}

.traveling-glow-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        var(--accent-glow) 45%,
        var(--accent) 50%,
        var(--accent-glow) 55%,
        transparent 70%,
        transparent 100%
    );
    background-size: 300% 100%;
    animation: traveling-glow 3s ease-in-out infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background var(--color-transition);
}

/* ========================================
   PLATFORM MARQUEE ANIMATION
   ======================================== */

@keyframes platform-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

.platform-marquee--active .platform-marquee__inner {
    width: max-content;
    will-change: transform;
    animation: platform-marquee var(--pm-speed) linear infinite;
}

/* ========================================
  UNIFIED SYSTEM: FLOW PACKETS + HUB PULSE
  ======================================== */

@keyframes msn-unified-flow-dash {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -160; }
}

@keyframes msn-unified-hub-pulse {
    0% { transform: scale(1); opacity: 0.35; }
    70% { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

.msn-unified-arch {
    position: relative;
    overflow: hidden;
}

.msn-unified-arch__anim {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.75;
}

.msn-unified-arch__svg {
    width: 100%;
    height: 100%;
}

/* Keep overlay behind all real content inside the card */
.msn-unified-arch > :not(.msn-unified-arch__anim) {
    position: relative;
    z-index: 1;
}

.msn-unified-arch__path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 12;
    animation: msn-unified-flow-dash 3.6s linear infinite;
}

.msn-unified-arch__packet {
    fill: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.85);
}

.msn-unified-arch__hub {
    fill: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.10);
    stroke: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.28);
    stroke-width: 1.5;
}

.msn-unified-arch__hub-pulse {
    fill: none;
    stroke: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.22);
    stroke-width: 2;
    transform-origin: 300px 510px;
    animation: msn-unified-hub-pulse 2.4s ease-out infinite;
}

/* ========================================
  COVERAGE NETWORK: DOT DRIFT (CONTINUOUS)
  ======================================== */

@keyframes msn-covnet-drift {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(var(--msn-covnet-dx, 0px), 0, 0); }
    50% { transform: translate3d(var(--msn-covnet-dx, 0px), var(--msn-covnet-dy, 0px), 0); }
    75% { transform: translate3d(0, var(--msn-covnet-dy, 0px), 0); }
    100% { transform: translate3d(0, 0, 0); }
}

.msn-covnet-dot__bubble {
    will-change: transform;
    animation: msn-covnet-drift var(--msn-covnet-dur, 6.5s) ease-in-out var(--msn-covnet-delay, 0s) infinite;
}

/* ========================================
  HOW IT WORKS: SIGNAL FLOW (SUBTLE WOW)
  ======================================== */

@keyframes msn-process-dash {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -220; }
}

.msn-process-wow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    overflow: hidden;
    /* Keep it "premium" but subtle */
    filter: drop-shadow(0 0 18px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.08));
}

.msn-process-wow__svg {
    width: 100%;
    height: 100%;
    display: block;
}

.msn-process-wow__path {
    fill: none;
    stroke: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.16);
    stroke-width: 0.65;
    stroke-linecap: round;
    stroke-dasharray: 10 16;
    animation: msn-process-dash 8.5s linear infinite;
}

.msn-process-wow__glow {
    fill: none;
    stroke: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.10);
    stroke-width: 2.6;
    stroke-linecap: round;
    filter: blur(2px);
    opacity: 0.65;
}

.msn-process-wow__orb {
    fill: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.55);
}

/* ========================================
   ACCESSIBILITY: REDUCED MOTION
   ======================================== */