/* ============================================================
 * V4 Aurora Geometric — Hero + CTA Section
 * ============================================================
 * Renders the brand logo, headline/subline, animated particle
 * canvas, and the room-name/CTA card in the V4 Aurora Geometric
 * design language. Companion to v4-cards.css (trust-section).
 *
 * Brand palette (matches logo.svg + v4-cards.css):
 *   - deep blue  #0a1929 (section background)
 *   - tech blue  #2B5F8E → #3D8EB9 → #5BA4C9 (logo gradients)
 *   - teal       #4ECDC4 (accents, brackets, glow)
 *   - white      #ffffff (headline)
 *
 * IMPORTANT: Vendor classes (`.hero`, `.cta`, `.section-inner`,
 * `.button-primary`, `.form-input`, `.reveal-from-bottom`, etc.)
 * are kept untouched — every V4 visual lives under its own
 * `v4-*` class so we can drop the V4 styling without affecting
 * the underlying markup that Landing.js / Brand.js / Common.js
 * depend on.
 * ============================================================ */

/* === Outer wrapper: dark navy === */
.v4-hero {
    position: relative;
    background: #0a1929;
    padding: 96px 24px 80px;
    overflow: hidden;
    isolation: isolate; /* keeps particle/grid z-index contained */
}

/* === Sister-page utility: section wrapper for non-`.v4-hero` pages ===
 * Login.html uses `class="hero section center-card-section v4-form-section"`
 * (center-card-stacked layout, NOT 2-column grid) — so it can't adopt
 * `.v4-hero` directly. Add `.v4-hero-section` next to its existing class
 * list to opt into the hero-illustration positioning context (relative +
 * isolation), without overriding any vendor or v4-form-* layout classes.
 */
.v4-hero-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* === Grid-pattern overlay (Layer 2, above particles) === */
.v4-hero-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(91, 164, 201, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(91, 164, 201, 0.04) 1px, transparent 1px) 0 0 / 32px 32px;
    pointer-events: none;
    z-index: 1;
}

/* === Hero illustration bg (Layer 1.5, above particles, behind grid+content) ===
 * Hex-grid raster on the right side, fades to dark navy on the left so the
 * hero-copy stays readable. mix-blend-mode: screen keeps the image bright
 * without dimming the underlying #0a1929 background. */
.v4-hero-illustration-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/v4-hero/bg-hex-grid.png');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    opacity: 0.42;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
}

/* Left-side dark fade — pulls bg to dark navy where hero-copy sits.
 * Paints inside `.v4-hero-illustration-bg`'s stacking context, on top of
 * the bg-image but still under grid (.v4-hero-grid, sibling z-index 1,
 * later in source) and hero-inner (z-index 2). */
.v4-hero-illustration-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #0a1929 0%,
        rgba(10, 25, 41, 0.65) 35%,
        rgba(10, 25, 41, 0.15) 65%,
        transparent 100%
    );
    pointer-events: none;
}

/* === Hero illustration accent (Layer 4, top-right decorative SVG) ===
 * Hex-stack icon, 120px, top-right corner with teal glow + slow float.
 * Decorative only (aria-hidden); brand mark stays the 256x256 logo in
 * `.v4-hero-logo`. */
.v4-hero-illustration-accent {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 120px;
    height: 120px;
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 0 18px rgba(78, 205, 196, 0.45));
    animation: v4-hero-accent-float 6s ease-in-out infinite;
}

