/* =========================================================
   Intro de carga + entrada del hero (solo index.html).
   Se activa con la clase html.is-intro, que pone el script del <head>
   en la primera visita de la sesión. La lógica está en assets/js/intro.js.
   ========================================================= */

.intro {
  /* 🎨 COLORES ------------------------------------------------------- */
  --intro-bg: #0b1519;          /* fondo (igual que theme-color) */
  --intro-sea-1: #1d5a63;       /* manchas verde azulado (mar) */
  --intro-sea-2: #2f7d7a;
  --intro-sea-3: #123d47;
  --intro-sand: #c8a46a;        /* toque dorado / arena */
  --intro-fill: #d9c2b6;        /* bloques del logo (color de marca) */
  --intro-stroke: #f4efea;      /* trazo del logo: el #4a5d64 original se aclara sobre fondo oscuro */
  --intro-land-fill: #fff;      /* colores al aterrizar en la cabecera (logo blanco sobre el vídeo) */
  --intro-land-stroke: #fff;

  /* ⏱ TIEMPOS (las entradas; la salida se cronometra en intro.js) ---- */
  --intro-start: 150ms;         /* primera pieza del logo */
  --intro-stagger: 180ms;       /* separación entre piezas */
  --intro-piece: 900ms;         /* duración de cada pieza */
  --intro-shine: 1450ms;        /* destello */
  --intro-word: 1300ms;         /* primera letra de «InmoLerez» */
  --intro-letter: 45ms;         /* separación entre letras */
  --intro-tagline: 1800ms;      /* «Rías Baixas · Pontevedra» */
  --intro-flight: 850ms;        /* vuelo del logo a la cabecera  (= FLIGHT en intro.js) */
  --intro-open: 1000ms;         /* apertura del fondo            (= OPEN en intro.js) */
  --intro-ease: cubic-bezier(.16, 1, .3, 1);   /* expo-out */

  display: none; position: fixed; inset: 0; z-index: 150; overflow: hidden;
  color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.is-intro .intro, .intro.is-leaving, .intro.is-skipping { display: block; }
.is-intro, .is-intro body { overflow: hidden; }
/* El logo de la cabecera se oculta hasta que aterriza el de la intro */
.intro-brand-hold .site-header .brand img { opacity: 0; }

/* ---------- Fondo: manchas difuminadas + grano ---------- */
@property --hole { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.intro__bg {
  position: absolute; inset: 0; background: var(--intro-bg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) * 1.25 + 1px));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) * 1.25 + 1px));
}
/* Capa lisa que se desvanece: las manchas aparecen sin dejar ver el hero de debajo */
.intro__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--intro-bg); animation: introBgIn .9s ease both; }
.intro__blob {
  position: absolute; width: 62vmax; aspect-ratio: 1; border-radius: 50%;
  filter: blur(70px); opacity: .55; will-change: transform;
  animation: introDrift 16s ease-in-out infinite alternate;
}
.intro__blob--1 { left: -18vmax; top: -22vmax; background: var(--intro-sea-1); }
.intro__blob--2 { right: -24vmax; bottom: -26vmax; background: var(--intro-sea-2); opacity: .4; animation-duration: 19s; animation-direction: alternate-reverse; }
.intro__blob--3 { left: 20%; bottom: -30vmax; background: var(--intro-sea-3); opacity: .7; animation-duration: 22s; }
.intro__blob--4 { width: 34vmax; right: 8%; top: 4%; background: var(--intro-sand); opacity: .16; animation-duration: 18s; animation-direction: alternate-reverse; }
.intro__grain {
  position: absolute; z-index: 2; inset: -50%; opacity: .09; mix-blend-mode: overlay; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: introGrain 1.2s steps(4) infinite;
}
@keyframes introBgIn { to { opacity: 0; } }
@keyframes introDrift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } }
@keyframes introGrain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); } }

/* ---------- Escena: logo + nombre ---------- */
.intro__stage {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px;
  padding: 16px; text-align: center;
}
.intro__mark { width: clamp(96px, 24vw, 164px); height: auto; overflow: visible; transform-origin: 50% 50%; }

