/* =======================================================
   Briteside — Organic Triangle Texture
   Brand palette (from the case study):
     warm yellow  #FFD579
     deep green   #1D6128
   Ambient full-bleed generative chevron / low-poly field.
   ======================================================= */

@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-thin.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --briteside-yellow: #FFD579;
  --briteside-green:  #1D6128;
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--briteside-yellow);
  font-family: 'Gelion', system-ui, -apple-system, sans-serif;
}

/* The canvas is the whole experience — full-bleed, behind chrome. */
.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background-color: var(--briteside-yellow);
}

/* ---- Fluted glass (toggle) ----
   La refracción del cristal estriado se hace AHORA en el canvas (app.js):
   cada look se vuelca al lienzo estría a estría, magnificando y desplazando
   su franja como lentes cilíndricas, de modo que el patrón de ondas se curva
   por dentro del cristal — por componente, no como capa de blur plana.
   Este elemento queda solo como bandera de estado (mostrar/ocultar). */
.fluted {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.fluted[hidden] { display: none; }

/* ---- Veladura progresiva intermedia (scrim + backdrop-blur) ----
   Capa entre el campo animado (canvas) y la UI de producto. Un velo claro
   con desenfoque de fondo ~8px, igual patrón que la demo de Inditex, para
   que todas las demos sientan coherencia y la pantalla flotante gane
   legibilidad sin tapar el movimiento. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Sin blur en el fondo: solo una veladura de color muy suave para
     legibilidad de la pantalla flotante (el campo generativo se ve nítido). */
  background:
    radial-gradient(ellipse at 50% -6%, rgba(255, 245, 220, 0.30), transparent 58%),
    linear-gradient(180deg,
      rgba(255, 213, 121, 0.16),
      rgba(255, 213, 121, 0.10) 46%,
      rgba(255, 213, 121, 0.20));
}

/* ---- Demo de checkout REAL (prototipo de Monica) sobre el shader ----
   La pantalla de producto interactiva embebida como un móvil que
   flota centrado sobre la textura. El iframe es transparente; la
   sombra (filter: drop-shadow) abraza la pantalla redondeada. */
.device {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;   /* el shader/toggle siguen accesibles alrededor */
}
.device__frame {
  width: 322px;
  height: 570px;
  border: 0;
  background: transparent;
  pointer-events: auto;   /* el checkout SÍ es interactivo */
  /* La sombra sigue la silueta redondeada de la pantalla (alpha). */
  filter: drop-shadow(0 26px 50px rgba(20, 50, 20, 0.30))
          drop-shadow(0 8px 18px rgba(20, 50, 20, 0.20));
  animation: deviceFloat 6.5s var(--ease-out-soft) infinite;
  will-change: transform;
}
@keyframes deviceFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
/* En pantallas bajas/estrechas, escala el móvil para que entre. */
@media (max-height: 640px), (max-width: 380px) {
  .device__frame { transform: scale(0.86); }
  @keyframes deviceFloat {
    0%, 100% { transform: scale(0.86) translateY(0); }
    50%      { transform: scale(0.86) translateY(-12px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .device__frame { animation: none; }
}

/* El chrome de control y el panel de efectos se han retirado: el fondo
   (look "Stars") corre solo, sin botones ni copia de instrucciones. */