/* ============================================================ LA TASCA -- Animations Scroll Reveals, Transitions, Parallax ============================================================ */ /* ---------------------------------------------------------- Scroll Reveal Base Elements start hidden and reveal when entering viewport. The .is-visible class is added by scroll.js via IntersectionObserver. ---------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Staggered delays for child elements */ .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; } .reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.15s; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.3s; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.45s; } .reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.6s; } .reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.75s; } /* ---------------------------------------------------------- Reveal Variants ---------------------------------------------------------- */ .reveal--fade { transform: none; } .reveal--left { transform: translateX(-30px); } .reveal--left.is-visible { transform: translateX(0); } .reveal--right { transform: translateX(30px); } .reveal--right.is-visible { transform: translateX(0); } .reveal--scale { transform: scale(0.95); } .reveal--scale.is-visible { transform: scale(1); } /* ---------------------------------------------------------- Section Label Reveal (underline grow) ---------------------------------------------------------- */ .section__label { position: relative; display: inline-block; } .section__label::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background-color: var(--color-accent); transition: width 0.6s ease 0.3s; } .is-visible .section__label::after, .reveal.is-visible .section__label::after { width: 100%; } /* ---------------------------------------------------------- Image Reveal (clip-path) ---------------------------------------------------------- */ .reveal-image { overflow: hidden; } .reveal-image img { clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1); } .reveal-image.is-visible img { clip-path: inset(0 0 0 0); } /* ---------------------------------------------------------- Parallax Layer (subtle, handled by scroll.js) ---------------------------------------------------------- */ .parallax-layer { will-change: transform; } /* ---------------------------------------------------------- Hover lift for interactive cards ---------------------------------------------------------- */ .hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* ============================================================ INTRO OVERLAY -- "L'éveil de La Tasca" Played once per session on first arrival. Sequence: 1. Horizon line draws across (Verbier silhouette) 2. Particles (snow + paprika) drift in 3. Logo paths draw stroke-by-stroke, then fill 4. Gold reflection sweep across the logo 5. Overlay fades out, logo hands off to header All timings driven by CSS animation-delay; JS only gates the start, handles skip, and sets per-path dash values. ============================================================ */ .intro { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; /* Day-mode defaults; darkmode.js drops data-theme on and the override below flips the palette to night mode. */ --intro-bg: #FAF7F2; --intro-ink: #1A1A1A; background-color: var(--intro-bg); color: var(--intro-ink); overflow: hidden; pointer-events: all; opacity: 1; transition: opacity 0.6s ease 0.15s; } [data-theme="dark"] .intro { --intro-bg: #1A1A1A; --intro-ink: #FFFFFF; } /* Hide intro instantly if JS unavailable or disabled via class */ .intro[hidden] { display: none !important; } /* Final fade-out: JS toggles .intro--done ~200ms before removal */ .intro.intro--done { opacity: 0; pointer-events: none; } /* ---------------------------------------------------------- Horizon line (bottom of overlay, hand-drawn silhouette) ---------------------------------------------------------- */ .intro__horizon { position: absolute; left: 0; right: 0; bottom: 8vh; height: clamp(110px, 18vh, 200px); pointer-events: none; } .intro__horizon svg { width: 100%; height: 100%; overflow: visible; } .intro__mountain { /* JS-measured length exposed via --len — same trick as the logo paths */ stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); animation: intro-horizon-draw 3.2s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards; } .intro__mountain--back { opacity: 0.28; animation-duration: 3.4s; } .intro__mountain--front { opacity: 0.55; animation-delay: 0.35s; animation-duration: 3.0s; } @keyframes intro-horizon-draw { to { stroke-dashoffset: 0; } } /* ---------------------------------------------------------- Logo wrapper -- centered, shrinks on hand-off ---------------------------------------------------------- */ .intro__logo-wrap { position: relative; width: min(52vw, 560px); max-width: 90vw; transform: scale(1); transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s ease 0.5s; } .intro--done .intro__logo-wrap { transform: scale(0.25); opacity: 0; } .intro__logo { width: 100%; height: auto; color: var(--intro-ink); overflow: visible; } /* All paths start invisible and unfilled; strokes reveal via dash animation */ .intro__logo path { fill: transparent; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; /* stroke-dasharray + stroke-dashoffset set inline by intro.js */ opacity: 0; /* Fade from outlined letters to solid fill */ transition: fill 1.1s cubic-bezier(0.5, 0, 0.2, 1), stroke-width 1.1s cubic-bezier(0.5, 0, 0.2, 1); } /* ---- PHASE 1: Main logo "LA TASCA" draws ---- */ .intro__logo.intro__logo--drawing-main .intro__logo-main path { opacity: 1; animation: intro-path-draw 850ms cubic-bezier(0.65, 0, 0.35, 1) both; } /* Stagger across the 7 main paths */ .intro__logo.intro__logo--drawing-main .intro__logo-main path:nth-child(6) { animation-delay: 0.00s; } .intro__logo.intro__logo--drawing-main .intro__logo-main path:nth-child(7) { animation-delay: 0.06s; } .intro__logo.intro__logo--drawing-main .intro__logo-main path:nth-child(1) { animation-delay: 0.14s; } .intro__logo.intro__logo--drawing-main .intro__logo-main path:nth-child(2) { animation-delay: 0.22s; } .intro__logo.intro__logo--drawing-main .intro__logo-main path:nth-child(3) { animation-delay: 0.30s; } .intro__logo.intro__logo--drawing-main .intro__logo-main path:nth-child(4) { animation-delay: 0.38s; } .intro__logo.intro__logo--drawing-main .intro__logo-main path:nth-child(5) { animation-delay: 0.45s; } /* Fill main once its strokes are finished */ .intro__logo.intro__logo--main-filled .intro__logo-main path { fill: currentColor; stroke-width: 0; } /* ---- PHASE 2: Tagline "TAPAS BAR & BOUTIQUE" draws AFTER the main is filled ---- */ .intro__logo.intro__logo--drawing-tagline .intro__logo-tagline path { opacity: 1; animation: intro-path-draw 500ms cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: calc(var(--tl-i, 0) * 16ms); } .intro__logo.intro__logo--tagline-filled .intro__logo-tagline path { fill: currentColor; stroke-width: 0; } @keyframes intro-path-draw { 0% { stroke-dashoffset: var(--len, 800); } 100% { stroke-dashoffset: 0; } } /* ---- VERBIER: place name, revealed below the tagline as the final beat ---- */ .intro__verbier { margin-top: clamp(0.55rem, 1.6vh, 1.05rem); text-align: center; white-space: nowrap; font-family: var(--font-heading); font-weight: 500; text-transform: uppercase; /* tracking eases off on narrow screens so "VERBIER - SWITZERLAND" stays on one line */ letter-spacing: clamp(0.18em, 0.8vw, 0.4em); /* offset the trailing tracking so the line stays optically centered */ text-indent: clamp(0.18em, 0.8vw, 0.4em); font-size: clamp(0.7rem, 1.7vw, 1.2rem); line-height: 1; color: var(--intro-ink); opacity: 0; } .intro__verbier.intro__verbier--in { animation: intro-verbier-reveal 800ms cubic-bezier(0.5, 0, 0.2, 1) forwards; } @keyframes intro-verbier-reveal { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------- Skip button (accessible, discreet) ---------------------------------------------------------- */ .intro__skip { position: absolute; top: 1.5rem; right: 1.5rem; padding: 0.5rem 1rem; font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); background: transparent; border: 1px solid var(--color-border); border-radius: 999px; opacity: 0; animation: intro-skip-appear 0.4s ease 1s forwards; transition: color var(--transition-fast), border-color var(--transition-fast); } .intro__skip:hover, .intro__skip:focus-visible { color: var(--color-text); border-color: var(--color-accent); } @keyframes intro-skip-appear { to { opacity: 1; } } /* Lock body scroll while intro runs */ body.intro-running { overflow: hidden; } /* ---------------------------------------------------------- Reduced Motion ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .reveal-image img { clip-path: none; transition: none; } .hero__scroll-line { animation: none; } .parallax-layer { will-change: auto; } /* Skip the intro overlay entirely if motion is reduced */ .intro { display: none !important; } }