/* static/css/imgen-red.css */

/* ==========================================================================
   imgen.red hero SVG layout
   ========================================================================== */

.auth-hero-mark {
    position: relative;
    width: min(980px, 94vw);
    margin: 0 auto 28px;
    display: grid;
    place-items: center;
    z-index: 1;
}

.auth-hero-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -34px;
    width: min(560px, 64vw);
    height: 96px;
    transform: translateX(-50%);
    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 0, 60, 0.34),
            rgba(255, 0, 60, 0.16) 34%,
            transparent 72%
        );
    filter: blur(20px);
    pointer-events: none;
    z-index: -1;
    animation: hero-card-energy 3.6s ease-in-out infinite;
}

.imgen-red-mark {
    width: min(100%, 980px);
    height: auto;
    overflow: visible;
}

/*
   IMPORTANT:
   Do not apply CSS transform animations to groups that already have
   SVG transform="" attributes, like .icon and .wordmark.
   CSS transform overrides SVG transform and breaks positioning.
*/

.imgen-red-mark .core-shape,
.imgen-red-mark .core-halo,
.imgen-red-mark .iris-a,
.imgen-red-mark .iris-b,
.imgen-red-mark .lens-core,
.imgen-red-mark .sensor-lines,
.imgen-red-mark .iris-dot,
.imgen-red-mark .iris-hot,
.imgen-red-mark .spark,
.imgen-red-mark .wordmark-main,
.imgen-red-mark .wordmark-dot,
.imgen-red-mark .wordmark-red {
    transform-box: fill-box;
    transform-origin: center;
}

/* ==========================================================================
   Entrance choreography — opacity/filter only on positioned SVG groups
   ========================================================================== */

.imgen-red-mark .ambient {
    opacity: 0;
    animation: imgen-ambient-in 900ms ease-out forwards;
}

.imgen-red-mark .icon {
    opacity: 0;
    animation: imgen-icon-in 980ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

.imgen-red-mark .wordmark {
    opacity: 0;
    animation: imgen-word-group-in 920ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards;
}

.imgen-red-mark .light-system {
    opacity: 0;
    animation: imgen-light-system-in 700ms ease-out 260ms forwards;
}

/* ==========================================================================
   Path drawing / energy lines
   ========================================================================== */

.imgen-red-mark .beam,
.imgen-red-mark .orbit,
.imgen-red-mark .wordmark-underline {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation-name: imgen-draw, imgen-energy-breathe;
    animation-duration: 1800ms, 3200ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease-in-out;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
}

.imgen-red-mark .beam-one {
    animation-delay: 120ms, 1900ms;
}

.imgen-red-mark .beam-two {
    animation-delay: 260ms, 2050ms;
}

.imgen-red-mark .beam-three {
    animation-delay: 420ms, 2200ms;
}

.imgen-red-mark .orbit-outer {
    animation-delay: 180ms, 1950ms;
}

.imgen-red-mark .orbit-inner {
    animation-delay: 340ms, 2100ms;
}

.imgen-red-mark .wordmark-underline {
    animation-delay: 760ms, 2400ms;
}

/* ==========================================================================
   Synthetic eye / render core
   ========================================================================== */

.imgen-red-mark .core-halo {
    animation: imgen-halo-pulse 3.2s ease-in-out 850ms infinite;
}

.imgen-red-mark .core-shape {
    animation: imgen-core-pulse 2.8s ease-in-out 950ms infinite;
}

.imgen-red-mark .iris-a {
    animation: imgen-iris-wide 3.2s ease-in-out 1000ms infinite;
}

.imgen-red-mark .iris-b {
    animation: imgen-iris-tight 2.8s ease-in-out 1050ms infinite;
}

.imgen-red-mark .lens-core {
    animation: imgen-lens-float 3.4s ease-in-out 1100ms infinite;
}

.imgen-red-mark .sensor-lines {
    animation: imgen-sensor-scan 2.8s ease-in-out 1200ms infinite;
}

.imgen-red-mark .iris-dot {
    animation: imgen-core-eye-pulse 2.4s ease-in-out 1150ms infinite;
}

.imgen-red-mark .iris-hot {
    animation: imgen-hot-core-pulse 2.4s ease-in-out 1150ms infinite;
}

/* ==========================================================================
   Wordmark
   ========================================================================== */

.imgen-red-mark .wordmark-main,
.imgen-red-mark .wordmark-dot,
.imgen-red-mark .wordmark-red {
    opacity: 0;
    animation: imgen-word-in 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.imgen-red-mark .wordmark-main {
    animation-delay: 360ms;
}

.imgen-red-mark .wordmark-dot {
    animation-delay: 500ms;
}

.imgen-red-mark .wordmark-red {
    animation-delay: 570ms;
}

.imgen-red-mark .wordmark-dot,
.imgen-red-mark .wordmark-red {
    filter: drop-shadow(0 0 14px rgba(255, 0, 60, 0.38));
}

/* ==========================================================================
   Sparks / particles
   ========================================================================== */

.imgen-red-mark .spark {
    opacity: 0;
    animation: imgen-spark 3s ease-in-out infinite;
}

.imgen-red-mark .spark-1 { animation-delay: 0.35s; }
.imgen-red-mark .spark-2 { animation-delay: 0.58s; }
.imgen-red-mark .spark-3 { animation-delay: 0.82s; }
.imgen-red-mark .spark-4 { animation-delay: 1.06s; }
.imgen-red-mark .spark-5 { animation-delay: 1.30s; }
.imgen-red-mark .spark-6 { animation-delay: 1.54s; }
.imgen-red-mark .spark-7 { animation-delay: 1.78s; }
.imgen-red-mark .spark-8 { animation-delay: 2.02s; }
.imgen-red-mark .spark-9 { animation-delay: 2.26s; }

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes imgen-ambient-in {
    from {
        opacity: 0;
        filter: blur(10px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes imgen-icon-in {
    from {
        opacity: 0;
        filter: blur(10px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes imgen-word-group-in {
    from {
        opacity: 0;
        filter: blur(10px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes imgen-light-system-in {
    from {
        opacity: 0;
        filter: blur(6px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes imgen-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes imgen-energy-breathe {
    0%,
    100% {
        opacity: 0.56;
    }

    50% {
        opacity: 1;
    }
}

@keyframes imgen-word-in {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(8px);
    }

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

@keyframes imgen-halo-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.76;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes imgen-core-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
        filter: drop-shadow(0 0 16px rgba(255, 0, 60, 0.48));
    }

    50% {
        transform: scale(1.028);
        opacity: 0.97;
        filter: drop-shadow(0 0 34px rgba(255, 0, 60, 0.86));
    }
}

@keyframes imgen-iris-wide {
    0%,
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 0.86;
    }

    50% {
        transform: scaleX(1.035) scaleY(0.97);
        opacity: 1;
    }
}

@keyframes imgen-iris-tight {
    0%,
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 0.84;
    }

    50% {
        transform: scaleX(0.97) scaleY(1.045);
        opacity: 1;
    }
}

@keyframes imgen-lens-float {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.025) rotate(1deg);
        opacity: 0.96;
    }
}

@keyframes imgen-sensor-scan {
    0%,
    100% {
        opacity: 0.26;
        transform: translateY(-1px);
    }

    50% {
        opacity: 0.58;
        transform: translateY(1px);
    }
}

@keyframes imgen-core-eye-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.82);
        opacity: 0.86;
    }
}

@keyframes imgen-hot-core-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 0, 60, 0.7));
    }

    50% {
        transform: scale(1.18);
        opacity: 0.84;
        filter: drop-shadow(0 0 18px rgba(255, 0, 60, 1));
    }
}

@keyframes imgen-spark {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.45) rotate(0deg);
    }

    16% {
        opacity: 1;
    }

    48% {
        opacity: 0.95;
        transform: translateY(-6px) scale(1.05) rotate(90deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.45) rotate(180deg);
    }
}

