/* ═══════════════════════════════════════════════════════════════════════════
AXION IT — HERO SIGNATURE MOMENT
"System Activation" — one-shot visual event for the homepage hero only.
Target selectors (already existing in the DOM):
.section--hero → homepage hero section (index.html)
.hero → inner wrapper
.hero-logo → existing logo ![]()
(no replacement, only enhanced)
#hero-heading → existing H1 (no text change, only light overlay)
Only accent-color-derived light, no new hues, no layout shift.
GPU-friendly: transform, opacity, filter, background-position only.
═══════════════════════════════════════════════════════════════════════════ */
/* Declared property so --ax-aura-op can interpolate smoothly in modern browsers.
(Older browsers simply snap between states — still looks clean.) */
@property --ax-aura-op {
syntax: '';
inherits: true;
initial-value: 0;
}
:root {
--ax-hero-scan-dur: 1.4s;
--ax-hero-sweep-dur: 1.6s;
--ax-aura-op: 0; /* controls logo drop-shadow aura intensity */
--ax-hx: 50%; /* cursor x within hero (updated by JS) */
--ax-hy: 55%; /* cursor y within hero (updated by JS) */
}
/* Containment context for overlays. Existing background/colors preserved. */
.section--hero { position: relative; isolation: isolate; }
.section--hero .hero { position: relative; }
/* ═══════════════════════════════════════════════════════════════════════
A) LOGO — "SIGNAL LOCK-IN"
A thin scanning line passes top-to-bottom through the existing logo
silhouette (clipped via mask to the logo SVG itself). Immediately after,
a controlled engineered aura settles around the logo.
═══════════════════════════════════════════════════════════════════════ */
/* Scan overlay: placed by JS exactly over .hero-logo's bounding box.
Masked to the logo shape so the scan line only shows on the logo. */
.ax-logo-scan {
position: absolute;
pointer-events: none;
z-index: 2;
opacity: 0;
/* Clip the scan to the exact logo silhouette */
-webkit-mask-image: url('assets/svgviewer-output-3.svg');
mask-image: url('assets/svgviewer-output-3.svg');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
/* The scan line itself — a thin, bright, soft band */
background-image: linear-gradient(180deg,
rgba(var(--ax-accent-rgb), 0.00) 0%,
rgba(var(--ax-accent-rgb), 0.00) 42%,
rgba(var(--ax-accent-rgb), 0.60) 48%,
rgba(255, 255, 255, 0.95) 50%,
rgba(var(--ax-accent-rgb), 0.60) 52%,
rgba(var(--ax-accent-rgb), 0.00) 58%,
rgba(var(--ax-accent-rgb), 0.00) 100%);
background-size: 100% 280%;
background-position: 0 -140%;
filter: blur(0.5px);
mix-blend-mode: lighten;
will-change: background-position, opacity;
}
/* Trigger: the JS sets data-ax-active on .section--hero */
.section--hero[data-ax-active="1"] .ax-logo-scan {
animation: ax-logo-scan var(--ax-hero-scan-dur)
cubic-bezier(0.4, 0, 0.2, 1) 0.20s 1 both;
}
@keyframes ax-logo-scan {
0% { background-position: 0 -140%; opacity: 0; }
10% { opacity: 0.85; }
50% { opacity: 1.00; }
90% { opacity: 0.85; }
100% { background-position: 0 140%; opacity: 0; }
}
/* Logo aura — additive drop-shadows on top of the existing brand filter.
The existing filter (grayscale 100% + brightness 0.2) is preserved verbatim. */
.hero-logo {
filter:
grayscale(100%)
brightness(0.2)
drop-shadow(0 0 14px rgba(var(--ax-accent-rgb), var(--ax-aura-op)))
drop-shadow(0 0 36px rgba(var(--ax-accent-rgb), calc(var(--ax-aura-op) * 0.55)));
transition: filter 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: filter;
}
/* Aura phases, driven by JS data-ax-phase on .section--hero:
(unset) → 0 (page pre-activation)
peak → 0.40 (right after the scan locks in)
settled → 0.12 (quiet base state for the rest of the session) */
.section--hero .hero-logo { --ax-aura-op: 0; }
.section--hero[data-ax-phase="peak"] .hero-logo { --ax-aura-op: 0.40; }
.section--hero[data-ax-phase="settled"] .hero-logo { --ax-aura-op: 0.12; }
/* Hover: strengthens the settled aura by ~7% (within the 5–8% brief). */
@media (hover: hover) and (pointer: fine) {
.section--hero[data-ax-phase="settled"]:hover .hero-logo,
.section--hero[data-ax-phase="settled"] .hero-logo:hover {
--ax-aura-op: 0.19;
transition: filter 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
}
/* ═══════════════════════════════════════════════════════════════════════
B) H1 — "LIGHT REFRACTION SWEEP"
A very soft, blurred highlight band passes once across the existing H1.
Zero impact on typography, color, font-size, or layout.
═══════════════════════════════════════════════════════════════════════ */
#hero-heading {
position: relative;
isolation: isolate; /* keeps the ::after behind glyphs, in-context */
}
#hero-heading::after {
content: '';
position: absolute;
inset: -0.25em -4% -0.25em -4%;
pointer-events: none;
z-index: -1; /* sits behind the glyphs → glass-refraction feel */
width: 34%;
border-radius: 50%;
background: linear-gradient(105deg,
transparent 0%,
rgba(var(--ax-accent-rgb), 0.18) 28%,
rgba(255, 255, 255, 0.55) 48%,
rgba(var(--ax-accent-rgb), 0.22) 60%,
transparent 100%);
filter: blur(16px);
transform: translate3d(-160%, 0, 0);
opacity: 0;
will-change: transform, opacity;
}
.section--hero[data-ax-active="1"] #hero-heading::after {
animation: ax-h1-refraction var(--ax-hero-sweep-dur)
cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s 1 both;
}
@keyframes ax-h1-refraction {
0% { transform: translate3d(-160%, 0, 0); opacity: 0; }
15% { opacity: 1; }
82% { opacity: 1; }
100% { transform: translate3d( 360%, 0, 0); opacity: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════
C) AMBIENT CURSOR DRIFT GLOW (hero-only, desktop-only)
A very slow, low-opacity radial glow follows the cursor inside the hero,
layered at the bottom of the stack. Uses existing accent color only.
═══════════════════════════════════════════════════════════════════════ */
.hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(
240px 240px at var(--ax-hx) var(--ax-hy),
rgba(var(--ax-accent-rgb), 0.12) 0%,
rgba(var(--ax-accent-rgb), 0.05) 40%,
transparent 72%
);
opacity: 0;
transition:
opacity 900ms cubic-bezier(0.4, 0, 0.2, 1),
background 600ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, background;
}
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
.section--hero:hover .hero::before { opacity: 1; }
}
/* ═══════════════════════════════════════════════════════════════════════
ACCESSIBILITY & RESPONSIVE DIAL-DOWN
═══════════════════════════════════════════════════════════════════════ */
/* Mobile: reduce motion intensity (~50%) & disable cursor-based effect */
@media (max-width: 768px) {
:root {
--ax-hero-scan-dur: 2.0s;
--ax-hero-sweep-dur: 2.2s;
}
.hero::before { display: none; }
.section--hero[data-ax-phase="peak"] .hero-logo { --ax-aura-op: 0.22; }
.section--hero[data-ax-phase="settled"] .hero-logo { --ax-aura-op: 0.10; }
.ax-logo-scan { filter: blur(0.8px); }
#hero-heading::after { filter: blur(10px); width: 40%; }
}
/* Reduced motion: disable the one-shot activation entirely.
Settle to the calm base state and skip sweeps/scans. */
@media (prefers-reduced-motion: reduce) {
.section--hero[data-ax-active="1"] .ax-logo-scan,
.section--hero[data-ax-active="1"] #hero-heading::after,
.section--hero .ax-logo-scan { animation: none !important; }
.ax-logo-scan { display: none !important; }
#hero-heading::after { display: none !important; }
.hero::before { display: none !important; }
.section--hero .hero-logo { --ax-aura-op: 0.12; transition: none; }
}