/* ========================================================= SNOWTAILORS · animations.css Premium scroll-reveal, parallax, hovers, micro-motion. ========================================================= */ /* ========== KEYFRAMES ========== */ @keyframes fadeUp{ from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn{ from{opacity:0} to{opacity:1} } @keyframes slideRight{ from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes scaleReveal{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} } @keyframes scrollPulse{ 0%,100%{opacity:.3;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1.4)} } @keyframes shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} } @keyframes drawLine{ from{transform:scaleX(0)} to{transform:scaleX(1)} } @keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } @keyframes kenBurns{ from{transform:scale(1) translate(0,0)} to{transform:scale(1.08) translate(-1%,-1%)} } /* ========== SCROLL REVEAL ========== Important : on n'applique l'opacité 0 QUE si le navigateur a du JS (classe .js posée par script inline dans le ). Sans JS, le contenu reste visible — accessibilité + résilience au crash JS. */ .js .reveal{ opacity:0; transform:translateY(40px); transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo); will-change:opacity,transform; } .js .reveal.is-visible{ opacity:1; transform:translateY(0); } .js .reveal--right{transform:translateX(60px)} .js .reveal--right.is-visible{transform:translateX(0)} .js .reveal--scale{transform:scale(.94)} .js .reveal--scale.is-visible{transform:scale(1)} .js .reveal--clip{ clip-path:inset(0 100% 0 0); opacity:1;transform:none; transition:clip-path 1.4s var(--ease-out-expo); } .js .reveal--clip.is-visible{clip-path:inset(0 0 0 0)} /* Stagger delays — child of [data-stagger] */ [data-stagger] > .reveal{transition-delay:0s} [data-stagger] > .reveal:nth-child(2){transition-delay:.08s} [data-stagger] > .reveal:nth-child(3){transition-delay:.16s} [data-stagger] > .reveal:nth-child(4){transition-delay:.24s} [data-stagger] > .reveal:nth-child(5){transition-delay:.32s} [data-stagger] > .reveal:nth-child(6){transition-delay:.4s} [data-stagger] > .reveal:nth-child(7){transition-delay:.48s} [data-stagger] > .reveal:nth-child(8){transition-delay:.56s} /* ========== HERO INTRO ========== */ .hero-intro > *{opacity:0;transform:translateY(30px)} .hero-loaded .hero-intro > *{ animation:fadeUp 1.1s var(--ease-out-expo) forwards; } .hero-loaded .hero-intro > *:nth-child(1){animation-delay:.2s} .hero-loaded .hero-intro > *:nth-child(2){animation-delay:.4s} .hero-loaded .hero-intro > *:nth-child(3){animation-delay:.6s} .hero-loaded .hero-intro > *:nth-child(4){animation-delay:.8s} /* ========== PARALLAX ========== */ .parallax{ --parallax-y: 0px; transform:translate3d(0, var(--parallax-y), 0); will-change:transform; } .hero-bg{ position:absolute;inset:-10% 0 0 0;height:120%; background-size:cover;background-position:center; will-change:transform; } /* ========== KEN BURNS — slow zoom on station cards ========== */ .kb-img{ position:absolute;inset:0;background-size:cover;background-position:center; transform:scale(1.05); transition:transform 1.4s var(--ease-luxe),filter 1.4s var(--ease-luxe); filter:brightness(.7) saturate(1.05); } .kb-img--auto{ animation:kenBurns 12s var(--ease-luxe) infinite alternate; } /* ========== HOVER LIFT (cards) ========== */ .hover-lift{transition:transform var(--duration) var(--ease-luxe),box-shadow var(--duration) var(--ease-luxe)} .hover-lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px -20px rgba(15,27,60,.18)} /* ========== HOVER ZOOM (image) ========== */ .zoom-img{overflow:hidden} .zoom-img img, .zoom-img .img{ transition:transform 1.2s var(--ease-luxe),filter 1.2s var(--ease-luxe); } .zoom-img:hover img, .zoom-img:hover .img{transform:scale(1.08)} /* ========== UNDERLINE LINKS ========== */ .link-underline{ position:relative;display:inline-block; } .link-underline::after{ content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px; background:var(--gold); transform:scaleX(0);transform-origin:right; transition:transform .55s var(--ease-out-expo); } .link-underline:hover::after{transform:scaleX(1);transform-origin:left} /* ========== GOLD ACCENT BAR ANIMATION ========== */ .gold-bar{ display:block;width:60px;height:1px;background:var(--gold); transform:scaleX(0);transform-origin:left; transition:transform 1s var(--ease-out-expo) .2s; } .is-visible .gold-bar, .gold-bar.is-visible{transform:scaleX(1)} /* ========== COUNTER ========== */ .counter{font-variant-numeric:tabular-nums} /* ========== SCROLL CUE ========== */ .scroll-cue-line{ width:1px;height:40px;background:var(--gold); animation:scrollPulse 2.5s var(--ease-luxe) infinite; transform-origin:top; } /* ========== MARQUEE / TICKER ========== */ .marquee{overflow:hidden;white-space:nowrap} .marquee-track{display:inline-block;animation:scrollX 40s linear infinite} .marquee-track:hover{animation-play-state:paused} @keyframes scrollX{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ========== HEADER TRANSFORM ON SCROLL ========== */ .header{ transition: background-color .5s var(--ease-luxe), backdrop-filter .5s var(--ease-luxe), box-shadow .5s var(--ease-luxe), padding .35s var(--ease-luxe); } .header.is-scrolled{ background-color:rgba(15,27,60,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 30px rgba(0,0,0,.18); padding-top:12px;padding-bottom:12px; } /* ========== IMAGE LOAD FADE ========== */ img.lazy-img{opacity:0;transition:opacity .6s ease} img.lazy-img.is-loaded{opacity:1}