' */ .glass-edge{ border-color:transparent; } .glass-edge::before{ content:'';position:absolute;inset:0;border-radius:inherit;padding:1px; background:var(--glass-edge-light); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none; } html[data-theme="light"] .glass-edge::before{ background:linear-gradient(135deg,rgba(10,20,40,.28) 0%,rgba(10,20,40,.08) 22%,rgba(10,20,40,.02) 45%,transparent 62%,rgba(10,20,40,.05) 100%); } /* ══ SPECULAR SWEEP — brillo diagonal estático + barrido al tocar ══ */ .glass-sweep{ position:relative; overflow:hidden; } .glass-sweep::after{ content:'';position:absolute;inset:0;pointer-events:none; background:var(--glass-sweep); transform:translateX(-120%); transition:transform .7s var(--ease-out); } .glass-sweep:active::after, .glass-sweep.sweep-play::after{ transform:translateX(120%); } @media(prefers-reduced-motion:reduce){ .glass-sweep::after{ transition:none; } } /* ══════════ INSTRUMENTOS (anillos de precisión, DESIGN-DIRECTION §2) ══════════ */ /* .instrument envuelve un ring-gauge; agrega bisel con tick marks (conic-gradient enmascarado) */ .instrument{ position:relative; display:inline-flex; align-items:center; justify-content:center; --instrument-accent:var(--score-readiness); } /* Bisel fino: 60 ticks de 1px estilo cronógrafo suizo */ .instrument::before{ content:'';position:absolute;inset:-9%;border-radius:50%;pointer-events:none; background: repeating-conic-gradient(from 0deg,rgba(255,255,255,.5) 0deg 0.55deg,transparent 0.55deg 6deg); -webkit-mask:radial-gradient(circle,transparent 0 84%,#fff 86% 89%,transparent 91% 100%); mask:radial-gradient(circle,transparent 0 84%,#fff 86% 89%,transparent 91% 100%); opacity:.5; } /* Ticks mayores cada 5 (12 marcas), como los índices de hora de un cronógrafo real, más el punto de origen a las 12 */ .instrument::after{ content:'';position:absolute;inset:-9%;border-radius:50%;pointer-events:none; background: repeating-conic-gradient(from 0deg,rgba(255,255,255,.9) 0deg 0.9deg,transparent 0.9deg 30deg), conic-gradient(from -1.4deg,var(--instrument-accent) 0deg 2.8deg,transparent 2.8deg 360deg); -webkit-mask:radial-gradient(circle,transparent 0 83%,#fff 85% 89.5%,transparent 91.5% 100%); mask:radial-gradient(circle,transparent 0 83%,#fff 85% 89.5%,transparent 91.5% 100%); opacity:.65; filter:drop-shadow(0 0 2px color-mix(in srgb,var(--instrument-accent) 40%,transparent)); } html[data-theme="light"] .instrument::before{ opacity:.22; } html[data-theme="light"] .instrument::after{ opacity:.4; } .instrument .ring-gauge{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.32)); } .instrument .ring-gauge .track{ stroke:var(--border-strong); opacity:.9; } .instrument .ring-gauge .fill{ stroke:var(--instrument-accent); filter:drop-shadow(0 0 6px color-mix(in srgb,var(--instrument-accent) 55%,transparent)); } /* Variantes de acento por score, aplicar como clase adicional en .instrument */ .instrument--readiness{ --instrument-accent:var(--score-readiness); } .instrument--strain{ --instrument-accent:var(--score-strain); } .instrument--sleep{ --instrument-accent:var(--score-sleep); } .instrument--momentum{ --instrument-accent:var(--score-momentum); } .instrument--fuel{ --instrument-accent:var(--score-fuel); } /* Variante hero (Núcleo, splash): bisel más presente y halo del acento propio */ .instrument--lg::before{ opacity:.62; } .instrument--lg::after{ opacity:.8; } /* Profundidad base del ring-gauge SIN envoltura .instrument (fallback para módulos que aún no la usan) */ .ring-gauge{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.24)); } /* ══════════ TIPOGRAFÍA DE INSTRUMENTO ══════════ */ .sys-label{ font-family:var(--font-heading); font-weight:600; text-transform:uppercase; font-size:clamp(10px,2.6vw,11px); letter-spacing:.14em; color:var(--muted); } .mega-num{ font-family:var(--font-heading); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; /* AUDITORIA-MOVIL Ola 4: 13vw en 390px = 50px+; bajado a 9vw (techo 3.4rem) para que el número hero no domine la pantalla. En 390px queda ~35px (<=36px, dentro del criterio de la ola). */ font-size:clamp(2rem,9vw,3.4rem); line-height:1; } /* Utilidad: el número "late" una vez al mejorar (DESIGN-DIRECTION §motion) — agregar/quitar clase desde JS al detectar delta positivo */ .mega-num-pulse{ animation:megaNumPulse .5s var(--ease-out) both; } @keyframes megaNumPulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.08); } 100%{ transform:scale(1); } } @media(prefers-reduced-motion:reduce){ .mega-num-pulse{ animation:none; } } /* ══════════ ESTADO "DÍA ÉPICO" — orbe/acentos champagne (DESIGN-DIRECTION §6, game.js) ══════════ */ .dia-epico .orb-wrap .orb{ background:radial-gradient(circle at 38% 36%,var(--champagne-soft) 0%,rgba(4,16,31,.95) 65%); border-color:rgba(200,164,93,.4); box-shadow:var(--champagne-glow); } .dia-epico .instrument{ --instrument-accent:var(--champagne); } .dia-epico.halo::before{ background:radial-gradient(circle at 50% 42%,rgba(200,164,93,.28) 0%,rgba(200,164,93,.1) 32%,transparent 68%); } .dia-epico-flare{ position:fixed; inset:0; z-index:9998; pointer-events:none; background:radial-gradient(circle at 50% 40%,rgba(200,164,93,.5),transparent 60%); opacity:0; animation:flareOnce 1.1s var(--ease-out) both; } @keyframes flareOnce{ 0%{ opacity:0; } 18%{ opacity:1; } 100%{ opacity:0; } } @media(prefers-reduced-motion:reduce){ .dia-epico-flare{ animation-duration:.4s; } } /* ══════════ TRANSICIONES SHARED-AXIS del router ══════════ */ /* Blur leve en el enter (emil-design-eng: enmascara el crossfade, funde la pantalla nueva sobre la anterior en vez de "cortar") */ /* P0-3: los ENTER usan 'backwards', no 'both'. El estado final del keyframe (transform:translateX(0); filter:blur(0)) YA es el estado natural del elemento montado; 'both' persistía transform:matrix() y filter computados para siempre, creando stacking context/containing block permanentes (misma trampa del menú drawer) que degradan el backdrop-filter del header. 'backwards' cubre el primer frame y suelta el estilo al terminar: cero residuo. Los EXIT quedan en 'both' porque su elemento se desmonta enseguida (no persiste nada). */ .screen-enter{ animation:screenEnterX .32s var(--ease) backwards; } .screen-enter-back{ animation:screenEnterXBack .32s var(--ease) backwards; } .screen-exit{ animation:screenExitX .2s var(--ease-exit) both; } .screen-exit-back{ animation:screenExitXBack .2s var(--ease-exit) both; } @keyframes screenEnterX{ from{ opacity:0; transform:translateX(14px); filter:blur(3px); } to{ opacity:1; transform:translateX(0); filter:blur(0); } } @keyframes screenEnterXBack{ from{ opacity:0; transform:translateX(-14px); filter:blur(3px); } to{ opacity:1; transform:translateX(0); filter:blur(0); } } @keyframes screenExitX{ from{ opacity:1; transform:translateX(0); } to{ opacity:0; transform:translateX(-14px); } } @keyframes screenExitXBack{ from{ opacity:1; transform:translateX(0); } to{ opacity:0; transform:translateX(14px); } } @media(prefers-reduced-motion:reduce){ /* Ola 1B: la transición de pantalla es movimiento ESENCIAL. Fade real de 200ms (no 0.01ms): !important + selector de clase (mayor especificidad que el nuke *:not(...)) garantiza que la duración sobreviva. La app se siente viva y calmada, nunca muerta. */ .screen-enter,.screen-enter-back,.screen-exit,.screen-exit-back{ animation:fadeIn .2s var(--ease) both!important; } } /* ══ Variantes --left/--right, 240ms (DIRECCION-ELITE §6) ══ Mismo shared-axis que .screen-enter/-back arriba, pero con nombre explícito de dirección para que Ola 2 (shell/router) elija el sentido por orden de tabs sin adivinar "back" vs "forward": tab a la derecha del actual -> entra desde la derecha (--right calls in from right = contenido llega deslizando desde la derecha); tab a la izquierda -> --left. 240ms exacto (spec), ease estándar del sistema (--ease), con el mismo blur-mask del enter y salida más rápida que la entrada (asimetría deliberada: entrar se nota, salir es rápido). */ .screen-enter--left{ animation:screenEnterLeft .24s var(--ease) backwards; } .screen-enter--right{ animation:screenEnterRight .24s var(--ease) backwards; } .screen-exit--left{ animation:screenExitLeft .18s var(--ease-exit) both; } .screen-exit--right{ animation:screenExitRight .18s var(--ease-exit) both; } @keyframes screenEnterLeft{ from{ opacity:0; transform:translateX(-18px); filter:blur(3px); } to{ opacity:1; transform:translateX(0); filter:blur(0); } } @keyframes screenEnterRight{ from{ opacity:0; transform:translateX(18px); filter:blur(3px); } to{ opacity:1; transform:translateX(0); filter:blur(0); } } @keyframes screenExitLeft{ from{ opacity:1; transform:translateX(0); } to{ opacity:0; transform:translateX(18px); } } @keyframes screenExitRight{ from{ opacity:1; transform:translateX(0); } to{ opacity:0; transform:translateX(-18px); } } @media(prefers-reduced-motion:reduce){ .screen-enter--left,.screen-enter--right,.screen-exit--left,.screen-exit--right{ animation:fadeIn .2s var(--ease) both!important; } } /* ══ ENTRADA CON PROFUNDIDAD (dock vivo) ══ La pantalla nueva EMERGE desde el fondo: desliza según dirección (izq/der), escala desde 0.965 y un blur leve que se resuelve. Como .screen-enter--depth va JUNTO a --left/--right sobre el mismo elemento y ambas son igual de específicas, se define la animación en el selector COMPUESTO para que el translateX direccional y el scale+blur vivan en UN solo keyframe (no compiten por la propiedad 'animation'). fill-mode 'backwards' => cero residuo de transform/filter (P0-3); app.js quita las clases en animationend como defensa extra. Sus capas (header vs contenido) llegan a velocidades ligeramente distintas: parallax sutil. */ .screen-enter--depth.screen-enter--right{ animation:screenDepthRight .34s var(--ease) backwards; } .screen-enter--depth.screen-enter--left{ animation:screenDepthLeft .34s var(--ease) backwards; } @keyframes screenDepthRight{ from{ opacity:0; transform:translateX(18px) scale(.965); filter:blur(4px); } 60%{ opacity:1; filter:blur(0); } to{ opacity:1; transform:translateX(0) scale(1); filter:blur(0); } } @keyframes screenDepthLeft{ from{ opacity:0; transform:translateX(-18px) scale(.965); filter:blur(4px); } 60%{ opacity:1; filter:blur(0); } to{ opacity:1; transform:translateX(0) scale(1); filter:blur(0); } } /* Parallax de capas: header entra un pelín antes y desde un poco más arriba; contenido un poco después y desde más abajo (plano fijo vs plano de datos). */ .screen-layer-hd{ animation:screenLayerHd .38s var(--ease) backwards; } .screen-layer-body{ animation:screenLayerBody .42s var(--ease) 40ms backwards; } @keyframes screenLayerHd{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } @keyframes screenLayerBody{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } @media(prefers-reduced-motion:reduce){ .screen-enter--depth.screen-enter--right,.screen-enter--depth.screen-enter--left{ animation:fadeIn .2s var(--ease) both!important; } .screen-layer-hd,.screen-layer-body{ animation:none; } } /* ══ .pressable — press-scale global (DIRECCION-ELITE §6, emil-design-eng: feedback instantáneo) ══ Agregar junto a cualquier botón/card accionable que aún no tenga su propio :active (ej. .glass-card usado como fila clicable, .smart-card, .list-row, .mas-item ya tiene el suyo). scale(0.97) es sutil (rango recomendado 0.95-0.98) y compuesto sobre transform existente vía transform-origin:center default. 80ms: más rápido que el estándar de botones (100-160ms) porque es SOLO el feedback de presión, no una transición de entrada/salida. */ .pressable{ transition:transform 80ms var(--ease-out); } .pressable:active{ transform:scale(.97); } @media(prefers-reduced-motion:reduce){ .pressable{ transition:none; } .pressable:active{ transform:none; } } /* ══════════════════════════════════════════════════════════════ ESCRITORIO (Ola 3, BLUEPRINT-REDISENO §3.2) — cierra el gap de --max-w:560px. Móvil sigue siendo el ancho de lectura de 560px (iPhone primero); aquí solo AMPLIAMOS el techo para pantallas anchas, nunca angostamos algo que ya funciona en móvil. ══════════════════════════════════════════════════════════════ */ @media(min-width:1024px){ :root{ --h-pad:clamp(32px,4vw,64px); --max-w:var(--max-w-desktop); } } /* ═══════════════════════════════════════════════════════════════════════════ LANDING-A-APP · Fundación L0 (docs/LANDING-A-APP-DESIGN.md §1) El lenguaje de /unete/ (la landing que Roberto ama) tokenizado para la app. ADITIVO: cero cambio visual hasta que un módulo consuma estas variables. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* Aire Whoop en tres escalas (proporción ~3:1.5:1), la única fuente de separación */ --gap-zone:clamp(28px,7vw,40px); /* entre zonas de un root; UNA idea por zona */ --gap-cards:14px; /* entre cards hermanas dentro de una zona */ --gap-intra:12px; /* entre bloques dentro de una card */ --gap-micro:6px; /* label a valor, micro */ /* Cuerpo navy del material deep (la card tiene MASA, no es humo). Flipa en claro. */ --glass-deep-tint:rgba(11,20,44,.5); } html[data-theme="light"]{ --glass-deep-tint:rgba(255,255,255,.6); } @media(prefers-color-scheme:light){ html[data-theme="system"]{ --glass-deep-tint:rgba(255,255,255,.6); } }