/* ============================================================================
   HOLO CARD — tarjeta holográfica del retrato en about.html
   ----------------------------------------------------------------------------
   Todo lo de aquí se pinta a partir de variables CSS que escribe holo.js en
   cada frame. El CSS no sabe nada de punteros ni de giroscopio: solo reacciona
   a las variables. Contrato:

     --rx --ry                 inclinación de la tarjeta
     --l1-img/-size/-blend/    las tres capas de lámina: imagen, tamaño, modo de
        -bgblend/-filter/-o      mezcla, filtro y opacidad
     --l1-x --l1-y             desplazamiento de cada capa (paralaje)
     --off                     cuánto se ha separado del reposo (0..1)
     --gx --gy                 posición del brillo especular
     --spin                    giro del degradado cónico
     --tile-x                  paralaje de la foto dentro del recorte
     --tile-invert             0..1, cuánto se ha barrido el negativo
     --tile-sweep-angle        dirección de ese barrido
     --smear --smear-angle     arrastre por velocidad
     --spot                    destello cuando el ángulo "encaja"
     --edge-l/-r/-t/-b         qué borde está levantado
     --breath                  oscilación lenta de fondo
     --emboss-x --emboss-y     desplazamiento del relieve del texto

   Adaptado del original: se quitó la capa de corazones (era una tarjeta de
   pareja) y la paleta rosa se cambió por crema/metal para que case con el
   sitio.
   ========================================================================== */

.holo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sin marco: el escenario es transparente y deja ver el fondo de la página.
     Y sin overflow:hidden, porque ya no hay caja que recortar y así la sombra
     de la tarjeta no queda cortada por un borde invisible. */
  background: transparent;
  perspective: 1100px;
  /* el motor lee el puntero sobre este elemento */
  touch-action: pan-y;
}

/* Aviso del giroscopio. Oculto siempre, salvo cuando holo.js marca el
   escenario con data-gyro="ask" — es decir, sólo en iOS, que exige un gesto
   del usuario para conceder el sensor. Al responder pasa a on/off y se va. */
.holo-gyro-hint {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500, #6b6b67);
  white-space: nowrap;
  pointer-events: none;   /* el clic lo recibe el escenario, que es quien pide */
  display: none;
}
.holo-stage[data-gyro="ask"] .holo-gyro-hint { display: block; }

/* ------------------------------ la tarjeta ------------------------------- */

