/*
 * LBF Theme Clean — homepage-polish.css
 * Homepage visual polish pass — subtle motion, depth, and spacing refinements.
 *
 * SCOPE: body.lbf-home-v3 exclusively.
 * This class is added by front-page.php via add_filter('body_class') and only
 * exists on the front page. Zero bleed to entertainment, sponsors, schedule,
 * footer, or any other template.
 *
 * Loaded via: enqueue.php is_front_page() conditional — after lbf-home-v3.css
 * All motion respects prefers-reduced-motion.
 */

/* ════════════════════════════════════════════════════════════
   HERO — ATMOSPHERE + MOTION REFINEMENTS
════════════════════════════════════════════════════════════ */

/* Subtle ambient ken-burns on hero background image — very slow, barely perceptible */
@media (prefers-reduced-motion: no-preference) {
    body.lbf-home-v3 .lbf-hs-bg-photo img {
        animation: lbf-hero-drift 30s ease-in-out infinite alternate;
        will-change: transform;
    }

    @keyframes lbf-hero-drift {
        from { transform: scale(1.00) translate(0, 0); }
        to   { transform: scale(1.04) translate(-1%, -0.5%); }
    }
}

/* Hero overlay — slightly richer vignette at bottom for text pop */
body.lbf-home-v3 .lbf-hs-bg-overlay {
    background: linear-gradient(
        100deg,
        rgba(228, 236, 250, 0.97)  0%,
        rgba(228, 236, 250, 0.90) 22%,
        rgba(228, 236, 250, 0.62) 40%,
        rgba(228, 236, 250, 0.18) 58%,
        rgba(228, 236, 250, 0.00) 72%
    );
}

/* Date pill — slight glass refinement */
body.lbf-home-v3 .v3-hero-date {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Hero buttons — smoother transition + sharper shadow response */
body.lbf-home-v3 .lbf-hero-static .btn {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease,
                background 0.18s ease;
}

body.lbf-home-v3 .lbf-hero-static .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(40, 68, 137, 0.26);
}

/* Blue CTA button — richer gradient on hover */
body.lbf-home-v3 .lbf-hero-static .btn-blue:hover {
    background: linear-gradient(180deg, #3060f5 0%, #1e48c0 100%);
}

/* ════════════════════════════════════════════════════════════
   STATS BAND — light entrance stagger
════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    body.lbf-home-v3 .v3-stat-card {
        opacity: 0;
        transform: translateY(14px);
        animation: lbf-stat-enter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }

    body.lbf-home-v3 .v3-stat-card:nth-child(1) { animation-delay: 0.55s; }
    body.lbf-home-v3 .v3-stat-card:nth-child(2) { animation-delay: 0.68s; }
    body.lbf-home-v3 .v3-stat-card:nth-child(3) { animation-delay: 0.81s; }
    body.lbf-home-v3 .v3-stat-card:nth-child(4) { animation-delay: 0.94s; }

    @keyframes lbf-stat-enter {
        to { opacity: 1; transform: translateY(0); }
    }
}

/* Stat card hover — subtle number pop */
body.lbf-home-v3 .v3-stat-card {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease;
}

body.lbf-home-v3 .v3-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 55, 167, 0.12);
}

/* ════════════════════════════════════════════════════════════
   EXPERIENCE THE FESTIVAL — CARD REFINEMENTS
════════════════════════════════════════════════════════════ */

/* Card transition — add border-color to existing transform/shadow */
body.lbf-home-v3 .lbf-exp-card {
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.28s ease,
                border-color 0.28s ease;
    will-change: transform;
}

/* Hover — slightly stronger lift + tinted border */
body.lbf-home-v3 .lbf-exp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 44px rgba(40, 68, 160, 0.16);
    border-color: rgba(40, 100, 220, 0.28);
}

/* Icon badge — subtle pulse on card hover (replaces no-motion fallback) */
@media (prefers-reduced-motion: no-preference) {
    body.lbf-home-v3 .lbf-exp-card:hover .lbf-exp-card__icon {
        animation: lbf-icon-bounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes lbf-icon-bounce {
        0%   { transform: scale(1); }
        50%  { transform: scale(1.18); }
        100% { transform: scale(1); }
    }
}

/* Image overlay — slightly deeper on hover for focus */
body.lbf-home-v3 .lbf-exp-card:hover .lbf-exp-card__overlay {
    background: linear-gradient(180deg,
        rgba(30, 55, 140, 0.15) 0%,
        rgba(47, 93, 170, 0.10) 45%,
        rgba(15, 35, 100, 0.42) 100%);
}

/* Pill — slightly larger on hover for interactivity feedback */
body.lbf-home-v3 .lbf-exp-card:hover .lbf-exp-card__pill {
    background: rgba(255, 255, 255, 0.97);
    transform: scale(1.06);
    transition: transform 0.2s ease, background 0.2s ease;
}

body.lbf-home-v3 .lbf-exp-card__pill {
    transition: transform 0.2s ease, background 0.2s ease;
}

/* Image scale — slightly more dramatic */
body.lbf-home-v3 .lbf-exp-card:hover .lbf-exp-card__img {
    transform: scale(1.09);
}

/* Card title — color shift on hover */
body.lbf-home-v3 .lbf-exp-card:hover .lbf-exp-card__title {
    color: #0a2a75;
    transition: color 0.22s ease;
}

body.lbf-home-v3 .lbf-exp-card__title {
    transition: color 0.22s ease;
}

/* ════════════════════════════════════════════════════════════
   EXPERIENCE THE FESTIVAL — SCHEDULE STRIP REFINEMENTS
════════════════════════════════════════════════════════════ */

/* Day row items — smoother hover */
body.lbf-home-v3 .lbf-exp-sched__day-item {
    transition: transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1),
                background 0.2s ease,
                box-shadow 0.2s ease;
}

