/* ============================================================ Metamorphosis Insectorum Surinamensium Página hermana de Chromolithographs of Cephalopods. Mismo sistema: --u = 1 "píxel de diseño" sobre un lienzo de 1920 × 1080, así todo escala proporcionalmente sin blur. Diferencias: fondo vino, encabezado con subtítulo, sin panel de texto lateral y sin el rectángulo punteado. ============================================================ */ :root{ --wine: #55232A; --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; /* mismo grano que la página hermana: ruido negro al 8,6 %, servido como mosaico de 192 px en vez del PNG de 1,7 MB */ background-color: var(--wine); background-image: url("img/grain.png"); background-repeat: repeat; color: var(--cream); font-family: var(--serif); display: flex; align-items: center; justify-content: center; overflow: hidden; -webkit-font-smoothing: antialiased; } /* Safari en iOS ignora a menudo overflow-x en solo */ html{ overflow-x: clip; } body{ overflow-x: clip; } .deco{ overflow: hidden; } /* ── 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 archivo ya trae el 24 % de opacidad en su canal alfa */ 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; } /* ============================================================ Encabezado ============================================================ */ .head{ position: absolute; left: 50%; top: calc(49 * var(--u)); transform: translateX(-50%); width: calc(1200 * var(--u)); text-align: center; z-index: 3; } .title{ margin: 0; 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; } .subtitle{ margin: calc(18 * var(--u)) auto 0; width: calc(900 * var(--u)); 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); } /* enlace a la colección original en The Public Domain Review */ .subtitle a{ color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 251, 242, .26); text-underline-offset: .28em; transition: color .3s var(--ease), text-decoration-color .3s var(--ease); } .subtitle a:hover, .subtitle a:focus-visible{ color: var(--yellow); text-decoration-color: var(--yellow); outline: none; } /* ============================================================ 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; /* isolate confina los mix-blend-mode del tornasol a la 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(24, 10, 12, .5)); user-select: none; -webkit-user-drag: none; } .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(24, 10, 12, .45)); } .card[data-pos="0"]{ z-index: 3; } .card[data-pos="1"]{ z-index: 2; } .card[data-pos="2"]{ z-index: 1; } /* ── Tornasol / holográfico ──────────────────────────────── */ .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; } .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; /* la segunda máscara concentra el iris donde está el cursor (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; } .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; } .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 */ .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; } /* ── Tornasol automático en pantallas táctiles ────────────── Sin mouse no hay hover. Las variables se registran con @property para que el navegador pueda interpolarlas. */ @property --mx { syntax: ''; inherits: true; initial-value: 50%; } @property --my { syntax: ''; inherits: true; initial-value: 50%; } @property --px { syntax: ''; inherits: true; initial-value: 50%; } @property --py { syntax: ''; inherits: true; initial-value: 50%; } @keyframes foil-sweep{ 0% { --mx: 20%; --my: 24%; --px: 80%; --py: 76%; } 50% { --mx: 80%; --my: 72%; --px: 20%; --py: 28%; } 100% { --mx: 20%; --my: 24%; --px: 80%; --py: 76%; } } @media (hover: none){ .deck{ animation: foil-sweep 10s ease-in-out infinite; } .card[data-pos="0"] .card__foil--holo { opacity: .75; } .card[data-pos="0"] .card__foil--sheen{ opacity: .9; } .card[data-pos="0"] .card__foil--glare{ opacity: .85; } } /* ============================================================ 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: var(--yellow); 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{ border-color: rgba(254, 224, 126, .6); background: rgba(254, 224, 126, .08); outline: none; } .pager__btn:active{ transform: scale(.94); } /* ============================================================ Responsive Desktop 1920 – 821 px lienzo proporcional Tablet 820 – 601 px columna Mobile 600 – 320 px columna compacta Al no haber panel de texto sobra alto, así que la estampilla puede ser bastante más grande que en la página hermana y las flechas se conservan en táctil. ============================================================ */ @media (max-width: 820px), (orientation: portrait){ :root{ --card: clamp(300px, 58vw, 560px); --u: calc(var(--card) / 420); } html, body{ height: 100%; } body{ display: block; overflow: hidden; } .stage{ width: 100%; max-width: 100%; height: 100vh; height: 100svh; padding: 36px 40px 40px; display: flex; flex-direction: column; align-items: center; gap: 28px; overflow-y: auto; overflow-x: clip; -webkit-overflow-scrolling: touch; } .layout{ display: contents; } .deco__arc, .deco__symbol{ display: none; } .deco__pattern{ width: min(150vw, 1000px); height: min(150vw, 1000px); top: 42%; } .head{ position: static; transform: none; order: 0; flex: none; width: 100%; } .title{ max-width: 16ch; margin: 0 auto; white-space: normal; text-wrap: balance; font-size: clamp(26px, 4.2vw, 36px); line-height: 1.16; } .subtitle{ width: min(100%, 460px); margin: 14px auto 0; font-size: 12px; line-height: 1.5; } .deck-area{ position: static; transform: none; order: 1; flex: 0 1 auto; height: calc(var(--card) * 1.4857); min-height: 190px; width: auto; max-width: 100%; aspect-ratio: 420 / 624; perspective: calc(1400 * var(--u)); } .deck{ width: 100%; height: 100%; } /* --u debe seguir al ancho real de la carta, que puede encogerse */ @supports (container-type: inline-size){ .deck-area{ container-type: inline-size; } .deck{ --u: calc(100cqw / 420); } } .pager{ position: static; order: 2; flex: none; margin-top: auto; gap: 14px; } .pager__count{ margin-right: 12px; font-size: 12px; } .pager__btn{ width: 46px; height: 46px; } .pager__btn svg{ width: 42%; height: 42%; } } @media (max-width: 600px){ :root{ --card: clamp(220px, 66vw, 400px); --u: calc(var(--card) / 420); } .stage{ padding: 24px 16px 28px; gap: 20px; } .deco__pattern{ width: min(140vw, 700px); height: min(140vw, 700px); top: 40%; } .title{ max-width: 14ch; font-size: clamp(22px, 6vw, 30px); } .subtitle{ font-size: 11px; margin-top: 11px; } .pager{ gap: 12px; } .pager__count{ font-size: 11px; } .pager__btn{ width: 42px; height: 42px; } } @media (prefers-reduced-motion: reduce){ *{ transition-duration: .001ms !important; } .deck{ animation: none !important; } }