/* ═══════════════════════════════════════════════════════════════
   INTRO TEMPORAL «COMING SOON» — AMATE Studio
   Carrusel con marco difuminado blanco + música de fondo.

   PARA QUITARLO: borrar los 2 bloques marcados «INTRO TEMPORAL»
   en /index.html y en /en/index.html, y borrar la carpeta /intro/.
   ═══════════════════════════════════════════════════════════════ */

/* Oculto por defecto: solo aparece si el script del <head> pone la
   clase .cs-on en <html> (primera visita de la sesión). */
.cs-intro { display: none; }

/* Reserva el hueco de la barra de scroll para que la página no
   «salte» al cerrarse el intro. */
html.cs-on { scrollbar-gutter: stable; }

html.cs-on .cs-intro {
  --cs-gold: var(--gold, #C8A97A);
  --cs-gold-deep: #9c7c4c;                    /* dorado para texto pequeño (más contraste) */
  --cs-ink: var(--black, #1D1D1F);
  --cs-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --cs-slide-ms: 2000ms;                      /* lo ajusta intro.js */
  --cs-pad: 56px;                             /* mismos márgenes que el navbar */
  --cs-bar: 88px;
  --cs-title: clamp(48px, 9vmin, 88px);       /* tamaño de «Coming Soon» */
  --cs-feather: clamp(24px, 6.5vmin, 68px);   /* ancho del difuminado blanco */
  --cs-feather-b: calc(var(--cs-feather) * 1.5);  /* abajo, más profundo: ahí se apoya el texto */
  --cs-overlap: calc(var(--cs-feather) * 0.4);    /* cuánto se monta el texto sobre la imagen */
  --cs-copy-extra: 156px;                     /* alto del bloque de texto sin contar el título */

  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 20000;               /* sobre el menú (10000), bajo el cursor (99999) */
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  color: var(--cs-ink);
  overflow: hidden;
  overscroll-behavior: contain;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.9s ease;
  /* Red de seguridad: si intro.js no llega a cargar, el intro se quita solo. */
  animation: csFailsafe 0.6s ease 8s forwards;
}

html.cs-on .cs-intro.cs-js { animation: none; }
html.cs-on .cs-intro.cs-leaving { opacity: 0; pointer-events: none; }

@keyframes csFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ──────────── BARRA SUPERIOR (calca la posición del navbar) ──────────── */
.cs-top {
  flex: 0 0 var(--cs-bar);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--cs-pad);
}

.cs-logo {
  display: block;
  flex: none;
  height: 56px;
  width: auto;
}

/* ──────────── BOTÓN DE MÚSICA ──────────── */
.cs-sound {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  margin: 0;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(200, 169, 122, 0.6);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--cs-gold-deep);
  font-family: var(--sans, 'Jost', sans-serif);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: inherit;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s var(--cs-ease);
}

.cs-sound:hover { background: var(--cs-gold); border-color: var(--cs-gold); color: #fff; }
.cs-sound:active { transform: scale(0.96); }

.cs-ico { display: block; flex: none; width: 17px; height: 17px; }

/* Apagada: bocina tachada + «Activar música».  Encendida: bocina + pieza. */
.cs-sound .cs-ico-on,
.cs-sound .cs-sound-on { display: none; }
.cs-sound.is-on .cs-ico-on { display: block; }
.cs-sound.is-on .cs-sound-on { display: inline; }
.cs-sound.is-on .cs-ico-off,
.cs-sound.is-on .cs-sound-off { display: none; }

/* Sin archivo de audio: el botón desaparece y el intro sigue igual. */
.cs-no-audio .cs-sound { visibility: hidden; }

@keyframes csPulse {
  0%        { box-shadow: 0 0 0 0 rgba(200, 169, 122, 0.5); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(200, 169, 122, 0); }
}

/* ──────────── ESCENARIO DEL CARRUSEL ──────────── */
/* .cs-main es el «contenedor» del que la imagen toma su tamaño:
   la más grande que quepa en 3:4, dejando sitio al texto. */
.cs-main {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  container-type: size;
}

.cs-stage {
  position: relative;
  flex: none;
  aspect-ratio: 3 / 4;
  width: min(86vw, 46vh);        /* respaldo para navegadores sin unidades de contenedor */
  width: min(100cqw, calc((100cqh - var(--cs-title) - var(--cs-copy-extra) + var(--cs-overlap)) * 0.75));
}

.cs-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cs-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  z-index: 1;
  transform: scale(1.001);
  /* Al salir se queda visible 0.8 s debajo de la que entra (fundido sin hueco blanco) */
  transition: opacity 0s linear 0.8s, transform 0s linear 0.8s;
}

