:root{ --bg:#ffffff; --fg:#111111; --accent:#ff5a1f; --dim:#6b6b66; /* Botón hamburguesa neumórfico ("soft UI"): sombras derivadas automáticamente de --bg (65% mezcla con negro/blanco) para conservar el mismo contraste relativo del diseño original, sea cual sea el color de fondo. No tocar a mano. */ --neu-shadow-dark: color-mix(in srgb, var(--bg) 65%, black); --neu-shadow-light: color-mix(in srgb, var(--bg) 65%, white); --neu-icon-color: color-mix(in srgb, var(--bg) 40%, black); /* Fuerza de la viñeta OSCURA y fuerte (.scene-wrap-fade, la que vira hasta el gris casi negro sólido que empalma con el panel de detrás) en el borde inferior de la escena. 0 = invisible, 1 = intensidad completa. OJO: esto es DISTINTO de la mezcla suave permanente de .scene-pin::before/::after (el disolvido del propio borde de la foto contra var(--bg), que SIEMPRE está activo, en las 3 posiciones, tanto arriba como abajo -así nunca se nota un "corte" en el borde de la foto-). Esta variable solo gobierna la viñeta fuerte adicional que revela, sin corte, lo que hay debajo al llegar al final: se mantiene en 0 durante toda la 1ª y 2ª parada (ahí no hace falta, porque no hay nada oscuro debajo que revelar) y solo empieza a crecer, de forma suave, según currentFrameExact se acerca al ÚLTIMO fotograma de la continuación (el de la 3ª posición, tras el 2º salto) -justo cuando aparecen el carrusel de cámaras y su título-, llegando al 100% de intensidad exactamente en ese último fotograma (ver bgT dentro de render(), en el JS). */ --fade-opacity:0; } *{box-sizing:border-box;} html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; width:100%; min-width:100%; /* FIX franjas/cortes blancos: además de height:100% (que en normalmente ya sigue el viewport real), se fuerza también un min-height con la misma cadena de fallback que .scene-wrap/ .after-story-bg -terminando en el valor JS exacto (--vh) y, donde el navegador lo soporte, en dvh, el más preciso de todos-. Así, en cualquier navegador o combinación de zoom/orientación en la que height:100% se quedase corta por el motivo que sea, el propio fondo de / (que ya se tiñe en JS del color exacto de la escena, ver setPageBgColor) sigue cubriendo el 100% real de la pantalla y de cualquier zona de overscroll, sin dejar nunca una tira sin pintar. */ height:100%; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100); min-height:100svh; min-height:100dvh; /* SCROLL NATIVO REAL (v2): el documento vuelve a ser una página normal que hace scroll de verdad. Esto es imprescindible para que Safari en iPhone trate la página como "scroll real" y aplique su comportamiento nativo de barra inferior translúcida (igual que en Apple Maps / App Store): el contenido pasa por debajo de la barra sin hueco ni corte. Con position:fixed + overflow:hidden (como estaba antes) el documento nunca se mueve de verdad, así que Safari nunca activa ese comportamiento -por eso ningún parche de padding/safe-area podía arreglarlo-. El "salto" animado entre fotos sigue existiendo exactamente igual que antes (misma duración fija, mismo easing, mismo ritmo por tramo): lo que cambia es que ahora, en vez de mover un transform/--pe, mueve el scroll REAL de la página con esa misma curva (ver jumpTo/settleSegment más abajo). Así el navegador ve scroll genuino en todo momento, tanto durante los saltos como en las zonas de scroll libre (antes de la 1ª parada y después de la 3ª), y aplica su física e interfaz nativas en todos los casos. */ overscroll-behavior-y: none; /* evita el rebote elástico en los extremos del documento, pero permite scroll normal dentro */ /* ---------- Bloqueo de zoom (pellizco y doble toque) ---------- touch-action:pan-y le dice al navegador que, en toda la página, el ÚNICO gesto táctil permitido es el scroll vertical: así se descarta de raíz tanto el pellizco (pinch-zoom) como el doble toque para ampliar, sin tocar el scroll real que necesita el resto de la página (ver el bloque de comentarios de más arriba). Los elementos hijos que ya declaran su propio touch-action (p.ej. el lienzo de fotogramas o los carruseles con arrastre horizontal) siguen funcionando igual: el navegador combina el valor de cada elemento con el de sus ancestros, así que esta regla general no les quita nada de lo que ya tenían restringido o permitido. El remate -por si algún navegador ignorase user-scalable=no del viewport o touch-action- va en JS, más abajo (ver bloque "Bloqueo de zoom" justo antes de ). */ touch-action: pan-y; } /* ---------- Contenedor de scroll real de las 3 paradas ---------- */ /* Alto = 3 pantallas (una por parada). Es scroll de VERDAD: al desplazarse por aquí, .scene-wrap (sticky) se queda clavada en pantalla mientras este contenedor pasa por debajo -el mismo patrón que usa Apple en sus páginas de producto con imagen fija y contenido scrolleable-. El salto animado entre paradas (ver jumpTo/goNext/ goPrev en el JS) mueve el scroll REAL con la misma curva de easing y duración fija de siempre, en vez de un transform -así Safari trata todo el recorrido como scroll genuino y aplica su barra inferior nativa en todo momento, también durante el salto animado-. */ #storyTrack{ position:relative; height:calc(var(--vh, 1vh) * 100 * 3); height:300svh; height:300dvh; } .scene-wrap{ position:sticky; top:0; height:100vh; height:calc(var(--vh, 1vh) * 100); height:100svh; height:100dvh; width:100%; z-index:2; /* A veces, al desplazar la escena con transform:translateY() (ver applyPostEndOffset), aparecía una línea blanca fina justo en la costura con el panel gris de detrás (.after-story-bg): el navegador redondea la posición del transform a subpíxeles de forma distinta en cada frame, y esa escena (opaca) y el panel de detrás (que no se mueve) acaban en capas de composición GPU distintas que a veces no encajan al pixel exacto. translateZ(0) fuerza a la escena a vivir siempre en su propia capa GPU, estable, y backface-visibility evita el "flicker" de repintado -es el arreglo estándar para este tipo de costura intermitente entre capas animadas-. */ transform:translateZ(0); backface-visibility:hidden; } .scene-pin{ position:absolute; inset:0; height:100%; width:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--bg); } /* Difuminado hacia el fondo (blanco, o el gris hacia el que va virando var(--bg) al deslizar más allá del final) en los bordes SUPERIOR e INFERIOR de la escena, para que la foto se disuelva suavemente en el fondo en vez de cortarse de golpe -en cualquier posición (1ª, 2ª o 3ª), no solo cerca del final-. IMPORTANTE: el alto va en % (relativo al alto real de .scene-pin) y NO en vh, porque vh en móvil no siempre coincide con el alto real visible del contenedor sticky; en % siempre queda pegado al borde de lo que de verdad se ve en pantalla. Es una curva de easing (muchas paradas, concentradas al principio y acelerando hacia el final -la misma familia de curva que .after-story-bg usa para su propio degradado permanente-), para que la mezcla se perciba continua y no como un escalón. color-mix() permite aplicar esa misma curva de opacidad sobre var(--bg) aunque su valor cambie en tiempo real (de blanco a gris) mientras se desliza. NOTA: a diferencia de .scene-wrap-fade (la viñeta fuerte que sí vira hasta un gris casi negro sólido, ver más abajo), esta mezcla es siempre suave y siempre está activa -no depende de --fade-opacity-: por eso nunca se nota un "corte" ni arriba ni abajo, en ninguna de las 3 posiciones. Lo único que cambia según la posición es el propio valor de var(--bg) (casi blanco en la 1ª y 2ª, virando a gris cámara en la 3ª), así que el matiz de la mezcla ya se adapta solo. */ .scene-pin::before, .scene-pin::after{ content:""; position:absolute; left:0; right:0; height:30%; pointer-events:none; z-index:5; } .scene-pin::before{ top:0; background:linear-gradient(to top, color-mix(in srgb, var(--bg) 0%, transparent) 0%, color-mix(in srgb, var(--bg) 1%, transparent) 8%, color-mix(in srgb, var(--bg) 3%, transparent) 16%, color-mix(in srgb, var(--bg) 6%, transparent) 24%, color-mix(in srgb, var(--bg) 11%, transparent) 32%, color-mix(in srgb, var(--bg) 18%, transparent) 40%, color-mix(in srgb, var(--bg) 27%, transparent) 48%, color-mix(in srgb, var(--bg) 38%, transparent) 55%, color-mix(in srgb, var(--bg) 50%, transparent) 62%, color-mix(in srgb, var(--bg) 63%, transparent) 69%, color-mix(in srgb, var(--bg) 75%, transparent) 75%, color-mix(in srgb, var(--bg) 85%, transparent) 81%, color-mix(in srgb, var(--bg) 92%, transparent) 87%, color-mix(in srgb, var(--bg) 97%, transparent) 93%, var(--bg) 100%); } .scene-pin::after{ bottom:0; background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent) 0%, color-mix(in srgb, var(--bg) 1%, transparent) 8%, color-mix(in srgb, var(--bg) 3%, transparent) 16%, color-mix(in srgb, var(--bg) 6%, transparent) 24%, color-mix(in srgb, var(--bg) 11%, transparent) 32%, color-mix(in srgb, var(--bg) 18%, transparent) 40%, color-mix(in srgb, var(--bg) 27%, transparent) 48%, color-mix(in srgb, var(--bg) 38%, transparent) 55%, color-mix(in srgb, var(--bg) 50%, transparent) 62%, color-mix(in srgb, var(--bg) 63%, transparent) 69%, color-mix(in srgb, var(--bg) 75%, transparent) 75%, color-mix(in srgb, var(--bg) 85%, transparent) 81%, color-mix(in srgb, var(--bg) 92%, transparent) 87%, color-mix(in srgb, var(--bg) 97%, transparent) 93%, var(--bg) 100%); } /* Difuminado hacia el fondo en los bordes IZQUIERDO y DERECHO de la escena: mismo motivo y misma curva de easing que .scene-pin::before/ ::after (arriba/abajo), pero en horizontal. Antes solo existía el difuminado vertical, así que en pantallas anchas -donde la foto (cuadrada) queda centrada con huecos a los lados por el object-fit: contain- se notaba un corte recto justo en el borde izquierdo/derecho de la foto. Van como elementos reales (no ::before/::after, que ya están usados arriba) dentro de .scene-pin. */ .scene-pin-fade-left, .scene-pin-fade-right{ content:""; position:absolute; top:0; bottom:0; width:15%; pointer-events:none; z-index:5; } .scene-pin-fade-left{ left:0; background:linear-gradient(to left, color-mix(in srgb, var(--bg) 0%, transparent) 0%, color-mix(in srgb, var(--bg) 1%, transparent) 8%, color-mix(in srgb, var(--bg) 3%, transparent) 16%, color-mix(in srgb, var(--bg) 6%, transparent) 24%, color-mix(in srgb, var(--bg) 11%, transparent) 32%, color-mix(in srgb, var(--bg) 18%, transparent) 40%, color-mix(in srgb, var(--bg) 27%, transparent) 48%, color-mix(in srgb, var(--bg) 38%, transparent) 55%, color-mix(in srgb, var(--bg) 50%, transparent) 62%, color-mix(in srgb, var(--bg) 63%, transparent) 69%, color-mix(in srgb, var(--bg) 75%, transparent) 75%, color-mix(in srgb, var(--bg) 85%, transparent) 81%, color-mix(in srgb, var(--bg) 92%, transparent) 87%, color-mix(in srgb, var(--bg) 97%, transparent) 93%, var(--bg) 100%); } .scene-pin-fade-right{ right:0; /* BUGFIX/mejora pedida: el degradado de color solo (igual que .scene-pin-fade-left) no basta para disimular del todo el corte en este borde -el blanco "real" de la propia foto (su fondo de estudio, ligeramente distinto de un blanco puro) nunca coincide exactamente con var(--bg), así que un simple cambio de tono seguía dejando una costura perceptible-. Se ensancha bastante (del 15% al 32% del ancho) y, sobre todo, se le añade un desenfoque real (backdrop-filter) sobre la propia foto que hay debajo: eso difumina los píxeles del final de la imagen en vez de solo taparlos con otro color, así que cualquier diferencia de tono queda disuelta de verdad, no solo camuflada. El desenfoque, igual que el degradado de color, entra de 0 a su valor máximo de forma gradual con mask-image -así tampoco se nota un "escalón" en el propio borde del desenfoque-. Se aplica en los 3 saltos por igual, porque var(--bg)/el desenfoque no dependen de en qué parada se esté, solo de que la foto esté pegada a la izquierda (pantallas anchas). */ backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); /* Antes el desenfoque entraba con solo 2 tramos (transparente -> sólido en la mitad del ancho): se notaba como un "parche" borroso con un punto donde empieza a notarse. Ahora usa la misma curva de easing (muchos escalones, suaves al principio y acelerando hacia el final) que ya usan los difuminados de arriba/abajo/izquierda, así el desenfoque va entrando de forma gradual y continua, sin que se pueda señalar un punto exacto donde "empieza a difuminarse". Junto con un blur más suave (9px en vez de 22px) y la zona más ancha (45% en vez de 32%), el efecto deja de leerse como "hay un borrón ahí" y pasa a sentirse como que la foto simplemente se acaba de forma natural. */ -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.01) 8%, rgba(0,0,0,0.03) 16%, rgba(0,0,0,0.06) 24%, rgba(0,0,0,0.11) 32%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.27) 48%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.50) 62%, rgba(0,0,0,0.63) 69%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,0.85) 81%, rgba(0,0,0,0.92) 87%, rgba(0,0,0,0.97) 93%, #000 100%); mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.01) 8%, rgba(0,0,0,0.03) 16%, rgba(0,0,0,0.06) 24%, rgba(0,0,0,0.11) 32%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.27) 48%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.50) 62%, rgba(0,0,0,0.63) 69%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,0.85) 81%, rgba(0,0,0,0.92) 87%, rgba(0,0,0,0.97) 93%, #000 100%); background:linear-gradient(to right, color-mix(in srgb, var(--bg) 0%, transparent) 0%, color-mix(in srgb, var(--bg) 1%, transparent) 8%, color-mix(in srgb, var(--bg) 3%, transparent) 16%, color-mix(in srgb, var(--bg) 6%, transparent) 24%, color-mix(in srgb, var(--bg) 11%, transparent) 32%, color-mix(in srgb, var(--bg) 18%, transparent) 40%, color-mix(in srgb, var(--bg) 27%, transparent) 48%, color-mix(in srgb, var(--bg) 38%, transparent) 55%, color-mix(in srgb, var(--bg) 50%, transparent) 62%, color-mix(in srgb, var(--bg) 63%, transparent) 69%, color-mix(in srgb, var(--bg) 75%, transparent) 75%, color-mix(in srgb, var(--bg) 85%, transparent) 81%, color-mix(in srgb, var(--bg) 92%, transparent) 87%, color-mix(in srgb, var(--bg) 97%, transparent) 93%, var(--bg) 100%); } .scene-pin-fade-right{ width:45%; } /* En móvil apenas hay huecos laterales que disimular (la foto ocupa casi todo el ancho), así que se oculta directamente. */ @media (max-width:600px){ .scene-pin-fade-left, .scene-pin-fade-right{ display:none; } } .frame-canvas{ height:100%; width:100%; object-fit:contain; display:block; } /* ---------- Fondo gris oscuro tras la última parada ---------- Ocupa toda la pantalla pero vive DETRÁS de .scene-wrap (que es opaco), así que en reposo no se ve nada de este panel: solo asoma por el hueco que la propia escena va dejando al desplazarse hacia arriba (con transform, ver applyPostEndOffset) tras la última parada. Es sólido, sin degradado propio: la transición de blanco a oscuro ya no vive aquí, sino de forma PERMANENTE en el propio borde inferior de la escena (ver la viñeta en .scene-wrap-fade, más abajo), que remata exactamente en este mismo gris sólido -por eso encajan sin costura, se mire en el momento que se mire-. */ .after-story-bg{ position:fixed; /* Un pelín más allá del viewport por los cuatro lados (en vez de inset:0 exacto): un margen de seguridad invisible -es fondo sólido, no se nota la diferencia- para que, si la costura con la escena de delante (que sí se desplaza con transform) queda a un subpíxel de redondeo distinto, nunca se cuele una línea del fondo real de la página por debajo. Ampliado a 6px (antes 2px) para cubrir también zoom del navegador y pantallas de muy alta densidad, donde un redondeo de subpíxel puede ser algo mayor que en una pantalla normal. */ inset:-6px; height:calc(100vh + 12px); height:calc(var(--vh, 1vh) * 100 + 12px); height:calc(100svh + 12px); height:calc(100dvh + 12px); /* IMPORTANTE: z-index positivo (no negativo). Con z-index negativo algunos navegadores lo pintan por detrás del propio fondo blanco de , y el panel dejaba de verse. Con z-index:1, en cambio, queda claramente por debajo de .scene-wrap (z-index:2) y por encima del fondo de la página, que es justo el orden que necesitamos. */ z-index:1; background:#ffffff; /* Misma capa GPU estable que .scene-wrap (ver ahí el porqué): así la costura entre ambas nunca se recompone con un subpíxel de más o de menos de un frame a otro. */ transform:translateZ(0); backface-visibility:hidden; } /* ---------- Viñeta permanente: el propio final del fondo blanco ---------- Detalle FIJO del diseño -no un efecto que "aparece" al hacer scroll-: está siempre ahí, en cada foto, desde la primera vez que se pinta la página, exactamente igual que un marco o una viñeta de una revista. Es hija de .scene-wrap (sube y baja exactamente con la escena) y ocupa siempre su borde inferior: el fondo blanco se queda blanco en todo lo demás, y solo en este último tramo -bastante por debajo del centro, donde ya no hay contenido/texto- empieza, de forma suave y progresiva, a virar hacia gris claro, gris medio y finalmente gris oscuro sólido, justo en su borde inferior. Es clave que su ÚLTIMA parada sea exactamente el mismo gris sólido que .after-story-bg (#1c1c1e): así, cuando el usuario desliza más allá de la última foto y la escena descubre el panel oscuro de detrás, ambos coinciden a la perfección sin importar cuánto se haya deslizado -no hace falta calcular ni sincronizar nada por JavaScript, porque los dos únicos colores que se tocan (el remate de esta viñeta y el panel de detrás) son, literalmente, el mismo color fijo-. La curva de opacidad (muchas paradas, un largo tramo inicial 0%-40% totalmente transparente y solo después una curva de aceleración suave) es la que hace que, mirando cualquier foto, la mayor parte de ella se vea perfectamente blanca y solo el remate final, muy abajo, insinúe el oscurecimiento -de forma tan gradual que no se percibe ningún borde ni línea, solo una sensación de profundidad. */ .scene-wrap-fade{ position:absolute; left:0; right:0; /* 1px de solape hacia abajo (en vez de bottom:0 exacto): su color final ya es el mismo gris sólido de .after-story-bg, así que un pelín de solape es invisible pero asegura que nunca quede, por redondeo de subpíxel, una rendija sin cubrir justo en esa costura. */ bottom:-1px; height:calc(28vh + 1px); /* No es una viñeta permanente pintada siempre al 100% en cualquier parada -eso oscurecía de más la 1ª y 2ª posición sin necesidad, ahí no hay nada oscuro debajo que revelar-. Solo se hace visible cerca del último fotograma (ver --fade-opacity en :root y render() en el JS), justo cuando de verdad hace falta para la costura con el panel oscuro. La mezcla suave permanente del borde de la foto (siempre activa, arriba y abajo, en las 3 posiciones) vive aparte, en .scene-pin::before/::after, más arriba. */ opacity:var(--fade-opacity); background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.013) 44%, rgba(255,255,255,0.049) 48%, rgba(255,255,255,0.104) 52%, rgba(255,255,255,0.175) 56%, rgba(255,255,255,0.259) 60%, rgba(255,255,255,0.352) 64%, rgba(255,255,255,0.45) 68%, rgba(255,255,255,0.55) 72%, rgba(255,255,255,0.648) 76%, rgba(255,255,255,0.741) 80%, rgba(255,255,255,0.825) 84%, rgba(255,255,255,0.896) 88%, rgba(255,255,255,0.939) 91%, rgba(255,255,255,0.972) 94%, rgba(255,255,255,0.987) 96%, rgba(255,255,255,0.997) 98%, #ffffff 100%); pointer-events:none; z-index:6; /* Sin clip-path, sin opacity dinámica, sin transición: siempre pintada al 100%, siempre en el sitio. No hay nada que activar ni desactivar por JavaScript -es, literalmente, parte fija del fondo. */ transform:translateZ(0); backface-visibility:hidden; } .scene-hint{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); z-index:20; opacity:0; transition:opacity .4s ease; pointer-events:none; } .scene-hint.visible{ opacity:1; } /* ---------- Panel de Ajustes "Antes/Después" (subida de fotos): dos ranuras ---------- Los dos recuadros cuadrados de subida (sin editar / editada) usan el mismo patrón que otras miniaturas de Ajustes: por defecto invitan a subir, y una vez hay foto se convierten en la miniatura con un aviso de "Cambiar foto" al pasar el ratón. Estas mismas clases (.ba-slots, .ba-slot, .ba-slot-box) las reutiliza también el editor de parejas del comparador de "Mis ediciones" (ver más abajo). */ .ba-slots{ display:flex; align-items:flex-start; gap:14px; margin:16px 0 6px; } .ba-slot{ position:relative; flex:1; max-width:170px; display:flex; justify-content:center; } .ba-slot-box{ position:relative; width:100%; aspect-ratio:3/4; border:1.5px dashed rgba(17,17,17,0.32); border-radius:10px; background:rgba(0,0,0,0.02); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; cursor:pointer; overflow:hidden; transition:border-color .2s ease; } .ba-slot-box:hover{ border-color:var(--accent); } .ba-slot-box svg{ width:22px; height:22px; color:var(--dim); flex:none; } .ba-slot-box span{ font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--dim); text-align:center; padding:0 8px; } .ba-slot-box:hover svg, .ba-slot-box:hover span{ color:var(--accent); } /* Con foto: el recuadro deja de ser un cuadrado 3/4 fijo que recorta la imagen (object-fit:cover) y pasa a ajustarse a la forma real de la foto -vertical, horizontal o cuadrada-, con un tamaño MÁXIMO (ancho: el de la columna, 170px; alto: 230px) que nunca se supera, pero sin forzar la imagen a rellenar ese máximo si es más pequeña o de otra proporción: manda la imagen, el recuadro solo pone el límite. */ .ba-slot-box.has-image{ border-style:solid; border-color:rgba(17,17,17,0.14); background:#000; width:auto; max-width:100%; aspect-ratio:auto; height:auto; max-height:230px; } .ba-slot-box.has-image img{ display:block; width:auto; height:auto; max-width:100%; max-height:230px; object-fit:contain; } .ba-slot-box.is-uploading{ cursor:default; } /* ---------- Puntos de progreso ---------- Indican en qué parada del recorrido está el usuario mientras desliza, como los puntos de un carrusel, pero conectados por una raya vertical (el "track") para que se lean como un único recorrido y no como puntos sueltos. Fijos en el borde derecho, centrados en vertical, fuera del área de la persona y del carrusel de cámaras. Solo visibles en la vista "Resumen" (igual que .scene-hint, ver goToView). Son 4 paradas, no 3: las 3 del recorrido de fotos (WAYPOINTS) más una última que representa el tramo negro/gris final (.after-story-bg), que es un apartado propio del recorrido y no una prolongación de la última foto. El relleno naranja (.scene-progress-line-fill) NO salta de punto en punto: crece de forma continua, fotograma a fotograma, seguiiendo exactamente el mismo progreso que se ve en pantalla (tanto durante el salto animado entre paradas como durante el arrastre en tiempo real del tramo final) -ver updateProgressTrack en el JS-, así el indicador "acompaña" el gesto en vez de limitarse a marcar destinos. */ .scene-progress{ /* Eliminado a petición: ya no se muestra el indicador de progreso (raya vertical + puntos) en el borde derecho. Se deja "display:none" fijo aquí para que ningún cambio de vista en el JS pueda volver a mostrarlo. */ display:none !important; } .scene-progress-track{ position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; } .scene-progress-line, .scene-progress-line-fill{ position:absolute; left:50%; width:2px; transform:translateX(-50%); border-radius:1px; } .scene-progress-line{ background:var(--dim); opacity:0.28; } .scene-progress-line-fill{ top:0; height:0; background:var(--accent); opacity:0.95; } .scene-progress .dot{ position:relative; z-index:1; width:6px; height:6px; border-radius:50%; background:var(--dim); opacity:0.35; transform:scale(1); transition:opacity .35s ease, transform .35s ease, background-color .35s ease; } .scene-progress .dot.passed{ background:var(--accent); opacity:0.6; } .scene-progress .dot.active{ background:var(--accent); opacity:1; transform:scale(1.35); } /* ---------- Continuación en blanco tras la última parada ---------- Al llegar al final del recorrido, en vez de quedar bloqueado, un gesto más hacia adelante revela esta capa blanca deslizándose desde abajo hasta cubrir toda la pantalla, dando la sensación de que la historia "sigue avanzando" hacia un fondo en blanco. Un gesto hacia atrás desde aquí la vuelve a ocultar y regresa a la última imagen. */ .white-end{ position:fixed; inset:0; background:#ffffff; z-index:40; transform:translateY(100%); will-change:transform; } .scene-title{ /* Pegado a la pantalla (fixed): ya no se desplaza con nada. Aparece y desaparece únicamente cambiando de opacidad, en sincronía con el salto de imagen, nunca deslizándose ni subiendo. */ position:fixed; left:3vw; top:7vw; /* Se agranda al máximo posible según el dispositivo, usando tanto el ancho (vw) como el alto (vh) de la pantalla real -manda el más restrictivo-, así en móviles muy altos y estrechos, o en landscape muy bajo y ancho, siempre cabe en la esquina sin desbordar ni tapar a la persona del vídeo, que queda centrada/abajo. */ width:min(48vw, 32vh, 400px); z-index:20; opacity:1; pointer-events:none; background:transparent; } .scene-title img{ display:block; width:100%; height:auto; background:transparent; } /* Mini-texto de presentación debajo del título. Va dentro del mismo contenedor que la imagen del título, así que se mueve, aparece y desaparece exactamente junto con él (arriba, sin tocar nunca a la persona, que queda centrada/abajo). Alineado a la izquierda por defecto porque en móvil el título está a la izquierda. Tipografía: serif elegante de aire místico/de cuento (estilo "Bastelier"), en cursiva para reforzar ese tono narrativo/atemporal. El tamaño usa clamp() -crece y encoge de forma fluida con la pantalla, nunca a saltos- y max-width en ch (no en vw/px), así el bloque de texto siempre cabe dentro del ancho reservado al título y jamás llega a superponerse con la persona, sea cual sea el tamaño de pantalla. */ /* Texto de presentación "Soy fotógrafo...". Antes vivía pegado al título (arriba), así que se movía y desaparecía con el scroll junto con él. Ahora es un elemento independiente, hijo de .scene-pin (la escena fijada con scroll), así que se queda siempre a la altura de la cintura de la persona y NUNCA se mueve ni desaparece mientras dura la escena. Se ancla por la derecha y su ancho se define en vw (no en ch ni px fijos), así se estrecha en proporción directa al ancho real de pantalla -clave para calibrar con precisión el punto exacto donde termina y que jamás llegue a tocar el cuerpo ni la cámara, sea cual sea el dispositivo. */ /* CAMBIO: el texto vivía anclado a la DERECHA (right:4vw), justo donde cae el brazo que sujeta la cámara -> siempre acababa tocándolo o montado encima. Lo movemos a la IZQUIERDA, abajo, a la zona blanca vacía que queda entre la pierna/cadera y el borde izquierdo de la foto (la zona que marcaste en rojo como "correcta"). Ese hueco es fondo real en todos los frames de la secuencia, así el texto nunca invade cuerpo, brazo ni cámara. */ /* Móviles pequeños: título compacto en altura (vh) para no invadir hacia el centro donde suele estar la cara/cuerpo de la persona. */ @media (max-width:480px){ .scene-title{ left:3vw; top:6vw; width:min(56vw, 26vh, 300px); } } /* Tablets tipo iPad en adelante: la imagen del cuerpo se pega a la izquierda, así que el título se mueve a la derecha para no taparla. A partir de aquí usamos un único cálculo continuo (sin más saltos de breakpoint) que combina % de ancho y % de alto reales, así crece de forma proporcional tanto en iPad como en portátil o monitor grande, en vez de quedarse "a medias" en tamaños intermedios como una tablet. */ @media (min-width:768px){ .scene-title{ left:auto; right:3vw; top:7vw; width:min(50vw, 50vh, 780px); } } /* Pantallas grandes (portátiles/monitores anchos): al haber mucho más ancho que alto disponible, dejamos que el alto (vh) sea quien más mande, para que siga creciendo con pantallas más altas sin volverse desproporcionadamente ancha. */ @media (min-width:1200px){ .scene-title{ width:min(34vw, 55vh, 900px); } } .loader{ position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:100; transition:opacity .5s ease; } .loader-bar{ width:160px; height:2px; background:rgba(0,0,0,0.12); margin-top:18px; overflow:hidden; border-radius:2px; } .loader-fill{ height:100%; width:0%; background:var(--accent); transition:width .15s ease-out; } .loader-label{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); } /* Spinner de "cargando" bajo el logo/animación de entrada. Oculto por defecto: solo se enseña (.is-visible, activada por JS) si al acabar la animación de entrada todavía faltan fotos de la nube por llegar, ver waitForSiteAssets() en scroll-engine.js. */ .loader-spinner{ width:26px; height:26px; margin-top:22px; border-radius:50%; border:2.5px solid rgba(0,0,0,0.12); border-top-color:var(--accent); opacity:0; pointer-events:none; transition:opacity .35s ease; } .loader-spinner.is-visible{ opacity:1; animation:loaderSpinnerSpin 0.85s linear infinite; } @keyframes loaderSpinnerSpin{ to{ transform:rotate(360deg); } } /* ---------- Vídeo de preloader (animación de inicio) ---------- */ /* Contenedor que fija el tamaño (igual que antes tenía el