/*
 * CASTALDI HERO - PREMIUM 2026 v3.1
 * ---------------------------------
 * Design Philosophy:
 * - Typography: Mike Matas (Apple/Bulgari proportions)
 * - Animations: Adam Argyle (CSS-only, GPU-accelerated, subtle)
 * - Micro-interactions: Tobias Ahlin (spring physics, blur-in)
 * - Colors: Apple White (#f5f5f7) - NO gold shimmer
 * 
 * Fonts from style.css:
 * - --gc-font-sans: 'Inter'
 * - --gc-font-serif: 'Cormorant Garamond'
 * 
 * Ultimo aggiornamento: 2026-02-07
 * 
 * CHANGELOG v3.1 (2026-02-07):
 * - Fix: filter duration 0.6→0.85 to eliminate "snap" effect
 * - Fix: will-change on parallax only during scroll (GPU memory)
 * - Fix: Ken Burns iOS safeguard + translate3d optimization
 * - Fix: Stagger timing adjusted for "breathing room" (Tobias Ahlin)
 */


/* ============================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================ */

:root {
  /* Typography Scale - Mike Matas Golden Ratio (1.618) */
  --hero-title-size: clamp(2.8rem, 5.5vw, 5.2rem);
  --hero-lead-size: clamp(1.05rem, 1.8vw, 1.35rem);
  --hero-muted-size: clamp(0.9rem, 1.4vw, 1.1rem);
  
  /* Spacing Scale - Proportional */
  --hero-stack-gap: clamp(1.2rem, 2.5vw, 2rem);
  --hero-title-mb: 0.1em;
  --hero-lead-mb: 0;
  
  /* Colors - Apple White Palette */
  --hero-white: #f5f5f7;
  --hero-white-soft: rgba(245, 245, 247, 0.92);
  --hero-white-muted: rgba(245, 245, 247, 0.72);
  --hero-white-subtle: rgba(245, 245, 247, 0.56);
  
  /* Animation - Tobias Ahlin Spring Curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Timing - Stagger intervals */
  --stagger-base: 80ms;
  --duration-reveal: 1s;
  --duration-fade: 0.7s;
}


/* ============================================================================
   2. BASE & GPU OPTIMIZATION
   ============================================================================ */

.gpu-layer {
  transform: translateZ(0);
  backface-visibility: hidden;
}

[data-parallax-container] {
  contain: layout style;
}

/* Video reveal - simple opacity */
.video-reveal {
  opacity: 0;
  transition: opacity var(--duration-fade) var(--ease-out-expo);
}

.video-reveal.is-playing {
  opacity: 1;
}

/* LCP fallback */
#hero-lcp-img-mobile,
#desktop-lcp-img {
  transition: opacity 0.5s var(--ease-smooth);
}

#hero-lcp-img-mobile.is-hidden,
#desktop-lcp-img.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* ============================================================================
   3. CINEMATIC OVERLAYS (Subtle, Elegant)
   ============================================================================ */

/* Premium Gradient - Deeper, more cinematic */
.hero-overlay.premium-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.08) 35%,
    rgba(0, 0, 0, 0.45) 70%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

/* Mobile overlay */
.castaldi-hero-mobile > .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.05) 25%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

/* Vignette - Subtle */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse 130% 100% at 50% 50%,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  opacity: 0.6;
}

/* Film Grain - Very subtle, desktop only */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.018;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.4s steps(8) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, -1%); }
}

@media (max-width: 1023px) {
  .hero-grain { display: none; }
}

/* Light Leak - REMOVED (was always display:none, dead code) */


/* ============================================================================
   4. TYPOGRAPHY - Mike Matas / Bulgari Style
   ============================================================================ */

.hero-stack {
  display: flex;
  flex-direction: column;
  gap: var(--hero-stack-gap);
  max-width: 52ch;
  width: 100%;
}