.v4-hero-illustration-accent img {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes v4-hero-accent-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* === Accent modifier: overlap brand logo (sister-page login variant) ===
 * Center-card layouts (login) put the 256x256 brand logo on the right
 * side of the section. Default top-right accent sits next to it — small-
 * feeling. Push the accent down-and-left so it overlaps the brand logo's
 * top-right corner, layering the hex-stack decoration on top of the AS
 * mark with a few pixels extending beyond the logo's right edge so the
 * accent reads as a separate decorative element.
 * Still decorative (aria-hidden); the logo remains the primary mark. */
.v4-hero-illustration-accent.v4-hero-illustration-accent--overlap-logo {
    top: 440px;
    right: 290px;
}

/* === Accent modifier: newroom-specific top compensation ===
 * The 2-col grid `.v4-hero-inner` uses `align-items: center`, so logo-top
 * drifts depending on copy-block height. Newroom's copy is shorter (287px)
 * than landing's (342px), pushing the logo ~28px higher in the row. Without
 * compensation the default `top:32` accent ends up INSIDE the logo's top
 * edge instead of floating above it.
 * Compensate by setting `top: 0` so the accent sits at section-content-top,
 * which lands ~15px above the newroom logo-top — matching the gap that
 * landing naturally gets (15px above its taller-row logo).
 * Add this class to the .v4-hero-illustration-accent div on newroom.html
 * only; other 2-col pages keep the default offset. */
.v4-hero-illustration-accent.v4-hero-illustration-accent--newroom-nudge {
    top: 0;
}

/* === Particle canvas (Layer 1, behind everything else) === */
.v4-hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* === Inner content (Layer 3, above grid + particles) ===
 * Desktop: 2-column grid — copy (Text) links, logo rechts (geflusht mit
 * container-rechts), CTA-card darunter über beide Spalten.
 * Mobile (<768px) revert zu single-column stacked (logo centered). */
.v4-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-areas:
        'copy logo'
        'cta cta';
    grid-template-columns: 1fr auto; /* copy flexibel, logo genau so breit wie nötig */
    gap: 48px 64px; /* row-gap column-gap */
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

/* === Copy column (Text links) ===
 * Vendor `.hero-copy` setzt min-width:552px; width:552px; padding-right:64px
 * auf Desktop — würde die V4-1fr-Grid-Spalte sprengen. V4-Layout gewinnt
 * über Cascade-Order (v4-hero.css lädt nach landing.css), aber wir setzen
 * die Werte hier explizit auf auto/0 für Klarheit und damit zukünftige
 * Vendor-Änderungen die Grid-Geometrie nicht aushebeln. */
.v4-hero-copy {
    grid-area: copy;
    text-align: left;
    width: auto;
    min-width: 0;
    padding-right: 0;
}

/* === Logo: 256x256 SVG, teal drop-shadow ===
 * `justify-self: end` schiebt das Logo an den rechten Rand der (auto-breiten)
 * Logo-Spalte — sitzt damit optisch "weit rechts" statt mittig in einer 1fr-Spalte. */
.v4-hero-logo {
    grid-area: logo;
    justify-self: end;
    margin: 0;
    width: 256px;
    height: 256px;
}

/* === Vendor `.hero-figure` override ===
 * Vendor-Pattern legt dekorative ::before/::after SVG-Illustrationen und
 * .hero-figure-box-* Cubes über das Element. Im V4-Kontext ersetzen wir
 * das durch die 256x256 Hexagon-Logo. Wenn beide Klassen kombiniert werden
 * (`hero-figure v4-hero-logo`), blenden wir die Vendor-Deko aus. */
.v4-hero-logo.hero-figure::before,
.v4-hero-logo.hero-figure::after {
    display: none !important;
    content: none !important;
}

.v4-hero-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 24px rgba(78, 205, 196, 0.5));
    animation: v4-hero-logo-pulse 4s ease-in-out infinite;
}

@keyframes v4-hero-logo-pulse {
    0%,
    100% {
        filter: drop-shadow(0 0 24px rgba(78, 205, 196, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 36px rgba(78, 205, 196, 0.75));
        transform: scale(1.02);
    }
}

/* === Headline === */
.v4-hero-title {
    color: #ffffff;
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0 0 16px;
}

/* === Subline === */
.v4-hero-paragraph {
    color: rgba(255, 255, 255, 0.72);
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 0 48px;
}

/* === CTA wrapper — spannt unten über beide Spalten === */
.v4-hero-cta {
    grid-area: cta;
    justify-self: center;
    width: 100%;
    max-width: 640px;
    margin: 0;
}

/* === CTA card: glassmorphic panel + V4 corner-brackets + accent-line === */
.v4-cta-card {
    position: relative;
    padding: 40px 32px;
    background: rgba(15, 30, 46, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(78, 205, 196, 0.12);
    max-width: 640px;
    margin: 0 auto;
}

/* Accent-line on top of the card (teal gradient) */
.v4-cta-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4ECDC4 50%, transparent);
    pointer-events: none;
}

/* === Four corner-brackets via dedicated child elements === */
.v4-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 1;
}

.v4-corner-tl {
    top: -8px;
    left: -8px;
    border-top: 2px solid #4ECDC4;
    border-left: 2px solid #4ECDC4;
}

.v4-corner-tr {
    top: -8px;
    right: -8px;
    border-top: 2px solid #4ECDC4;
    border-right: 2px solid #4ECDC4;
}

.v4-corner-bl {
    bottom: -8px;
    left: -8px;
    border-bottom: 2px solid #4ECDC4;
    border-left: 2px solid #4ECDC4;
}

.v4-corner-br {
    bottom: -8px;
    right: -8px;
    border-bottom: 2px solid #4ECDC4;
    border-right: 2px solid #4ECDC4;
}

