/* Da lo que mandas (nº 04) · estilos de escena. Base común de la 03; estado final = estilo estático; la entrada es transición. */
#grain { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .35  0 0 0 1.1 -.2'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); }

/* pintura corrida a la derecha con borde izquierdo desvanecido (deja aire para el texto) */
.paint.r55 img { inset: auto; right: 0; top: 28px; width: 1520px; height: 1013px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }

.chips { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.chip { display: inline-block; font-family: var(--f-sc); font-weight: 700; font-size: 38px; letter-spacing: .06em; padding: 8px 26px 12px;
  border: 2px solid var(--gold); border-radius: 44px; color: var(--gold-hi); background: rgba(9,13,42,.78); }
.chip.verm { border-color: var(--verm); color: var(--verm-hi); }
.chip.emer { border-color: var(--emerald-hi); color: var(--emerald-hi); }
.chip.ivory { border-color: rgba(246,238,219,.7); color: var(--ivory); }
.plate { display: inline-block; padding: 16px 32px 18px; background: rgba(9,13,42,.82); border: 2px solid rgba(228,181,85,.8); outline: 1px solid rgba(228,181,85,.35); outline-offset: 6px; border-radius: 6px; }
.plate.verm { border-color: rgba(227,71,42,.85); outline-color: rgba(227,71,42,.35); }
.small { font-family: var(--f-body); font-weight: 500; font-size: 38px; line-height: 1.22; }
.dim { color: var(--ivory-dim); }
.strike.on::after, .on .strike::after { background: var(--verm); }

/* esquineros dorados pintados en tarjetas y placas */
.card::before, .plate::before, .card::after, .plate::after { content: ''; position: absolute; width: 64px; height: 78px; background: url(../assets/sp/esquina.webp) center/contain no-repeat; pointer-events: none; z-index: 2; }
.card::before, .plate::before { left: -16px; top: -16px; }
.card::after, .plate::after { right: -16px; bottom: -16px; transform: rotate(180deg); }
.spr { position: absolute; display: block; filter: drop-shadow(0 14px 20px rgba(0,0,0,.5)); }
.med2 { filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
.halo { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,226,150,.5), rgba(255,226,150,0)); }

/* resorte: apariciones de sprites que se asientan con rebote */
.r.spring { transform: translateY(-60px) scale(.9); transition: opacity calc(1.2s * var(--t)) var(--ease) var(--d, 0ms), transform calc(1.8s * var(--t)) cubic-bezier(.3,1.6,.45,1) var(--d, 0ms), filter calc(1.2s * var(--t)) var(--ease) var(--d, 0ms); }
.r.drop { transform: translateY(-340px) rotate(-8deg); transition: opacity calc(.8s * var(--t)) linear var(--d, 0ms), transform calc(1.6s * var(--t)) cubic-bezier(.3,1.55,.45,1) var(--d, 0ms), filter calc(1s * var(--t)) var(--ease) var(--d, 0ms); }
.r.spring.on, .r.drop.on { transform: var(--rest, none); }