body.lbf-home-v3 .lbf-exp-sched__day-item:hover,
body.lbf-home-v3 .lbf-exp-sched__day-item--active {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 55, 167, 0.12);
}

/* Event rows — subtle left-border accent on hover */
body.lbf-home-v3 .lbf-exp-sched__row {
    transition: background 0.18s ease, padding-left 0.18s ease;
    border-left: 2px solid transparent;
}

body.lbf-home-v3 .lbf-exp-sched__row:hover {
    background: rgba(0, 55, 167, 0.04);
    border-left-color: rgba(0, 55, 167, 0.25);
    padding-left: calc(var(--exp-sched-row-pl, 0px) + 4px);
}

/* ════════════════════════════════════════════════════════════
   FEATURED ENTERTAINMENT — LIGHT POLISH ONLY
════════════════════════════════════════════════════════════ */

/* Selector cards — tighten transition timing */
body.lbf-home-v3 .lbf-feat-card {
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.22s ease,
                opacity 0.22s ease;
}

/* Inactive card hover — slightly more responsive lift */
body.lbf-home-v3 .lbf-feat-card:not(.lbf-feat-card--active):hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 20, 80, 0.28);
}

/* Hero panel switch — smoother fade */
body.lbf-home-v3 .lbf-feat-hero {
    transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ════════════════════════════════════════════════════════════
   SECTION-LEVEL TRANSITIONS — v3-card reveal refinements
════════════════════════════════════════════════════════════ */

/* v3-card reveal — already handled by scroll-reveal.js via .lbf-rv-ready → .lbf-rv-visible
   Add a smoother curve to the existing transition */
body.lbf-home-v3 .lbf-rv-ready {
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    transition-duration: 0.6s !important;
}

/* Section cards — subtle depth differentiation */
body.lbf-home-v3 .v3-card {
    transition: box-shadow 0.3s ease;
}

/* V3 shell — slightly richer shadow */
body.lbf-home-v3 .v3-shell {
    box-shadow: 0 -4px 40px rgba(0, 55, 167, 0.07),
                0 20px 80px rgba(0, 0, 0, 0.06);
}

/* ════════════════════════════════════════════════════════════
   SPACING RHYTHM TUNING
════════════════════════════════════════════════════════════ */

/* Experience section — slightly more top padding */
body.lbf-home-v3 .lbf-exp-section {
    padding-top: 3rem;
}

/* Card grid gap — a touch more breathing room */
body.lbf-home-v3 .lbf-exp-cards {
    gap: 1rem;
}

/* Intro text — a touch more room before cards */
body.lbf-home-v3 .lbf-exp-intro {
    margin-bottom: 2rem;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL CTA BUTTONS ON HOMEPAGE — hover depth consistency
════════════════════════════════════════════════════════════ */

/* General btn within v3 sections — consistent spring transition */
body.lbf-home-v3 .v3-card .btn,
body.lbf-home-v3 .v3-card .btn-gold,
body.lbf-home-v3 .v3-card .btn-blue {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease,
                background 0.18s ease;
}

body.lbf-home-v3 .v3-card .btn:hover,
body.lbf-home-v3 .v3-card .btn-gold:hover,
body.lbf-home-v3 .v3-card .btn-blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 55, 167, 0.18);
}

/* ════════════════════════════════════════════════════════════
   PERFORMANCE — GPU hints for animated elements
════════════════════════════════════════════════════════════ */

body.lbf-home-v3 .lbf-exp-card,
body.lbf-home-v3 .v3-stat-card,
body.lbf-home-v3 .lbf-feat-card {
    transform: translateZ(0); /* Promote to composite layer */
    backface-visibility: hidden;
}

