/* ============================================================ Glassmorphisme Skin — animations.css Blur-dissolve transition overlay, light-streak pseudo-element scaffold, reduced-motion guards, mobile overrides. Loaded as third glass CSS file (after tokens + components). z-index hierarchy: content < glass panels < blur overlay 10000 ============================================================ */ /* ── BLUR-DISSOLVE TRANSITION OVERLAY ── Fixed overlay matching skin background for seamless blur. Hidden by default. Gate 4 sets page-transition-active class on when navigating between pages — overlay becomes visible to cover the viewport during transition. Safety timeout: if JS never removes class, hide after 5s. ──────────────────────────────────────────────────────── */ .glass-blur { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 18, 25, 0.85); visibility: hidden; opacity: 0; pointer-events: none; } /* Light theme overlay: match light background */ [data-theme="light"] .glass-blur { background: rgba(245, 244, 238, 0.85); } /* Navigated load gate state: overlay covers viewport */ html.page-transition-active[data-skin="glass"] .glass-blur { visibility: visible; opacity: 1; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); pointer-events: all; animation: glass-safety-fade-out 0s ease 5s forwards; } @keyframes glass-safety-fade-out { to { visibility: hidden; opacity: 0; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); pointer-events: none; } } /* ── LIGHT-STREAK PSEUDO-ELEMENT SCAFFOLD ── Diagonal sweep gradient on glass panels. JS (glass.js) animates translateX via GSAP ScrollTrigger. will-change only applied during active animation via .glass-streak-active class toggled by JS. ──────────────────────────────────────────────────────── */ .glass-streak-target { position: relative; overflow: hidden; } .glass-streak-target::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none; z-index: 2; } /* JS toggles this class during animation for GPU promotion */ .glass-streak-active::after { will-change: transform; } /* ── INJECTED LIGHT-STREAK SPAN ── glass.js injects into panels instead of animating the ::after pseudo-element (GSAP cannot directly target pseudo-elements). Same gradient, animated via GSAP translateX(-100% to 200%). ──────────────────────────────────────────────────────── */ [data-skin="glass"] .glass-streak { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%); transform: translateX(-100%); } /* ── PREFERS-REDUCED-MOTION ── Disable ALL glass animations for accessibility. ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Blur-dissolve transition: no filter animation */ .glass-blur { transition: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.page-transition-active[data-skin="glass"] .glass-blur { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Glass panel hover: no scale or transition */ [data-skin="glass"] .service-card, [data-skin="glass"] .sector-card, [data-skin="glass"] .article-card, [data-skin="glass"] .value-card, [data-skin="glass"] .team-card, [data-skin="glass"] .stat-card { transform: none !important; transition: none !important; } /* Gradient rim rotation: no transition */ [data-skin="glass"] .service-card::before, [data-skin="glass"] .sector-card::before, [data-skin="glass"] .article-card::before, [data-skin="glass"] .value-card::before, [data-skin="glass"] .team-card::before, [data-skin="glass"] .stat-card::before { transition: none !important; } /* Light streak: hidden entirely */ .glass-streak-target::after, [data-skin="glass"] .glass-streak { display: none; } } /* ── MOBILE OVERRIDES ── Light-streak disabled (too small to notice, save GPU). Blur-dissolve: simple opacity, no backdrop-filter blur. ──────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Disable light-streak on mobile */ .glass-streak-target::after, [data-skin="glass"] .glass-streak { display: none; } /* Blur-dissolve: opacity-only on mobile (no backdrop-filter blur) */ html.page-transition-active[data-skin="glass"] .glass-blur { -webkit-backdrop-filter: none; backdrop-filter: none; } }