/* Title - Inter Semi-Bold */
.hero-title {
  font-family: var(--gc-font-sans, 'Inter', -apple-system, sans-serif);
  font-size: var(--hero-title-size);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--hero-white);
  margin: 0;
  margin-bottom: var(--hero-title-mb);
}

/* 
 * ═══════════════════════════════════════════════════════════════════════════
 * WORD ANIMATION — REMOVED & RELOCATED 2026-02-07 (Addy Osmani clean-slate)
 * ═══════════════════════════════════════════════════════════════════════════
 * Le animazioni per .hero-title .word sono state spostate in un sistema
 * isolato ad alta specificità direttamente nell'HTML (Prima-sezione-premium-2026.html)
 * per evitare conflitti CSS cascade.
 * 
 * NON aggiungere regole .word qui — usare SOLO il sistema inline.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* Lead - Inter Regular */
.hero-lead {
  font-family: var(--gc-font-sans, 'Inter', -apple-system, sans-serif);
  font-size: var(--hero-lead-size);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--hero-white-soft);
  margin: 0;
  max-width: 48ch;
}

/* Muted - Inter Light */
.hero-muted {
  font-family: var(--gc-font-sans, 'Inter', -apple-system, sans-serif);
  font-size: var(--hero-muted-size);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--hero-white-muted);
  margin: 0;
  max-width: 52ch;
}


/* ============================================================================
   5. ANIMATIONS - Adam Argyle / Tobias Ahlin Style
   ============================================================================ */

/* 
 * WORD ANIMATIONS: Removed — see Prima-sezione-premium-2026.html inline <style>
 * Sistema isolato ad alta specificità per evitare conflitti CSS.
 */

/* Lead & Muted: Soft reveal */
/* Fix 2026-02-07: Adjusted delays to avoid overlap with word stagger (Tobias Ahlin) */
.hero-lead,
.hero-muted {
  opacity: 0;
  transform: translateY(0.8em);
  filter: blur(2px);
  transition: 
    opacity 0.9s var(--ease-out-quint),
    transform 0.9s var(--ease-out-quint),
    filter 0.75s var(--ease-out-quint);
}

/* Revealed via parent */
/* Delay sequence: Words finish ~0.5s, Lead starts 0.45s, Muted starts 0.7s */
/* This creates "the breath" - Tobias Ahlin rhythm technique */
.hero-stack.js-animated .hero-lead {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.45s; /* Was 0.35s - now starts as last word settles */
}

.hero-stack.js-animated .hero-muted {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.7s; /* Was 0.55s - more breathing room */
}

/* Fade In Up utility */
.fade-in-up {
  animation: fadeInUp 0.8s var(--ease-out-expo) forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.2em);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


/* ============================================================================
   6. PARALLAX & SCROLL
   ============================================================================ */

/* Fix 2026-02-07: will-change only during scroll, not permanent (Adam Argyle) */
.parallax-video-container {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  /* will-change applied via JS .is-scrolling class to save GPU memory */
}

.is-scrolling .parallax-video-container {
  will-change: transform;
}

.hero-mouse-track {
  transition: transform 0.12s var(--ease-smooth);
}


/* ============================================================================
   7. SCROLL INDICATOR - Minimal
   ============================================================================ */

.hero-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeIn 0.6s var(--ease-out-expo) 2.8s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.hero-scroll-indicator__mouse {
  width: 20px;
  height: 32px;
  border: 1.5px solid var(--hero-white-subtle);
  border-radius: 10px;
  position: relative;
}

.hero-scroll-indicator__wheel {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: var(--hero-white-muted);
  border-radius: 1px;
  animation: scrollWheel 1.8s var(--ease-out-quint) infinite;
}

