/* ========================================================
   HIGGSFIELD VISUAL LAYER — said-portfolio
   Cinematic ambient effects & modern UI improvements
   ======================================================== */

/* ─── HERO AMBIENT ORBS ─── */

.hf-hero-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* No overflow:hidden — avoids Safari blur clipping bug */
}

.hf-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* Always visible — opacity set per orb, not via animation fill */
    will-change: transform;
    animation: hfOrbDrift var(--t, 16s) ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
}

.hf-orb--cyan {
    width: min(700px, 110vw);
    height: min(700px, 110vw);
    background: radial-gradient(circle at center, rgba(0, 212, 255, 0.45) 0%, rgba(0, 212, 255, 0.1) 40%, transparent 70%);
    opacity: 0.85;
    top: -25%;
    left: -25%;
    --t: 18s;
    --d: 0s;
}

.hf-orb--purple {
    width: min(600px, 100vw);
    height: min(600px, 100vw);
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.55) 0%, rgba(124, 58, 237, 0.12) 40%, transparent 70%);
    opacity: 0.85;
    top: -10%;
    right: -20%;
    --t: 22s;
    --d: -7s;
}

.hf-orb--pink {
    width: min(480px, 85vw);
    height: min(480px, 85vw);
    background: radial-gradient(circle at center, rgba(236, 72, 153, 0.4) 0%, rgba(236, 72, 153, 0.1) 40%, transparent 70%);
    opacity: 0.75;
    bottom: -10%;
    left: 20%;
    --t: 20s;
    --d: -4s;
}

@keyframes hfOrbDrift {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(3%, -6%) scale(1.06); }
    50%  { transform: translate(-4%, 3%) scale(0.96); }
    75%  { transform: translate(5%, 4%) scale(1.04); }
    100% { transform: translate(-2%, -3%) scale(0.98); }
}

/* ─── HERO GRID TEXTURE ─── */

.hf-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.022) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, transparent 100%);
    animation: hfGridFade 1.5s ease 0.5s both;
}

@keyframes hfGridFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fallback: if animation is blocked, grid still appears */
@supports not (animation-timeline: scroll()) {
    .hf-hero-grid { opacity: 1; }
}

/* ─── HERO BOTTOM GRADIENT FADE ─── */

.hf-hero-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent, #0a0a0f);
    z-index: 1;
    pointer-events: none;
}

/* ─── HERO BADGE ENHANCEMENTS ─── */

.hero-badge {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.18), 0 4px 24px rgba(0, 212, 255, 0.08);
    transition: box-shadow 0.35s ease, background 0.35s ease;
}

.hero-badge:hover {
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.35), 0 4px 32px rgba(0, 212, 255, 0.18);
}

/* ─── ANIMATED GRADIENT SECTION TAGS ─── */

.section-tag {
    background: linear-gradient(90deg, #00d4ff 0%, #7c3aed 55%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

/* ─── STAT NUMBERS — GRADIENT ─── */

.stat-number {
    background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-plus {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── NAVBAR ─── */
/* NOTE: no backdrop-filter here — it would make .navbar the containing block
   for its position:fixed child .nav-links (the mobile menu), clipping the
   full-screen menu to the navbar box. The navbar already blurs on .scrolled. */

/* Safety: while the mobile menu is open, drop any backdrop-filter on the
   navbar so the full-screen fixed menu is never clipped to the navbar box. */
.navbar:has(.nav-links.active) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ─── SERVICE CARD SHIMMER & GLOW ─── */

.service-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Shimmer sweep */
.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 70%
    );
    transition: left 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 2;
}

.service-card:hover::after {
    left: 120%;
}

/* Gradient background fill on hover */
.service-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                background 0.4s ease !important;
}

.service-card:hover .service-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 0 28px rgba(0, 212, 255, 0.25), 0 0 56px rgba(124, 58, 237, 0.12);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(124, 58, 237, 0.12)) !important;
}

/* ─── PORTFOLIO CARD SCAN-LINE ON HOVER ─── */

.portfolio-image {
    position: relative;
    overflow: hidden;
}

.portfolio-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 212, 255, 0.025) 0px,
        rgba(0, 212, 255, 0.025) 1px,
        transparent 1px,
        transparent 5px
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 3;
    pointer-events: none;
}

.portfolio-card:hover .portfolio-image::after {
    opacity: 1;
}

/* ─── PROCESS STEP HOVER ─── */

.process-step {
    transition: transform 0.3s ease;
}

.process-step:hover {
    transform: translateX(6px);
}

.process-number {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-step:hover .process-number {
    box-shadow: 0 0 32px rgba(0, 212, 255, 0.35), 0 0 64px rgba(124, 58, 237, 0.15);
    border-color: rgba(0, 212, 255, 0.8);
    transform: scale(1.1);
}

/* ─── TRUST CARD IMPROVEMENT ─── */

.trust-card {
    transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease !important;
}

.trust-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 212, 255, 0.12) !important;
}

.trust-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
}

.trust-card:hover .trust-icon {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.2);
}

/* ─── PRICING CARD GLOW ─── */