/* ---------- clips del reel (un teléfono a la derecha) ---------- */
.phone { position: absolute; left: 1236px; top: 54px; width: 540px; height: 960px; border-radius: 44px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 3px rgba(228,181,85,.85), 0 0 0 12px rgba(9,13,42,.9), 0 0 0 14px rgba(228,181,85,.35), 0 30px 90px rgba(0,0,0,.6); }
.phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.vbar { position: absolute; left: 1236px; top: 1034px; width: 540px; height: 6px; border-radius: 3px; background: rgba(228,181,85,.18); overflow: hidden; }
.vbar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(228,181,85,.6), #fbe3a0); }
.vhint { position: absolute; left: 1236px; top: 470px; width: 540px; text-align: center; font-family: var(--f-sc); font-weight: 700; font-size: 34px; letter-spacing: .1em; color: var(--gold-hi);
  opacity: 0; pointer-events: none; transition: opacity .4s; text-shadow: 0 2px 12px #000; }
.clip.blocked .vhint { opacity: 1; }
.clip.blocked .phone video { opacity: .45; }

/* ---------- 6 platónicos: el sol y el anillo ---------- */
#platonicos .rubi { transition: transform calc(2.2s * var(--t)) cubic-bezier(.5,0,.75,0), opacity calc(1.4s * var(--t)) linear calc(1s * var(--t)); }
#platonicos.ph-falta .rubi { transform: translateY(420px) rotate(70deg); opacity: 0; }
#platonicos .hueco { opacity: 0; transition: opacity calc(2s * var(--t)) var(--ease) calc(1.2s * var(--t)); }
#platonicos.ph-falta .hueco { opacity: 1; }

/* ---------- 7 cima: el camino que se tiende ---------- */
#cima .puente { filter: drop-shadow(0 0 10px rgba(255,220,140,.9)) drop-shadow(0 0 24px rgba(255,200,120,.6)); }
#cima .cityglow { opacity: 0; transition: opacity calc(4s * var(--t)) var(--ease); }
#cima.ph-camino .cityglow { opacity: 1; }

/* ---------- 8 voluntad: cadena y medallón partido ---------- */
.link { position: absolute; transform-origin: 50% 50%; }
.mitad { transition: transform calc(2.4s * var(--t)) cubic-bezier(.3,1.5,.45,1), opacity calc(1.4s * var(--t)) var(--ease); }
#voluntad.ph-parte .m-izq { transform: translateX(-90px) rotate(-7deg); }
#voluntad.ph-parte .m-der { transform: translateX(90px) rotate(7deg); }

/* ---------- 11 debate ---------- */
.vsline { position: absolute; left: 958px; top: 120px; width: 4px; height: 700px; background: linear-gradient(180deg, transparent, var(--gold), transparent); }
.col-chips { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.col-chips .chip { font-size: 32px; padding: 6px 22px 10px; }
#debate .corazon { transition: filter calc(3s * var(--t)) var(--ease); }
#debate.ph-sana .corazon { filter: brightness(1.2) drop-shadow(0 0 22px rgba(255,220,140,.95)); }
#debate .sanahalo { opacity: 0; transition: opacity calc(3s * var(--t)) var(--ease); }
#debate.ph-sana .sanahalo { opacity: 1; }

/* ---------- 12 vid ---------- */
#vid .tronco.r { clip-path: inset(100% 0 0 0); transform: none; transition: clip-path calc(3.4s * var(--t)) var(--ease-io) var(--d, 0ms), opacity calc(.6s * var(--t)) linear var(--d, 0ms); }
#vid .tronco.r.on { clip-path: inset(0 0 0 0); }
#vid .seco { transition: transform calc(2.6s * var(--t)) cubic-bezier(.5,0,.75,0), opacity calc(2s * var(--t)) var(--ease); }
#vid .seco.off { transform: translateY(380px) rotate(24deg); opacity: 0 !important; filter: none; }
#vid .uvas { transition: filter calc(3s * var(--t)) var(--ease); }
#vid.ph-fruto .uvas { filter: brightness(1.18) drop-shadow(0 0 22px rgba(255,220,140,.85)); }
#vid .frutohalo { opacity: 0; transition: opacity calc(3s * var(--t)) var(--ease); }
#vid.ph-fruto .frutohalo { opacity: 1; }

/* ---------- 13 razón: griego y latín ---------- */
.greek { display: block; font-family: 'Times New Roman', Georgia, serif; font-weight: 700; font-style: italic; font-size: 88px; line-height: 1; }
.t-vellum .card.light { box-shadow: 0 14px 40px rgba(80,50,10,.25); }

/* ---------- 14 distorsiones: lo que dice el reel / lo que muestran las fuentes ---------- */
.pair2 .lhs, .pair2 .rhs { position: absolute; height: 138px; display: flex; align-items: center; padding: 0 28px; border-radius: 6px; }
.pair2 .lhs { left: 96px; width: 700px; border: 2px solid rgba(227,71,42,.75); background: rgba(40,12,24,.8); font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 44px; line-height: 1.05; color: var(--verm-hi); }
.pair2 .rhs { left: 960px; width: 864px; border: 2px solid rgba(228,181,85,.75); background: rgba(9,13,42,.84); font-family: var(--f-body); font-weight: 500; font-size: 33px; line-height: 1.16; }
.pair2 .lbl2 { position: absolute; font-family: var(--f-sc); font-weight: 700; font-size: 26px; letter-spacing: .14em; white-space: nowrap; }
.pair2 .strike { white-space: normal; }
.pair2 .strike::after { top: 50%; }
#distorsion .strike::after { transform: scaleX(0); transition-delay: 0s; }
#distorsion.ph-tacha .strike::after { transform: scaleX(1); }
#distorsion.ph-tacha .pair2 .r:nth-child(n+3) .strike::after { transition-delay: .35s; }
#distorsion.ph-tacha .pair2 .r:nth-child(n+5) .strike::after { transition-delay: .7s; }
#distorsion.ph-tacha .pair2 .r:nth-child(n+7) .strike::after { transition-delay: 1.05s; }

/* ---------- 17 rabbit holes ---------- */
.rh { position: absolute; top: 300px; width: 380px; text-align: center; }
.rh img { width: 210px; display: block; margin: 0 auto 14px; }
.rh .kicker { font-size: 28px; }
.rh b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1.02; color: var(--ivory); margin-top: 6px; }
.rh span.s { display: block; margin-top: 10px; font-family: var(--f-body); font-size: 30px; line-height: 1.2; color: var(--ivory-dim); }
.rh.rec img { filter: drop-shadow(0 0 26px rgba(255,220,140,.9)); }

/* teléfono: sin capas de grano/polvo (rendimiento) */
@media (pointer: coarse) and (max-width: 900px) { #grain, #dust { display: none; } }

/* táctiles (iPhone/iPad): sin filtros ni animaciones infinitas. En WebKit cada filtro o capa animada pide memoria de GPU propia y la pestaña se cierra */
html.touch #grain, html.touch #dust { display: none; }
html.touch .r, html.touch .r.on, html.touch .r.off, html.touch .words .w, html.touch .words.on .w, html.touch .words.off,
html.touch .draw, html.touch .draw.off, html.touch .scene *, html.touch #objects * { filter: none !important; will-change: auto !important; }
html.touch .paint.drift img, html.touch .cam, html.touch .breath, html.touch .amb,
html.touch .scene *::before, html.touch .scene *::after { animation: none !important; }
html.touch .scene:not(.is-active):not(.is-leaving) .r, html.touch .scene:not(.is-active):not(.is-leaving) .words .w { transition: none !important; }

/* ---------- 5 contexto: mapa completo, corrido a la derecha ---------- */
.paint.mapa img { inset: auto; left: 300px; top: 0; width: 1620px; height: 1080px; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }