/*
 * Cinematic homepage layer — loaded ONLY on the homepage via
 * {{#contentFor "page_styles"}} in index.hbs. Everything is scoped under
 * body.home-template so it can never affect another page. Adds a layered,
 * textured hero (grain + slow ken-burns + vignette, video-ready) and
 * cinematic depth on the full-bleed feature bands. Restrained motion — the
 * page stays a navigable landing. All motion is disabled under
 * prefers-reduced-motion (see the block at the bottom).
 *
 * Reuses the design tokens (--fs-display, --space-section, --color-accent-rgb)
 * and lazy-autoplay-video.js (for a future hero clip).
 */

/* ── Hero: layered media stack (replaces the flat background-image) ───────── */
body.home-template .hero {
    background-image: none;            /* the <img> layer provides the image now */
    background-color: #0a0a0a;
}
body.home-template .hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
body.home-template .hero__image,
body.home-template .hero__video {
    position: absolute;
    inset: -4% -4% -4% -4%;            /* slight bleed so ken-burns never shows an edge */
    width: 108%;
    height: 108%;
    object-fit: cover;
    transform: scale(1.06);
    animation: home-kenburns 26s ease-in-out infinite alternate;
    will-change: transform;
}
body.home-template .hero__video {
    z-index: 1;                 /* video, when present, sits over the still */
    animation: none;            /* the footage supplies its own motion — no ken-burns */
    transform: scale(1.04);
}
@keyframes home-kenburns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.12) translate3d(0, -2.2%, 0); }
}

/* Richer cinematic overlay + a soft vignette over the existing gradient */
body.home-template .hero .hero__overlay {
    background:
        radial-gradient(120% 90% at 50% 18%, transparent 38%, rgba(8,8,10,0.55) 100%),
        linear-gradient(to bottom,
            rgba(10,10,10,0.40) 0%,
            rgba(10,10,10,0.66) 55%,
            rgba(10,10,10,0.97) 100%);
}

/* Film grain — tiny tiled SVG noise, very low opacity, gently shifting */
body.home-template .hero__grain {
    position: absolute;
    inset: -120%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: home-grain 1.2s steps(4) infinite;
}
@keyframes home-grain {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-3%, 1%, 0); }
    50%  { transform: translate3d(2%, -2%, 0); }
    75%  { transform: translate3d(-1%, 2%, 0); }
    100% { transform: translate3d(2%, 1%, 0); }
}

/* Bolder, more cinematic mast — bump the title onto the display token and
   give the eyebrow a hairline lead-in like the editorial pages. */
/* Base opacity:1 so when home.js clears the entrance animation to take over
   the scroll dissolve, the content can't fall back to the reveal-fade
   opacity:0 base and flash out. */
body.home-template .hero__content { max-width: 900px; opacity: 1; }
body.home-template .hero__title {
    /* The hero mast is the largest type on the site — give it a touch more
       drama than the shared --fs-display (slightly larger than the old hero). */
    font-size: clamp(3rem, 9vw, 6rem);
    letter-spacing: -0.025em;
}
body.home-template .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
body.home-template .hero__eyebrow::before {
    content: "";
    width: 38px;
    height: 1px;
    background: rgba(var(--color-accent-rgb), 0.6);
}

/* ── Cinematic parallax depth across the page's image sections ───────────── */
/* home.js translates these on scroll; the base scale + will-change live here so
   there's no jump on first paint and a sensible static state without JS. The
   containers are clipped so the drift never reveals an edge. */

/* Full-bleed media — the feature bands + the Join band (stronger drift) */
body.home-template .featured-bib__bg img,
body.home-template .featured-rr__bg img,
body.home-template .featured-es__bg img,
body.home-template .featured-fb__bg img,
body.home-template .join-cta__image {
    transform: scale(1.06);
    will-change: transform;
}
body.home-template .join-cta__image-wrap { overflow: hidden; position: relative; }

/* Ambient video on the feature bands — sits over the still (poster/fallback),
   under the band's dimming overlay + grain. Explicit z-index stack so the
   overlay always dims the motion. lazy-autoplay-video.js pauses it off-screen. */
