/* ================================================================
   CET crew — Final brand visuals
   ================================================================ */

:root {
    --ambient-glow: rgba(112, 64, 178, 0.22);
    --ambient-glow-soft: rgba(145, 97, 208, 0.10);
    --card-glow: rgba(112, 64, 178, 0.16);
    --hero-panel: rgba(112, 64, 178, 0.11);
}

html[data-theme="light"] {
    --ambient-glow: rgba(112, 64, 178, 0.12);
    --ambient-glow-soft: rgba(112, 64, 178, 0.07);
    --card-glow: rgba(112, 64, 178, 0.10);
    --hero-panel: rgba(112, 64, 178, 0.07);
}


/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.hero {
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 42%,
            var(--hero-panel),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 0%,
            var(--ambient-glow-soft),
            transparent 34%
        ),
        var(--background);
}

.hero::before {
    top: -32%;
    right: -18%;

    width: 900px;
    height: 900px;

    background:
        radial-gradient(
            circle,
            var(--ambient-glow),
            transparent 66%
        );

    opacity: 1;
    filter: blur(90px);

    z-index: 0;
}

.hero__grid {
    z-index: 1;
}

.hero__content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    text-wrap: balance;
}

.hero__description {
    line-height: 1.55;
}

.hero__visual {
    min-height: 520px;

    padding: 46px 26px;

    isolation: isolate;

    opacity: 0.72;

    filter:
        drop-shadow(
            0 0 34px
            rgba(112, 64, 178, 0.20)
        );

    animation:
        cetcrew-hero-visual
        900ms
        ease
        both;

    animation-delay: 120ms;
}

.hero__visual::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 8% -8%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(112, 64, 178, 0.16),
            transparent 62%
        );

    filter: blur(24px);

    pointer-events: none;
}

.hero__visual-mark,
.hero__visual-line {
    position: relative;
    z-index: 2;
}

.hero__visual-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(145, 97, 208, 0.75),
            rgba(112, 64, 178, 0.28),
            transparent
        );
}

.hero__visual-mark {
    transition:
        opacity 320ms ease,
        transform 500ms ease;
}

.hero__visual-mark:first-of-type {
    transform: translateX(-12px);
}

.hero__visual-mark--right {
    transform: translateX(12px);
}


/* Polygon field */

.hero__polygon-network {
    position: absolute;
    z-index: 0;

    inset:
        -24%
        -62%
        -24%
        -48%;

    width: 210%;
    height: 150%;

    overflow: visible;
    pointer-events: none;

    color: var(--brand-light);

    opacity: 0.24;

    transform-origin: 50% 50%;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.45) 10%,
            black 28%,
            black 82%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.45) 10%,
            black 28%,
            black 82%,
            transparent 100%
        );

    animation:
        cetcrew-polygon-drift
        16s
        ease-in-out
        infinite
        alternate;
}

.hero__polygon {
    fill: none;
    stroke: currentColor;

    stroke-width: 1;

    vector-effect: non-scaling-stroke;
}

.hero__polygon--outer {
    opacity: 0.38;
}

.hero__polygon--middle {
    opacity: 0.24;
}

.hero__polygon--inner {
    opacity: 0.16;
}

.hero__polygon-node {
    fill: currentColor;

    opacity: 0.36;

    transform-box: fill-box;
    transform-origin: center;

    animation:
        cetcrew-polygon-node
        4.8s
        ease-in-out
        infinite;
}

.hero__polygon-node--2 {
    animation-delay: -1.6s;
}

.hero__polygon-node--3 {
    animation-delay: -3.2s;
}


/* Hero motion */

@keyframes cetcrew-hero-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cetcrew-hero-visual {
    from {
        opacity: 0;

        transform:
            translateX(24px)
            scale(0.985);
    }

    to {
        opacity: 0.72;

        transform:
            translateX(0)
            scale(1);
    }
}

@keyframes cetcrew-polygon-drift {
    0% {
        transform:
            translate3d(-12px, 8px, 0)
            rotate(-0.4deg)
            scale(0.99);

        opacity: 0.20;
    }

    50% {
        transform:
            translate3d(3px, -3px, 0)
            rotate(0deg)
            scale(1.005);

        opacity: 0.28;
    }

    100% {
        transform:
            translate3d(15px, -10px, 0)
            rotate(0.4deg)
            scale(1.015);

        opacity: 0.22;
    }
}

@keyframes cetcrew-polygon-node {
    0%,
    100% {
        opacity: 0.18;
        transform: scale(0.75);
    }

    50% {
        opacity: 0.70;
        transform: scale(1.35);
    }
}

.hero__content > * {
    animation:
        cetcrew-hero-rise
        680ms
        ease
        both;
}

.hero__content > :nth-child(2) {
    animation-delay: 70ms;
}

.hero__content > :nth-child(3) {
    animation-delay: 130ms;
}

.hero__content > :nth-child(4) {
    animation-delay: 190ms;
}

.hero__content > :nth-child(5) {
    animation-delay: 240ms;
}