/*
 * Fueled.com Clone - Homepage Specific Styles
 * ===========================================
 */

/* ==================== HERO SECTION ==================== */

.hero {
    --hero-content-offset: clamp(var(--space-12), 32vh, calc(var(--space-32) + var(--space-12)));
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: calc(var(--header-height) + var(--hero-content-offset)) 0 var(--space-section-lg);
    overflow: hidden;
    background: #000000;
    isolation: isolate;
}

.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(140px, 28vh, 360px);
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.35) 45%,
            rgba(0, 0, 0, 0.75) 75%,
            rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero__stack {
    width: 100%;
}

/* Logo ticker positioned at bottom of hero, over the orb */
.hero__logos {
    position: relative;
    left: 0;
    right: 0;
    z-index: 3;
    overflow: hidden;
    margin-top: auto;
    transform: translateY(var(--space-12));
}



.hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--container-standard);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tags as plain text with dots separator - matching original */
.hero__meta {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    justify-content: center;
}

.hero__tag {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-tags);
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Bold dot separator between tags */
.hero__tag:not(:last-child)::after {
    content: '•';
    margin: 0 var(--space-4);
    color: var(--color-gray-500);
    font-weight: normal;
}

/* Remove the dot before tags */
.hero__tag::before {
    display: none;
}

.hero__title {
    font-size: var(--text-h1);
    font-weight: var(--font-weight-bold);
    line-height: 1.265;
    /* Increased by 15% from 1.1 */
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: var(--space-6);
    max-width: 800px;
    text-align: center;

}

.hero__subtitle {
    font-size: var(--text-body-lg);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    max-width: 800px;
    margin-bottom: var(--space-8);
    margin-bottom: var(--space-16);
    text-align: center;
}

.hero__cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.hero__cta--between {
    padding: 40px 0;
}

/* ==================== CLIENT LOGOS SECTION ==================== */

.clients {
    padding: var(--space-section) 0;
    border-top: 1px solid var(--color-gray-900);
    border-bottom: 1px solid var(--color-gray-900);
}

.clients__label {
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-8);
}

/* Uses logo-ticker classes from animations.css */

/* ==================== CASE STUDIES SECTION ==================== */

/* ==================== CASE STUDIES SECTION ==================== */

.case-studies {
    padding: var(--space-section-lg) 0;
}

.case-studies__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: var(--container-wide);
    margin: 50px auto 0;
    padding: 0 var(--container-padding);
}

.case-study {
    position: relative;
    /* Aspect ratio ~1.48:1 (1196x810) */
    aspect-ratio: 1.48 / 1;
    border-radius: 40px;
    overflow: hidden;
    background: #000;
    width: 100%;
}

.case-study__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Verified fueled transition - 0.3s ease-out */
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* Bottom haze pulse on hover */
.case-study::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15%;
    background:
        radial-gradient(120% 160% at 50% 100%,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.10) 38%,
            rgba(255, 255, 255, 0.00) 72%),
        radial-gradient(140% 160% at 50% 100%,
            rgba(140, 80, 255, 0.20) 0%,
            rgba(140, 80, 255, 0.00) 70%);
    filter: blur(12px) saturate(1.2);
    -webkit-filter: blur(12px) saturate(1.2);
    opacity: 0;
    mix-blend-mode: screen;
    transform: translateY(6px) scaleY(0.9);
    pointer-events: none;
    z-index: 2;
    will-change: opacity, transform, filter;
}

/* Shine effect container */
.case-study::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Stronger gradient for visibility */
    background: linear-gradient(105deg,
            transparent 20%,
            rgba(255, 255, 255, 0.2) 40%,
            rgba(255, 255, 255, 0.4) 45%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease-out;
    pointer-events: none;
    mix-blend-mode: overlay;
    /* Switched to overlay for better contrast */
    opacity: 0;
    z-index: 2;
    /* Sit above overlay */
}

.case-study:hover .case-study__image {
    /* Verified fueled hover scale - 1.05 */
    transform: scale(1.05);
}

.case-study:hover::before {
    animation: caseStudyHazePulse 2.6s ease-in-out infinite;
}

