/* Screen-specific logic and visuals for ART-CARDS only. */

.screen-theme-art .asset-slot {
  opacity: 1;
}

.screen-theme-art .asset-slot.is-art-card-interactive {
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 220ms ease,
    opacity 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.screen-theme-art .asset-slot.is-art-card-interactive:hover {
  opacity: 1;
  transform: scale(1.018);
  filter: brightness(1.04);
  box-shadow:
    0 0 28px rgba(var(--art-card-emotion-rgb, 255, 225, 145), 0.18),
    0 22px 48px rgba(0, 0, 0, 0.28);
}

.screen-theme-art .asset-slot.is-expanded-source {
  opacity: 0.12;
  transform: none;
  pointer-events: none;
}

.art-cards-grid-canvas {
  position: relative;
}

.screen-theme-art .art-card-grid-slot {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  opacity: 0.94;
  background-color: #060914;
  background-blend-mode: normal;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.06),
    0 10px 26px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.art-cards-empty-state {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  inline-size: min(72vw, 420px);
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 12, 22, 0.82);
  color: rgba(232, 241, 255, 0.88);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  line-height: 1.5;
}

.art-card-focus-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

.art-card-focus-layer.is-active {
  pointer-events: auto;
}

.art-card-focus-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(2, 5, 14, 0.22);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  cursor: zoom-out;
  transition: opacity 240ms ease;
}

.art-card-focus-layer.is-active .art-card-focus-backdrop {
  opacity: 1;
}

.art-card-focus-shell {
  position: fixed;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  opacity: 0.98;
  transform: translateX(0px);
  perspective: 2200px;
  transition:
    left 320ms cubic-bezier(0.22, 1, 0.36, 1),
    top 320ms cubic-bezier(0.22, 1, 0.36, 1),
    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease,
    box-shadow 260ms ease;
}

.art-card-focus-shell.is-dragging {
  cursor: grabbing;
}

.art-card-focus-shell:focus-visible {
  outline: none;
}

.art-card-focus-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 0 96px rgba(0, 0, 0, 0.5),
    0 0 90px 18px rgba(var(--art-card-emotion-rgb, 255, 208, 98), 0.32),
    0 0 36px rgba(var(--art-card-emotion-rgb, 255, 208, 98), 0.22);
}

.art-card-print-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 4px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  opacity: 0.18;
  transition: opacity 220ms ease, background 220ms ease, transform 220ms ease;
  z-index: 4;
  display: grid;
  place-items: center;
  line-height: 0;
}

.art-card-print-btn:hover,
.art-card-print-btn:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
  outline: none;
  transform: scale(1.08);
}

.art-card-print-btn:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.art-card-print-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

.art-card-focus-shell.is-flipped .art-card-focus-inner {
  transform: rotateY(180deg);
}

.art-card-focus-face {
  position: absolute;
  inset: 0;
  opacity: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0;
  overflow: hidden;
}

.art-card-focus-face.asset-slot {
  opacity: 1;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.art-card-focus-back {
  transform: rotateY(180deg);
}

/* ===== MODO TV (ligero): quita los efectos caros para la GPU de la TV =====
   El giro (rotateY) es ligero y se queda. Lo pesado es el desenfoque del fondo
   (backdrop-filter) y el resplandor gigante: se desactivan al abrir/voltear una card. */
/* MODO TV: nada de oscurecer el fondo. La card se voltea EN SU SITIO y las demas
   se quedan visibles (no se tapan, porque la card no se amplia). */
html.tv-lite .art-card-focus-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent;
  /* En modo TV no hay zoom de la card -> el cursor "lupa" (zoom-out) heredado
     no tiene sentido y confunde. Ademas el backdrop, al capturar los clicks,
     bloqueaba abrir otra card directamente (primero cerraba la actual). */
  cursor: default;
  pointer-events: none;
}
/* MODO TV: el layer es CLICK-THROUGH cuando esta activo. En modo normal el layer
   se hace pointer-events:auto al abrirse (para que el backdrop cierre al pulsar);
   en TV no queremos eso: queremos que los toques pasen a las cards de detras
   (toque en peer = abre esa card) y al fondo vacio (que lo gestiona el handler JS
   tvOutsideClose -> cierra). El shell sigue siendo interactivo por su propia regla. */
