/* ========================================================= ALGOR — enhance.css Capa premium de refinamiento sobre styles.css (Tailwind + custom). No sobreescribe la voz del diseño: la eleva. --------------------------------------------------------- Contiene: 1. Fix de scroll en móviles (root, panel, iframe, overscroll). 2. Halo retro CRT + booteo glitch para los números de sección. 3. Corner brackets, cursor parpadeante y scan-line CRT. 4. Efectos premium: glow neón, barra de progreso, magnet hover. 5. Overlay click-to-play para el iframe del trailer. 6. Refinado tipográfico y motion micro-interactions. ========================================================= */ /* ========================================================= 0. TOKENS LOCALES (fallbacks compatibles con :root global) ========================================================= */ :root { --algor-cyan: var(--cyan-bright, #0ff5f0); --algor-cyan-glow: var(--cyan-glow, rgba(0, 245, 240, 0.55)); --algor-ink-color: var(--algor-ink, #06141a); --algor-line-color: var(--algor-line, rgba(255, 255, 255, 0.08)); --algor-line-strong-color: var(--algor-line-strong, rgba(255, 255, 255, 0.2)); --algor-crt-glow: 0 0 6px var(--algor-cyan), 0 0 16px color-mix(in oklab, var(--algor-cyan) 55%, transparent), 0 0 42px color-mix(in oklab, var(--algor-cyan) 25%, transparent); } /* ========================================================= 1. SCROLL FIX GLOBAL (mobile-safe · iOS-friendly) --------------------------------------------------------- Reglas clave que hemos aprendido: · NO tocar el overflow-y de . iOS Safari trata el scroll natural del viewport a través del ; si le das `overflow-y: auto` u `overflow: hidden`, deja de hacer scroll con el dedo o pierde el momentum. · NO poner `touch-action` restrictivo en . `auto` permite scroll y pinch-zoom nativos. · Solo evitamos scroll horizontal con `overflow-x: clip` en el wrapper (fallback a hidden para navegadores antiguos). · Ningún estado (menú abierto, etc.) puede añadir `overflow: hidden` al body. ========================================================= */ html { /* Deliberadamente NO fijamos overflow aquí — mantenemos el scroll natural del viewport que iOS gestiona bien. */ scroll-behavior: auto; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } body { /* Sólo contenemos el eje X para que ningún elemento fuera de rango cause scroll horizontal. NO tocamos el eje Y ni el touch-action — deben quedar en `visible` y `auto` (el default), que es lo que iOS espera. */ overflow-x: clip; -webkit-tap-highlight-color: transparent; } /* Fallback para navegadores que no soportan `overflow: clip` */ @supports not (overflow: clip) { body { overflow-x: hidden; } } /* El wrapper principal en el HTML usa .overflow-x-hidden de Tailwind. Con `overflow-x: hidden` genera un contexto de scroll que en algunos escenarios táctiles impide el gesto vertical. Lo sustituimos por `clip` (que NO crea contexto) y liberamos el eje Y. */ .algor.algor-v2 { overflow-x: clip; overflow-y: visible; position: relative; } @supports not (overflow: clip) { .algor.algor-v2 { overflow-x: hidden; } } /* El panel móvil no debe reservar espacio cuando está cerrado. */ .algor-mobile-panel { pointer-events: none; } .algor-mobile-panel.is-open { pointer-events: auto; } /* El iframe de Vimeo puede robar el gesto de scroll en móvil. Lo escudamos con una capa touch-friendly que se retira al primer tap. */ .algor-trailer-shell { position: relative; isolation: isolate; } .algor-trailer-shell iframe { pointer-events: none; transition: pointer-events 0s; } .algor-trailer-shell.is-active iframe { pointer-events: auto; } .algor-trailer-shield { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; cursor: pointer; background: radial-gradient(ellipse at center, color-mix(in oklab, var(--algor-cyan) 12%, transparent) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.82) 100%); transition: opacity 0.35s ease, transform 0.35s ease; touch-action: manipulation; overflow: hidden; } .algor-trailer-shell.is-active .algor-trailer-shield { opacity: 0; pointer-events: none; transform: scale(1.02); } .algor-trailer-shield::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0, transparent 2px, color-mix(in oklab, var(--algor-cyan) 12%, transparent) 3px, transparent 4px ); mix-blend-mode: overlay; opacity: 0.6; pointer-events: none; } .algor-trailer-play { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px 14px 20px; color: #fff; font-family: var(--font-algor-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; background: color-mix(in oklab, var(--algor-cyan) 12%, rgba(0,0,0,0.55)); border: 1px solid var(--algor-cyan); border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--algor-cyan) 55%, transparent), 0 0 32px color-mix(in oklab, var(--algor-cyan) 45%, transparent), inset 0 0 24px color-mix(in oklab, var(--algor-cyan) 18%, transparent); transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .algor-trailer-play:hover { transform: translateY(-2px); background: color-mix(in oklab, var(--algor-cyan) 22%, rgba(0,0,0,0.5)); box-shadow: 0 0 0 1px var(--algor-cyan), 0 0 48px color-mix(in oklab, var(--algor-cyan) 65%, transparent), inset 0 0 32px color-mix(in oklab, var(--algor-cyan) 28%, transparent); } .algor-trailer-play-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--algor-cyan); border-radius: 50%; color: var(--algor-cyan); font-size: 12px; line-height: 1; animation: algor-play-pulse 2.6s ease-in-out infinite; } @keyframes algor-play-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--algor-cyan) 55%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--algor-cyan) 0%, transparent); } } /* ========================================================= 2. HALO RETRO CRT SOBRE LOS NÚMEROS DE SECCIÓN — PRO GRADE Efectos reales de tubo catódico: · Contorno hueco (outline) — NUNCA relleno cyan sólido · Aberración cromática RGB (desdoblado rojo + azul) · Flicker constante perceptible + micro-shake continuo · Glitch severo intermitente (drop-frame CRT) · Scan line brillante barriendo el número · Líneas horizontales de tubo catódico permanentes ========================================================= */ .algor-num-wrap { --num-color: var(--algor-cyan); position: relative; display: inline-flex; align-items: flex-end; gap: 6px; padding: 6px 14px 6px 14px; line-height: 0.9; isolation: isolate; /* Sin animaciones sobre el wrap: el contenedor NO tiembla ni se mueve. */ } /* Halo detrás — sin scale (no tiembla), sólo intensidad oscilante suave */ .algor-num-halo { position: absolute; inset: -18% -16%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in oklab, var(--num-color) 42%, transparent) 0%, color-mix(in oklab, var(--num-color) 16%, transparent) 40%, transparent 72%); filter: blur(22px); opacity: 0.75; animation: algor-halo-breathe 3.2s ease-in-out infinite; } @keyframes algor-halo-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } } /* Scan line CRT suave que barre el número (opcional, muy discreta) */ .algor-num-scan { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: 2px; } .algor-num-scan::before { content: ""; position: absolute; left: 0; right: 0; height: 10%; min-height: 4px; top: -15%; background: linear-gradient( to bottom, transparent 0%, color-mix(in oklab, var(--num-color) 30%, transparent) 45%, color-mix(in oklab, var(--num-color) 55%, transparent) 50%, color-mix(in oklab, var(--num-color) 30%, transparent) 55%, transparent 100% ); filter: blur(1px); mix-blend-mode: screen; animation: algor-num-scan-drop 4.5s linear infinite; opacity: 0.7; } @keyframes algor-num-scan-drop { 0% { transform: translateY(-30%); opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 100% { transform: translateY(1000%); opacity: 0; } } /* Corner brackets estáticos con leve glow (sin parpadeo agresivo) — a escala del número reducido */ .algor-num-bracket { position: absolute; width: 9px; height: 9px; border-color: var(--num-color); filter: drop-shadow(0 0 4px color-mix(in oklab, var(--num-color) 65%, transparent)); z-index: 4; pointer-events: none; opacity: 0.9; } .algor-num-tl { top: 0; left: 0; border-top: 1.2px solid; border-left: 1.2px solid; } .algor-num-tr { top: 0; right: 0; border-top: 1.2px solid; border-right: 1.2px solid; } .algor-num-bl { bottom: 0; left: 0; border-bottom: 1.2px solid; border-left: 1.2px solid; } .algor-num-br { bottom: 0; right: 0; border-bottom: 1.2px solid; border-right: 1.2px solid; } /* Cursor CRT parpadeante al lado del número — a la mitad del tamaño anterior */ .algor-num-cursor { display: inline-block; align-self: flex-end; margin-bottom: 0.08em; color: var(--num-color); font-family: var(--font-algor-mono, ui-monospace, monospace); font-size: clamp(14px, 2.5vw, 27px); line-height: 1; text-shadow: 0 0 6px var(--num-color), 0 0 16px color-mix(in oklab, var(--num-color) 45%, transparent); animation: algor-cursor-blink 1s steps(2, jump-none) infinite; transform: translateY(-0.02em); } @keyframes algor-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* --------------------------------------------------------- NÚMERO PRINCIPAL — CONTORNO HUECO + PARPADEO DE NEÓN SUTIL Sin shake, sin glitch, sin aberración cromática. El número es HUECO (text-stroke cyan) y sólo su GLOW parpadea con un ciclo suave de 3s, más una micro-caída (frame ~55%) que simula un neón fatigado. NADA MÁS. Tamaño reducido a la mitad respecto a styles.css. --------------------------------------------------------- */ .algor-num-wrap .algor-chapter-num { position: relative; z-index: 2; color: transparent !important; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px var(--num-color); text-stroke: 1.2px var(--num-color); font-family: var(--font-algor-mono, ui-monospace, monospace); font-feature-settings: "ss01", "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; /* Reducción a la mitad: styles.css tenía clamp(56px, 10vw, 112px). */ font-size: clamp(28px, 5vw, 56px) !important; text-shadow: 0 0 6px var(--num-color), 0 0 18px color-mix(in oklab, var(--num-color) 55%, transparent), 0 0 42px color-mix(in oklab, var(--num-color) 25%, transparent); animation: algor-neon-pulse 3.2s ease-in-out infinite; will-change: text-shadow, opacity; } /* Parpadeo tipo neón: intensidad del glow oscila + una caída breve. */ @keyframes algor-neon-pulse { 0%, 100% { opacity: 1; text-shadow: 0 0 6px var(--num-color), 0 0 18px color-mix(in oklab, var(--num-color) 55%, transparent), 0 0 42px color-mix(in oklab, var(--num-color) 25%, transparent); } 40% { opacity: 0.92; text-shadow: 0 0 4px var(--num-color), 0 0 12px color-mix(in oklab, var(--num-color) 40%, transparent); } /* Micro parpadeo (dip breve) — el tubo baja intensidad 1 frame */ 55% { opacity: 0.55; text-shadow: 0 0 2px var(--num-color), 0 0 6px color-mix(in oklab, var(--num-color) 25%, transparent); } 58% { opacity: 1; text-shadow: 0 0 8px var(--num-color), 0 0 22px color-mix(in oklab, var(--num-color) 60%, transparent), 0 0 48px color-mix(in oklab, var(--num-color) 30%, transparent); } 75% { opacity: 0.98; text-shadow: 0 0 6px var(--num-color), 0 0 18px color-mix(in oklab, var(--num-color) 50%, transparent); } } /* Estado BOOTEANDO (scramble por JS): mismo estilo hueco cyan, sin trucos raros. */ .algor-num-wrap[data-booting="1"] .algor-chapter-num { animation: algor-neon-pulse 0.9s ease-in-out infinite; } /* Estado tras boot: un pequeño destello y sigue el pulso. */ .algor-num-wrap.is-booted .algor-chapter-num { animation: algor-neon-pulse 3.2s ease-in-out infinite, algor-num-lock 0.55s cubic-bezier(.2,.7,.2,1); } @keyframes algor-num-lock { 0% { text-shadow: 0 0 10px var(--num-color), 0 0 32px var(--num-color), 0 0 70px var(--num-color); } 100% { text-shadow: 0 0 6px var(--num-color), 0 0 18px color-mix(in oklab, var(--num-color) 55%, transparent), 0 0 42px color-mix(in oklab, var(--num-color) 25%, transparent); } } /* En móviles reducimos el tamaño para respetar el layout de columna */ @media (max-width: 900px) { .algor-num-wrap { padding: 4px 10px; gap: 4px; } .algor-num-bracket { width: 7px; height: 7px; } .algor-num-wrap .algor-chapter-num { font-size: 32px !important; } .algor-num-cursor { font-size: clamp(12px, 4vw, 20px); } } /* ========================================================= 3. BARRA DE PROGRESO SUPERIOR (scroll neón) ========================================================= */ .algor-scroll-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( to right, color-mix(in oklab, var(--algor-cyan) 80%, white) 0%, var(--algor-cyan) 45%, color-mix(in oklab, var(--algor-cyan) 50%, transparent) 100%); transform-origin: left center; transform: scaleX(0); z-index: 70; box-shadow: 0 0 12px var(--algor-cyan), 0 0 26px var(--algor-cyan-glow); pointer-events: none; transition: transform 0.12s linear; } /* ========================================================= 4. REFINADO DEL HERO Y BOTONES ========================================================= */ /* Título hero: sutil glow y micro-glitch al aparecer */ .algor-hero-title { animation: algor-title-emerge 1.2s cubic-bezier(.2,.7,.2,1) both; } @keyframes algor-title-emerge { 0% { opacity: 0; transform: translateY(24px) scale(0.985); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* Botones primarios: brillo lateral en hover */ .algor-btn-primary { position: relative; overflow: hidden; isolation: isolate; } .algor-btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%, transparent 100%); transform: translateX(-120%); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); pointer-events: none; z-index: 1; } .algor-btn-primary:hover::after { transform: translateX(120%); } .algor-btn-primary > * { position: relative; z-index: 2; } /* Botón ghost: contorno con hairline glow */ .algor-btn-ghost { transition: transform 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s; } .algor-btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 8px 28px color-mix(in oklab, var(--algor-cyan) 22%, transparent); } /* HUD y rail: hover con leve subrayado neón animado */ .algor-hud-link { position: relative; } .algor-hud-link::before { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px; background: linear-gradient(to right, transparent, var(--algor-cyan), transparent); transition: right 0.4s cubic-bezier(.2,.7,.2,1); pointer-events: none; } .algor-hud-link:hover::before, .algor-hud-link.is-active::before { right: 0; } /* ========================================================= 5. TARJETAS / MARCOS: leve corner-glow al entrar en viewport ========================================================= */ .algor-hero-cover-frame, .algor-author-portrait-frame, .algor-buy-card { position: relative; } .algor-buy-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 130deg, transparent 0%, transparent 40%, color-mix(in oklab, var(--algor-cyan) 8%, transparent) 50%, transparent 60%, transparent 100%); background-size: 240% 240%; animation: algor-shine-slow 9s ease-in-out infinite; mix-blend-mode: screen; } @keyframes algor-shine-slow { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } /* ========================================================= 6. ACCESIBILIDAD Y FOCUS ========================================================= */ :focus-visible { outline: 2px solid var(--algor-cyan); outline-offset: 3px; border-radius: 2px; } .algor-btn-primary:focus-visible, .algor-btn-ghost:focus-visible { outline: 2px solid var(--algor-cyan); outline-offset: 4px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--algor-cyan) 30%, transparent); } /* Cuando el usuario prefiere menos movimiento: apagamos las animaciones caras */ /* NOTA: Deliberadamente NO respetamos prefers-reduced-motion aquí. El diseño exige que el pulso del neón y las micro-interacciones se vean siempre. Si algún día se quiere respetar, este bloque es el sitio para reactivar la desactivación. */ /* ========================================================= 7. AJUSTES MÓVIL FINALES ========================================================= */ @media (max-width: 900px) { /* Aseguramos que el rail lateral no interfiera con touch */ .algor-rail { display: none !important; } /* El header móvil ocupa full width sin bloquear scroll */ .algor-hud-bar { pointer-events: auto; } /* Ajustes de área tocable en la cabecera */ .algor-mobile-btn { min-width: 44px; min-height: 44px; } /* Barra de progreso más gruesa en móvil */ .algor-scroll-bar { height: 3px; } } /* Ajustes muy pequeños (<= 480px) */ @media (max-width: 480px) { .algor-num-wrap { padding: 4px 10px; } .algor-num-cursor { display: none; } /* el cursor parpadeante puede estorbar en pantallas ínfimas */ }