.case-study:hover::after {
    transform: translateX(100%);
    opacity: 1;
    transition: transform 0.7s ease-in-out, opacity 0.3s ease-in;
}

.case-study__overlay {
    position: absolute;
    inset: 0;
    /* Lighter gradient as requested */
    background: linear-gradient(219deg, rgba(0, 0, 0, 0) 34.12%, rgba(0, 0, 0, 0.8) 75.8%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 60px;
    pointer-events: none;
    z-index: 1;
}

.case-study__content {
    max-width: 600px;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    /* Ensure text is always on top of shine */
}

.case-study__logo {
    height: 70px;
    width: auto;
    margin-bottom: 24px;
    display: block;
    object-fit: contain;
    object-position: left;
}

.case-study__tags {
    display: flex;
    gap: 8px;
    margin-top: 32px;
}

.case-study__tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    color: var(--color-text-muted);
    font-size: 16px;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.case-study__title {
    font-size: 30.6px;
    line-height: 1.1;
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 12px;
}

.case-study__desc {
    font-size: 17.7px;
    line-height: 1.3;
    color: var(--color-white);
    margin-bottom: 32px;
    opacity: 0.9;
}

.case-study__link {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    position: relative;
    text-decoration: none;
}

.case-study__link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.case-study:hover .case-study__link::after {
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .case-study__overlay {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .case-study {
        border-radius: 24px;
        aspect-ratio: 1.2 / 1;
    }

    .case-study__overlay {
        padding: 24px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 90%);
    }

    .case-study__title {
        font-size: 24px;
    }

    .case-study__desc {
        font-size: 16px;
    }
}

/* ==================== EXPERTISE SECTION ==================== */

.expertise {
    padding: var(--space-section-lg) 0;
    background: var(--bg-secondary);
}

.expertise__inner {
    max-width: var(--container-standard);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.expertise__header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.expertise__title {
    font-size: var(--text-h2);
    margin-bottom: var(--space-4);
}

.expertise__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.expertise__item {
    text-align: center;
    padding: var(--space-8);
}

.expertise__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(110, 91, 255, 0.1);
    border-radius: var(--radius-lg);
}

.expertise__icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-secondary);
}

.expertise__item-title {
    font-size: var(--text-h4);
    margin-bottom: var(--space-3);
}

.expertise__item-desc {
    font-size: var(--text-body-sm);
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .expertise__list {
        grid-template-columns: 1fr;
    }
}

/* ==================== INSIGHTS SECTION ==================== */

.insights {
    padding: var(--space-section-lg) 0;
}

.insights__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.insights__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-12);
}

.insights__title {
    font-size: var(--text-h2);
}

.insights__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.insight-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.insight-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.insight-card__image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.insight-card__content {
    padding: var(--space-6);
}

.insight-card__category {
    font-size: var(--text-caption);
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-3);
}

.insight-card__title {
    font-size: var(--text-body-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-3);
}

