/* ==========================================================================
   LA! — PREMIUM POLISH (Light Theme)
   Refines the light editorial base with luxury motion primitives:
   silky easing, mask/parallax reveal states, button sheen, refined depth,
   and micro-interactions. Loaded LAST so it wins the cascade.
   ========================================================================== */

:root {
  --ease-lux:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-1: 0.6s;
  --dur-2: 0.9s;
  --dur-3: 1.2s;
}

html { scroll-behavior: auto; } /* Lenis owns scrolling */

/* Subtle warm luminous canvas instead of flat white */
body {
  background:
    radial-gradient(1100px 700px at 82% -8%, rgba(122,38,193,0.05), transparent 60%),
    radial-gradient(900px 650px at -8% 30%, rgba(255,20,147,0.04), transparent 55%),
    radial-gradient(1000px 800px at 60% 108%, rgba(0,150,255,0.05), transparent 55%),
    #fcfbfa;
}

/* =========================================
   REVEAL PRIMITIVES (driven by premium.js)
   Elements start hidden; .is-inview animates them in.
   ========================================= */
[data-anim] { will-change: transform, opacity; }

[data-anim="up"]      { opacity: 0; transform: translateY(46px); }
[data-anim="fade"]    { opacity: 0; }
[data-anim="left"]    { opacity: 0; transform: translateX(-48px); }
[data-anim="right"]   { opacity: 0; transform: translateX(48px); }
[data-anim="scale"]   { opacity: 0; transform: scale(0.94); }

[data-anim].is-inview {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-2) var(--ease-lux),
              transform var(--dur-2) var(--ease-lux);
  transition-delay: var(--anim-delay, 0s);
}

/* Line-mask reveal for big headlines */
.mask-line { overflow: hidden; }
.mask-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-lux);
  transition-delay: var(--anim-delay, 0s);
}
.mask-line.is-inview > span { transform: translateY(0); }

/* Parallax image frames — inner image is oversized and drifts */
.parallax-frame { overflow: hidden; }
.parallax-frame img { will-change: transform; transform: scale(1.15); }

/* =========================================
   BUTTONS — sheen sweep + refined feel
   ========================================= */
.btn-premium, .btn-outline, .btn-light, .btn-glass-world, .btn-ghost-light, .btn-header-booking {
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux),
              background-color 0.35s var(--ease-lux), color 0.35s var(--ease-lux);
}
.btn-premium::after, .btn-light::after, .btn-header-booking::after {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-lux);
  pointer-events: none;
}
.btn-premium:hover::after, .btn-light:hover::after, .btn-header-booking:hover::after { left: 130%; }

/* =========================================
   NAV — refined underline glide
   ========================================= */
.nav-link::after {
  height: 1.5px;
  transition: width 0.45s var(--ease-lux);
}
.brand-logo .logo-img { transition: transform 0.5s var(--ease-lux); }
.brand-logo:hover .logo-img { transform: scale(1.06); }

/* =========================================
   CARDS — luxury lift & depth
   ========================================= */
.glass-card, .gateway-card, .matrix-panel-card, .expandable-card,
.episode-card, .netflix-card, .photobook-card, .chain-node {
  transition: transform 0.55s var(--ease-lux), box-shadow 0.55s var(--ease-lux),
              border-color 0.4s var(--ease-lux);
  will-change: transform;
}
.gateway-card:hover, .matrix-panel-card:hover, .expandable-card:hover, .episode-card:hover {
  transform: translateY(-10px);
}

/* Tilt targets get a soft grounding shadow that responds */
.tilt { transform-style: preserve-3d; }

/* =========================================
   IMAGE HOVER — cinematic slow zoom
   ========================================= */
.meet-portrait img, .editorial-portrait img, .gallery-card img,
.world-band-media img, .podcast-art img, .booking-cta-media img,
.blockbuster-img, .page-hero-media img {
  transition: transform 1.1s var(--ease-lux);
}
.meet-portrait:hover img, .editorial-portrait:hover img { transform: scale(1.05); }

/* =========================================
   SECTION RHYTHM — generous premium breathing
   ========================================= */
.section-padding { padding: clamp(5rem, 11vw, 10rem) 0; }
.section-title { line-height: 1.05; }
.section-subtitle { position: relative; }

/* Elegant animated hairline divider */
.lux-divider {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--color-border-md), transparent);
  position: relative; overflow: hidden;
}
.lux-divider::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--theme-primary), transparent);
  transform: translateX(-100%);
  animation: divider-sweep 5s var(--ease-smooth) infinite;
  opacity: 0.5;
}
@keyframes divider-sweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* =========================================
   SCROLL PROGRESS — refined gradient
   ========================================= */
.scroll-progress-line {
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-artist-primary), var(--color-writer-primary), var(--color-host-primary)) !important;
  transition: width 0.15s var(--ease-smooth) !important;
}

/* =========================================
   PRELOADER refinement
   ========================================= */
.preloader { transition: opacity 0.8s var(--ease-lux), visibility 0.8s; }

/* =========================================
   LOGO PRESENCE — header + logo-based loaders
   ========================================= */
.logo-img {
  height: 46px !important;
  width: auto;
  display: block;
  border-radius: 6px;
}
.main-header.scrolled .logo-img { height: 40px !important; }

/* Logo-based preloader (sub-pages) */
.preloader-logo-img {
  height: 88px;
  width: auto;
  border-radius: 10px;
  margin: 0 auto 1.6rem;
  display: block;
  box-shadow: 0 20px 50px rgba(0,0,0,0.14);
  animation: logo-breathe 1.8s var(--ease-lux) infinite;
}
@keyframes logo-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 20px 50px rgba(0,0,0,0.12); }
  50%      { transform: scale(1.05); box-shadow: 0 26px 60px rgba(122,38,193,0.22); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .preloader-logo-img { animation: none; }
}

/* =========================================
   Respect reduced motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  [data-anim], .mask-line > span { opacity: 1 !important; transform: none !important; }
  .parallax-frame img { transform: none !important; }
  .lux-divider::after { animation: none; }
}