/* ══════════════════════════════════════════════════════════════
   HERO DINÀMIC — yurteros.com
   Concepte: PROMPT-HERO-DINAMIC.md (NumaLab)
   Paleta: DESIGN.md "Earthy & Organic" (yurteros.com)
   Dinamisme en imatges + navegació. Rendiment: només transform/opacity.
   Accessibilitat: prefers-reduced-motion respectat, focus visible.
   ══════════════════════════════════════════════════════════════ */

/* ─── NAV: transparent→glassmorphism en scroll ─────────────── */
nav {
  transition: background 0.3s ease, box-shadow 0.3s ease, height 0.3s ease,
              backdrop-filter 0.3s ease;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}
/* Estat amunt del hero (fons fosc) → nav transparent, text clar */
nav.nav--hero {
  background: rgba(26, 16, 8, 0.0);
  border-bottom: 1px solid rgba(255,255,255,0.0);
}
nav.nav--hero .nav-logo,
nav.nav--hero .nav-links a {
  color: #fff;
}
nav.nav--hero .nav-logo span { color: var(--gold); }
nav.nav--hero .nav-hamburger { color: #fff; }

/* Estat en scroll → glassmorphism sòlid */
nav.nav--scrolled {
  background: rgba(253, 250, 245, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 6px 24px rgba(45, 34, 10, 0.10);
  border-bottom: 1px solid var(--border);
}
nav.nav--scrolled .nav-inner { height: 58px; }
nav.nav--scrolled .nav-logo,
nav.nav--scrolled .nav-links a { color: var(--brown-dark); }
nav.nav--scrolled .nav-logo span { color: var(--terracotta); }
nav.nav--scrolled .nav-hamburger { color: var(--brown-dark); }

.nav-inner { transition: height 0.3s ease; }
.nav-links a, .nav-cta {
  position: relative;
}
/* underline animat en hover (micro-interacció) */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ─── HERO: galeria multilaya + parallax 3D + ken-burns ───── */
#hero { perspective: 1200px; }

/* Galeria de fons (crossfade + ken-burns) */
.hero-gallery {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  will-change: transform;
}
.hero-slide {
  position: absolute;
  inset: -6% 0 0 0;           /* lleu sobredimensió per al ken-burns */
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.6s ease;
  will-change: transform, opacity;
}
.hero-slide.is-active {
  opacity: 0.55;
  animation: kenburns 14s ease-in-out infinite alternate;
}
/* Esglaonat: la següent slide ja apareix abans que surti l'anterior */
.hero-slide.is-pre {
  opacity: 0.35;
  animation: kenburns 14s ease-in-out infinite alternate;
}

@keyframes kenburns {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(0, -2.5%, 0); }
}

/* Overlay mantingut per sobre de la galeria */
.hero-overlay { z-index: 1; }

/* ─── Entrada esglaonada (staggered reveal) en carregar ────── */
html.js .hero-content:not(.hero-ready) > [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.hero-content.hero-ready > [data-reveal] {
  opacity: 1;
  transform: translateY(0);
}
/* per esglaonar: retards incrementals */
.hero-content.hero-ready > [data-reveal="0"] { transition-delay: 0.05s; }
.hero-content.hero-ready > [data-reveal="1"] { transition-delay: 0.18s; }
.hero-content.hero-ready > [data-reveal="2"] { transition-delay: 0.31s; }
.hero-content.hero-ready > [data-reveal="3"] { transition-delay: 0.44s; }
.hero-content.hero-ready > [data-reveal="4"] { transition-delay: 0.57s; }
.hero-content.hero-ready > [data-reveal="5"] { transition-delay: 0.70s; }

/* ─── Micro-interaccions CTA (lift + ombra + premsa) ───────── */
.btn { transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease; }
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(226, 125, 96, 0.35);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-outline-white:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.12);
}
.btn:focus-visible, .nav-links a:focus-visible, .nav-cta:focus-visible,
.nav-hamburger:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ─── Scroll indica (punter que baixa) ─────────────────────── */
.hero-scroll-line::after {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 2px; height: 10px;
  margin-left: -1px;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  animation: scrollDrop 2.2s ease-in-out infinite;
}
@keyframes scrollDrop {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(28px); opacity: 0; }
  100% { transform: translateY(28px); opacity: 0; }
}

/* ─── Accesibilitat: respectar preferència de moviment ─────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-slide.is-active, .hero-slide.is-pre {
    animation: none;
    transform: scale(1);
  }
  .hero-content > [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-scroll-line::after { display: none; }
  .hero-scroll-line { animation: none; }
  .btn, .nav-links a::after, nav { transition: none; }
}