.cs-slide.is-active {
  opacity: 1;
  z-index: 2;
  transform: scale(1.045);
  transition: opacity 0.8s ease, transform 3.2s linear;
}

/* ── Marco difuminado blanco: los cuatro bordes se funden con el fondo ── */
.cs-stage::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 5;
  pointer-events: none;
  --f: var(--cs-feather);
  --fb: var(--cs-feather-b);
  background:
    linear-gradient(to right,
      #fff 0, rgba(255,255,255,.94) calc(var(--f) * .15), rgba(255,255,255,.78) calc(var(--f) * .3),
      rgba(255,255,255,.5) calc(var(--f) * .5), rgba(255,255,255,.22) calc(var(--f) * .7),
      rgba(255,255,255,.06) calc(var(--f) * .85), rgba(255,255,255,0) var(--f)),
    linear-gradient(to left,
      #fff 0, rgba(255,255,255,.94) calc(var(--f) * .15), rgba(255,255,255,.78) calc(var(--f) * .3),
      rgba(255,255,255,.5) calc(var(--f) * .5), rgba(255,255,255,.22) calc(var(--f) * .7),
      rgba(255,255,255,.06) calc(var(--f) * .85), rgba(255,255,255,0) var(--f)),
    linear-gradient(to bottom,
      #fff 0, rgba(255,255,255,.94) calc(var(--f) * .15), rgba(255,255,255,.78) calc(var(--f) * .3),
      rgba(255,255,255,.5) calc(var(--f) * .5), rgba(255,255,255,.22) calc(var(--f) * .7),
      rgba(255,255,255,.06) calc(var(--f) * .85), rgba(255,255,255,0) var(--f)),
    linear-gradient(to top,
      #fff 0, rgba(255,255,255,.94) calc(var(--fb) * .15), rgba(255,255,255,.78) calc(var(--fb) * .3),
      rgba(255,255,255,.5) calc(var(--fb) * .5), rgba(255,255,255,.22) calc(var(--fb) * .7),
      rgba(255,255,255,.06) calc(var(--fb) * .85), rgba(255,255,255,0) var(--fb));
}

/* ──────────── TEXTO ──────────── */
.cs-copy {
  flex: none;
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: calc(var(--cs-overlap) * -1);   /* se monta sobre el difuminado inferior */
  padding: 0 12px 36px;
}

.cs-eyebrow {
  margin: 0 0 12px;
  padding-left: 0.3em;                          /* compensa el espaciado de la última letra */
  font-family: var(--sans, 'Jost', sans-serif);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cs-gold-deep);
}

.cs-title {
  margin: 0;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: var(--cs-title);
  line-height: 0.98;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--cs-ink);
}

.cs-title em { font-style: italic; font-weight: 300; }

/* ── Avance del carrusel: un segmento por imagen ── */
.cs-progress {
  display: flex;
  gap: 6px;
  margin: 24px 0 26px;
}

.cs-progress span {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: #e8dfd3;
  overflow: hidden;
}

.cs-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cs-gold);
  transform: scaleX(0);
  transform-origin: left center;
}

.cs-progress .is-done i { transform: scaleX(1); }
.cs-progress .is-active i { transform: scaleX(1); transition: transform var(--cs-slide-ms) linear; }

/* ── Botón «Entrar al sitio» ── */
.cs-enter {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 32px 13px 36px;
  border: 1px solid rgba(140, 140, 140, 0.5);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--cs-ink);
  font-family: var(--sans, 'Jost', sans-serif);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: inherit;
  transition: border-color 0.3s, color 0.3s, transform 0.35s var(--cs-ease), box-shadow 0.35s;
}

.cs-enter:hover {
  border-color: var(--cs-gold);
  color: var(--cs-gold-deep);
  box-shadow: 0 8px 28px rgba(200, 169, 122, 0.22);
}

.cs-enter:active { transform: scale(0.97); }
.cs-enter svg { display: block; width: 14px; height: 14px; transition: transform 0.3s var(--cs-ease); }
.cs-enter:hover svg { transform: translateX(4px); }

