/* ============================================================
   TONAVI "Alive" interaction layer
   Self-contained, dependency-free. Loaded after tonavi.css.
   Adds cursor reactivity: glow follower, hero spotlight,
   3D card tilt + glare, magnetic buttons. All effects are
   guarded by JS (prefers-reduced-motion / pointer:fine) and
   degrade gracefully to the original static design.
   ============================================================ */

:root {
    --alive-accent: 124, 92, 246;     /* #7c5cf6 violet */
    --alive-accent-2: 102, 126, 234;  /* #667eea indigo  */
    --alive-glow-size: 460px;
}

/* ---- Site-wide fine grain for depth (very subtle, never over text contrast) ---- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* above content, below nothing interactive (pointer-events:none) */
    pointer-events: none;
    opacity: 0.022;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}
html:not([data-theme="dark"]) body::after { opacity: 0.015; mix-blend-mode: multiply; }

/* When the alive layer is active we hint the browser. */
html.alive-on { --alive-ready: 1; }

/* ---------- 1. Global cursor glow follower ---------- */
.alive-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--alive-glow-size);
    height: var(--alive-glow-size);
    margin-left: calc(var(--alive-glow-size) / -2);
    margin-top: calc(var(--alive-glow-size) / -2);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: opacity .45s ease;
    background: radial-gradient(circle closest-side,
        rgba(var(--alive-accent), 0.20) 0%,
        rgba(var(--alive-accent-2), 0.12) 38%,
        rgba(var(--alive-accent), 0.0) 72%);
    mix-blend-mode: screen;
    will-change: transform;
}
html[data-theme="dark"] .alive-cursor-glow { mix-blend-mode: screen; }
html:not([data-theme="dark"]) .alive-cursor-glow {
    mix-blend-mode: multiply;
    background: radial-gradient(circle closest-side,
        rgba(var(--alive-accent), 0.16) 0%,
        rgba(var(--alive-accent-2), 0.10) 40%,
        rgba(var(--alive-accent), 0.0) 72%);
}
.alive-cursor-glow.is-visible { opacity: 1; }
.alive-cursor-glow.is-active  { opacity: 1; transform: scale(1.18); }

/* ---------- 2. Hero spotlight that tracks the mouse ---------- */
.hero { position: relative; }
.alive-hero-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .6s ease;
    background:
        radial-gradient(620px circle at var(--hx, 50%) var(--hy, 35%),
            rgba(var(--alive-accent), 0.22),
            rgba(var(--alive-accent-2), 0.10) 40%,
            transparent 68%);
}
.hero.alive-lit .alive-hero-spotlight { opacity: 1; }
/* keep real hero content above the spotlight */
.hero .container { position: relative; z-index: 1; }

/* ---------- 3. 3D tilt + glare on cards ---------- */
.alive-tilt {
    transform-style: preserve-3d;
    transition: box-shadow .45s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.alive-tilt.is-tilting {
    transition: box-shadow .2s ease;   /* JS lerp now eases the transform (edge-ramp entry + return) */
}
.alive-tilt.is-tilting {
    box-shadow: 0 26px 60px -22px rgba(var(--alive-accent), 0.55),
                0 8px 22px -12px rgba(0,0,0,0.45);
}

/* glare overlay sits on top, blends, never blocks clicks */
.alive-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 0%),
        rgba(255,255,255,0.45), rgba(255,255,255,0) 60%);
    mix-blend-mode: soft-light;
    z-index: 6;
}
.alive-tilt.is-tilting .alive-glare { opacity: 1; }
html:not([data-theme="dark"]) .alive-glare {
    background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 0%),
        rgba(255,255,255,0.65), rgba(255,255,255,0) 60%);
    mix-blend-mode: overlay;
}