@keyframes scrollWheel {
  0%, 100% { 
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  60% { 
    opacity: 0.2;
    transform: translateX(-50%) translateY(8px);
  }
}

.hero-scroll-indicator__text {
  font-family: var(--gc-font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-white-subtle);
}

.hero-scroll-indicator.is-hidden {
  opacity: 0 !important;
  transition: opacity 0.3s var(--ease-smooth);
}

@media (max-width: 1023px) {
  .hero-scroll-indicator { display: none; }
}


/* ============================================================================
   8. KEN BURNS - Subtle
   Fix 2026-02-07: iOS safeguard + GPU optimization (Adam Argyle)
   ============================================================================ */

#hero-video.is-playing,
#hero-video-mobile.is-playing {
  animation: kenBurns 30s var(--ease-smooth) infinite alternate;
  /* GPU layer for smoother animation */
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes kenBurns {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.04) translate3d(-0.5%, -0.3%, 0); }
}

.is-scrolling #hero-video.is-playing {
  animation-play-state: paused;
}

/* iOS Safari: Disable Ken Burns on low-power mode or older devices */
@supports (-webkit-touch-callout: none) {
  @media (prefers-reduced-motion: reduce) {
    #hero-video.is-playing,
    #hero-video-mobile.is-playing {
      animation: none;
      transform: scale(1.02); /* Static subtle zoom */
    }
  }
}


/* ============================================================================
   9. RESPONSIVE - Mike Matas Proportional Scale
   ============================================================================ */

/* Mobile Small (< 400px) */
@media (max-width: 399px) {
  :root {
    --hero-title-size: clamp(1.6rem, 8vw, 2rem);
    --hero-lead-size: clamp(0.9rem, 4vw, 1rem);
    --hero-muted-size: clamp(0.8rem, 3.5vw, 0.9rem);
    --hero-stack-gap: 0.9rem;
    --stagger-base: 60ms;
  }
  
  .bulgari-layout {
    padding: 0 1.1rem 2.8rem;
  }
  
  /* .word layout handled in inline styles */
  
  .hero-stack {
    max-width: 100%;
  }
  
  .hero-grain { display: none; }
}

/* Mobile Portrait (400-600px) */
@media (min-width: 400px) and (max-width: 600px) {
  :root {
    --hero-title-size: clamp(1.8rem, 7vw, 2.4rem);
    --hero-lead-size: clamp(0.95rem, 3.8vw, 1.1rem);
    --hero-muted-size: clamp(0.85rem, 3.2vw, 0.95rem);
    --hero-stack-gap: 1rem;
  }
  
  .bulgari-layout {
    padding: 0 1.25rem 3.2rem;
  }
  
  .hero-grain { display: none; }
}

/* Mobile Landscape */
@media (max-width: 980px) and (orientation: landscape) {
  :root {
    --hero-title-size: clamp(1.4rem, 4.5vw, 2.2rem);
    --hero-lead-size: clamp(0.85rem, 2.2vw, 1rem);
    --hero-stack-gap: 0.7rem;
  }
  
  .castaldi-hero-mobile {
    height: 100dvh;
    min-height: 260px;
  }
  
  .bulgari-layout {
    padding: 0 2rem 1.2rem;
    justify-content: center;
  }
  
  .hero-muted {
    display: none;
  }
  
  .hero-grain,
  .hero-vignette { display: none; }
}

/* Tablet Portrait (601-980px) */
@media (min-width: 601px) and (max-width: 980px) and (orientation: portrait) {
  :root {
    --hero-title-size: clamp(2.2rem, 6.5vw, 3.2rem);
    --hero-lead-size: clamp(1rem, 2.5vw, 1.2rem);
    --hero-muted-size: clamp(0.9rem, 2.2vw, 1.05rem);
    --hero-stack-gap: 1.2rem;
  }
  
  .bulgari-layout {
    padding: 0 2.5rem 4rem;
  }
}

/* Desktop Standard (981-1399px) */
@media (min-width: 981px) and (max-width: 1399px) {
  :root {
    --hero-title-size: clamp(3rem, 5vw, 4.2rem);
    --hero-lead-size: clamp(1.1rem, 1.6vw, 1.25rem);
    --hero-muted-size: clamp(0.95rem, 1.3vw, 1.05rem);
  }
  
  .hero-content {
    padding: 0 4rem;
  }
}