.insight-card__meta {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    .insights__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .insights__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .insights__grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== PARTNERS SECTION ==================== */

.partners {
    padding: var(--space-section) 0;
    border-top: 1px solid var(--color-gray-900);
}

.partners__inner {
    max-width: var(--container-standard);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    text-align: center;
}

.partners__title {
    font-size: var(--text-body);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

.partners__grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.partners__logo {
    height: 32px;
    width: auto;
    opacity: 0.5;
    filter: grayscale(100%) brightness(2);
    transition: opacity var(--transition-normal), filter var(--transition-normal);
}

.partners__logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* ==================== CTA SECTION ==================== */

.cta {
    padding: var(--space-section-xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta__background {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(110, 91, 255, 0.15) 0%, transparent 70%);
    z-index: -1;
}

.cta__inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.cta__title {
    font-size: var(--text-h2);
    margin-bottom: var(--space-6);
}

.cta__subtitle {
    font-size: var(--text-body-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

/* ==================== NEW ANIMATED ORB ==================== */
:root {
    --tCycle: 4.3s;
    --auroraCycle: 1.5s;
    --breathCycle: 8.6s;
    --hazeLightCycle: 12s;
    /* master cycle, orb + reflection in sync */
}

.orb-stage {
    position: absolute;
    left: 50%;
    top: calc(var(--header-height) + var(--hero-content-offset) + var(--space-32) + var(--space-16));
    /* Anchored to hero so content height changes don't move the orb */
    transform: translateX(-50%);
    width: 100vw;
    /* full width, not limited by max-width */
    height: 160vh;
    /* enough room for the orb and fog */
    pointer-events: none;
    z-index: 0;

}

/* ====== BACKGROUND (base) + REFLECTION (animated) ====== */

/* reflection layer: cycles purple -> blue -> pink -> yellow and changes weight/height */
/* REFLECTION LAYER, smooth dissolve like the orb */
/* BACKGROUND BASE */
.orb-bg {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(900px 700px at 55% 55%,
            rgba(255, 214, 0, 0.36) 0%,
            rgba(255, 214, 0, 0.00) 70%),
        radial-gradient(1100px 760px at 60% 55%,
            rgba(255, 70, 190, 0.42) 0%,
            rgba(255, 70, 190, 0.00) 72%),
        radial-gradient(1200px 820px at 45% 55%,
            rgba(140, 80, 255, 0.52) 0%,
            rgba(140, 80, 255, 0.00) 75%),
        radial-gradient(600px 600px at 62% 65%,
            rgba(95, 150, 255, 0.66) 0%,
            rgba(95, 150, 255, 0.36) 42%,
            rgba(95, 150, 255, 0.00) 78%),
        linear-gradient(to bottom,
            rgb(0, 0, 0) 0%,
            rgba(7, 6, 25, 1) 30%,
            rgba(16, 14, 48, 0.6) 60%,
            rgba(16, 14, 48, 0.28) 80%,
            rgba(16, 14, 48, 0.00) 100%);
    filter: saturate(1.25) contrast(1.08);
    -webkit-filter: saturate(1.25) contrast(1.08);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 1) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 1) 100%);

}

/* LAYER 1: ROTATING COLOR REFLECTION FIELD (this creates visible motion) */
.orb-bg::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(650px 720px at 46% 65%,
            rgba(255, 214, 0, 0.68) 0%,
            rgba(255, 214, 0, 0.12) 48%,
            rgba(255, 214, 0, 0.00) 82%),
        radial-gradient(600px 560px at 74% -45%,
            rgba(255, 90, 210, 0.54) 0%,
            rgba(255, 90, 210, 0.16) 44%,
            rgba(255, 90, 210, 0.00) 80%),
        radial-gradient(600px 620px at 35% 60%,
            rgba(140, 80, 255, 0.62) 0%,
            rgba(140, 80, 255, 0.18) 40%,
            rgba(140, 80, 255, 0.00) 76%),
        radial-gradient(700px 600px at 42% 75%,
            rgba(95, 150, 255, 0.76) 0%,
            rgba(95, 150, 255, 0.16) 42%,
            rgba(95, 150, 255, 0.00) 78%);


    mix-blend-mode: screen;
    opacity: 0.82;

    filter: blur(26px) saturate(1.40) brightness(1.08);
    -webkit-filter: blur(26px) saturate(1.40) brightness(1.08);

    transform-origin: 50% 70%;
    will-change: transform;
    animation: reflectSpin var(--breathCycle) linear infinite;


    --reflectPhase: -35deg;
    /* tune this: 0deg to 360deg */
    --reflectDir: 1;
    /* 1 or -1, if direction is wrong */
}

/* LAYER 2: BREATHING WEIGHT (heavier/higher vs lighter/lower) */
.orb-bg::after {
    content: "";
    position: absolute;
    inset: 0;

    /* soft fog sheet that gets “pushed” by the orb */
    background:
        linear-gradient(to top,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(240, 230, 255, 0.07) 44%,
            rgba(0, 0, 0, 0.00) 86%);

    mix-blend-mode: screen;
    opacity: 0.5;

    filter: blur(18px) saturate(1.15) brightness(1.05);
    -webkit-filter: blur(18px) saturate(1.15) brightness(1.05);

    will-change: transform, opacity, filter;
    animation: reflectWeight var(--tCycle) ease-in-out infinite;
    animation-delay: -0.8s;
}

@keyframes reflectSpin {
    0% {
        transform: rotate(0deg) scale(1.03);
    }

    100% {
        transform: rotate(360deg) scale(1.03);
    }
}

@keyframes reflectWeight {
    0% {
        opacity: 0.55;
        transform: translateY(-30vh) scale(1.02);
        filter: blur(26px) saturate(1.30) brightness(1.06);
        -webkit-filter: blur(26px) saturate(1.30) brightness(1.06);
    }

    50% {
        opacity: 0.28;
        transform: translateY(-30vh) scale(1.00);
        filter: blur(16px) saturate(1.10) brightness(1.12);
        -webkit-filter: blur(16px) saturate(1.10) brightness(1.12);
    }

    100% {
        opacity: 0.55;
        transform: translateY(-30vh) scale(1.02);
        filter: blur(26px) saturate(1.30) brightness(1.06);
        -webkit-filter: blur(26px) saturate(1.30) brightness(1.06);
    }
}

/* ====== ORB + AURA ====== */
.orb-wrap {
    position: absolute;
    left: 50%;
    top: 100%;
    top: 10vh;
    /* move orb up/down */
    width: min(1300px, 120vw);
    height: min(1300px, 120vw);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
}

/* outer glow, deep */
.orb-aura {
    position: absolute;
    inset: -24%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 52% 66%,
            rgba(140, 80, 255, 0.58) 0%,
            rgba(140, 80, 255, 0.00) 66%),
        radial-gradient(circle at 60% 64%,
            rgba(255, 70, 190, 0.46) 0%,
            rgba(255, 70, 190, 0.00) 70%),
        radial-gradient(circle at 62% 70%,
            rgba(255, 214, 0, 0.34) 0%,
            rgba(255, 214, 0, 0.00) 72%),
        radial-gradient(circle at 45% 70%,
            rgba(95, 150, 255, 0.38) 0%,
            rgba(95, 150, 255, 0.00) 72%);
    filter: blur(40px) saturate(1.55) brightness(1.12);
    -webkit-filter: blur(40px) saturate(1.55) brightness(1.12);
    opacity: 1;
    mix-blend-mode: screen;
    animation: auraPulse var(--tCycle) ease-in-out infinite;
    animation-delay: -0.8s;

    will-change: transform, opacity, filter;
}

