/* Landing · movimiento en 3D (P32). Compartido por index.html y es/index.html; los textos viven en cada página. Regla: TODO lo que se mueve cuelga de `.motion` (la pone el si el sistema no pide menos movimiento). Sin `.motion` —o sin JS— cada escena se ve en su estado final, quieta: nada espera oculto a que un observer lo destape. */ /* ================= Hero · el libro que se abre solo ================= */ .hero { position: relative; text-align: center; } .hero-box { padding-block: clamp(40px, 6vh, 90px) clamp(40px, 6vh, 80px); } .hero-in { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.6vh, 28px); width: 100%; } .hero .cta-row { margin-top: clamp(20px, 3.2vh, 34px); } .hero .cta-note { margin-top: 12px; } /* Por delante del libro: la hoja que gira sube en 3D y taparía los botones. */ .picker { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .picker-label { font: 400 13.5px var(--sans); color: var(--ink-faint); margin-right: 2px; } .picker button { font: 600 13.5px var(--sans); border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .picker button:hover { border-color: var(--accent); color: var(--ink); } .picker button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); } .bk-stage { --w: clamp(140px, 19vw, 250px); position: relative; display: grid; place-items: center; width: 100%; perspective: 1800px; perspective-origin: 50% 20%; min-height: calc(var(--w) * 1.31 + 36px); } /* El libro cabe con el titular en la primera pantalla, para que se vea abrirse sin bajar. Lo que no es libro (titular, CTA, selector, créditos) ocupa ~520px. */ .motion .bk-stage { --w: clamp(110px, min(19vw, calc((100svh - 540px) / 1.31)), 250px); } .bk-credit { font: 400 12px var(--sans); color: var(--ink-faint); } .bk-book { --open: 1; --c: -180; --l1: -179; --l2: -178; --rx: 10; --ry: 0; --rz: 0; position: relative; width: calc(var(--w) * 2); height: calc(var(--w) * 1.31); transform-style: preserve-3d; transform: translateX(calc(var(--w) * -0.5 * (1 - var(--open)))) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg)) rotateZ(calc(var(--rz) * 1deg)); } .motion .bk-book { --open: 0; --c: 0; --l1: 0; --l2: 0; --rx: 26; --rz: -6; } .bk-floor { position: absolute; left: 50%; bottom: 4px; height: 24px; width: calc(var(--w) * (1 + var(--open, 1))); transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.26), transparent); filter: blur(6px); } .bk-sheet { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-style: preserve-3d; transform-origin: left center; } .bk-sheet.cover { transform: rotateY(calc(var(--c) * 1deg)) translateZ(3px); } .bk-sheet.l1 { transform: rotateY(calc(var(--l1) * 1deg)) translateZ(2px); } .bk-sheet.l2 { transform: rotateY(calc(var(--l2) * 1deg)) translateZ(1px); } .bk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 2px 6px 6px 2px; text-align: left; } .bk-face.back { transform: rotateY(180deg); border-radius: 6px 2px 2px 6px; } .bk-paper { background: linear-gradient(to right, rgba(60, 45, 20, 0.1), transparent 14%), var(--paper); } .bk-face.back.bk-paper { background: linear-gradient(to left, rgba(60, 45, 20, 0.1), transparent 14%), var(--paper); } .bk-lines::after { content: ""; position: absolute; inset: 14% 12% 16% 12%; background: repeating-linear-gradient(to bottom, rgba(43, 37, 23, 0.13) 0 3px, transparent 3px 11px); } .bk-cover-front { background: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0 3.5%, rgba(0, 0, 0, 0.22) 3.5% 5%, transparent 5%), var(--cover-img, none) center / cover no-repeat, #1c2127; } .bk-cover-back { background: repeating-linear-gradient(45deg, #e6dfcc 0 6px, #ece6d5 6px 12px); } .bk-base { text-align: left; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 2px 6px 6px 2px; box-shadow: 1px 1px 0 var(--paper-edge), 2px 2px 0 #ddd4bf, 3px 3px 0 var(--paper-edge), 4px 4px 0 #d3c9b1, 0 30px 50px -22px rgba(0, 0, 0, 0.45); } .bk-lp { padding: 14% 11% 10% 12%; color: var(--paper-ink); font-family: var(--serif); font-size: max(8px, calc(var(--w) * 0.05)); line-height: 1.55; display: flex; flex-direction: column; gap: 0.8em; height: 100%; } .bk-ch { font: 600 max(7px, calc(var(--w) * 0.034)) var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #8b7a55; } .bk-hl { background: linear-gradient(transparent 60%, rgba(34, 197, 94, 0.2) 60%); border-radius: 2px; transition: background 0.5s ease, box-shadow 0.5s ease; } .bk-hl.lit { background: rgba(34, 197, 94, 0.22); box-shadow: 0 1.5px 0 #22c55e; } .bk-chat { padding: 12% 9% 9%; height: 100%; display: flex; flex-direction: column; gap: 0.7em; font: 400 max(8px, calc(var(--w) * 0.046))/1.45 var(--sans); color: #2a2f35; } .bk-chat .bk-ch { display: flex; align-items: center; gap: 0.5em; color: #3d4650; } .bk-chat .bk-ch i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #22c55e; } .bk-q { align-self: flex-end; background: #1f2328; color: #f2f3f5; padding: 0.6em 0.8em; border-radius: 0.9em 0.9em 0.2em 0.9em; max-width: 88%; } .bk-a { background: #fff; border: 1px solid #e3e6ea; padding: 0.6em 0.8em; border-radius: 0.9em 0.9em 0.9em 0.2em; } .bk-cite { display: inline-flex; margin-top: 0.5em; font: 600 0.85em var(--sans); color: #1f9d54; background: rgba(34, 197, 94, 0.14); padding: 0.2em 0.6em; border-radius: 999px; } .caret::after { content: ""; display: inline-block; width: 0.45em; height: 1em; margin-left: 2px; vertical-align: -2px; background: #22c55e; animation: caret-blink 1s steps(2) infinite; } @keyframes caret-blink { 50% { opacity: 0; } } /* ================= Beat 2 · el párrafo que se nubla ================= */ .dense .w { transition: filter 0.6s ease, opacity 0.6s ease; } .dense .w.fade { opacity: 0.45; } .motion .dense .w.blur { filter: blur(2.2px); opacity: 0.35; } .dense .k { border-radius: 3px; transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease; } .dense .k.lit { background: var(--accent-soft); color: var(--accent); box-shadow: 0 1.5px 0 var(--accent-bright); } /* ================= Beat 3 · la página contesta ================= */ .ask { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; max-width: 920px; margin-inline: auto; text-align: left; perspective: 1400px; } .ask-page { background: linear-gradient(to right, rgba(60, 45, 20, 0.09), transparent 10%), var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-edge); border-radius: 6px 14px 14px 6px; padding: 28px 28px 24px; box-shadow: var(--shadow-3); font: 400 15px/1.75 var(--serif); transform: rotateY(12deg) rotateX(4deg); transform-origin: left center; } .ask-chat { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-2); min-height: 250px; } .ask-chat .panel-head { padding: 0 0 10px; } .ask-chat .bubble { transition: opacity 0.3s ease, transform 0.3s ease; } .ask-chat .cite { align-self: flex-start; margin-top: 0; transition: opacity 0.3s ease; } .ask-chat .hide { opacity: 0; transform: translateY(6px); } /* ================= Beat 4 · la cita señala su línea ================= */ .proof .page { transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: center bottom; } .motion .proof .page { transform: perspective(1200px) rotateX(24deg); } .motion .proof.linked .page { transform: none; } .motion .proof mark { background: linear-gradient(var(--accent-soft), var(--accent-soft)) no-repeat 0 0 / 0% 100%; box-shadow: none; box-decoration-break: slice; -webkit-box-decoration-break: slice; transition: background-size 1.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease 0.9s; } .motion .proof.marked mark { background-size: 100% 100%; box-shadow: 0 1.5px 0 var(--accent-bright); } /* La cita se superpone al pie de la página: la página le deja sitio (antes lo ocupaba el nº de página). */ .proof .page-text { margin-bottom: 30px; } .proof-link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .proof-link path { fill: none; stroke: var(--accent-bright); stroke-width: 2; stroke-linecap: round; } .proof-link circle { fill: var(--accent-bright); } /* ================= Beat 5 · el mazo ================= */ .deck { position: relative; aspect-ratio: 8 / 5.6; transform-style: preserve-3d; transform: rotateX(10deg); max-width: 100%; } .deck .fcard { position: absolute; inset: 0; aspect-ratio: auto; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } .fcard-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .fcard.flip .fcard-in { transform: rotateY(180deg); } .deck-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 56px; } .deck-ctl .fcard-note { margin-top: 0; } .btn-quiet { font: 600 13.5px var(--sans); border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 8px 15px; border-radius: 999px; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .btn-quiet:hover { border-color: var(--accent); transform: translateY(-1px); } /* ================= Beat 6 · la vista explotada ================= */ .strata-stage { perspective: 1600px; display: grid; place-items: center; min-height: 500px; padding-top: 220px; margin-top: 8px; overflow: hidden; } .strata { --e: 1; position: relative; width: 180px; height: 300px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-38deg); text-align: left; } .stratum { position: absolute; inset: 0; border-radius: 26px; transform: translateZ(calc(var(--i) * var(--e) * 78px)); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 18px; gap: 2px; background: rgba(242, 243, 245, 0.07); border: 1px solid rgba(242, 243, 245, 0.22); } .stratum b { font: 600 14px/1.2 var(--sans); color: #f2f3f5; white-space: nowrap; } .stratum small { font: 400 12px var(--sans); color: #a8b0b8; } .stratum .bars { display: grid; gap: 6px; margin-bottom: auto; margin-top: 8px; } .stratum .bars i { display: block; height: 6px; border-radius: 3px; background: rgba(242, 243, 245, 0.16); } .stratum .bars i:nth-child(2n) { width: 70%; } .stratum.base { background: linear-gradient(160deg, #2a3139, #171b20); border-color: #3a434d; box-shadow: 0 40px 60px rgba(0, 0, 0, 0.6); } .stratum.key { border-color: rgba(34, 197, 94, 0.7); background: rgba(34, 197, 94, 0.1); } .stratum.key b { color: #86efac; } /* ================= Everything in the box ================= */ .box-group { transition: transform 0.25s ease, box-shadow 0.25s ease; } @supports (animation-timeline: view()) { .motion .box-group { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; } } /* ================= Cierre · la estantería ================= */ .shelf { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 150px; margin: 0 auto 40px; padding-inline: 12px; max-width: 360px; border-bottom: 6px solid var(--line); } .spine { width: 26px; height: var(--h, 120px); border-radius: 3px 3px 1px 1px; background: var(--c, #cfd5dc); box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.12), inset 2px 0 0 rgba(255, 255, 255, 0.15); } .spine.mine { width: 34px; height: 138px; display: grid; place-items: center; background: var(--c, #f4f3ef); color: var(--ci, #111418); font: 600 11px var(--sans); letter-spacing: 0.04em; writing-mode: vertical-rl; transform: rotate(180deg); transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 0.4s ease; } .motion .shelf.pre .spine.mine { transform: rotate(180deg) translateY(160%) rotate(10deg); opacity: 0; } @media (max-width: 760px) { .bk-stage { --w: 42vw; } .motion .bk-stage { --w: clamp(100px, min(42vw, calc((100svh - 540px) / 1.31)), 250px); } .ask { grid-template-columns: 1fr; gap: 28px; } .ask-page { transform: rotateX(12deg); transform-origin: center bottom; } .strata-stage { min-height: 440px; padding-top: 200px; } } @media (prefers-reduced-motion: reduce) { .caret::after { animation: none; } }