/* ============================================================
   Cefalópodos — Home / Ocean
   Diseño base: 1920 × 1080 (Figma)

   --u = 1 "píxel de diseño". Todo el lienzo se expresa en
   múltiplos de --u, así que escala de forma proporcional sin
   perder nitidez (no es un transform: scale).
   ============================================================ */

:root{
  --navy:      #233055;
  --cream:     #FFFBF2;
  --offwhite:  #F8F8F8;
  --yellow:    #FEE07E;

  --serif: Georgia, 'Times New Roman', 'Nimbus Roman', serif;
  --mono:  'Courier New', Courier, 'Nimbus Mono PS', monospace;

  --u: min(100vw / 1920, 100vh / 1080);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*,*::before,*::after{ box-sizing: border-box; }

html,body{ height: 100%; }

body{
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--serif);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Lienzo ─────────────────────────────────────────────── */
.stage{
  position: relative;
  width:  calc(1920 * var(--u));
  height: calc(1080 * var(--u));
  flex: none;
}

/* ============================================================
   Decoración
   ============================================================ */
.deco{ position: absolute; inset: 0; pointer-events: none; }

.deco__pattern{
  position: absolute;
  width:  calc(800 * var(--u));
  height: calc(800 * var(--u));
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  /* el PNG ya trae el 24 % de opacidad en su canal alfa: no volver a aplicarlo */
  opacity: 1;
  user-select: none;
}

/* cuarto de circunferencia (Ø 400 centrada en 1292 × 637) */
.deco__arc{
  position: absolute;
  left: calc(1292 * var(--u));
  top:  calc(637  * var(--u));
  width:  calc(200 * var(--u));
  height: calc(200 * var(--u));
  color: var(--yellow);
  opacity: .24;
  overflow: visible;
}

.deco__symbol{
  position: absolute;
  left: calc(1485 * var(--u));
  top:  calc(601  * var(--u));
  font-family: var(--mono);
  font-size:   calc(24 * var(--u));
  line-height: calc(27 * var(--u));
  color: var(--yellow);
  opacity: .24;
}

.deco__frame{
  position: absolute;
  left: calc(1698 * var(--u));
  top:  calc(81   * var(--u));
  width:  calc(150 * var(--u));
  height: calc(200 * var(--u));
  border: 1px dashed var(--yellow);
}

/* ============================================================
   Título
   ============================================================ */
.title{
  position: absolute;
  left: 50%;
  top: calc(49 * var(--u));
  transform: translateX(-50%);
  margin: 0;
  width: calc(1100 * var(--u));
  text-align: center;
  white-space: nowrap;
  font-style: italic;
  font-weight: 400;
  font-size:   calc(40 * var(--u));
  line-height: calc(45 * var(--u));
  color: var(--cream);
  letter-spacing: .01em;
}

/* ============================================================
   Panel de información
   ============================================================ */
.info{
  position: absolute;
  left: calc(72  * var(--u));
  top:  calc(281 * var(--u));
  width: calc(396 * var(--u));   /* la regla y el rayado llegan a x = 468 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(32 * var(--u));
  z-index: 3;
}

/* el texto va indentado 43 px respecto del bloque (99 + 16 del Figma) */
.info__name{
  margin: 0;
  /* sin padding derecho: el título es alineado a la izquierda y así los
     binomiales largos disponen de todo el ancho antes de tener que achicarse */
  padding: 0 0 0 calc(43 * var(--u));
  /* alto fijo de dos renglones: mantiene la regla divisoria clavada en
     y = 385 para las diez postales. Los nombres largos los achica el JS. */
  height: calc(72 * var(--u));
  font-weight: 700;
  font-size:   calc(32 * var(--u));
  line-height: calc(36 * var(--u));
  color: var(--cream);
  white-space: pre-line;
}

.info__rule{
  width: 100%;
  height: 1px;
  background: var(--cream);
}

.info__body{ padding: 0 calc(43 * var(--u)); }

.info__text{
  margin: 0;
  font-family: var(--mono);
  font-style: italic;
  font-size:   calc(16 * var(--u));
  line-height: calc(18 * var(--u));
  color: rgba(255, 251, 242, .48);
  white-space: pre-line;
}

.info__name,
.info__text{
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.info.is-swapping .info__name,
.info.is-swapping .info__text{
  opacity: 0;
  transform: translateY(calc(12 * var(--u)));
}

/* ============================================================
   Mazo de postales
   ============================================================ */
.deck-area{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width:  calc(600 * var(--u));
  height: calc(800 * var(--u));
  display: grid;
  place-items: center;
  perspective: calc(1400 * var(--u));
  z-index: 2;
}

/* 420 × 624 = proporción de las láminas (840 × 1248) */
.deck{
  position: relative;
  width:  calc(420 * var(--u));
  height: calc(624 * var(--u));
  transform-style: preserve-3d;
  will-change: transform;
}

.card{
  position: absolute;
  inset: 0;
  /* cada carta es un plano plano dentro del mazo 3D; isolate confina
     los mix-blend-mode del tornasol a la propia carta */
  isolation: isolate;
  transition: transform .8s var(--ease), filter .8s var(--ease);
}

.card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(calc(4 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)) rgba(18, 18, 30, .5));
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Tornasol / holográfico ────────────────────────────────
   Cada capa se recorta con la propia imagen como máscara, así
   el brillo respeta el borde dentado de la estampilla.
   ---------------------------------------------------------- */
.card__foil{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);

  -webkit-mask-size: contain;   mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* arcoíris que se desplaza según la posición del cursor */
.card__foil--holo{
  background: repeating-linear-gradient(
    108deg,
    rgba(255,  92, 138, .60)  0%,
    rgba(255, 196,  92, .60)  3%,
    rgba(246, 255, 130, .60)  5.5%,
    rgba(112, 246, 190, .60)  8.5%,
    rgba( 96, 190, 255, .60) 11.5%,
    rgba(184, 126, 255, .60) 14.5%,
    rgba(255,  92, 138, .60) 18%
  );
  background-size: 240% 240%;
  background-position: var(--px, 50%) var(--py, 50%);
  mix-blend-mode: overlay;

  /* segunda capa de máscara: concentra el iris alrededor del cursor,
     así el papel conserva su tono cálido en el resto de la lámina.
     (la lista de máscaras se arma en script.js) */
  -webkit-mask-size: contain, 100% 100%;
          mask-size: contain, 100% 100%;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* segunda pasada, en sentido contrario: da profundidad al iris */
.card__foil--sheen{
  background: repeating-linear-gradient(
    -72deg,
    rgba(255, 255, 255, .00)  0%,
    rgba(180, 255, 255, .14)  5%,
    rgba(255, 180, 255, .14)  9%,
    rgba(255, 255, 255, .00) 15%
  );
  background-size: 200% 200%;
  background-position: var(--py, 50%) var(--px, 50%);
  mix-blend-mode: color-dodge;
}

/* reflejo que sigue al puntero */
.card__foil--glare{
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .35) 0%,
    rgba(255, 255, 255, .08) 22%,
    rgba(255, 255, 255,   0) 52%
  );
  mix-blend-mode: soft-light;
}

/* ↓ estas tres opacidades son la "perilla" de intensidad del efecto */
.card[data-pos="0"]:hover .card__foil--holo { opacity: .85; }
.card[data-pos="0"]:hover .card__foil--sheen{ opacity: 1; }
.card[data-pos="0"]:hover .card__foil--glare{ opacity: 1; }

/* cartas del fondo: overlay #233055 al 20 %, como en el diseño */
.card[data-pos="1"] img,
.card[data-pos="2"] img{
  filter: brightness(.76) saturate(.9)
          drop-shadow(calc(3 * var(--u)) calc(4 * var(--u)) calc(7 * var(--u)) rgba(18, 18, 30, .45));
}

.card[data-pos="0"]{ z-index: 3; }
.card[data-pos="1"]{ z-index: 2; }
.card[data-pos="2"]{ z-index: 1; }

/* ============================================================
   Pie fijo (crédito de la obra)
   ============================================================ */
.disclaimer{
  position: absolute;
  left: 50%;
  top: calc(986 * var(--u));
  transform: translateX(-50%);
  margin: 0;
  width: calc(900 * var(--u));
  text-align: center;
  font-family: var(--mono);
  font-style: italic;
  font-size:   calc(12 * var(--u));
  line-height: calc(14 * var(--u));
  color: rgba(255, 251, 242, .48);
}

/* ============================================================
   Paginación
   ============================================================ */
.pager{
  position: absolute;
  right:  calc(72 * var(--u));
  bottom: calc(80 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  z-index: 4;
}

.pager__count{
  order: -1;
  margin-right: calc(16 * var(--u));
  font-family: var(--mono);
  font-size: calc(12 * var(--u));
  letter-spacing: .12em;
  color: rgba(254, 224, 126, .4);
}

.pager__btn{
  width:  calc(32 * var(--u));
  height: calc(32 * var(--u));
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(254, 224, 126, .24);
  border-radius: 50%;
  background: transparent;
  color: rgba(254, 224, 126, .24);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

.pager__btn svg{ width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

.pager__btn:hover,
.pager__btn:focus-visible{
  color: var(--yellow);
  border-color: rgba(254, 224, 126, .6);
  background: rgba(254, 224, 126, .08);
  outline: none;
}

.pager__btn:active{ transform: scale(.94); }

/* el botón "siguiente" arranca destacado, como en el diseño */
#js-next:not(:hover):not(:focus-visible){ color: var(--yellow); }


/* ============================================================
   Responsive
   Se abandona el lienzo fijo cuando la ventana es angosta o
   está en vertical, y el contenido pasa a una columna centrada.
   --card manda: --u se deriva de él, así que las sombras y los
   desplazamientos del mazo siguen siendo proporcionales.
   ============================================================ */
@media (max-width: 1024px), (orientation: portrait){

  :root{
    --card: clamp(240px, 62vw, 600px);
    --u: calc(var(--card) / 420);
  }

  html, body{ height: auto; }

  body{
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .stage{
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(28px, 6vw, 72px) clamp(16px, 5vw, 56px) clamp(40px, 8vw, 88px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 5vw, 60px);
  }

  .layout{ display: contents; }

  /* ── decoración ──────────────────────────────────────── */
  .deco__arc,
  .deco__symbol,
  .deco__frame{ display: none; }

  .deco__pattern{
    width:  min(180vw, 1200px);
    height: min(180vw, 1200px);
    top: 38%;
  }

  /* ── título ──────────────────────────────────────────── */
  .title{
    position: static;
    transform: none;
    order: 0;
    width: 100%;
    max-width: 20ch;
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(26px, 4.4vw, 54px);
    line-height: 1.16;
  }

  /* ── estampilla ──────────────────────────────────────── */
  .deck-area{
    position: static;
    transform: none;
    order: 1;
    width: var(--card);
    height: auto;
    aspect-ratio: 420 / 624;
    perspective: calc(1400 * var(--u));
  }

  .deck{ width: 100%; height: 100%; }

  /* ── ficha ───────────────────────────────────────────── */
  .info{
    position: static;
    order: 2;
    width: min(100%, 620px);
    align-items: center;
    gap: clamp(16px, 2.6vw, 32px);
  }

  .info__name{
    height: auto;                 /* el ajuste automático del JS no corre acá */
    padding: 0;
    width: 100%;
    text-align: center;
    font-size: clamp(24px, 4vw, 44px);
    line-height: 1.2;
  }

  .info__rule{ width: 100%; }

  .info__body{
    width: 100%;
    padding: 0 6%;
  }

  .info__text{
    text-align: left;
    font-size: clamp(14px, 2.1vw, 20px);
    line-height: 1.55;
  }

  /* ── pie ─────────────────────────────────────────────── */
  .disclaimer{
    position: static;
    transform: none;
    order: 3;
    width: min(100%, 560px);
    margin-top: auto;
    text-align: center;
    font-size: clamp(11px, 1.4vw, 15px);
    line-height: 1.55;
  }

  .pager{
    position: static;
    order: 4;
    gap: clamp(10px, 2vw, 18px);
  }

  .pager__count{ display: none; }      /* en las referencias no aparece */

  .pager__btn{
    width:  clamp(40px, 5.5vw, 60px);
    height: clamp(40px, 5.5vw, 60px);
  }

  .pager__btn svg{ width: 42%; height: 42%; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .001ms !important; }
}