.orb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;

    /* show only top half feel, dome emerging */
    -webkit-mask-image: radial-gradient(circle at 50% 38%,
            rgba(0, 0, 0, 1) 55%,
            rgba(0, 0, 0, 0.85) 70%,
            rgba(0, 0, 0, 0) 88%);
    mask-image: radial-gradient(circle at 50% 38%,
            rgba(0, 0, 0, 1) 55%,
            rgba(0, 0, 0, 0.85) 70%,
            rgba(0, 0, 0, 0) 88%);

    background:
        radial-gradient(1000px 800px at 46% 18%,
            rgba(255, 246, 225, 0.80) 0%,
            rgba(255, 238, 190, 0.25) 50%,
            rgba(255, 214, 0, 0.14) 68%,
            rgba(255, 214, 0, 0.00) 84%),
        radial-gradient(980px 860px at 62% 24%,
            rgba(255, 90, 210, 0.78) 0%,
            rgba(255, 90, 210, 0.18) 45%,
            rgba(255, 90, 210, 0.00) 70%),
        radial-gradient(980px 860px at 22% 62%,
            rgba(95, 150, 255, 0.78) 0%,
            rgba(95, 150, 255, 0.20) 45%,
            rgba(95, 150, 255, 0.00) 74%),
        radial-gradient(1100px 1000px at 50% 58%,
            rgba(140, 80, 255, 0.70) 0%,
            rgba(140, 80, 255, 0.16) 52%,
            rgba(140, 80, 255, 0.00) 78%);
    background-size: 160% 160%;
    background-position:
        80% 10%,
        68% 14%,
        22% 68%,
        32% 72%;

    filter: saturate(1.55) contrast(1.10);
    -webkit-filter: saturate(1.55) contrast(1.10);

    box-shadow:
        0 0 90px rgba(140, 80, 255, 0.50),
        0 0 170px rgba(255, 70, 190, 0.34),
        0 0 240px rgba(255, 214, 0, 0.16);

    animation: orbSpin var(--tCycle) linear infinite, orbAurora var(--auroraCycle) ease-in-out infinite;
    will-change: transform, background-position;
}


