/* Global Glassmorphism Styles */

html, body { height: 100%; }
body {
    /* Base dark gradient without fixed attachment (prevents tab-switch flicker) */
    background: linear-gradient(135deg, #0b0b12 0%, #111827 100%);
    overflow-x: hidden;
}

/* Background gradient blobs layer (fixed, GPU promoted) */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(800px 550px at 20% -10%, rgba(255,255,255,0.18), transparent 60%),
               radial-gradient(700px 500px at 120% 10%, rgba(255,255,255,0.12), transparent 60%);
    filter: blur(50px) saturate(115%);
    transform: translateZ(0);
    will-change: transform;
}

/* Faux video reels: animated soft highlights moving slowly */
.reels-layer {
    position: fixed;
    inset: -10% -20% -10% -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(280px 180px at var(--x1,20%) var(--y1,30%), rgba(200,200,255,0.18), transparent 60%),
        radial-gradient(320px 200px at var(--x2,70%) var(--y2,60%), rgba(180,220,255,0.14), transparent 60%),
        radial-gradient(260px 180px at var(--x3,40%) var(--y3,80%), rgba(255,210,240,0.16), transparent 60%);
    filter: blur(30px) contrast(110%);
    animation: reelsMove 16s ease-in-out infinite alternate;
}

@keyframes reelsMove {
    0% { --x1: 18%; --y1: 35%; --x2: 65%; --y2: 55%; --x3: 42%; --y3: 78%; }
    50% { --x1: 25%; --y1: 25%; --x2: 75%; --y2: 65%; --x3: 38%; --y3: 82%; }
    100% { --x1: 30%; --y1: 40%; --x2: 70%; --y2: 58%; --x3: 45%; --y3: 74%; }
}

/* Subtle noise layer to enhance glass feel */
.noise-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.45;
}

/* TikTok-style blurred carousel background */
.carousel-layer {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    display: none; /* shown via JS */
    overflow: hidden;
    filter: blur(28px) saturate(115%) brightness(0.6);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.carousel-track {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    gap: 2rem;
    align-items: center;
    animation: carouselScroll var(--carousel-duration, 120s) linear infinite;
}
.carousel-item {
    flex: 0 0 auto;
    width: 22vw;
    max-width: 420px;
    aspect-ratio: 9/16;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.carousel-item video { width: 100%; height: 100%; object-fit: cover; }

@keyframes carouselScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.glass {
    background: rgba(0, 0, 0, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optional gradient stroke effect */
.glass.stroke {
    position: relative;
}
.glass.stroke:before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.06));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
}

/* Interactive glossy highlight following cursor */
.gloss {
    position: relative;
    overflow: hidden;
}
.gloss:after {
    content: "";
    position: absolute;
    top: var(--gy, 30%);
    left: var(--gx, 30%);
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient( circle at center,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.08) 30%,
        rgba(255,255,255,0.02) 60%,
        transparent 70% );
    filter: blur(30px);
    opacity: 0.9;
    transition: top 120ms ease, left 120ms ease;
}

.glass-light { background: rgba(255, 255, 255, 0.06); }

.text-glow {
    text-shadow: 0 2px 18px rgba(255, 65, 108, 0.35);
}

.btn-glass {
    background: linear-gradient(135deg, #1b1b22 0%, #0e0e12 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.btn-glass:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.btn-glass:active { transform: translateY(0); filter: brightness(0.95); }
.btn-glass:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.15) inset; }

.input-glass {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    color: #e5e7eb;
    border-radius: 12px;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.input-glass:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.12) inset; }

.input-glass::placeholder {
    color: rgba(229,231,235,0.6);
}

.nav-glass {
    background: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.container-narrow {
    max-width: 920px;
}

.container-hero {
    max-width: 720px;
}

.muted { color: rgba(229,231,235,0.78); }

/* Minimal Footer */
.footer-min { color: rgba(229,231,235,0.6); }

/* Reduce click flicker on interactive elements */
button, a, input { -webkit-tap-highlight-color: transparent; }