/* ============================================================ CINEMATIC — capa de animaciones cinematográficas sutiles COMPARTIDA por index.html, portafolio.html y tienda.html. Mejora progresiva: el JS (cinematic.js) añade la clase .anim a al cargar. El CSS de reveal/hero/Ken Burns SOLO oculta o anima cuando existe html.anim, así que SIN JS (o si algo falla) TODO el contenido se ve normal y visible. Nada queda invisible. Genérico: el Ken Burns solo aplica al hero del inicio (.hero-bg img); en páginas sin hero simplemente no encuentra el selector y no hace nada. Los selectores de reveal funcionan en cualquier página. ============================================================ */ /* --- Curvas y duraciones compartidas --- */ :root{ --cine-ease:cubic-bezier(.2,.65,.3,1); --cine-dur:.7s; } /* ============================================================ 1) FADE-IN DE ENTRADA DEL HERO (solo inicio) Aparece con fade + leve subida (~0.8s) al cargar. ============================================================ */ html.anim .hero-inner .eyebrow, html.anim .hero-inner .hero-name, html.anim .hero-inner .hero-role, html.anim .hero-inner .hero-tag, html.anim .hero-inner .hero-cta{ opacity:0; transform:translateY(22px); animation:cineHeroIn .8s var(--cine-ease) forwards; } /* stagger sutil entre líneas del hero */ html.anim .hero-inner .eyebrow{animation-delay:.10s} html.anim .hero-inner .hero-name{animation-delay:.20s} html.anim .hero-inner .hero-role{animation-delay:.34s} html.anim .hero-inner .hero-tag{animation-delay:.46s} html.anim .hero-inner .hero-cta{animation-delay:.58s} /* scroll-hint entra al final, muy suave */ html.anim .hero .scroll-hint{ opacity:0; animation:cineFadeOnly 1s ease 1s forwards; } @keyframes cineHeroIn{ to{opacity:1;transform:translateY(0)} } @keyframes cineFadeOnly{ to{opacity:1} } /* ============================================================ 1b) FADE-IN DEL ENCABEZADO DE PÁGINA (portafolio / tienda) Encabezados sin hero a pantalla completa: .pf-head y .shop-hero. Mismo lenguaje: fade + leve subida con stagger entre líneas. ============================================================ */ html.anim .pf-head .wrap > *, html.anim .shop-hero-inner > *{ opacity:0; transform:translateY(20px); animation:cineHeroIn .8s var(--cine-ease) forwards; } html.anim .pf-head .wrap > *:nth-child(1), html.anim .shop-hero-inner > *:nth-child(1){animation-delay:.06s} html.anim .pf-head .wrap > *:nth-child(2), html.anim .shop-hero-inner > *:nth-child(2){animation-delay:.16s} html.anim .pf-head .wrap > *:nth-child(3), html.anim .shop-hero-inner > *:nth-child(3){animation-delay:.26s} html.anim .pf-head .wrap > *:nth-child(4), html.anim .shop-hero-inner > *:nth-child(4){animation-delay:.36s} html.anim .pf-head .wrap > *:nth-child(5), html.anim .shop-hero-inner > *:nth-child(5){animation-delay:.46s} /* ============================================================ 2) SCROLL-REVEAL — secciones y elementos entran al viewport fade + translateY(24px -> 0), con stagger entre hijos. Oculto SOLO bajo html.anim (mejora progresiva). ============================================================ */ html.anim .reveal{ opacity:0; transform:translateY(24px); transition: opacity var(--cine-dur) var(--cine-ease), transform var(--cine-dur) var(--cine-ease); will-change:opacity,transform; } html.anim .reveal.is-in{ opacity:1; transform:none; } /* Stagger entre hijos: el JS pone --i (índice) en cada hijo de un contenedor marcado .reveal-group. */ html.anim .reveal-group > .reveal{ transition-delay:calc(var(--i, 0) * 90ms); } /* ============================================================ 3) KEN BURNS EN EL HERO (solo inicio) Zoom/paneo MUY lento (scale 1 -> 1.08 en 24s), alternate. En páginas sin .hero-bg img no aplica nada. ============================================================ */ html.anim .hero-bg img{ transform-origin:65% 38%; animation:cineKenBurns 24s ease-in-out infinite alternate; will-change:transform; } @keyframes cineKenBurns{ from{transform:scale(1) translate3d(0,0,0)} to{transform:scale(1.08) translate3d(-1.2%, -1%, 0)} } /* ============================================================ 4) GRANO DE PELÍCULA + VIÑETA Overlays fijos a pantalla completa, discretos, pointer-events desactivados. z-index alto pero DEBAJO del nav (60) y menús (55). El JS inyecta estos dos divs dentro de en cada página. ============================================================ */ .cine-grain, .cine-vignette{ position:fixed; inset:0; pointer-events:none; z-index:50; /* nav=60, m-menu=55: queda por debajo */ } /* Grano: textura de ruido SVG repetida, muy sutil */ .cine-grain{ opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; mix-blend-mode:overlay; } /* Movimiento casi imperceptible del grano para que "viva" */ html.anim .cine-grain{ animation:cineGrainShift 6s steps(5) infinite; } @keyframes cineGrainShift{ 0%{transform:translate3d(0,0,0)} 20%{transform:translate3d(-3%, 2%,0)} 40%{transform:translate3d(2%, -3%,0)} 60%{transform:translate3d(-2%, -2%,0)} 80%{transform:translate3d(3%, 1%,0)} 100%{transform:translate3d(0,0,0)} } /* Viñeta: oscurece levemente los bordes */ .cine-vignette{ background:radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.18) 88%, rgba(0,0,0,.34) 100%); } /* ============================================================ 5) HOVERS REFINADOS Subrayado del nav ya existe en styles.css; aquí lo suavizamos y añadimos lift sutil a tarjetas/botones sin chocar con el base. Genérico: cubre tarjetas de las tres páginas (.cat, .lut, .ci, .pf-item, .compat-card, .faq-item). ============================================================ */ .nav-links a::after{ transition:width .45s var(--cine-ease); } /* lift sutil y elegante en botones */ .btn{ transition: transform .4s var(--cine-ease), background-color .35s ease, border-color .35s ease, color .35s ease; } html.anim .btn:hover{transform:translateY(-2px)} /* tarjetas de trabajo del inicio: realce muy leve adicional */ .cat{transition:transform .55s var(--cine-ease),border-color .4s ease} html.anim .cat:hover{transform:translateY(-4px)} /* LUTs: suaviza el lift que ya define styles.css */ .lut{transition:border-color .4s ease,transform .5s var(--cine-ease)} /* tarjetas de contacto e items: respiración suave */ .ci{transition:border-color .4s ease,transform .45s var(--cine-ease)} /* tarjetas del portafolio: lift elegante igual que en el inicio */ .pf-item{transition:transform .55s var(--cine-ease),border-color .4s ease} html.anim .pf-item:hover{transform:translateY(-4px)} /* ============================================================ 6) prefers-reduced-motion: DESACTIVA TODO Ken Burns, reveals, fades, grano en movimiento y lifts. El contenido queda visible y estático. ============================================================ */ @media (prefers-reduced-motion: reduce){ html.anim .hero-inner .eyebrow, html.anim .hero-inner .hero-name, html.anim .hero-inner .hero-role, html.anim .hero-inner .hero-tag, html.anim .hero-inner .hero-cta, html.anim .hero .scroll-hint, html.anim .hero-bg img, html.anim .pf-head .wrap > *, html.anim .shop-hero-inner > *, html.anim .cine-grain{ animation:none !important; } html.anim .hero-inner .eyebrow, html.anim .hero-inner .hero-name, html.anim .hero-inner .hero-role, html.anim .hero-inner .hero-tag, html.anim .hero-inner .hero-cta, html.anim .hero .scroll-hint, html.anim .pf-head .wrap > *, html.anim .shop-hero-inner > *{ opacity:1 !important; transform:none !important; } html.anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } html.anim .btn:hover, html.anim .cat:hover, html.anim .pf-item:hover{transform:none !important} }