/* ============================================================
   M-Wolf Tech — REDESIGN layer (branch: REDESIGN)
   Strat vizual modern, aditiv peste style.css. Nu suprascrie
   stilurile existente — doar adaugă adâncime & interactivitate:
     1. Carduri cu tilt 3D + „glare" care urmărește cursorul
     2. Butoane magnetice (hero)
     3. Bară de progres la scroll
     4. Header cu adâncime la scroll
     5. Shine animat pe titlurile cu gradient
     6. Orb-uri ambientale plutitoare (hero)
   Totul respectă `prefers-reduced-motion`.
   ============================================================ */

/* ===== 1. CARD 3D TILT + CURSOR GLARE ==============================
   Transformul 3D (rotateX/rotateY + scale) e setat inline din
   redesign.js pe pointermove. Aici doar: context 3D, revenirea lină
   și stratul de „glare" (::after) care sclipește sub cursor. */
.card-glow-blue,
.card-glow-cyan,
.card-glow-violet,
.card-glow-electric {
    position: relative;            /* ancorează ::after la card (showroom-card n-avea relative) */
    transform-style: preserve-3d;
    /* Card-urile din grid nu se decupează în afara containerului la scale() */
    backface-visibility: hidden;
}

/* Follow rapid cât timp cursorul e pe card; revenirea folosește
   tranziția de bază (0.35s) din style.css când clasa e scoasă. */
.card-glow-blue.is-tilting,
.card-glow-cyan.is-tilting,
.card-glow-violet.is-tilting,
.card-glow-electric.is-tilting {
    transition: transform 0.08s linear, box-shadow 0.35s ease, border-color 0.35s ease;
}

.card-glow-blue::after,
.card-glow-cyan::after,
.card-glow-violet::after,
.card-glow-electric::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(
        circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0) 45%
    );
}

.card-glow-blue.is-tilting::after,
.card-glow-cyan.is-tilting::after,
.card-glow-violet.is-tilting::after,
.card-glow-electric.is-tilting::after {
    opacity: 1;
}

/* Glare puțin mai cald pe tema întunecată (sclipire de „sticlă") */
html.dark .card-glow-blue::after,
html.dark .card-glow-cyan::after,
html.dark .card-glow-violet::after,
html.dark .card-glow-electric::after {
    background: radial-gradient(
        circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(125, 211, 252, 0.18),
        rgba(255, 255, 255, 0.10) 20%,
        rgba(255, 255, 255, 0) 48%
    );
}

/* ===== 2. BUTOANE MAGNETICE (hero) ================================ */
.magnetic {
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

/* ===== 3. BARĂ DE PROGRES LA SCROLL =============================== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 60;                    /* deasupra header-ului sticky (z-50) */
    background: linear-gradient(90deg, #2563eb, #06b6d4, #8b5cf6);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.55);
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    pointer-events: none;
    transition: width 0.12s linear;
}

/* ===== 4. HEADER CU ADÂNCIME LA SCROLL ============================
   Header-ul are deja `transition-theme` (tranziționează box-shadow &
   border), deci schimbarea e lină. */
header.is-scrolled {
    box-shadow: 0 14px 34px -18px rgba(2, 6, 23, 0.28);
    border-bottom-color: rgba(37, 99, 235, 0.16);
}
html.dark header.is-scrolled {
    box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.65);
    border-bottom-color: rgba(56, 189, 248, 0.14);
}

/* ===== 5. SHINE ANIMAT PE TITLURILE CU GRADIENT ===================
   Lărgim gradientul și glisăm background-position → un „val" lin de
   culoare care ține titlul viu, fără să distragă. */
#hero-title .text-transparent,
#audit-title .text-transparent {
    background-size: 220% auto;
    animation: shineFlow 7s linear infinite;
}

@keyframes shineFlow {
    to { background-position: 220% center; }
}

/* ===== 6. ORB-URI AMBIENTALE PLUTITOARE (hero) ==================== */
@keyframes floatOrb {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(12px, -26px, 0); }
}

