/* =============================================================================
   FilmParty — Home Spotlight Hero  (+ recently-added coverflow refinements)
   -----------------------------------------------------------------------------
   A cinematic spotlight that is the editorial "detail view" of whatever title
   is centered in the "recently added" coverflow directly below it. The two
   together read as ONE showcase: move the coverflow → the spotlight follows.

   Self-contained and namespaced under `.fp-hero`. Shares the global tokens
   (variables.css) but defines no global rules. Loads AFTER home.css on the home
   page only, which also lets the small `.recent-upgraded-*` overrides at the
   bottom win without editing the large home.css.
   ========================================================================== */

.fp-hero {
    --fp-hero-pad-x: clamp(20px, 4vw, 44px);
    --fp-hero-blue: #2f7bff;
    --fp-hero-ease: cubic-bezier(.22, 1, .36, 1);
    --fp-hero-spring: cubic-bezier(.34, 1.4, .5, 1);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: clamp(460px, 44vw, 620px);
    border-radius: 0 0 34px 34px;
    background: var(--bg-main);
    contain: layout paint;
}

/* ---- Layer 0 — cinematic backdrop (the centered title's wide art) ---- */
.fp-hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg-deep);
}

.fp-hero__backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 28%;
    transform: translateZ(0) scale(1.001);
    backface-visibility: hidden;
    transition: opacity .55s var(--fp-hero-ease), transform .9s var(--fp-hero-ease);
}

.fp-hero.is-hero-syncing .fp-hero__backdrop img {
    opacity: .28;
    transform: translateZ(0) scale(1.045);
}

/* ---- Layer 1 — legibility scrim.
   Soft corner "pool" under the content + a gentle bottom blend. NO hard
   rectangular panel behind the text (legibility comes from this soft pool plus
   the title's own shadow), so the title floats naturally over the art. ---- */
.fp-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(135% 130% at 86% 112%, rgba(6, 8, 12, .74) 0%, rgba(6, 8, 12, .34) 30%, transparent 58%),
        linear-gradient(to top, var(--bg-main) 0%, rgba(10, 12, 16, .5) 13%, transparent 44%),
        linear-gradient(to bottom, rgba(7, 9, 14, .42) 0%, transparent 16%);
}

/* ---- Content shell (centered max-width, content anchored bottom-start) ---- */
.fp-hero__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 0 var(--fp-hero-pad-x);
    display: flex;
    align-items: flex-end;
}

.fp-hero__content {
    width: min(100%, 560px);
    /* clears the coverflow centre card that rises into the hero's lower edge */
    padding-bottom: clamp(56px, 9vh, 100px);
    transform: translateZ(0);
    transition: opacity .42s var(--fp-hero-ease), transform .42s var(--fp-hero-ease);
}

.fp-hero.is-hero-syncing .fp-hero__content {
    opacity: 0;
    transform: translateY(10px);
}