.holo-card {
  position: relative;
  isolation: isolate;
  width: 94%;
  aspect-ratio: 1.55;
  /* Aún NO hay foto de perfil en el proyecto. Mientras no la haya, el hueco
     lleva la marca del sitio sobre un fondo cálido: así el recorte se lee como
     un elemento diseñado y no como una imagen que falta, y el duotono y el
     barrido del negativo tienen una forma real sobre la que actuar.
     Para poner la foto: --tile-src: url("mi-foto.jpg"); y ya. */
  --tile-fallback:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 547 646' fill='%23f4f1e2'%3E%3Cpath d='M256 1C238.327 1 224 15.3269 224 33L224 100L315 100C319.418 100 323 96.4183 323 92L323 9C323 4.58172 319.418 1 315 1L256 1Z'/%3E%3Cpath d='M448 100L448 1L515 1C532.673 1 547 15.3269 547 33L547 100L448 100Z'/%3E%3Crect x='448' y='645.5' width='99' height='546' rx='12' transform='rotate(180 448 645.5)'/%3E%3Cpath d='M256 645C238.327 645 224 630.673 224 613L224 546L315 546C319.418 546 323 549.582 323 554L323 637C323 641.418 319.418 645 315 645L256 645Z'/%3E%3C/svg%3E"),
    radial-gradient(120% 80% at 74% 12%, rgba(225, 224, 204, 0.5) 0%, rgba(225, 224, 204, 0) 58%),
    linear-gradient(145deg, #6b6252 0%, #3a352c 55%, #201d17 100%);
  --tile-fallback-size: 34% auto, cover, cover;
  --tile-fallback-pos: 50% 46%, center, center;
  /* La foto de perfil. El recorte es 3/4 vertical y el original es cuadrado
     (400×400), así que `cover` recorta por los lados y deja la cara centrada.
     --tile-x lo escribe holo.js en cada frame: es el paralaje horizontal, la
     foto se desplaza un poco dentro del recorte al inclinar la tarjeta. */
  --tile-src: url("luis-quintero-portrait.jpg");
  --tile-src-size: cover;
  --tile-src-pos: var(--tile-x, 50%) 50%;
  border-radius: 14px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  /* sin transición: holo.js interpola con un muelle, encadenar una transición
     CSS encima añadiría un segundo retardo y se sentiría blando */
  /* Calibrada para fondo claro (#fafafa de la página): sobre negro admitía
     alfas altas, aquí ensuciarían el papel. Un canto fino define el borde y
     dos sombras suaves la despegan. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -1px 0 rgba(0, 0, 0, 0.14) inset,
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 18px 38px -20px rgba(0, 0, 0, 0.42),
    0 4px 12px -6px rgba(0, 0, 0, 0.18);
  will-change: transform;
}

/* todas las capas comparten caja */
.holo-card > * {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* --------------------------- superficie impresa -------------------------- */

.holo-body {
  background: var(--body-grad, linear-gradient(115deg, #e8e6d6, #cfcdbc, #b9b7a6, #dedcc9));
}

/* trama fina tipo guilloche: es tinta, no luz, así que no se mueve */
.holo-pattern {
  background-image:
    repeating-linear-gradient(64deg, rgba(0, 0, 0, 0.055) 0 1px, rgba(0, 0, 0, 0) 1px 7px),
    repeating-linear-gradient(-26deg, rgba(0, 0, 0, 0.045) 0 1px, rgba(0, 0, 0, 0) 1px 9px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* la misma trama, pero sólo donde da la luz: da sensación de relieve impreso */
.holo-pattern--lit {
  background-image:
    repeating-linear-gradient(64deg, rgba(255, 255, 255, 0.5) 0 1px, rgba(255, 255, 255, 0) 1px 7px),
    repeating-linear-gradient(-26deg, rgba(255, 255, 255, 0.4) 0 1px, rgba(255, 255, 255, 0) 1px 9px);
  mix-blend-mode: soft-light;
  opacity: calc(0.25 + var(--off, 0) * 0.5);
  -webkit-mask-image: radial-gradient(60% 55% at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 55% at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent 72%);
}

/* ------------------------------- la lámina ------------------------------- */

.holo-foil,
.holo-foil--b,
.holo-foil--c {
  background-repeat: repeat;
  will-change: opacity, background-position;
}

.holo-foil {
  background-image: var(--l1-img, none);
  background-size: var(--l1-size, cover);
  background-position: var(--l1-x, 50%) var(--l1-y, 50%);
  background-blend-mode: var(--l1-bgblend, normal);
  mix-blend-mode: var(--l1-blend, overlay);
  filter: var(--l1-filter, none);
  opacity: var(--l1-o, 0);
}

.holo-foil--b {
  background-image: var(--l2-img, none);
  background-size: var(--l2-size, cover);
  background-position: var(--l2-x, 50%) var(--l2-y, 50%);
  background-blend-mode: var(--l2-bgblend, normal);
  mix-blend-mode: var(--l2-blend, color-dodge);
  filter: var(--l2-filter, none);
  opacity: var(--l2-o, 0);
}

.holo-foil--c {
  background-image: var(--l3-img, none);
  background-size: var(--l3-size, auto);
  background-position: var(--l3-x, 50%) var(--l3-y, 50%);
  background-blend-mode: var(--l3-bgblend, normal);
  mix-blend-mode: var(--l3-blend, overlay);
  filter: var(--l3-filter, none);
  opacity: var(--l3-o, 0);
}

/* arrastre: al mover rápido la lámina se estira en la dirección del gesto */
.holo-smear {
  background: linear-gradient(
    var(--smear-angle, 0deg),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0) 70%
  );
  mix-blend-mode: soft-light;
  opacity: calc(var(--smear, 0) * 0.55);
}

/* destello cuando el ángulo coincide con el "grano" del material */
.holo-spot {
  background: radial-gradient(
    46% 42% at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.25) 35%,
    rgba(255, 255, 255, 0) 70%
  );
  mix-blend-mode: color-dodge;
  opacity: calc(var(--spot, 0) * 0.5);
}

/* grano compartido: ata tarjeta y foto al mismo soporte impreso */
.holo-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.16;
}

/* brillo especular que sigue al puntero */
.holo-glare {
  background: radial-gradient(
    farthest-corner circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, 0.72) 8%,
    rgba(255, 255, 255, 0.18) 28%,
    rgba(255, 255, 255, 0) 62%
  );
  mix-blend-mode: overlay;
  opacity: calc(var(--glare-o, 0.55) * (0.35 + var(--off, 0) * 0.65));
}

/* cantos: se enciende el borde que se levanta hacia la luz */
.holo-sheen {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, calc(var(--edge-l, 0) * 0.55)) 0%, rgba(255, 255, 255, 0) 12%),
    linear-gradient(270deg, rgba(255, 255, 255, calc(var(--edge-r, 0) * 0.55)) 0%, rgba(255, 255, 255, 0) 12%),
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--edge-t, 0) * 0.45)) 0%, rgba(255, 255, 255, 0) 10%),
    linear-gradient(0deg, rgba(255, 255, 255, calc(var(--edge-b, 0) * 0.45)) 0%, rgba(255, 255, 255, 0) 10%);
  mix-blend-mode: screen;
}