html.tv-lite .art-card-focus-layer.is-active { pointer-events: none; }
/* La card de origen se OCULTA mientras su card ampliada esta abierta (si no, al girar
   en 3D se veria la misma card por detras). La card del focus ocupa su sitio exacto.
   transition:none = se oculta AL INSTANTE (sin fundido de 220ms): asi no se ve la card
   de debajo durante el PRIMER giro (cuando la card de delante queda de canto/invisible). */
html.tv-lite .screen-theme-art .asset-slot.is-expanded-source { opacity: 0; transition: none; }
html.tv-lite .art-card-focus-inner {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
}
/* Modo TV: el focus abre al tamano de la card del grid -> sin transicion de tamano (sin "zoom"). */
html.tv-lite .art-card-focus-shell {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
  opacity: 1;   /* 100% opaca: nada se transparenta por detras */
  /* El padre (layer) es pointer-events:none en TV (para que los toques fuera de la card
     lleguen al grid de detras). Reactivamos los eventos en el shell para que SI se pueda
     tocar la propia card abierta (para voltearla). */
  pointer-events: auto;
  /* touch-action: pan-y -> permite scroll vertical de la pagina aunque el dedo toque la
     card abierta. Sin esto, el shell bloqueaba el scroll durante los 760ms del giro y el
     usuario tenia que esperar a que terminase la animacion (o mover el dedo a una zona
     vacia) para poder scrollear. En la rama JS no hacemos preventDefault en TV, asi el
     gesto vertical va al scroll del navegador y un tap (sin movimiento) sigue volteando. */
  touch-action: pan-y;
}
/* MODO TV: etiqueta con sitio (no se parte) + BARRA larga que llena el hueco entre la
   palabra y el numero, alineadas en columna y un pelin mas altas (mejor calidad). */
html.tv-lite .art-card-feeling {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.1fr) auto;
  gap: calc(clamp(5px, 0.5vw, 8px) * var(--art-card-fit-gap));
}
/* Barras NITIDAS: sin resplandor Y sin el rayado/segmentado (que se veia borroso) -> solidas. */
html.tv-lite .art-card-feeling__bar { border-radius: 2px; box-shadow: none; background: rgba(255, 255, 255, 0.06); }
html.tv-lite .art-card-feeling__fill { box-shadow: none; background: rgb(var(--art-card-feeling-rgb)); }
/* Numero: ancho minimo en em (escala con la fuente) para que la columna sea IGUAL en
   todas las filas (incluido "10") y las barras queden alineadas a la misma longitud. */
html.tv-lite .art-card-feeling__value { min-inline-size: 1.4em; }
/* MODO TV: panel del dorso separado del borde superior (top) y un poco mas corto para no
   tapar los logos de abajo; esquinas con menos radio. La etiqueta va a la DERECHA para que
   la barra quede EQUIDISTANTE entre la palabra y el numero en todas las filas. */
html.tv-lite .data_card.art-card-data-card { top: 8%; height: 64%; border-radius: 9px; }
html.tv-lite .art-card-feeling__label { white-space: nowrap; text-align: right; }
/* MODO TV: textos de resultado (TITLE, AUTHOR...) mas pequenos y con mas ancho de columna
   para que titulos/autores largos quepan en UNA linea y no empujen las filas hacia abajo. */
html.tv-lite .art-card-data-card__value {
  font-size: calc(clamp(8px, 0.7vw, 11px) * var(--art-card-fit-scale));
  letter-spacing: 0.02em;
}
html.tv-lite .art-card-data-card__meta-row {
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.9fr);
  gap: calc(clamp(6px, 0.6vw, 9px) * var(--art-card-fit-gap));
}