/* ====== HEAVY FOG / HAZE (above orb) ====== */
.haze {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 90vh;
    height: 44vh;
    z-index: 5;
    /* above orb */
    pointer-events: none;
    overflow: visible;

    background:
        /* dark veil to swallow the bottom of the orb */
        linear-gradient(to top,
            rgba(6, 6, 22, 0.98) 0%,
            rgba(6, 6, 22, 0.74) 20%,
            rgba(6, 6, 22, 0.38) 44%,
            rgba(6, 6, 22, 0.00) 78%),

        /* bright fog sheet */
        linear-gradient(to top,
            rgba(255, 255, 255, 0.00) 0%,
            rgba(240, 230, 255, 0.4) 34%,
            rgba(240, 230, 255, 0.5) 46%,
            rgba(240, 230, 255, 0.4) 60%,
            rgba(255, 255, 255, 0.00) 78%),

        /* colored fog blooms */
        radial-gradient(1400px 520px at 45% 62%,
            rgba(140, 80, 255, 0.42) 0%,
            rgba(140, 80, 255, 0.00) 30%),
        radial-gradient(1400px 520px at 60% 60%,
            rgba(255, 70, 190, 0.38) 0%,
            rgba(255, 70, 190, 0.00) 36%),
        radial-gradient(1100px 460px at 70% 54%,
            rgba(255, 214, 0, 0.24) 0%,
            rgba(255, 214, 0, 0.00) 42%),
        radial-gradient(1200px 520px at 35% 66%,
            rgba(95, 150, 255, 0.36) 0%,
            rgba(95, 150, 255, 0.00) 54%);

    filter: blur(26px) saturate(1.25);
    -webkit-filter: blur(26px) saturate(1.25);
    opacity: 0.98;
    mix-blend-mode: screen;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    animation: hazeReflect var(--tCycle) linear infinite;
    will-change: opacity, filter, transform;
}

.haze::before {
    content: "";
    position: absolute;
    inset: -40% -20% -20%;
    background:
        radial-gradient(700px 520px at 18% 30%,
            rgba(255, 214, 0, 0.22) 0%,
            rgba(255, 214, 0, 0.00) 72%),
        radial-gradient(820px 620px at 78% 28%,
            rgba(255, 70, 190, 0.24) 0%,
            rgba(255, 70, 190, 0.00) 70%),
        radial-gradient(1000px 760px at 55% 55%,
            rgba(140, 80, 255, 0.26) 0%,
            rgba(140, 80, 255, 0.00) 74%),
        radial-gradient(1000px 720px at 42% 70%,
            rgba(95, 150, 255, 0.26) 0%,
            rgba(95, 150, 255, 0.00) 72%);
    background-size: 220% 220%;
    background-position:
        12% 22%,
        88% 18%,
        52% 58%,
        28% 76%;
    mix-blend-mode: screen;
    opacity: 0.95;
    filter: blur(18px) saturate(1.4) brightness(1.2);
    -webkit-filter: blur(18px) saturate(1.4) brightness(1.2);
    pointer-events: none;
    animation: hazeLightSpin var(--hazeLightCycle) linear infinite;
    transform-origin: 50% 60%;
    will-change: transform, opacity, background-position, filter;
}

.haze::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    top: 85%;
    height: 40vh;
    pointer-events: none;
    background:
        radial-gradient(1200px 420px at 50% 20%,
            rgba(240, 230, 255, 0.20) 0%,
            rgba(240, 230, 255, 0.00) 72%),
        radial-gradient(1200px 420px at 35% 30%,
            rgba(140, 80, 255, 0.18) 0%,
            rgba(140, 80, 255, 0.00) 70%),
        radial-gradient(1200px 420px at 65% 30%,
            rgba(255, 70, 190, 0.16) 0%,
            rgba(255, 70, 190, 0.00) 72%);
    filter: blur(28px) saturate(1.2);
    -webkit-filter: blur(28px) saturate(1.2);
    opacity: 0.5;
    mix-blend-mode: screen;
    animation: hazeBelowPulse calc(var(--tCycle) * 1.5) ease-in-out infinite;
    will-change: opacity, transform;
}