.pricing-card {
    position: relative;
    overflow: hidden;
    transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease !important;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.pricing-card:hover::before {
    opacity: 1;
}

.pricing-card.featured::before {
    opacity: 1;
    background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.1) 0%, transparent 60%);
}

.pricing-card > * {
    position: relative;
    z-index: 1;
}

/* ─── TESTIMONIALS MARQUEE ─── */

.hf-testimonials-marquee {
    overflow: hidden;
    position: relative;
    margin-top: 56px;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.hf-marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: hfMarqueeScroll 44s linear infinite;
}

.hf-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes hfMarqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hf-t-card {
    flex-shrink: 0;
    width: 320px;
    background: rgba(255, 255, 255, 0.038);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 28px;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.hf-t-card:hover {
    border-color: rgba(0, 212, 255, 0.22);
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 212, 255, 0.08);
}

.hf-t-stars {
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.4));
}

.hf-t-text {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #8a8a9a;
    font-style: italic;
    margin-bottom: 22px;
}

.hf-t-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hf-t-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d4ff, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}

.hf-t-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hf-t-name {
    font-weight: 600;
    color: #f0f0f5;
    font-size: 0.9rem;
}

.hf-t-role {
    font-size: 0.75rem;
    color: #55556a;
}

/* ─── CTA SECTION AMBIENT PULSE ─── */

.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.14) 0%, transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: hfCtaAmbient 5s ease-in-out infinite;
}

@keyframes hfCtaAmbient {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50%       { transform: translate(-50%, -50%) scale(1.25); opacity: 0.5; }
}

/* ─── WHATSAPP FLOAT PULSE ─── */

.whatsapp-float {
    animation: hfWaPulse 2.8s ease-out infinite !important;
}

@keyframes hfWaPulse {
    0%   { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.4); }
    60%  { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3), 0 0 0 18px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ─── GRADIENT SEPARATOR ─── */

.hf-separator {
    height: 1px;
    border: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 212, 255, 0.25) 30%,
        rgba(124, 58, 237, 0.25) 70%,
        transparent 100%
    );
    margin: 0;
}

/* ─── 3D CARD TILT (applied via JS) ─── */

.hf-tilt {
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0) rotateY(0);
    transition: transform 0.08s ease, box-shadow 0.3s ease;
}

.hf-tilt:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 212, 255, 0.08);
}

/* ─── FOOTER ENHANCEMENT ─── */

.footer {
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 500px;
    height: 200px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at bottom, rgba(0, 212, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* ─── SECTORS GRID ENHANCEMENT ─── */

.sector-item {
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease !important;
}

.sector-item:hover {
    background: rgba(0, 212, 255, 0.06) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
    transform: translateY(-3px) scale(1.02);
}

/* ─── BUTTON GLOW ON HOVER ─── */

.btn-primary {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.35), 0 0 60px rgba(124, 58, 237, 0.2);
}

/* ─── MOBILE OPTIMIZATIONS ─── */

@media (max-width: 768px) {
    /* Bigger, more visible orbs on mobile — closer to center */
    .hf-orb { filter: blur(60px); }

    .hf-orb--cyan {
        width: 100vw;
        height: 100vw;
        top: -20%;
        left: -35%;
        opacity: 0.9;
    }

    .hf-orb--purple {
        width: 90vw;
        height: 90vw;
        top: -5%;
        right: -35%;
        opacity: 0.9;
    }

    .hf-orb--pink {
        width: 75vw;
        height: 75vw;
        bottom: 5%;
        left: 10%;
        opacity: 0.8;
    }

    .hf-hero-grid  { display: none; }
    .hf-hero-fade  { height: 120px; }

    .hf-t-card { width: 270px; padding: 20px; }
    .hf-marquee-track { animation-duration: 28s; }

    /* On mobile: always show glow borders on cards (no hover needed) */
    .service-card {
        border-color: rgba(0, 212, 255, 0.12) !important;
    }

    /* Pricing featured card always visible glow */
    .pricing-card.featured {
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.12);
    }
}

/* ─── FILM GRAIN OVERLAY ─── */

.hf-grain {
    position: fixed;
    inset: 0;
    z-index: 99990;
    pointer-events: none;
    opacity: 0.042;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    animation: hfGrainShift 0.18s steps(1) infinite;
    mix-blend-mode: overlay;
}

@keyframes hfGrainShift {
    0%   { background-position:   0%   0%; }
    12%  { background-position: -5%  -10%; }
    25%  { background-position: 15%    5%; }
    37%  { background-position:  7%  -25%; }
    50%  { background-position: -5%   25%; }
    62%  { background-position: 15%   10%; }
    75%  { background-position:  0%   15%; }
    87%  { background-position: -12%   8%; }
    100% { background-position:  0%    0%; }
}

/* ─── VIGNETTE ─── */

.hf-vignette {
    position: fixed;
    inset: 0;
    z-index: 99989;
    pointer-events: none;
    background: radial-gradient(
        ellipse 82% 82% at 50% 50%,
        transparent 0%,
        rgba(0, 0, 0, 0.62) 100%
    );
}