@keyframes hero-card-energy {
    0%,
    100% {
        opacity: 0.45;
        transform: translateX(-50%) scaleX(0.92);
    }

    50% {
        opacity: 0.95;
        transform: translateX(-50%) scaleX(1.08);
    }
}

/* ==========================================================================
   Responsive tuning
   ========================================================================== */

@media (max-width: 760px) {
    .auth-hero-mark {
        width: min(760px, 96vw);
        margin-bottom: 20px;
    }

    .auth-hero-mark::after {
        bottom: -26px;
        width: min(440px, 72vw);
        height: 72px;
    }

    .imgen-red-mark .beam-three {
        opacity: 0.32;
    }
}

@media (max-width: 520px) {
    .auth-hero-mark {
        width: 104vw;
        margin-left: -2vw;
        margin-right: -2vw;
        margin-bottom: 18px;
    }

    .imgen-red-mark .spark {
        animation-duration: 3.6s;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .imgen-red-mark *,
    .imgen-red-mark *::before,
    .imgen-red-mark *::after,
    .auth-hero-mark::after {
        animation: none !important;
        transition: none !important;
    }

    .imgen-red-mark .ambient,
    .imgen-red-mark .icon,
    .imgen-red-mark .wordmark,
    .imgen-red-mark .light-system,
    .imgen-red-mark .wordmark-main,
    .imgen-red-mark .wordmark-dot,
    .imgen-red-mark .wordmark-red {
        opacity: 1 !important;
        filter: none !important;
    }

    .imgen-red-mark .wordmark-main,
    .imgen-red-mark .wordmark-dot,
    .imgen-red-mark .wordmark-red,
    .imgen-red-mark .core-shape,
    .imgen-red-mark .core-halo,
    .imgen-red-mark .iris-a,
    .imgen-red-mark .iris-b,
    .imgen-red-mark .lens-core,
    .imgen-red-mark .sensor-lines,
    .imgen-red-mark .iris-dot,
    .imgen-red-mark .iris-hot,
    .imgen-red-mark .spark {
        transform: none !important;
    }

    .imgen-red-mark .beam,
    .imgen-red-mark .orbit,
    .imgen-red-mark .wordmark-underline {
        stroke-dashoffset: 0 !important;
    }

    .imgen-red-mark .spark {
        opacity: 1 !important;
    }
}