/* ------------------------------- contenido ------------------------------- */

.holo-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5%;
  padding: 7% 7.5%;
  /* el contenido va impreso sobre la tarjeta, no flotando encima */
  mix-blend-mode: normal;
}

.holo-text {
  min-width: 0;
  color: #16150f;
}

.holo-eyebrow {
  font-size: clamp(14px, 3.03cqw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 0.5em;
}

.holo-name {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(30px, 6.49cqw, 52px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  /* relieve: la sombra se mueve al contrario que la tarjeta, así el texto
     parece estampado en el material en vez de dibujado encima */
  text-shadow:
    var(--emboss-x, 0px) var(--emboss-y, 0px) 0 rgba(255, 255, 255, 0.55),
    calc(var(--emboss-x, 0px) * -1) calc(var(--emboss-y, 0px) * -1) 0 rgba(0, 0, 0, 0.22);
}

.holo-role {
  margin-top: 0.7em;
  font-size: clamp(15px, 3.25cqw, 20px);
  line-height: 1.35;
  opacity: 0.68;
  max-width: 30ch;
}

/* --------------------------------- foto ---------------------------------- */

.holo-tile {
  position: relative;
  flex: 0 0 auto;
  width: 40%;
  aspect-ratio: 3 / 4;
  border-radius: 7px;
  overflow: hidden;
  background: var(--tile-dark, #2b2a24);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.22),
    0 2px 8px -3px rgba(0, 0, 0, 0.5);
}

.holo-tile > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* La misma imagen dos veces: positivo, y negativo revelado por una máscara que
   viaja. Un filtro no puede invertir sólo una parte del elemento, así que el
   barrido necesita dos copias superpuestas. */
.holo-tile__photo,
.holo-tile__photo--neg {
  background-image: var(--tile-src, var(--tile-fallback));
  background-repeat: no-repeat;
  /* con foto: cover y paralaje horizontal. Sin foto: la marca centrada sobre
     su fondo, que no debe estirarse ni desplazarse. */
  background-size: var(--tile-src-size, var(--tile-fallback-size, cover));
  background-position: var(--tile-src-pos, var(--tile-fallback-pos, 50% 50%));
}

.holo-tile__photo--neg {
  filter: invert(1) hue-rotate(var(--tile-hue, 180deg));
  -webkit-mask-image: linear-gradient(
    var(--tile-sweep-angle, 90deg),
    #000 0%,
    #000 calc(var(--tile-invert, 0) * 100%),
    transparent calc(var(--tile-invert, 0) * 100% + 14%)
  );
  mask-image: linear-gradient(
    var(--tile-sweep-angle, 90deg),
    #000 0%,
    #000 calc(var(--tile-invert, 0) * 100%),
    transparent calc(var(--tile-invert, 0) * 100% + 14%)
  );
}

/* duotono duro: la foto se reduce a dos tintas, como una impresión barata */
.holo-tile__duo {
  background: linear-gradient(0deg, var(--tile-dark, #2b2a24), var(--tile-light, #e6e2d2));
  mix-blend-mode: color;
  opacity: 0.82;
}

.holo-tile__tone {
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.3));
  mix-blend-mode: soft-light;
}

/* la foto recibe brillo, pero NO arcoíris: es lo que hace que se lea como un
   material distinto al de la tarjeta */
.holo-tile__foil {
  background: linear-gradient(
    var(--tile-sweep-angle, 90deg),
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  mix-blend-mode: screen;
  opacity: calc(0.18 + var(--off, 0) * 0.42);
}

.holo-tile__grain {
  background-image: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.2;
}

/* desgaste: la esquina rozada de una tarjeta que se ha usado */
.holo-tile__wear {
  background: radial-gradient(70% 60% at 108% -8%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: soft-light;
}

.holo-tile__vignette {
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45);
  border-radius: inherit;
}

.holo-tile__gloss {
  background: linear-gradient(
    calc(var(--tile-sweep-angle, 90deg) + 40deg),
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 45%
  );
  mix-blend-mode: screen;
  opacity: calc(0.25 + var(--off, 0) * 0.3);
}

/* -------------------------------- ajustes -------------------------------- */

/* cqw permite escalar la tipografía con el ancho de la TARJETA, no del viewport */
.holo-card { container-type: inline-size; }

@media (max-width: 900px) {
  .holo-stage { aspect-ratio: 5 / 4; }
  .holo-card { width: 90%; }
}

@media (max-width: 480px) {
  .holo-card { width: 96%; }
}

/* Sin movimiento: la tarjeta se queda quieta y plana, pero conserva la lámina
   en su estado de reposo para que siga siendo una tarjeta holográfica. */
@media (prefers-reduced-motion: reduce) {
  .holo-card { transform: none; }
  .holo-smear,
  .holo-spot { opacity: 0; }
}