/* ---------- 4. Magnetic buttons ---------- */
.alive-magnetic {
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                box-shadow .35s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.alive-magnetic > * { pointer-events: none; }

/* gentle pulse on the primary CTA so the eye lands on it */
@keyframes aliveBreathe {
    0%, 100% { box-shadow: 0 6px 22px rgba(var(--alive-accent), 0.30); }
    50%      { box-shadow: 0 10px 34px rgba(var(--alive-accent), 0.55); }
}
.btn-primary.alive-breathe { animation: aliveBreathe 3.2s ease-in-out infinite; }
.btn-primary.alive-breathe:hover { animation-play-state: paused; }

/* ---------- 5. Animated gradient on brand text ---------- */
.gradient-text.alive-flow {
    background-size: 220% 220%;
    animation: aliveGradient 7s ease infinite;
}
@keyframes aliveGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================================
   HERO REDESIGN — living background, big display type, glass
   ============================================================ */

/* Give the hero room to breathe + establish stacking context */
.hero {
    position: relative;
    overflow: hidden;
    min-height: min(88vh, 760px);
    display: flex;
    align-items: flex-start;   /* top-align: content can never slip above the header */
    isolation: isolate;
    /* clear the fixed header using its MEASURED height (--header-h, set by JS
       at any width/device). Fallback covers the no-JS / pre-measure case. */
    padding-top: calc(var(--header-h, 96px) + 2.2rem);
    padding-bottom: 3.5rem;
}

/* ---- Animated aurora mesh (injected: .alive-aurora > b) ---- */
.alive-aurora {
    position: absolute;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    filter: blur(60px) saturate(135%);
    opacity: 0.9;
}
.alive-aurora b {
    position: absolute;
    display: block;
    border-radius: 50%;
    mix-blend-mode: screen;
    will-change: transform;
}
html:not([data-theme="dark"]) .alive-aurora { opacity: 0.55; filter: blur(70px) saturate(120%); }
html:not([data-theme="dark"]) .alive-aurora b { mix-blend-mode: multiply; }

.alive-aurora b:nth-child(1) {
    width: 46vw; height: 46vw; left: -6vw; top: -8vw;
    background: radial-gradient(circle, rgba(124,92,246,0.85), transparent 62%);
    animation: auroraA 19s ease-in-out infinite;
}
.alive-aurora b:nth-child(2) {
    width: 40vw; height: 40vw; right: -8vw; top: 2vw;
    background: radial-gradient(circle, rgba(102,126,234,0.80), transparent 62%);
    animation: auroraB 23s ease-in-out infinite;
}
.alive-aurora b:nth-child(3) {
    width: 38vw; height: 38vw; left: 22vw; bottom: -14vw;
    background: radial-gradient(circle, rgba(168,85,247,0.70), transparent 62%);
    animation: auroraC 27s ease-in-out infinite;
}
@keyframes auroraA { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(8vw,5vw,0) scale(1.18)} }
@keyframes auroraB { 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-7vw,6vw,0) scale(0.9)} }
@keyframes auroraC { 0%,100%{transform:translate3d(0,0,0) scale(0.95)} 50%{transform:translate3d(5vw,-7vw,0) scale(1.2)} }

/* ---- Fine grain/noise overlay for depth (injected: .alive-grain) ---- */
.alive-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    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.85' 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;
}
html:not([data-theme="dark"]) .alive-grain { opacity: 0.04; mix-blend-mode: multiply; }

/* spotlight + content above aurora/grain */
.hero .alive-hero-spotlight { z-index: 2; }
.hero .container { position: relative; z-index: 3; }

/* ---- Display typography ---- */
.hero-title {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-size: clamp(1.95rem, 3.05vw, 3.18rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    margin-bottom: 1.45rem !important;
    max-width: 22ch;
    text-wrap: balance;
}
.hero-title-float {
    display: block;
    text-wrap: inherit;
    animation: heroTitleFloat 26s ease-in-out infinite;
    transform-origin: 50% 62%;
    will-change: transform;
}
.hero-title .gradient-text {
    font-family: inherit !important;
    background-size: 220% 220%;
}
@keyframes heroTitleFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-0.12deg);
    }
    34% {
        transform: translate3d(0, -5px, 0) rotate(0.08deg);
    }
    68% {
        transform: translate3d(3px, -2px, 0) rotate(-0.06deg);
    }
}
/* word-split reveal (set up by JS: .reveal-word > i) */
.hero-title .rw {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.06em; /* room for descenders */
}
.hero-title .rw > i { display: inline-block; font-style: inherit; }
/* hide words only when the alive layer is active (JS will animate them in);
   without .alive-on (e.g. reduced-motion early-return) words stay visible */
.alive-on .hero-title .rw > i {
    transform: translateY(110%);
    opacity: 0;
}
.alive-on .hero-title .rw > i { will-change: transform, opacity; }
/* Title reveals as ONE block via CSS transition on .is-in (no GSAP word-split
   → no race, no flash, no mid-entrance disappear). Premium rise + blur-in. */
.alive-on .hero-title {
    opacity: 0; transform: translateY(16px); filter: blur(5px);
    transition: opacity .5s cubic-bezier(.22,.61,.36,1),
                transform .5s cubic-bezier(.22,.61,.36,1),
                filter .5s ease;
}
.alive-on .hero.is-in .hero-title { opacity: 1; transform: none; filter: blur(0); transition-delay: .04s; }