.float-orb  { animation: floatOrb 13s ease-in-out infinite; }
.float-orb-2 {
    animation: floatOrb 17s ease-in-out infinite;
    animation-delay: -6s;
}

/* ===== 7. PARALLAX PE CONȚINUTUL CARDULUI (translateZ) ============
   În timpul tilt-ului, straturile interioare „ies" spre privitor pe axa
   Z (setat inline din redesign.js). Cardul are deja `preserve-3d`, iar
   `perspective(...)` din transformul cardului proiectează straturile. */
.tilt-layer {
    transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ===== 8. AURORA ANIMATĂ ÎN HERO =================================
   Pete de culoare mari, blurate, care se rotesc & respiră lent în
   spatele conținutului. Se adaugă peste `hero-mesh`, sub grid & text. */
.hero-aurora {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    /* Transformul de pe .hero-aurora e rezervat pentru parallax (scroll +
       giroscop, din redesign.js). Driftul de culoare stă pe ::before, ca cele
       două mișcări să nu se suprascrie una pe alta. */
    will-change: transform;
}
.hero-aurora::before {
    content: "";
    position: absolute;
    inset: 0;
    filter: blur(70px);
    opacity: 0.35;
    background:
        radial-gradient(38% 38% at 22% 30%, rgba(37, 99, 235, 0.55), transparent 60%),
        radial-gradient(34% 34% at 80% 22%, rgba(6, 182, 212, 0.45), transparent 60%),
        radial-gradient(42% 42% at 62% 82%, rgba(139, 92, 246, 0.40), transparent 62%);
    animation: auroraDrift 22s ease-in-out infinite alternate;
}
html.dark .hero-aurora::before { opacity: 0.55; }

@keyframes auroraDrift {
    0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg)   scale(1);    }
    50%  { transform: translate3d(4%, 3%, 0)   rotate(8deg)   scale(1.12); }
    100% { transform: translate3d(-2%, 4%, 0)  rotate(-6deg)  scale(1.05); }
}

/* ===== 9. SPOTLIGHT GLOBAL CARE URMĂREȘTE CURSORUL ===============
   Un halou discret, fixat pe tot ecranul, care trailează sub mouse.
   Sub header (z-50) & bara de progres (z-60), peste conținut. */
#cursor-spotlight {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(
        circle 420px at var(--cursor-x, 50%) var(--cursor-y, 50%),
        rgba(37, 99, 235, 0.08),
        transparent 70%
    );
}
html.dark #cursor-spotlight {
    background: radial-gradient(
        circle 460px at var(--cursor-x, 50%) var(--cursor-y, 50%),
        rgba(56, 189, 248, 0.10),
        transparent 68%
    );
}
#cursor-spotlight.is-active { opacity: 1; }

/* ===== 10. MOBILE-FIRST: ADÂNCIME LA SCROLL & LA ATINGERE =========
   Efectele 1–2 & 9 depind de cursor (desktop). Astea funcționează pe
   touch, unde interacțiunea principală e scroll-ul + tap-ul:
     a) cardurile se „ridică" în 3D când intră în ecran;
     b) o dâră de lumină le mătură o dată, la dezvăluire;
     c) la atingere reacționează tactil (press 3D).
   Se agață de clasele `.reveal` / `.is-visible` puse de script.js. */

/* a) Intrare 3D a cardurilor (mai expresivă decât fade-up-ul de bază) */
.card-glow-blue.reveal,
.card-glow-cyan.reveal,
.card-glow-violet.reveal,
.card-glow-electric.reveal {
    transform: perspective(1200px) rotateX(12deg) translateY(42px) scale(0.965);
    transform-origin: 50% 100%;
}
.card-glow-blue.reveal.is-visible,
.card-glow-cyan.reveal.is-visible,
.card-glow-violet.reveal.is-visible,
.card-glow-electric.reveal.is-visible {
    transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
}

