/* ============================================
   MONTELEONE TONSOR — BASE STYLES
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

/* ─── Marble Background — NO dark mask, uniform everywhere ─── */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../assets/marble-texture.png');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat-y;
    background-attachment: fixed;
    opacity: 0.7;
    z-index: -2;
    pointer-events: none;
}

/* ─── Marble glossy reflection — realistic polish ─── */
body .marble-shine {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        /* Primary diagonal sheen */
        linear-gradient(
            130deg,
            transparent 0%,
            transparent 28%,
            rgba(255,255,255,0.06) 32%,
            rgba(255,255,255,0.12) 36%,
            rgba(255,255,255,0.06) 40%,
            transparent 44%,
            transparent 55%,
            rgba(255,255,255,0.05) 58%,
            rgba(255,255,255,0.10) 62%,
            rgba(255,255,255,0.05) 66%,
            transparent 70%,
            transparent 100%
        ),
        /* Secondary cross-sheen */
        linear-gradient(
            240deg,
            transparent 0%,
            transparent 45%,
            rgba(255,255,255,0.04) 48%,
            rgba(255,255,255,0.08) 52%,
            rgba(255,255,255,0.04) 56%,
            transparent 60%,
            transparent 100%
        );
    z-index: -1;
    pointer-events: none;
}

/* NO dark overlay — marble is clean and uniform everywhere */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Only the subtle scroll-following ambient light, zero dark tint */
    background:
        radial-gradient(ellipse 50% 35% at 50% 16%,
            rgba(248, 250, 255, 0.08) 0%,
            transparent 100%);
    z-index: -1;
    pointer-events: none;
    transition: background-position 120ms linear;
}

/* ─── Typography Defaults ─── */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--space-2);
    color: var(--soft-white);
}

.display {
    font-size: var(--display-size);
    font-weight: var(--display-weight);
    line-height: var(--display-line-height);
    letter-spacing: var(--display-tracking);
}

.headline-lg {
    font-size: var(--headline-lg-size);
    font-weight: var(--headline-lg-weight);
    line-height: var(--headline-lg-line-height);
    letter-spacing: var(--headline-lg-tracking);
}

.headline-md {
    font-size: var(--headline-md-size);
    font-weight: var(--headline-md-weight);
    line-height: var(--headline-md-line-height);
    letter-spacing: var(--headline-md-tracking);
}

.body-lg {
    font-size: var(--body-lg-size);
    font-weight: var(--body-lg-weight);
    line-height: var(--body-lg-line-height);
}

.body-md {
    font-size: var(--body-md-size);
    font-weight: var(--body-md-weight);
    line-height: var(--body-md-line-height);
}

.body-sm {
    font-size: var(--body-sm-size);
    font-weight: var(--body-sm-weight);
    line-height: var(--body-sm-line-height);
}

.label-caps {
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

p {
    margin-bottom: var(--space-2);
}

/* ─── Container ─── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--margin);
}

.section {
    margin-bottom: var(--space-15);
}

/* ─── Animations ─── */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════
   LED TUBE COMPONENT — Full rebuild
   ═══════════════════════════════════════════ */

/* ─── Container ─── */
.led-tube-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: clamp(220px, 30vh, 340px);
    margin-bottom: 70px;
    overflow: visible;
}

/* ─── Wires — from top (navbar) down to tube ─── */
.led-wire {
    position: absolute;
    top: 0;
    width: 1px;
    bottom: 8px;
    background: linear-gradient(180deg,
        rgba(160,163,168,0.5) 0%,
        rgba(150,153,158,0.45) 50%,
        rgba(140,143,148,0.6) 100%);
    z-index: 1;
}
.led-wire.wire-left  { left: calc(50% - min(195px, 28vw)); }
.led-wire.wire-right { right: calc(50% - min(195px, 28vw)); }