/* entrance for the rest of the hero (JS toggles .is-in) */
.alive-on .hero-badge,
.alive-on .hero-subtitle,
.alive-on .hero-actions,
.alive-on .hero-trust,
.alive-on .hero-supplier-logos,
.alive-on .hero-social-proof {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}
.alive-on .hero.is-in .hero-badge,
.alive-on .hero.is-in .hero-subtitle,
.alive-on .hero.is-in .hero-actions,
.alive-on .hero.is-in .hero-trust,
.alive-on .hero.is-in .hero-supplier-logos,
.alive-on .hero.is-in .hero-social-proof {
    opacity: 1;
    transform: none;
}
/* tight, snappy stagger — whole left column settled by ~0.6s, no long ghosted tail */
.alive-on .hero.is-in .hero-badge        { transition-delay: .04s; }
.alive-on .hero.is-in .hero-subtitle     { transition-delay: .12s; }
.alive-on .hero.is-in .hero-actions      { transition-delay: .18s; }
.alive-on .hero.is-in .hero-trust        { transition-delay: .24s; }
.alive-on .hero.is-in .hero-supplier-logos { transition-delay: .30s; }
.alive-on .hero.is-in .hero-social-proof { transition-delay: .34s; }

/* ---- Badge polish (no backdrop-filter: avoids GPU "empty box" glitch) ---- */
.hero-badge span {
    border-radius: 999px;
    position: relative;
}

/* ---- Cockpit visual: glass + float ---- */
.cockpit-shell {
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 30px 80px -30px rgba(124,92,246,0.55), 0 10px 30px -16px rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(2px);
    animation: cockpitFloat 7s ease-in-out infinite;
}
@keyframes cockpitFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
/* mouse-parallax from alive.js sets inline transform → pause float while hovering */
.hero:hover .cockpit-shell { animation-play-state: paused; }

/* ---- CTA polish ---- */
.hero-actions .btn-large { border-radius: 14px; letter-spacing: .01em; }

/* ============================================================
   Scroll progress bar (Lenis-driven)
   ============================================================ */
.alive-scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #7c5cf6, #667eea 50%, #a855f7);
    box-shadow: 0 0 12px rgba(124,92,246,0.6);
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
}

/* ============================================================
   TYPOGRAPHY — display font on headings (Phase E)
   ============================================================ */
h1, h2,
.section-header h2,
.official-suppliers-head h2,
.service-card h3,
.official-supplier-card h3,
.t-card .t-cat,
.portfolio-cta h3,
.about-text h3,
.contact-info h3 {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    letter-spacing: -0.018em;
}
.section-header h2,
.official-suppliers-head h2 {
    font-size: clamp(1.9rem, 3.2vw, 2.9rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

/* ============================================================
   SUPPLIERS section polish (Sima-land + Комус)
   ============================================================ */
.official-supplier-card {
    border-radius: 18px !important;
    border: 1px solid rgba(124,92,246,0.16) !important;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(124,92,246,0.10), transparent 55%),
        var(--card-bg, rgba(255,255,255,0.02)) !important;
    transition: border-color .4s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"] .official-supplier-card {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(124,92,246,0.14), transparent 55%),
        rgba(255,255,255,0.025) !important;
}
.official-supplier-card:hover {
    border-color: rgba(124,92,246,0.45) !important;
}
.supplier-logo-box {
    border-radius: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), 0 8px 22px -14px rgba(124,92,246,0.5);
}
/* feature chips get a subtle brand tint + hover lift */
.supplier-features span {
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.supplier-features span:hover {
    transform: translateY(-2px);
    background: rgba(124,92,246,0.16);
    color: #c9bbff;
}
/* status badge breathes */
.supplier-status i { color: #34d399; }

/* ============================================================
   Accessibility: fully opt out of motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .alive-cursor-glow,
    .alive-hero-spotlight,
    .alive-glare,
    .alive-grain,
    .alive-aurora { display: none !important; }
    .alive-tilt,
    .alive-magnetic { transition: none !important; transform: none !important; }
    .btn-primary.alive-breathe,
    .gradient-text.alive-flow,
    .hero-title-float,
    .cockpit-shell,
    .hero-badge span::after { animation: none !important; }
    .hero-title .rw > i { transform: none !important; opacity: 1 !important; }
    .alive-on .hero-badge,
    .alive-on .hero-subtitle,
    .alive-on .hero-actions,
    .alive-on .hero-trust,
    .alive-on .hero-supplier-logos,
    .alive-on .hero-social-proof { opacity: 1 !important; transform: none !important; }
}