/* ════════════════════════════════════════════════════════════
   ACCESSIBILITY — honor reduced motion for all animations
════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    body.lbf-home-v3 .lbf-hs-bg-photo img,
    body.lbf-home-v3 .v3-stat-card,
    body.lbf-home-v3 .lbf-exp-card,
    body.lbf-home-v3 .lbf-feat-card,
    body.lbf-home-v3 .lbf-rv-ready {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    /* Keep opacity transition for lbf-rv (essential for content reveal) */
    body.lbf-home-v3 .lbf-rv-ready {
        transition-property: opacity !important;
        transition-duration: 0.3s !important;
    }
}

/* ════════════════════════════════════════════════════════════
   MOBILE — no hover artifacts on touch
════════════════════════════════════════════════════════════ */

@media (hover: none) {
    /* Disable translateY transforms on touch devices */
    body.lbf-home-v3 .lbf-exp-card:hover,
    body.lbf-home-v3 .v3-stat-card:hover,
    body.lbf-home-v3 .lbf-feat-card:not(.lbf-feat-card--active):hover {
        transform: none;
    }

    /* Remove icon bounce on touch */
    body.lbf-home-v3 .lbf-exp-card:hover .lbf-exp-card__icon {
        animation: none;
    }
}

/* ════════════════════════════════════════════════════════════
   v29.3.14 — Pageant card: tighten the empty band above contestants
               so the pill sits just above their heads/crowns with
               only a small clearance — not a giant blurred sky band.
════════════════════════════════════════════════════════════ */

/* ── Pageant Experience card: anchor framing partway down the source
       image so contestants sit high in the visible crop, with just
       enough crowd-blur clearance above their crowns for the top-left
       pill to rest without overlapping them. Scoped to this one card. ── */
body.lbf-home-v3 .lbf-exp-card[data-card-key="pageant"] .lbf-exp-card__img {
    object-position: center 35%;
}

/* Pill stays at default top: 7px; left: 7px from lbf-home-v3.css —
   no override needed here. */

/* ── Pageant hero card: remove purple gradient background so the photo
       fills the whole card; text stays constrained to the left half. ── */
@media (min-width: 768px) {
    body.lbf-home-v3 .lbf-pag25-hero-card {
        background: transparent !important;
    }
    body.lbf-home-v3 .lbf-pag25-hero-bg-img {
        /* Photo fills the whole card; girls sit centered/right in the frame */
        object-position: center center;
    }
    /* Constrain text container to the left half so it never crosses onto the
       subjects. Slightly tighter type so the body copy fits the card height. */
    body.lbf-home-v3 .lbf-pag25-hero-inner {
        max-width: 55%;
    }
    body.lbf-home-v3 .lbf-pag25-hero-h {
        font-size: 1.5rem;
        line-height: 1.15;
    }
    body.lbf-home-v3 .lbf-pag25-hero-body {
        font-size: 0.9rem;
        line-height: 1.45;
    }
}

@media (min-width: 1100px) {
    /* On wider screens, give the photo a little more breathing room */
    body.lbf-home-v3 .lbf-pag25-hero-inner {
        max-width: 52%;
    }
    body.lbf-home-v3 .lbf-pag25-hero-h {
        font-size: 1.65rem;
    }
}

/* ════════════════════════════════════════════════════════════
   SPONSOR TIER LOGOS — v32.0.8
   - Bronze hidden from front page (still shown on /sponsors and admin)
   - Remaining tiers (Presenting / Platinum / Gold / Silver) get a
     ~15% size bump so the logos read more clearly.
   Original tier sizes are in lbf-home-v3.css §2740–2842.
   ════════════════════════════════════════════════════════════ */

/* Hide Bronze on homepage. data-tier-idx counts non-presenting tiers:
   1 = Platinum, 2 = Gold, 3 = Silver, 4 = Bronze. The :has() rule is
   a secondary safeguard in case tier order ever changes. */
body.lbf-home-v3 .v3-tier-block[data-tier-idx="4"],
body.lbf-home-v3 .v3-tier-block:has(.tier-label.tf) {
  display: none !important;
}

/* Presenting (sp-xl) — base 72h × 180w → ~83h × 207w */
body.lbf-home-v3 .sp-xl {
  min-width: 207px;
  height: 83px;
  padding: 0.72rem 1.44rem;
}

/* Platinum (sp-lg) — base 72h → 83h */
body.lbf-home-v3 .lbf-spd25 .sp-lg {
  height: 83px;
  min-height: 83px;
  padding: 0.575rem 0.72rem;
  font-size: 1rem;
}

/* Gold (sp-md) — base 56h → 64h */
body.lbf-home-v3 .lbf-spd25 .sp-md {
  height: 64px;
  min-height: 64px;
  padding: 0.43rem 0.575rem;
  font-size: 0.86rem;
}

/* Silver (sp-sm) — base 46h → 53h */
body.lbf-home-v3 .lbf-spd25 .sp-sm {
  height: 53px;
  min-height: 53px;
  padding: 0.345rem 0.46rem;
  font-size: 0.86rem;
}