.data_card.art-card-data-card {
  --art-card-emotion-color: #66ebff;
  --art-card-emotion-rgb: 102, 235, 255;
  --art-card-fit-scale: 1;
  --art-card-fit-leading: 1;
  --art-card-fit-gap: 1;
  --art-card-fit-padding: 1;
  --art-card-fit-bar-scale: 1;
  position: absolute;
  left: 12%;
  top: 10%;
  width: 76%;
  height: 63.7%;
  padding: calc(clamp(14px, 2vw, 24px) * var(--art-card-fit-padding));
  border-radius: 18px;
  border: 1px solid rgba(var(--art-card-emotion-rgb), 0.34);
  background:
    radial-gradient(circle at 22% 14%, rgba(255, 255, 255, 0.14), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(var(--art-card-emotion-rgb), 0.18), rgba(7, 18, 28, 0.82));
  box-shadow:
    inset 0 0 28px rgba(var(--art-card-emotion-rgb), 0.08);
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.art-card-data-card__scroller {
  display: grid;
  gap: calc(clamp(10px, 0.9vw, 14px) * var(--art-card-fit-gap));
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
  padding-right: calc(clamp(2px, 0.28vw, 6px) * var(--art-card-fit-gap));
  align-content: start;
  scrollbar-width: none;
}

.art-card-data-card__scroller::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.art-card-data-card__scroller::-webkit-scrollbar-track {
  background: transparent;
}

.art-card-data-card__scroller::-webkit-scrollbar-thumb {
  background: transparent;
}

.art-card-data-card__header {
  display: grid;
  gap: calc(4px * var(--art-card-fit-gap));
}

.art-card-data-card__eyebrow,
.art-card-data-card__label,
.art-card-data-card__section-title,
.art-card-feeling__label {
  font-size: calc(clamp(8px, 0.75vw, 11px) * var(--art-card-fit-scale));
  line-height: calc(1.1 * var(--art-card-fit-leading));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(235, 245, 255, 0.72);
}

.art-card-data-card__title,
.art-card-data-card__subtitle,
.art-card-data-card__value,
.art-card-data-card__emotion,
.art-card-feeling__value {
  color: rgba(246, 251, 255, 0.94);
}

.art-card-data-card__title {
  font-size: calc(clamp(12px, 1.02vw, 18px) * var(--art-card-fit-scale));
  line-height: calc(1.1 * var(--art-card-fit-leading));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-card-data-card__subtitle {
  font-size: calc(clamp(10px, 0.86vw, 14px) * var(--art-card-fit-scale));
  line-height: calc(1.15 * var(--art-card-fit-leading));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
}

.art-card-data-card__emotion {
  display: inline-flex;
  inline-size: fit-content;
  padding: calc(6px * var(--art-card-fit-padding)) calc(9px * var(--art-card-fit-padding));
  border: 1px solid rgba(var(--art-card-emotion-rgb), 0.3);
  background: rgba(0, 0, 0, 0.22);
  font-size: calc(clamp(9px, 0.78vw, 12px) * var(--art-card-fit-scale));
  line-height: calc(1.2 * var(--art-card-fit-leading));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.art-card-data-card__meta {
  display: grid;
  gap: calc(clamp(5px, 0.6vw, 8px) * var(--art-card-fit-gap));
}

.art-card-data-card__meta-row {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.48fr);
  gap: calc(clamp(10px, 1vw, 14px) * var(--art-card-fit-gap));
  padding-bottom: calc(clamp(4px, 0.45vw, 7px) * var(--art-card-fit-gap));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.art-card-data-card__value {
  justify-self: end;
  text-align: right;
  font-size: calc(clamp(10px, 0.84vw, 13px) * var(--art-card-fit-scale));
  line-height: calc(1.2 * var(--art-card-fit-leading));
  letter-spacing: 0.04em;
  text-transform: none;
}

.art-card-data-card__value--upper {
  text-transform: uppercase;
}

.art-card-data-card__section-title {
  padding-top: calc(2px * var(--art-card-fit-gap));
}

.art-card-data-card__feelings {
  display: grid;
  gap: calc(clamp(6px, 0.6vw, 9px) * var(--art-card-fit-gap));
  align-content: start;
}

.art-card-feeling {
  --art-card-feeling-color: var(--art-card-emotion-color);
  --art-card-feeling-rgb: var(--art-card-emotion-rgb);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.5fr) auto;
  gap: calc(clamp(8px, 0.7vw, 12px) * var(--art-card-fit-gap));
  align-items: center;
}

.art-card-feeling__bar {
  position: relative;
  block-size: calc(10px * var(--art-card-fit-bar-scale));
  border: 1px solid rgba(var(--art-card-feeling-rgb), 0.34);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.09) 0,
      rgba(255, 255, 255, 0.09) calc(10% - 1px),
      rgba(255, 255, 255, 0.22) calc(10% - 1px),
      rgba(255, 255, 255, 0.22) 10%
    ),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.25),
    inset 0 0 18px rgba(var(--art-card-feeling-rgb), 0.08);
  overflow: hidden;
}