/* ──────────── ENTRADA (cuando la primera imagen ya cargó) ──────────── */
.cs-intro:not(.cs-ready) .cs-stage,
.cs-intro:not(.cs-ready) .cs-sound,
.cs-intro:not(.cs-ready) .cs-eyebrow,
.cs-intro:not(.cs-ready) .cs-title,
.cs-intro:not(.cs-ready) .cs-progress,
.cs-intro:not(.cs-ready) .cs-enter { opacity: 0; }

@keyframes csFade  { from { opacity: 0; } }
@keyframes csUp    { from { opacity: 0; transform: translateY(16px); } }
@keyframes csStage { from { opacity: 0; transform: scale(1.035); } }

.cs-ready .cs-stage    { animation: csStage 1.6s var(--cs-ease) backwards; }
.cs-ready .cs-eyebrow  { animation: csUp 1.1s var(--cs-ease) 0.35s backwards; }
.cs-ready .cs-title    { animation: csUp 1.2s var(--cs-ease) 0.5s backwards; }
.cs-ready .cs-progress { animation: csFade 1s ease 0.8s backwards; }
.cs-ready .cs-enter    { animation: csUp 1.1s var(--cs-ease) 0.9s backwards; }
.cs-ready .cs-sound    { animation: csFade 1s ease 0.6s backwards; }

/* El navegador bloqueó el audio automático: el botón late para invitar a activarlo */
.cs-ready .cs-sound.is-hint {
  animation: csFade 1s ease 0.6s backwards, csPulse 2.2s ease-out 1.8s infinite;
}

/* ──────────── RESPONSIVE ──────────── */
@media (max-width: 768px) {
  html.cs-on .cs-intro { --cs-pad: 24px; --cs-bar: 72px; --cs-copy-extra: 142px; }
  .cs-logo { height: 34px; }
  .cs-sound { height: 36px; padding: 0 14px 0 11px; gap: 7px; font-size: 10.5px; letter-spacing: 0.12em; }
  .cs-ico { width: 16px; height: 16px; }
  .cs-sound-piece { display: none; }
  .cs-copy { padding-bottom: 30px; }
  .cs-progress { margin: 20px 0 22px; }
}

@media (max-width: 380px) {
  html.cs-on .cs-intro { --cs-pad: 16px; }
  .cs-logo { height: 30px; }
  .cs-sound { padding: 0 12px 0 10px; font-size: 10px; letter-spacing: 0.08em; }
}

/* Pantallas verticales bajitas: se compacta para dar altura a la imagen */
@media (max-height: 760px) and (max-aspect-ratio: 4/3) {
  html.cs-on .cs-intro { --cs-title: clamp(40px, 8.5vmin, 62px); --cs-copy-extra: 123px; }
  .cs-eyebrow { margin-bottom: 9px; }
  .cs-progress { margin: 16px 0 18px; }
  .cs-enter { padding: 11px 28px 11px 32px; }
  .cs-copy { padding-bottom: 26px; }
}

/* Pantallas horizontales (laptop, monitor, celular acostado):
   imagen a la izquierda y texto a la derecha, para que la imagen sea grande */
@media (min-aspect-ratio: 4/3) {
  html.cs-on .cs-intro {
    --cs-title: clamp(40px, 5.2vw, 84px);
    --cs-feather: clamp(18px, 6vmin, 64px);
    --cs-feather-b: var(--cs-feather);
  }
  .cs-main { flex-direction: row; gap: clamp(28px, 5vw, 96px); padding: 0 var(--cs-pad) 32px; }
  .cs-stage { width: min(40vw, 60vh); width: min(46cqw, calc(100cqh * 0.75)); }
  .cs-copy { margin-top: 0; padding: 0; }
}

@media (min-aspect-ratio: 4/3) and (max-height: 540px) {
  html.cs-on .cs-intro { --cs-bar: 54px; }
  .cs-logo { height: 28px; }
  .cs-sound { height: 34px; }
  .cs-main { padding-bottom: 14px; }
  .cs-progress { margin: 18px 0 20px; }
}

/* Movimiento reducido: sin zoom en las imágenes (el sitio ya acorta
   animaciones y transiciones con su regla global). */
@media (prefers-reduced-motion: reduce) {
  .cs-slide, .cs-slide.is-active { transform: none; }
}