/* === CTA title (above input) === */
.v4-cta-title {
    color: #ffffff;
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 0 0 24px;
    text-align: center;
}

/* === Input + generate-room-button row === */
.v4-cta-input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.v4-room-input-wrapper {
    position: relative;
    display: flex;
    gap: 8px;
}

.v4-form-input {
    flex: 1;
    min-width: 0; /* prevent flex children from overflowing */
    padding: 14px 16px;
    background: rgba(10, 25, 41, 0.8);
    border: 1px solid rgba(78, 205, 196, 0.3);
    color: #ffffff;
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 16px;
    border-radius: 0;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.v4-form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.v4-form-input:focus {
    outline: none;
    border-color: #4ECDC4;
    box-shadow: 0 0 12px rgba(78, 205, 196, 0.3);
}

.v4-gen-room-btn {
    flex: 0 0 auto;
    padding: 14px 18px;
    background: rgba(78, 205, 196, 0.1);
    border: 1px solid rgba(78, 205, 196, 0.3);
    color: #4ECDC4;
    cursor: pointer;
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 16px;
    border-radius: 0;
    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.12s ease;
}

.v4-gen-room-btn:hover {
    background: rgba(78, 205, 196, 0.2);
    box-shadow: 0 0 12px rgba(78, 205, 196, 0.4);
    transform: translateY(-1px);
}

.v4-gen-room-btn:active {
    transform: translateY(0);
}

/* === Pill buttons === */
.v4-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 0; /* V4 spec: sharp corners */
    cursor: pointer;
    transition:
        box-shadow 0.2s ease,
        transform 0.12s ease,
        background 0.2s ease;
    text-decoration: none;
    line-height: 1.2;
}

.v4-button-primary {
    background: linear-gradient(65deg, #2b5f8e 0%, #4ecdc4 100%);
    color: #ffffff;
    box-shadow: 0 0 24px rgba(78, 205, 196, 0.4);
    width: 100%;
}

.v4-button-primary:hover {
    box-shadow: 0 0 36px rgba(78, 205, 196, 0.7);
    transform: translateY(-1px);
}

.v4-button-primary:active {
    transform: translateY(0);
}

.v4-button-secondary {
    background: transparent;
    color: #4ECDC4;
    border: 2px solid #4ECDC4;
    width: 100%;
}

.v4-button-secondary:hover {
    background: rgba(78, 205, 196, 0.1);
    box-shadow: 0 0 16px rgba(78, 205, 196, 0.3);
    transform: translateY(-1px);
}

.v4-button-secondary:active {
    transform: translateY(0);
}

/* === Last-room line === */
.v4-last-room {
    margin-top: 24px;
    text-align: center;
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.v4-last-room span {
    margin-right: 6px;
}

.v4-last-room a {
    color: #4ECDC4;
    text-decoration: none;
    border-bottom: 1px solid rgba(78, 205, 196, 0.4);
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.v4-last-room a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* === Reveal-Animation Override (vendor `.reveal-from-bottom` /
 * `.is-revealing`) — keeps the hero visible on first paint and
 * prevents the scroll-reveal logic from leaving it invisible
 * if JS hasn't run yet. Mirrors v4-cards.css pattern. === */
.v4-hero.reveal-from-bottom {
    opacity: 1 !important;
    transform: none !important;
}

/* === Mobile (<768px) — single-column stacked ===
 * Logo zuerst, dann copy (centered), dann CTA-card. */
@media (max-width: 768px) {
    .v4-hero {
        padding: 64px 16px 56px;
    }

    .v4-hero-inner {
        grid-template-areas:
            'logo'
            'copy'
            'cta';
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .v4-hero-copy {
        text-align: center;
    }

    .v4-hero-logo {
        width: 192px;
        height: 192px;
        margin-bottom: 0;
        justify-self: center; /* mobile revert: centered statt rechts */
    }

    .v4-hero-title {
        font-size: 32px;
        text-align: center;
    }

    .v4-hero-paragraph {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .v4-cta-card {
        padding: 28px 20px;
    }

    .v4-cta-title {
        font-size: 18px;
    }

    /* Mobile: hero illustration hidden — text-only on small screens.
     * The bg raster would compress to illegible noise on narrow viewports
     * and the accent icon would crowd the centered logo. */
    .v4-hero-illustration-bg,
    .v4-hero-illustration-accent {
        display: none;
    }
}

/* === Reduced motion: drop logo pulse + accent float + freeze particles via JS === */
@media (prefers-reduced-motion: reduce) {
    .v4-hero-logo-img,
    .v4-hero-illustration-accent {
        animation: none;
    }
}