.art-card-feeling__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background:
    linear-gradient(90deg, rgba(var(--art-card-feeling-rgb), 0.96), rgba(var(--art-card-feeling-rgb), 0.7)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) calc(10% - 1px),
      rgba(255, 255, 255, 0.28) calc(10% - 1px),
      rgba(255, 255, 255, 0.28) 10%
    );
  box-shadow: 0 0 14px rgba(var(--art-card-feeling-rgb), 0.32);
}


.art-card-feeling__label {
  letter-spacing: 0.05em;
  text-transform: none;
}

.art-card-feeling__value {
  min-inline-size: 18px;
  text-align: right;
  font-size: calc(clamp(10px, 0.82vw, 13px) * var(--art-card-fit-scale));
  line-height: calc(1 * var(--art-card-fit-leading));
}

.art-card-data-card__body {
  margin: 0;
  font-size: calc(clamp(10px, 0.82vw, 13px) * var(--art-card-fit-scale));
  line-height: calc(1.35 * var(--art-card-fit-leading));
  color: rgba(232, 244, 255, 0.9);
}

.art-card-data-card__raw-text {
  inline-size: 100%;
  block-size: 100%;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (orientation: portrait) {
  .screen-theme-art .art-card-grid-slot {
    border-radius: 0;
  }

  .data_card.art-card-data-card {
    left: 10%;
    top: 9%;
    width: 80%;
    height: 61.1%;
    border-radius: 16px;
    padding: calc(clamp(14px, 2.6vw, 22px) * var(--art-card-fit-padding));
    gap: calc(clamp(8px, 1.4vw, 13px) * var(--art-card-fit-gap));
  }

  .art-card-data-card__eyebrow,
  .art-card-data-card__label,
  .art-card-data-card__section-title,
  .art-card-feeling__label {
    font-size: calc(clamp(9px, 1.05vw, 13px) * var(--art-card-fit-scale));
  }

  .art-card-data-card__title {
    font-size: calc(clamp(13px, 1.5vw, 18px) * var(--art-card-fit-scale));
  }

  .art-card-data-card__subtitle,
  .art-card-data-card__value,
  .art-card-data-card__emotion,
  .art-card-feeling__value,
  .art-card-data-card__body {
    font-size: calc(clamp(10px, 1.12vw, 14px) * var(--art-card-fit-scale));
  }
}

.screen-scroll.is-art-cards-scroll {
  --art-grid-mask-top-bound: 0px;
  --art-grid-mask-top-opaque: 72px;
  --art-grid-mask-bottom-opaque: calc(100% - 72px);
  --art-grid-mask-bottom-bound: 100%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--art-grid-mask-top-bound),
    #000 var(--art-grid-mask-top-opaque),
    #000 var(--art-grid-mask-bottom-opaque),
    transparent var(--art-grid-mask-bottom-bound),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--art-grid-mask-top-bound),
    #000 var(--art-grid-mask-top-opaque),
    #000 var(--art-grid-mask-bottom-opaque),
    transparent var(--art-grid-mask-bottom-bound),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}