/* ====== KEYFRAMES ====== */

@keyframes orbSpin {
    0% {
        transform: rotate(0deg) scale(1.02);
    }

    100% {
        transform: rotate(360deg) scale(1.02);
    }
}

@keyframes orbAurora {
    0% {
        background-position:
            40% 10%,
            68% 14%,
            22% 68%,
            55% 72%;
    }

    30% {
        background-position:
            95% 42%,
            52% 36%,
            12% 48%,
            75% 60%;
    }

    70% {
        background-position:
            22% 50%,
            45% 24%,
            2% 28%,
            85% 52%;
    }

    100% {
        background-position:
            40% 10%,
            68% 14%,
            22% 68%,
            55% 72%;
    }
}

@keyframes filmDrift {

    0%,
    100% {
        transform: translate3d(-2%, 1%, 0) rotate(-4deg);
        opacity: 0.88;
    }

    50% {
        transform: translate3d(2%, -1%, 0) rotate(4deg);
        opacity: 0.98;
    }
}

@keyframes shineFlicker {
    0% {
        opacity: 0.00;
        transform: translate3d(-1%, -1%, 0) rotate(-6deg);
    }

    22% {
        opacity: 0.16;
    }

    48% {
        opacity: 0.00;
    }

    66% {
        opacity: 0.12;
        transform: translate3d(1.2%, 0.6%, 0) rotate(6deg);
    }

    100% {
        opacity: 0.00;
        transform: translate3d(-1%, -1%, 0) rotate(-6deg);
    }
}

@keyframes auraPulse {

    0%,
    100% {
        transform: translate3d(-1%, 1%, 0) scale(1.00);
        opacity: 0.60;
    }

    50% {
        transform: translate3d(1%, -1%, 0) scale(1.24);
        opacity: 1.00;
    }
}

@keyframes hazeReflect {
    0% {
        opacity: 1.00;
        filter: blur(30px) saturate(1.30);
        -webkit-filter: blur(30px) saturate(1.30);
        transform: translateX(-1.6%);
    }

    25% {
        opacity: 0.96;
        filter: blur(28px) saturate(1.26);
        -webkit-filter: blur(28px) saturate(1.26);
        transform: translateX(-0.6%);
    }

    50% {
        opacity: 0.92;
        filter: blur(26px) saturate(1.22);
        -webkit-filter: blur(26px) saturate(1.22);
        transform: translateX(0.6%);
    }

    75% {
        opacity: 0.88;
        filter: blur(22px) saturate(1.14);
        -webkit-filter: blur(22px) saturate(1.14);
        transform: translateX(1.6%);
    }

    100% {
        opacity: 1.00;
        filter: blur(30px) saturate(1.30);
        -webkit-filter: blur(30px) saturate(1.30);
        transform: translateX(-1.6%);
    }
}

@keyframes hazeBelowPulse {

    0%,
    100% {
        opacity: 0.35;
        transform: translateY(0) scaleY(0.95);
    }

    50% {
        opacity: 0.65;
        transform: translateY(2vh) scaleY(1.05);
    }
}


@keyframes caseStudyHazePulse {

    0%,
    100% {
        opacity: 0.28;
        transform: translateY(6px) scaleY(0.9);
        filter: blur(12px) saturate(1.15);
        -webkit-filter: blur(12px) saturate(1.15);
    }

    50% {
        opacity: 0.85;
        transform: translateY(0) scaleY(1.05);
        filter: blur(16px) saturate(1.25);
        -webkit-filter: blur(16px) saturate(1.25);
    }
}

/* Safari reliability tweaks */
@supports (-webkit-touch-callout: none) {
    .orb-bg::before {
        opacity: 1;
    }

    .haze {
        opacity: 1;
    }
}