/* ValleyUnit Base — Reset, body, headings, links, a11y, reveal animations.
   No component-specific styles here. */

/* -- Reset -- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; height: 100%; }

body {
    font-family: var(--font-sans);
    background: var(--page-bg);
    color: var(--page-text);
    line-height: var(--leading-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

/* -- Skip link (a11y) -- */
.skip {
    position: absolute; top: -100px; left: var(--sp-4);
    background: var(--accent); color: var(--accent-text);
    padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-xs);
    z-index: var(--z-overlay);
    font-size: var(--text-base); text-decoration: none;
}
.skip:focus { top: var(--sp-4); }

/* ================================================================
   SCROLL REVEAL SYSTEM
   Direction-aware entries. Each element gets a direction + delay.
   ================================================================ */

/* Base: all revealable elements start invisible */
.rv, .rv-img {
    opacity: 0;
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
}

/* Default direction: rise from below */
.rv          { transform: translateY(32px); }
.rv-img      { transform: translateY(24px) scale(0.98); }

/* Directional variants */
.rv-left     { opacity: 0; transform: translateX(-40px);
               transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.rv-right    { opacity: 0; transform: translateX(40px);
               transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.rv-scale    { opacity: 0; transform: scale(0.92);
               transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.rv-fade     { opacity: 0; transform: none;
               transition: opacity var(--dur-reveal) var(--ease-out); }

/* Mobile: containers are full-bleed, so horizontal reveal offsets push
   content past the right edge and stretch the page box. Rise instead. */
@media (max-width: 768px) {
    .rv-left, .rv-right { transform: translateY(24px); }
}

/* Visible state (applied by JS) */
.rv.vis, .rv-img.vis,
.rv-left.vis, .rv-right.vis,
.rv-scale.vis, .rv-fade.vis {
    opacity: 1; transform: none;
}

/* Stagger delays */
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }
.rv-d4 { transition-delay: 0.32s; }
.rv-d5 { transition-delay: 0.40s; }
.rv-d6 { transition-delay: 0.48s; }

/* Hero-specific slower entry */
.rv-hero {
    opacity: 0; transform: translateY(24px);
    transition: opacity var(--dur-hero) var(--ease-out),
                transform var(--dur-hero) var(--ease-out);
}
.rv-hero.vis { opacity: 1; transform: none; }

/* -- Parallax wrapper (driven by JS --scroll-y) -- */
[data-parallax] {
    will-change: transform;
}

/* -- Count-up numbers (JS adds .counted class) -- */
.count-up {
    font-variant-numeric: tabular-nums;
}

/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */

/* Gradient pulse for hero backgrounds */
@keyframes gradient-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.05); }
}

/* Pulsing ring for hotspots */
@keyframes pulse-ring {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Slow float for decorative elements */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Timeline line draw */
@keyframes line-draw {
    from { height: 0; }
    to   { height: 100%; }
}

/* Shimmer for loading states */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* -- Reduced motion -- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .rv, .rv-img, .rv-left, .rv-right, .rv-scale, .rv-fade, .rv-hero {
        opacity: 1; transform: none;
    }
    .hotspot { opacity: 1; transform: scale(1); }
    .hotspot-ring { animation: none; }
    [data-parallax] { transform: none !important; }
}