/* ---- Title ---- */
.fp-hero__title {
    margin: 0;
    font-size: clamp(30px, 4.4vw, 56px);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.4px;
    color: #fff;
    /* strong, soft shadow = legible over any art without a visible box */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 3px 22px rgba(0, 0, 0, .6);
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Meta chips — rating · type · year ---- */
.fp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.fp-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    color: #e7eefb;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.fp-hero__chip[hidden] { display: none; }

.fp-hero__chip--rating {
    color: #fff;
    background: rgba(255, 196, 81, .15);
    border-color: rgba(255, 196, 81, .36);
}

.fp-hero__chip--rating svg { width: 14px; height: 14px; fill: #ffc451; flex-shrink: 0; }
.fp-hero__chip--rating b { font-weight: 800; letter-spacing: .2px; }

/* ---- Synopsis (desktop) ---- */
.fp-hero__synopsis {
    margin: 16px 0 0;
    max-width: 470px;
    color: var(--text-soft);
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.95;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fp-hero__synopsis:empty { display: none; }

/* ---- Action — compact, glassy, understated-but-clearly-actionable ---- */
.fp-hero__actions { margin-top: 22px; }

.fp-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 10px 30px -16px rgba(0, 0, 0, .85);
    transition:
        transform .3s var(--fp-hero-spring),
        background-color .3s var(--fp-hero-ease),
        border-color .3s var(--fp-hero-ease),
        box-shadow .3s var(--fp-hero-ease);
}

.fp-hero__cta svg { width: 15px; height: 15px; flex-shrink: 0; }
.fp-hero__cta svg path { fill: #fff; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }

.fp-hero__cta:hover {
    transform: translateY(-1px);
    background: rgba(47, 123, 255, .26);
    border-color: rgba(130, 175, 255, .6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 14px 34px -16px rgba(47, 123, 255, .75);
}

.fp-hero__cta:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.fp-hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* =========================================================================
   Responsive — mobile shows much more of the banner (≈16:9, minimal crop) and
   a tighter, smaller, glassier action.
   ========================================================================= */
@media (max-width: 768px) {
    .fp-hero {
        /* a little taller so the banner fills the width edge-to-edge and the
           stage has more presence (cover, not letterboxed) — but kept modest.
           The env() additions bleed the banner up under the iOS notch (no effect
           off iOS, where env() resolves to 0) — preserved from the prior build. */
        margin-top: calc(-1 * env(safe-area-inset-top, 0px));
        height: calc(clamp(255px, 70vw, 350px) + env(safe-area-inset-top, 0px));
        border-radius: 0 0 24px 24px;
    }

    .fp-hero__backdrop img {
        object-fit: cover;
        object-position: 50% 42%;
    }

    .fp-hero__scrim {
        background:
            linear-gradient(to top, var(--bg-main) 0%, rgba(8, 10, 14, .72) 24%, rgba(8, 10, 14, .26) 52%, transparent 78%),
            linear-gradient(to bottom, rgba(7, 9, 14, .42) 0%, transparent 22%);
    }

    .fp-hero__inner { padding: 0 16px; }

    .fp-hero__content {
        width: 100%;
        padding-bottom: clamp(14px, 4vw, 22px);
    }

    .fp-hero__title { font-size: clamp(20px, 5.6vw, 28px); letter-spacing: -.3px; }

    .fp-hero__meta { margin-top: 11px; gap: 6px; }

    .fp-hero__chip { height: 26px; font-size: 11.5px; padding: 0 8px; border-radius: 8px; }
    .fp-hero__chip--rating svg { width: 12px; height: 12px; }

    /* keep the mobile spotlight compact: title + meta + action only */
    .fp-hero__synopsis { display: none; }

    .fp-hero__actions { margin-top: 12px; }

    .fp-hero__cta {
        height: 36px;
        padding: 0 13px;
        gap: 6px;
        border-radius: 10px;
        font-size: 12.5px;
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .26);
    }

    .fp-hero__cta svg { width: 13px; height: 13px; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .fp-hero__backdrop img,
    .fp-hero__content,
    .fp-hero__cta {
        transition-duration: .001ms;
    }

    .fp-hero.is-hero-syncing .fp-hero__backdrop img { transform: none; }
    .fp-hero.is-hero-syncing .fp-hero__content { transform: none; }
    .fp-hero__cta:hover { transform: none; }
}

/* =============================================================================
   Recently-added coverflow refinements (scoped overrides; home.css untouched)
   -----------------------------------------------------------------------------
   1) Shadow no longer "jumps" on each slide change. The cards animated their
      box-shadow between a 1-layer (side) and a 3-layer (centre+glow) value;
      CSS can't interpolate mismatched shadow lists, so it snapped/flickered.
      Box-shadow is removed from the transition (it now switches instantly) and
      the paint-containment / will-change layer churn that re-rasterised it is
      relaxed.
   2) Posters now respond to hover (gentle zoom + lift in brightness/glow).

   DEFINITIVE shadow fix (the box-shadow→drop-shadow attempts still "refreshed"
   on entering cards because the shadow was tied to the card's ANIMATING filter:
   filter (.45s) outlasts opacity (.35s), so the shadow finished growing after
   the card was already visible = a second "shadow appears" pop).
   The shadow and the dim/brighten are now on DIFFERENT elements:
     • the CARD carries a soft, STATIC box-shadow (no filter on the card → it
       can't be clipped/re-rastered by a filter region; not in any transition →
       it can't interpolate or lag; it simply fades in with the card's opacity).
     • the IMG carries the saturate/brightness (so the dim↔bright still animates
       smoothly, but only on the image, never touching the shadow).
   Large blur + tiny offset keeps the shadow soft on every side (no hard edge).
   ============================================================================= */
.recent-upgraded-card {
    transition:
        transform .6s cubic-bezier(.2, .78, .2, 1),
        opacity .35s ease;
    contain: layout;
    will-change: auto;
    filter: none;
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.recent-upgraded-card.pos-0 {
    filter: none; /* override home.css pos-0 card filter; it lives on the img now */
    border-color: rgba(112, 170, 255, .4);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .55),
        0 0 34px rgba(47, 123, 255, .3);
}

/* dim/brighten lives on the image so it never disturbs the card's shadow */
.recent-upgraded-card img {
    filter: saturate(.72) brightness(.72);
    transition: filter .45s ease, transform .55s cubic-bezier(.2, .78, .2, 1);
}

.recent-upgraded-card.pos-0 img {
    filter: saturate(1.08) brightness(1.05);
}

@media (hover: hover) and (pointer: fine) {
    .recent-upgraded-card.is-visible { cursor: pointer; }
    .recent-upgraded-card.is-visible:hover img { transform: scale(1.06); filter: saturate(1.12) brightness(1.1); }
    .recent-upgraded-card.is-visible:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .56); }
    .recent-upgraded-card.pos-0.is-visible:hover {
        box-shadow:
            0 24px 54px rgba(0, 0, 0, .6),
            0 0 42px rgba(47, 123, 255, .42);
    }
}

@media (prefers-reduced-motion: reduce) {
    .recent-upgraded-card img { transition: filter .2s ease; }
    .recent-upgraded-card.is-visible:hover img { transform: none; }
}