/* ─── SCANLINES OVERLAY ─── */

.hf-scanlines {
    position: fixed;
    inset: 0;
    z-index: 99988;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.035) 0px,
        rgba(0, 0, 0, 0.035) 1px,
        transparent 1px,
        transparent 4px
    );
}

/* ─── HERO SPOTLIGHT (mouse-follow glow) ─── */

.hf-spotlight {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.07) 0%, transparent 68%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: left, top;
    transition: opacity 0.4s ease;
    z-index: 2;
}

/* ─── CINEMATIC SECTION REVEAL ─── */

.hf-reveal {
    opacity: 0;
    transform: translateY(36px) scale(0.975);
    filter: blur(8px);
    transition:
        opacity    0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform  0.85s cubic-bezier(0.16, 1, 0.3, 1),
        filter     0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.hf-reveal.hf-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* ─── GLITCH EFFECT on hero title ─── */

@keyframes hfGlitch1 {
    0%, 94%, 100% { clip-path: inset(0 0 100% 0); transform: none; opacity: 0; }
    95% { clip-path: polygon(0 20%, 100% 20%, 100% 35%, 0 35%); transform: translateX(-3px); opacity: 1; }
    96% { clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%); transform: translateX(3px); opacity: 1; }
    97% { clip-path: polygon(0 5%,  100% 5%,  100% 15%, 0 15%); transform: translateX(-2px); opacity: 1; }
    98% { clip-path: inset(0 0 100% 0); transform: none; opacity: 0; }
}

@keyframes hfGlitch2 {
    0%, 94%, 100% { clip-path: none; transform: none; opacity: 0; }
    95% { clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%); transform: translateX(4px); opacity: 1; }
    97% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); transform: translateX(-3px); opacity: 1; }
    99% { opacity: 0; }
}

.hf-glitch {
    position: relative;
}

.hf-glitch::before,
.hf-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hf-glitch::before {
    color: rgba(0, 212, 255, 0.7);
    animation: hfGlitch1 7s linear infinite;
}

.hf-glitch::after {
    color: rgba(236, 72, 153, 0.7);
    animation: hfGlitch2 7s linear infinite;
    animation-delay: 0.08s;
}

/* ─── GLOBAL FIXED CANVASES ─── */

.hf-global-canvas,
.hf-hex-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hf-global-canvas { z-index: 2; }
.hf-hex-canvas    { z-index: 1; }

/* ─── AURORA BANDS ─── */

.hf-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hf-aurora-band {
    position: absolute;
    width: 220%;
    height: 360px;
    border-radius: 50%;
    filter: blur(90px);
    left: -60%;
}

.hf-aurora-band--1 {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 212, 255, 0.10) 30%,
        rgba(124, 58, 237, 0.07) 60%,
        transparent 100%);
    top: 8%;
    animation: hfAurora1 22s ease-in-out infinite;
}

.hf-aurora-band--2 {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(124, 58, 237, 0.09) 25%,
        rgba(236, 72, 153, 0.06) 55%,
        transparent 100%);
    top: 42%;
    animation: hfAurora2 28s ease-in-out infinite;
    animation-delay: -10s;
}

.hf-aurora-band--3 {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 212, 255, 0.06) 20%,
        rgba(124, 58, 237, 0.09) 55%,
        transparent 100%);
    top: 72%;
    animation: hfAurora1 34s ease-in-out infinite;
    animation-delay: -18s;
}

@keyframes hfAurora1 {
    0%, 100% { transform: translateX(0)   scaleY(1);    opacity: 0.55; }
    40%       { transform: translateX(28%) scaleY(1.35); opacity: 1;    }
    70%       { transform: translateX(12%) scaleY(0.85); opacity: 0.7;  }
}

@keyframes hfAurora2 {
    0%, 100% { transform: translateX(15%) scaleY(0.9);  opacity: 0.6; }
    35%       { transform: translateX(-15%) scaleY(1.3); opacity: 1;   }
    65%       { transform: translateX(5%)  scaleY(1.1);  opacity: 0.75; }
}

/* data stream lines removed — replaced by aurora + hex grid */

/* ─── HERO ORB INTENSITY BOOST ─── */

.hf-orb--cyan {
    background: radial-gradient(circle at center, rgba(0, 212, 255, 0.6) 0%, rgba(0, 212, 255, 0.15) 40%, transparent 70%) !important;
    opacity: 0.95 !important;
}

.hf-orb--purple {
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.7) 0%, rgba(124, 58, 237, 0.18) 40%, transparent 70%) !important;
    opacity: 0.95 !important;
}

/* ─── REDUCED MOTION — Keep orbs visible, just static ─── */

@media (prefers-reduced-motion: reduce) {
    .hf-orb {
        animation: none !important;
    }

    .hf-marquee-track {
        animation: none !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 12px;
    }

    .cta-section::before { animation: none !important; }
    .whatsapp-float       { animation: none !important; }
    .hf-grain             { animation: none !important; }
    .hf-glitch::before,
    .hf-glitch::after     { display: none; }
    .hf-aurora-band       { animation: none !important; }
    .hf-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}