/* Cada pieza del logo entra desde un leve desplazamiento + escala + blur */
.il-piece {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: introPiece var(--intro-piece) var(--intro-ease) both;
  animation-delay: calc(var(--intro-start) + var(--i) * var(--intro-stagger));
  transition: fill var(--intro-flight) ease, stroke var(--intro-flight) ease;
}
.il-block { fill: var(--intro-fill); transform-origin: 50% 100%; animation-name: introBlock; }
.il-stroke {
  fill: none; stroke: var(--intro-stroke); stroke-width: 10; stroke-linejoin: miter;
  stroke-dasharray: 1; animation-name: introPiece, introDraw;
}
@keyframes introPiece { from { opacity: 0; transform: translateY(14px) scale(.92); filter: blur(6px); } }
@keyframes introBlock { from { opacity: 0; transform: translateY(26px) scaleY(.55); filter: blur(8px); } }
@keyframes introDraw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Destello que recorre el logo una vez armado */
.il-shine { animation: introShine 1s cubic-bezier(.55, 0, .25, 1) var(--intro-shine) both; }
@keyframes introShine { from { transform: translateX(0); } to { transform: translateX(470px); } }

.intro__word {
  margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(2.3rem, 8vw, 3.6rem); line-height: 1; letter-spacing: 0;
}
.intro__word b { font-weight: 400; font-style: italic; color: var(--beige, #dcc7a9); }
.intro__word span {
  display: inline-block; animation: introLetter .7s var(--intro-ease) both;
  animation-delay: calc(var(--intro-word) + var(--i) * var(--intro-letter));
}
@keyframes introLetter { from { opacity: 0; transform: translateY(.45em); filter: blur(8px); } }

.intro__rule { width: 56px; height: 1px; background: var(--beige, #dcc7a9); transform-origin: 50% 50%; animation: introRule .9s var(--intro-ease) calc(var(--intro-tagline) - 150ms) both; }
@keyframes introRule { from { transform: scaleX(0); } }
.intro__tagline {
  margin: 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255, 255, 255, .66); animation: introFade .8s ease var(--intro-tagline) both;
}
@keyframes introFade { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Botón «Saltar» ---------- */
.intro__skip {
  position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 0; background: rgba(11, 21, 25, .35); color: rgba(255, 255, 255, .78);
  font: 500 .66rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  animation: introFade .6s ease .5s both; transition: color .3s, border-color .3s;
}
.intro__skip:hover, .intro__skip:focus-visible { color: #fff; border-color: var(--beige, #dcc7a9); }
.intro__skip:focus-visible { outline: 2px solid var(--beige, #dcc7a9); outline-offset: 3px; }
@media (min-width: 761px) { .intro__skip { right: 28px; bottom: 28px; } }

/* ---------- Salida ---------- */
.intro.is-leaving { pointer-events: none; }
.intro.is-leaving .intro__bg { animation: introOpen var(--intro-open) cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes introOpen { 0% { --hole: 0%; opacity: 1; } 70% { opacity: 1; } 100% { --hole: 160%; opacity: 0; } }
.intro.is-leaving .intro__mark { transition: transform var(--intro-flight) cubic-bezier(.7, 0, .15, 1); }
.intro.is-leaving .il-block { fill: var(--intro-land-fill); }
.intro.is-leaving .il-stroke { stroke: var(--intro-land-stroke); }
.intro.lands-on-light { --intro-land-fill: #d9c2b6; --intro-land-stroke: #4a5d64; } /* cabecera ya con fondo claro (página con scroll) */
.intro.is-leaving .intro__word, .intro.is-leaving .intro__rule, .intro.is-leaving .intro__tagline, .intro.is-leaving .intro__skip {
  opacity: 0; transform: translateY(-10px); transition: opacity .4s ease, transform .5s var(--intro-ease);
}
.intro.is-skipping { pointer-events: none; opacity: 0; transition: opacity .35s ease; }

/* Red de seguridad: si el JS fallara, la intro desaparece igualmente */
.is-intro .intro { animation: introFailsafe .4s ease 6s forwards; }
@keyframes introFailsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- Hero en espera mientras dura la intro ---------- */
.is-intro .hero__title .line > span,
.is-intro .hero__frame i,
.is-intro .hero__hud li,
.is-intro .hero__poster { animation-play-state: paused; }
.is-intro .hero .reveal { opacity: 0 !important; transform: translateY(28px) !important; }
/* El vídeo entra con un ligero zoom de salida al abrirse el fondo */
.hero__video { transition: opacity 1.4s ease, transform 2.2s var(--intro-ease, cubic-bezier(.16, 1, .3, 1)); }
.is-intro .hero__video { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .intro-brand-hold .site-header .brand img { opacity: 1; }
}
.hero__title:focus { outline: none; } /* recibe el foco al terminar la intro con teclado */