/* ─── LED Tube body ─── */
.led-tube {
    position: relative;
    width: min(440px, 66vw);
    height: 14px;
    border-radius: 7px;
    z-index: 2;
    flex-shrink: 0;
    /* Tube glass — always visible, unlit state */
    background: linear-gradient(180deg,
        rgba(220,220,218,0.85) 0%,
        rgba(210,208,205,0.9) 40%,
        rgba(200,198,192,0.85) 100%
    );
    box-shadow:
        inset 0 0 3px 1px rgba(255,255,255,0.1),
        0 0 4px 1px rgba(200,200,200,0.15);
    transition: box-shadow 0.15s ease;
}

/* ─── Tube lit state — only glow changes, tube stays solid ─── */
.led-tube.lit {
    background: linear-gradient(180deg,
        #fff 0%,
        #faf9f4 35%,
        #f5f3ea 65%,
        #edeae0 100%
    );
    box-shadow:
        inset 0 0 6px 1px rgba(255,255,250,0.5),
        0 0 10px 3px rgba(255,252,245,0.65),
        0 0 30px 8px rgba(248,250,255,0.3),
        0 0 60px 18px rgba(248,250,255,0.12),
        0 0 100px 30px rgba(248,250,255,0.05);
}

/* Chrome end caps */
.led-cap {
    display: block;
    position: absolute;
    top: -1px;
    width: 11px;
    height: 16px;
    border-radius: 3px;
    background: linear-gradient(180deg,
        #808386 0%,
        #a8abae 18%,
        #5c5f62 45%,
        #8a8d90 65%,
        #424548 85%,
        #585b5e 100%
    );
    z-index: 3;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 1px 2px rgba(0,0,0,0.4);
}
.led-cap.left  { left: -2px; border-radius: 3px 1px 1px 3px; }
.led-cap.right { right: -2px; border-radius: 1px 3px 3px 1px; }

/* No pseudo-elements on tube or caps — wires are separate divs now */
.led-tube::before,
.led-tube::after,
.led-cap::after { display: none; }

.led-tube-container::before,
.led-tube-container::after { display: none; }

.led-tube::selection {
    background: transparent;
}

/* ─── Light cone — overlaps tube for smooth diffusion ─── */
.led-light-cone {
    position: absolute;
    /* Start ABOVE the tube center to avoid sharp line */
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: min(700px, 90vw);
    height: clamp(250px, 38vh, 450px);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 0;
    /* Diffused light — NO sharp edges anywhere */
    background:
        radial-gradient(ellipse 80% 55% at 50% 8%,
            rgba(248, 250, 255, 0.25) 0%,
            rgba(248, 250, 255, 0.14) 20%,
            rgba(248, 250, 255, 0.06) 45%,
            rgba(248, 250, 255, 0.02) 70%,
            transparent 100%);
}

.led-light-cone.lit {
    opacity: 1;
}

/* ═══════════════════════════════════════════
   LED FLICKER-ON ANIMATION (keyframes)
   ═══════════════════════════════════════════ */

@keyframes ledFlicker {
    0% {
        opacity: 1;
        filter: brightness(0.78);
        box-shadow:
            inset 0 0 3px 1px rgba(255,255,255,0.1),
            0 0 4px 1px rgba(200,200,200,0.15);
    }
    6% {
        opacity: 1;
        filter: brightness(1.85);
        box-shadow:
            inset 0 0 6px 1px rgba(255,255,250,0.5),
            0 0 12px 4px rgba(255,252,245,0.7),
            0 0 34px 9px rgba(248,250,255,0.34);
    }
    10% {
        opacity: 1;
        filter: brightness(0.72);
        box-shadow:
            inset 0 0 3px 1px rgba(255,255,255,0.12),
            0 0 4px 1px rgba(200,200,200,0.16);
    }
    17% {
        opacity: 1;
        filter: brightness(1.72);
        box-shadow:
            inset 0 0 6px 1px rgba(255,255,250,0.48),
            0 0 11px 4px rgba(255,252,245,0.64),
            0 0 30px 9px rgba(248,250,255,0.3);
    }
    24% {
        opacity: 1;
        filter: brightness(0.8);
        box-shadow:
            inset 0 0 3px 1px rgba(255,255,255,0.14),
            0 0 4px 1px rgba(200,200,200,0.16);
    }
    52% {
        opacity: 1;
        filter: brightness(0.9);
        box-shadow:
            inset 0 0 4px 1px rgba(255,255,255,0.18),
            0 0 5px 1px rgba(255,252,245,0.2),
            0 0 12px 4px rgba(248,250,255,0.08);
    }
    68% {
        opacity: 1;
        filter: brightness(1.14);
        box-shadow:
            inset 0 0 5px 1px rgba(255,255,250,0.34),
            0 0 7px 2px rgba(255,252,245,0.34),
            0 0 18px 5px rgba(248,250,255,0.14);
    }
    84% {
        opacity: 1;
        filter: brightness(1.3);
        box-shadow:
            inset 0 0 6px 1px rgba(255,255,250,0.46),
            0 0 9px 3px rgba(255,252,245,0.56),
            0 0 26px 7px rgba(248,250,255,0.25);
    }
    100% {
        opacity: 1;
        filter: brightness(1.38);
        box-shadow:
            inset 0 0 6px 1px rgba(255,255,250,0.5),
            0 0 10px 3px rgba(255,252,245,0.65),
            0 0 30px 8px rgba(248,250,255,0.3);
    }
}

