/* ============================================================ Nordic Club UA — animations.css Keyframes + the signature horizon draw-in choreography. Load after components.css (before pages/.css). HOW TO TRIGGER THE HERO HORIZON: 1. Inline assets/brand/horizon.svg inside a wrapper: 2. main.js adds class "js" to on boot. 3. Shortly after load (e.g. requestAnimationFrame ×2), add "is-drawn" to the wrapper: horizon.classList.add('is-drawn') The sequence then runs once: baseline L→R (900ms) → вишиванка staggers in from the left → pylon rises → cables fan out from the pylon (staggered) → mountains draw R→L → water line → ONE gold pulse travels the baseline and ends. Nothing loops. Without JS (no html.js) the artwork is fully visible, static. ============================================================ */ /* ---- Stroke colours ---- Кольори задаються ТУТ, а не атрибутами stroke="" у SVG (бриф §7: бренд-кольори лише в tokens.css). Коріння і дорога — золото, дім — білий. Без html.js, тому колір є і без JavaScript. */ .horizon .hz-base, .horizon .hz-mount, .horizon .hz-water { stroke: var(--paper); } .horizon .hz-vysh, .horizon .hz-pylon, .horizon .hz-cable, .horizon .hz-pulse { stroke: var(--gold-500); } /* ---- Initial hidden state (only when JS is present) ---- Dash values are ≥ each path's real length, so offset:VALUE hides the stroke and offset:0 shows it fully. */ .js .horizon .hz-base { stroke-dasharray: 1500; stroke-dashoffset: 1500; } .js .horizon .hz-vysh { stroke-dasharray: 400; stroke-dashoffset: 400; } .js .horizon .hz-pylon { stroke-dasharray: 130; stroke-dashoffset: 130; } .js .horizon .hz-cable { stroke-dasharray: 160; stroke-dashoffset: 160; } .js .horizon .hz-mount { stroke-dasharray: 800; stroke-dashoffset: 800; } .js .horizon .hz-water { stroke-dasharray: 640; stroke-dashoffset: 640; } /* The pulse only ever appears during its animation */ .horizon .hz-pulse { stroke-dasharray: 110 1440; stroke-dashoffset: 110; opacity: 0; } /* ---- Draw-in choreography (.horizon.is-drawn) ---- */ /* 1 · shared baseline, left → right, 900ms */ .horizon.is-drawn .hz-base { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-xslow) var(--ease-enter); } /* 2 · вишиванка from the left, staggered by --i (0…7) */ .horizon.is-drawn .hz-vysh { stroke-dashoffset: 0; transition: stroke-dashoffset 620ms var(--ease-enter) calc(520ms + var(--i, 0) * 90ms); } /* 3 · pylon rises (paths are authored bottom → top) */ .horizon.is-drawn .hz-pylon { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-slow) var(--ease-enter) 1250ms; } /* 4 · cables fan out from the pylon, staggered by --i (0…7 per side) */ .horizon.is-drawn .hz-cable { stroke-dashoffset: 0; transition: stroke-dashoffset 480ms var(--ease-enter) calc(1850ms + var(--i, 0) * 70ms); } /* 5 · mountains, right → left (paths authored from the right) */ .horizon.is-drawn .hz-mount { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-xslow) var(--ease-enter) 1850ms; } .horizon.is-drawn .hz-water { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease-enter) 2500ms; } /* 6 · one slow gold pulse along the baseline — runs once, ends */ .horizon.is-drawn .hz-pulse { animation: hz-pulse 2200ms var(--ease-ui) 3400ms 1 forwards; } @keyframes hz-pulse { 0% { stroke-dashoffset: 110; opacity: 0; } 12% { opacity: 0.9; } 85% { opacity: 0.9; } 100% { stroke-dashoffset: -1470; opacity: 0; } } /* ---- Generic keyframes (nav, counters, misc entrances) ---- */ @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Header dropping in when it gains its solid state */ @keyframes nav-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } /* Utility hooks */ .anim-fade-up { animation: fade-up var(--t-slow) var(--ease-enter) both; } .anim-fade-in { animation: fade-in var(--t) var(--ease-ui) both; } /* counters.js adds .is-in to the KPI band; numbers settle softly */ .stat.is-in .stat__num { animation: fade-in var(--t-slow) var(--ease-enter) both; } /* ============================================================ Reduced motion — show the finished horizon instantly, no pulse, no keyframes. Must stay LAST in this file. ============================================================ */ @media (prefers-reduced-motion: reduce) { .js .horizon .hz-base, .js .horizon .hz-vysh, .js .horizon .hz-pylon, .js .horizon .hz-cable, .js .horizon .hz-mount, .js .horizon .hz-water, .horizon.is-drawn .hz-base, .horizon.is-drawn .hz-vysh, .horizon.is-drawn .hz-pylon, .horizon.is-drawn .hz-cable, .horizon.is-drawn .hz-mount, .horizon.is-drawn .hz-water { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; } .horizon .hz-pulse, .horizon.is-drawn .hz-pulse { animation: none; opacity: 0; } .anim-fade-up, .anim-fade-in, .stat.is-in .stat__num { animation-duration: 0.01ms; animation-delay: 0ms; } }