/* ============================================
   AETERNA COLLECTION — Visual Effects System
   Preloader · Reveals · Transitions · Parallax
   ============================================ */

/* ─── PRELOADER ─────────────────────────────── */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* 2026-08-05 — was var(--canvas) (legacy white token, effects.css's only
       other consumers — cart.css/tours.css — intentionally left untouched).
       That produced a white flash on a dark-default page load. --theme-canvas
       tracks html[data-theme] like the rest of the V4 palette, so the
       preloader now matches whichever theme pre-paint already resolved
       before this stylesheet's first paint. */
    background: var(--theme-canvas);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;
}

.preloader__text {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 8px;
    color: var(--heritage-green);
    animation: preloader-pulse 1s ease infinite alternate;
}

@keyframes preloader-pulse {
    from { opacity: 1; }
    to   { opacity: 0.25; }
}

.preloader--hidden {
    opacity: 0;
    pointer-events: none;
}

/* ─── PAGE TRANSITION ────────────────────────── */
body {
    opacity: 1;
    transition: opacity 0.3s ease;
}

body.page-exit {
    opacity: 0;
}

body.page-enter {
    opacity: 0;
}

/* ─── HEADER ENTRANCE ───────────────────────── */
.header__logo,
.header__link,
.header__divider {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Redesign V4 — the nav went from 5 links + 4 "|" dividers (9 flex
   children, hence the old nth-child(1/3/5/7) + divider(2/4/6) pairing)
   to 7 plain .header__link children with no dividers in between
   (docs/planning/REDESIGN_SPEC.md §D — mockup has no pipe separators).
   Re-targeted so all 7 links actually reach opacity:1 — under the old
   selectors, links 6 and 7 (nth-child 6 and 7 in the new flat markup)
   matched nothing and stayed permanently invisible after header--loaded
   fired. .header__divider rules kept (harmless no-ops) in case any
   not-yet-reskinned page still renders one. */
.header--loaded .header__logo         { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.header--loaded .header__link:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.header--loaded .header__link:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.21s; }
.header--loaded .header__link:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
.header--loaded .header__link:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.27s; }
.header--loaded .header__link:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.header--loaded .header__link:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.33s; }
.header--loaded .header__link:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 0.36s; }
.header--loaded .header__divider:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.22s; }
.header--loaded .header__divider:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.27s; }
.header--loaded .header__divider:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }

/* ─── HERO ENTRANCE ─────────────────────────── */
.hero__panel-img {
    transform: scale(1.04);
    transition: transform 1.6s ease, filter 0.4s ease;
}

.hero--loaded .hero__panel-img {
    transform: scale(1);
}

/* ─── SCROLL REVEAL SYSTEM ──────────────────── */
[data-reveal] {
    transition: opacity 0.7s ease, transform 0.7s ease, clip-path 0.8s ease;
}

[data-reveal="fade"] {
    opacity: 0;
}

[data-reveal="rise"] {
    opacity: 0;
    transform: translateY(16px);
}

[data-reveal="wipe"] {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
}

[data-reveal="scale"] {
    opacity: 0;
    transform: scale(0.97);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0% 0 0);
}

/* Stagger delays for grids */
[data-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-delay="3"] { transition-delay: 0.3s; }
[data-reveal][data-delay="4"] { transition-delay: 0.4s; }

/* ─── MAGNETIC BUTTONS ──────────────────────── */
.btn-magnetic {
    transition: transform 0.3s ease;
    will-change: transform;
    display: inline-block;
}

/* ─── HEADER SCROLL ─────────────────────────── */
.header {
    transition: border-color 0.3s ease;
    border-bottom: 1px solid transparent;
}

.header--scrolled {
    /* Redesign V4 — was the v3 light hairline (#EAEAE6), invisible
       against the new dark .header background. */
    border-bottom-color: var(--theme-hair, rgba(201, 164, 106, .22));
}

/* ─── BLUR-UP IMAGES ────────────────────────── */
.hero__panel-img,
.film__video,
.material-block__image img,
.product-card__image img,
.maison-hero__img,
.atelier__image-col img {
    transition: filter 0.4s ease, transform 0.8s ease;
}

.img-loading {
    filter: blur(8px);
}

/* ─── CTA TEXT ANIMATION ─────────────────────── */
.cta-final__title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cta-final--revealed .char {
    opacity: 1;
    transform: translateY(0);
}

/* ─── FILM TITLE DELAYED FADE ────────────────── */
.film__content {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.film__content--visible {
    opacity: 1;
}

/* ─── FOOTER BRAND HOVER ─────────────────────── */
.footer__brand {
    display: inline-block;
    transition: letter-spacing 0.4s ease;
}

.footer__brand:hover {
    letter-spacing: 5px;
}

/* ─── NAV UNDERLINE (overrides styles.css hover) ─ */
.header__link {
    position: relative;
}