body.home-template .featured-bib__bg img,
body.home-template .featured-rr__bg img,
body.home-template .featured-es__bg img,
body.home-template .featured-fb__bg img { z-index: 0; }
body.home-template .featured-band__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Favor the upper portion so any lower-third caption/watermark on these
       social-sourced clips is cropped out of the visible band. */
    object-position: 50% 45%;
    z-index: 1;
    transform: scale(1.06);
    will-change: transform;
}
body.home-template .featured-bib__overlay,
body.home-template .featured-rr__overlay,
body.home-template .featured-es__overlay,
body.home-template .featured-fb__overlay { z-index: 2; }
body.home-template .featured-bib__grain,
body.home-template .featured-rr__grain,
body.home-template .featured-es__grain,
body.home-template .featured-fb__grain { z-index: 3; }

/* The whole band is clickable (home.js) — brighten its media on hover so the
   affordance reads, alongside the pointer cursor. */
body.home-template .featured-bib__bg,
body.home-template .featured-rr__bg,
body.home-template .featured-es__bg,
body.home-template .featured-fb__bg { transition: filter 0.35s ease; }
body.home-template .featured-bib:hover .featured-bib__bg,
body.home-template .featured-rr:hover .featured-rr__bg,
body.home-template .featured-es:hover .featured-es__bg,
body.home-template .featured-fb:hover .featured-fb__bg { filter: brightness(1.12); }

/* Contained content images — book hero + featured post (gentle drift) */
body.home-template .book-section__hero-image,
body.home-template .featured-post__image { overflow: hidden; }
body.home-template .book-section__hero-image img,
body.home-template .featured-post__image img {
    transform: scale(1.08);
    will-change: transform;
}

/* Bring the hero/band cinematic language onto the Join band: richer vignette
   + the same film grain, so the page's full-bleed moments feel consistent. */
body.home-template .join-cta__overlay {
    background:
        radial-gradient(120% 100% at 50% 30%, transparent 36%, rgba(8,8,10,0.5) 100%),
        linear-gradient(120deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.32) 60%, rgba(10,10,10,0.55) 100%);
}
body.home-template .join-cta__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── FB composition on the feature bands ──────────────────────────────────
   Use the whole band for the words: oversized, screen-filling type that's
   left-anchored and asymmetric, woven across the full-bleed video instead of
   a small centered block — the way the FetishBound page fills the screen. */
body.home-template .featured-bib__inner,
body.home-template .featured-rr__inner,
body.home-template .featured-es__inner,
body.home-template .featured-fb__inner {
    max-width: min(92vw, 1180px);
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    padding: clamp(72px, 12vh, 150px) 0;
}
body.home-template .featured-bib__title,
body.home-template .featured-rr__title,
body.home-template .featured-es__title,
body.home-template .featured-fb__title {
    font-size: clamp(3rem, 11vw, 8.5rem);
    line-height: 0.92;
    margin-bottom: 0.4em;
    text-wrap: balance;
}
body.home-template .featured-bib__desc,
body.home-template .featured-rr__desc,
body.home-template .featured-es__desc,
body.home-template .featured-fb__desc {
    margin-left: 0;
    margin-right: 0;
    max-width: 52ch;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}
body.home-template .featured-bib__actions,
body.home-template .featured-rr__actions,
body.home-template .featured-es__actions,
body.home-template .featured-fb__actions {
    justify-content: flex-start;
}

/* ── Spacing: the Living Year band sat flush against the next feature band ── */
/* .posts-section had no bottom padding and the feature bands have no top
   padding (they're full-bleed flex bands), so the Living Year CTA buttons
   pressed right up against the Bodies in Bloom band. Give them breathing room. */
body.home-template .posts-section { padding-bottom: var(--space-section); }

/* ── Reveal tuning: let homepage reveals settle a touch slower/softer ─────── */
body.home-template .reveal-fade,
body.home-template .reveal-slide-up,
body.home-template .reveal-scale-up {
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.16, 0.8, 0.24, 1);
}

/* ── FetishBound-energy presentation: beat-timed entrances ─────────────────
   Adapts FB's 100bpm motion vocabulary (zoom-pop / bounce-in / slide-in /
   rotate-in) to the homepage so sections ARRIVE with energy as you scroll,
   the way the FetishBound page presents everything. Progressive enhancement:
   home.js adds .home-entrance + a data-in type (and reveals via .is-in) only
   to non-hero reveal elements, so with JS off / reduced motion nothing hides. */
body.home-template { --home-beat: 600ms; --home-two-beat: 1200ms; }