/* b) Dâră de lumină care mătură cardul o singură dată, la dezvăluire */
.card-glow-blue::before,
.card-glow-cyan::before,
.card-glow-violet::before,
.card-glow-electric::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.18) 50%, transparent 68%);
    transform: translateX(-120%);
}
.card-glow-blue.is-visible::before,
.card-glow-cyan.is-visible::before,
.card-glow-violet.is-visible::before,
.card-glow-electric.is-visible::before {
    animation: cardSheen 1.15s ease 0.25s 1;
}
@keyframes cardSheen {
    0%   { transform: translateX(-120%); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: translateX(120%);  opacity: 0; }
}

/* c) Press tactil — doar pe dispozitive fără hover (touch) */
@media (hover: none) {
    .card-glow-blue:active,
    .card-glow-cyan:active,
    .card-glow-violet:active,
    .card-glow-electric:active {
        transform: perspective(1200px) scale(0.978) !important;
        transition: transform 0.16s ease;
    }
}

/* ===== 11. FUNDAL VIU LA NIVEL DE PAGINĂ (aurora globală + grain) =
   Secțiunile aveau fundal plat (navy uniform pe dark, alb/pearl pe light).
   Două straturi `fixed`, decorative, dau viață întregii pagini:
     • #bg-aurora — pete mari de culoare care plutesc lent. Pe dark folosim
       `mix-blend-mode: screen`, care luminează DOAR zonele întunecate plate
       și lasă cardurile/textul alb practic neatinse (screen peste alb ≈ alb).
     • #bg-grain — un film fin de zgomot (textură premium, anti-„plat").
   z-index:0 → deasupra fundalului secțiunilor, dar SUB carduri (care sunt
   contexte de stacking prin transform), deci conținutul rămâne curat. */
#bg-aurora,
#bg-grain {
    position: fixed;
    z-index: 0;
    pointer-events: none;
}

#bg-aurora {
    inset: -10%;
    opacity: 0.72;
    filter: blur(44px);
    background:
        radial-gradient(34% 36% at 14% 16%, rgba(37, 99, 235, 0.42), transparent 62%),
        radial-gradient(32% 34% at 86% 26%, rgba(6, 182, 212, 0.36), transparent 62%),
        radial-gradient(36% 38% at 72% 74%, rgba(139, 92, 246, 0.40), transparent 64%),
        radial-gradient(30% 32% at 24% 88%, rgba(14, 165, 233, 0.32), transparent 62%);
    animation: bgAuroraDrift 30s ease-in-out infinite alternate;
}
html.dark #bg-aurora {
    mix-blend-mode: screen;   /* luminează navy-ul plat, cruță conținutul deschis */
    opacity: 1;
}

@keyframes bgAuroraDrift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1);    }
    50%  { transform: translate3d(3%, 2%, 0)   scale(1.12); }
    100% { transform: translate3d(-1%, 3%, 0)  scale(1.05); }
}

#bg-grain {
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}
html.dark #bg-grain { opacity: 0.09; }

/* ===== REDUCED MOTION ============================================= */
@media (prefers-reduced-motion: reduce) {
    .card-glow-blue::after,
    .card-glow-cyan::after,
    .card-glow-violet::after,
    .card-glow-electric::after { display: none; }
    .magnetic { transition: none; }
    #scroll-progress { transition: none; }
    #hero-title .text-transparent,
    #audit-title .text-transparent { animation: none; }
    .float-orb, .float-orb-2 { animation: none; }
    .tilt-layer { transition: none; }
    .hero-aurora::before { animation: none; }
    #cursor-spotlight { display: none; }
    /* Intrarea 3D & dâra de lumină → dezactivate (script.js oricum forțează
       .reveal la vizibil sub reduced-motion) */
    .card-glow-blue.reveal,  .card-glow-cyan.reveal,
    .card-glow-violet.reveal, .card-glow-electric.reveal,
    .card-glow-blue.reveal.is-visible,  .card-glow-cyan.reveal.is-visible,
    .card-glow-violet.reveal.is-visible, .card-glow-electric.reveal.is-visible {
        transform: none;
    }
    .card-glow-blue::before,  .card-glow-cyan::before,
    .card-glow-violet::before, .card-glow-electric::before { display: none; }
    #bg-aurora { animation: none; }
}