/* Desktop Large (1400-1919px) */
@media (min-width: 1400px) and (max-width: 1919px) {
  :root {
    --hero-title-size: clamp(4rem, 5vw, 5rem);
    --hero-lead-size: clamp(1.2rem, 1.5vw, 1.35rem);
    --hero-muted-size: clamp(1rem, 1.2vw, 1.1rem);
    --hero-stack-gap: 1.8rem;
  }
}

/* Desktop XL (>=1920px) */
@media (min-width: 1920px) {
  :root {
    --hero-title-size: clamp(5rem, 4.5vw, 6rem);
    --hero-lead-size: clamp(1.3rem, 1.4vw, 1.5rem);
    --hero-muted-size: clamp(1.1rem, 1.1vw, 1.2rem);
    --hero-stack-gap: 2.2rem;
  }
}


/* ============================================================================
   10. ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  /* .hero-title .word handled in inline styles */
  .hero-lead,
  .hero-muted {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  
  .hero-grain { animation: none; }
  
  #hero-video.is-playing,
  #hero-video-mobile.is-playing {
    animation: none;
  }
  
  .hero-scroll-indicator__wheel {
    animation: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hero-white: #ffffff;
    --hero-white-soft: rgba(255, 255, 255, 0.95);
    --hero-white-muted: rgba(255, 255, 255, 0.85);
  }
  
  .hero-overlay.premium-overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 0.9) 100%
    );
  }
  
  .hero-grain { display: none; }
}

@media print {
  .castaldi-hero-mobile,
  #hero-desktop {
    display: none !important;
  }
}


/* ============================================================================
   11. DESKTOP CONTENT POSITIONING - VIEWPORT ADAPTIVE
   ============================================================================ */

/* 
 * Optical Centering Strategy:
 * - Header height: ~80px
 * - Perceived center should be ~45% from top (Golden Ratio)
 * - Use transform for responsive behavior at ANY window size
 */

/* HIGH SPECIFICITY: Override global theme CSS */
#hero-desktop .hero-content,
.castaldi-hero-section .hero-content {
  /* Jon Duckett + Addy Osmani: TRUE flexbox centering */
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  /* CRITICAL: Use min-height NOT height for flexbox centering */
  min-height: 100vh !important;
  min-height: 100dvh !important; /* Dynamic viewport for mobile browsers */
  height: auto !important; /* Override any height: 100% */
  max-width: none !important; /* Override max-width: 800px from theme */
  width: 100% !important;
  padding: 80px 1.5rem 0 !important; /* Header compensation */
  margin: 0 !important;
  box-sizing: border-box !important;
  /* NO transform - flexbox handles centering */
  transform: none !important;
}

/* Ensure section uses full viewport for proper centering */
#hero-desktop .castaldi-hero-section,
#hero-desktop [class*="hero-section"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.hero-content .hero-stack {
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: none;
}

.hero-content .hero-title {
  text-align: center;
  width: 100%;
}

.hero-content .hero-lead,
.hero-content .hero-muted {
  text-align: center;
}

/* Fine-tune for smaller viewports - Jon Duckett approach */
@media (max-height: 700px) {
  #hero-desktop .hero-content,
  .castaldi-hero-section .hero-content {
    /* Smaller header on compact screens */
    padding-top: 60px !important;
  }
}

/* Large screens - Addy Osmani: no special handling needed, flexbox scales */
@media (min-height: 900px) {
  #hero-desktop .hero-content,
  .castaldi-hero-section .hero-content {
    /* Standard header, flexbox auto-centers */
    padding-top: 80px !important;
  }
}

/* Mobile: left-aligned (Bulgari style) */
.bulgari-layout .hero-stack {
  align-items: flex-start;
  text-align: left;
}

.bulgari-layout .hero-lead,
.bulgari-layout .hero-muted {
  text-align: left;
}