body.home-template .home-entrance {
    opacity: 0;
    animation: none !important;     /* override the on-load fadeIn/slideUp */
    will-change: transform, opacity;
}
body.home-template .home-entrance.is-in {
    animation-duration: var(--home-two-beat) !important;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    animation-fill-mode: both !important;
}
body.home-template .home-entrance.is-in[data-in="zoom-pop"]    { animation-name: home-zoom-pop !important; }
body.home-template .home-entrance.is-in[data-in="bounce-in"]   { animation-name: home-bounce-in !important; }
body.home-template .home-entrance.is-in[data-in="slide-left"]  { animation-name: home-slide-in-left !important; animation-duration: var(--home-beat) !important; }
body.home-template .home-entrance.is-in[data-in="slide-right"] { animation-name: home-slide-in-right !important; animation-duration: var(--home-beat) !important; }
body.home-template .home-entrance.is-in[data-in="rotate-in"]   { animation-name: home-rotate-in !important; }

@keyframes home-zoom-pop { from{opacity:0;transform:scale(0.72)} 55%{opacity:1;transform:scale(1.05)} 75%{transform:scale(0.99)} to{opacity:1;transform:scale(1)} }
@keyframes home-bounce-in { from{opacity:0;transform:translateY(38px) scale(0.94)} 55%{opacity:1;transform:translateY(-8px) scale(1.03)} 75%{transform:translateY(2px) scale(0.995)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes home-slide-in-left { from{opacity:0;transform:translateX(-42px)} to{opacity:1;transform:translateX(0)} }
@keyframes home-slide-in-right { from{opacity:0;transform:translateX(42px)} to{opacity:1;transform:translateX(0)} }
@keyframes home-rotate-in { from{opacity:0;transform:rotate(-6deg) translateY(26px)} to{opacity:1;transform:rotate(0) translateY(0)} }

/* Bass-pulse on the hero mast — the FB signature, kept subtle.
   opacity:1 is required: .reveal-scale-up sets the title to opacity:0 and
   relies on its entrance animation to fade in; this bass-pulse animation
   replaces that animation (and only animates scale), so without opacity:1
   the title would stay invisible. */
@keyframes home-bass-pulse { 0%,100%{transform:scale(1)} 20%{transform:scale(1.022)} 50%{transform:scale(1)} }
body.home-template .hero__title {
    opacity: 1;
    animation: home-bass-pulse var(--home-two-beat) ease-in-out infinite;
}

/* ── Breathing glow on the key CTAs ───────────────────────────────────────
   A slow, low-intensity gold breath on the hero's primary CTA and each
   feature band's primary button, to make them feel alive and inviting. */
@keyframes home-cta-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.0); }
    50%      { box-shadow: 0 0 26px 1px rgba(var(--color-accent-rgb), 0.42); }
}
body.home-template .hero__actions .btn--gold,
body.home-template .featured-bib__actions .btn--gold,
body.home-template .featured-rr__actions .btn--gold,
body.home-template .featured-fb__actions .btn--gold {
    animation: home-cta-breathe 3.4s ease-in-out infinite;
}
body.home-template .featured-es__actions .btn--red {
    animation: home-cta-breathe 3.4s ease-in-out infinite;
}

/* ── Motion off for visitors who ask for it ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body.home-template .hero__image,
    body.home-template .hero__video { animation: none; transform: none; inset: 0; width: 100%; height: 100%; }
    body.home-template .hero__grain { animation: none; }
    body.home-template .hero__title { animation: none; }   /* opacity:1 base keeps it visible */
    body.home-template .featured-bib__bg img,
    body.home-template .featured-rr__bg img,
    body.home-template .featured-es__bg img,
    body.home-template .featured-fb__bg img,
    body.home-template .featured-band__video,
    body.home-template .join-cta__image,
    body.home-template .book-section__hero-image img,
    body.home-template .featured-post__image img { transform: none; }
    /* Show the stills, not the motion footage */
    body.home-template .hero__video,
    body.home-template .featured-band__video { display: none; }
    /* No CTA breathing */
    body.home-template .hero__actions .btn--gold,
    body.home-template .featured-bib__actions .btn--gold,
    body.home-template .featured-rr__actions .btn--gold,
    body.home-template .featured-fb__actions .btn--gold,
    body.home-template .featured-es__actions .btn--red { animation: none; }
    /* Never leave entrance content hidden */
    body.home-template .home-entrance { opacity: 1 !important; transform: none !important; }
}