@keyframes ledGlowFlicker {
    0%   { opacity: 0; }
    6%   { opacity: 0.72; }
    10%  { opacity: 0.04; }
    17%  { opacity: 0.76; }
    24%  { opacity: 0.08; }
    52%  { opacity: 0.14; }
    68%  { opacity: 0.42; }
    84%  { opacity: 0.78; }
    100% { opacity: 1; }
}

/* Flicker class applied by JS on load */
.led-tube.flickering {
    opacity: 1;
    animation: ledFlicker 0.56s linear forwards;
}

.led-light-cone.flickering {
    animation: ledGlowFlicker 0.56s linear forwards;
}

/* ─── Sub-page LED variants — start lit by default ─── */
.auth-header .led-tube-container,
.admin-header .led-tube-container,
.client-led {
    margin-bottom: var(--space-1);
    height: clamp(80px, 12vh, 120px);
}

.auth-header .led-tube,
.admin-header .led-tube,
.client-led .led-tube {
    /* Start lit on sub-pages (no flicker animation there) */
    background: linear-gradient(180deg,
        #fff 0%, #faf9f4 35%, #f5f3ea 65%, #edeae0 100%);
    box-shadow:
        inset 0 0 6px 1px rgba(255,255,250,0.5),
        0 0 8px 2px rgba(255,252,245,0.6),
        0 0 20px 5px rgba(248,250,255,0.25),
        0 0 45px 10px rgba(248,250,255,0.10);
}

.auth-header .led-tube {
    width: min(320px, 68vw);
    height: 12px;
    border-radius: 6px;
}

.admin-header .led-tube {
    width: min(300px, 64vw);
    height: 11px;
    border-radius: 6px;
}

.client-led .led-tube {
    width: min(380px, 74vw);
    height: 13px;
    border-radius: 7px;
}

/* ─── LED Mobile ─── */
@media (max-width: 768px) {
    .led-tube-container {
        height: clamp(180px, 24vh, 260px);
        margin-bottom: 30px;
    }
    .led-wire.wire-left  { left: calc(50% - min(170px, 34vw)); }
    .led-wire.wire-right { right: calc(50% - min(170px, 34vw)); }
    .led-tube { width: min(340px, 72vw); height: 13px; border-radius: 7px; }
    .led-light-cone { width: min(550px, 90vw); height: clamp(200px, 30vh, 350px); }
}

@media (max-width: 480px) {
    .led-tube-container {
        height: clamp(250px, 31svh, 310px);
        margin-bottom: 18px;
        width: 100%;
    }
    .led-wire {
        top: 0;
        bottom: 8px;
    }
    .led-wire.wire-left  { left: calc(50% - min(150px, 38vw)); }
    .led-wire.wire-right { right: calc(50% - min(150px, 38vw)); }
    .led-tube { width: min(300px, 76vw); height: 11px; border-radius: 6px; }
    .led-light-cone { width: min(400px, 92vw); height: clamp(150px, 24vh, 260px); }
}