/* ===== UNDER CONSTRUCTION - GLITCH + NOISE ===== */
/* Used on: projects.html, tutorials.html, blog.html */

/* ===== PAGE WRAPPER ===== */
.uc-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    gap: 16px;
    position: relative;
    min-height: calc(100vh - 100px); /* account for navbar */
}

/* ===== DOTTED BG - fills page area, NOT inside the frame ===== */
.uc-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
}

/* Mask out the dotted pattern over the frame area */
.uc-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-dark);
    z-index: 1;
    pointer-events: none;
}

/* ===== STATUS LABEL ===== */
.uc-status-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-dim);
    position: relative;
    z-index: 2;
}

.uc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: uc-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes uc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.15; }
}

/* ===== RENDER FRAME ===== */
.uc-frame {
    position: relative;
    width: 100%;
    max-width: 860px;
    aspect-ratio: 16 / 7;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-darker);
    z-index: 2;
}

/* ===== FRAME CONTENT ===== */
.uc-frame-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none; /* children opt-in below */
}

/* ===== GLITCH TEXT ===== */
.uc-glitch {
    font-family: 'Sugar Snow', cursive;
    font-size: clamp(1.2rem, 3.25vw, 2.5rem);
    font-weight: normal;
    color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    position: relative;
    user-select: none;
    line-height: 1.1;
    pointer-events: auto; /* receives hover even inside pointer-events:none parent */
    cursor: default;
    --uc-after-shadow: -6px 0 var(--green);
    --uc-before-shadow: 6px 0 rgba(255, 255, 255, 0.9);
    --uc-after-dur: 0.6s;
    --uc-before-dur: 0.4s;
}

/* Ghost layers - hidden by default */
.uc-glitch::after,
.uc-glitch::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(255, 255, 255, 0.75);
    background: var(--bg-dark); /* opaque: produces hard screen-tear instead of bleed-through */
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
}

/* Active glitch state - toggled by JS or hover */
.uc-glitch.glitching::after,
.uc-glitch:hover::after {
    left: 7px;
    text-shadow: var(--uc-after-shadow);
    clip-path: inset(0 0 0 0);
    opacity: 1;
    animation: uc-glitch-after var(--uc-after-dur) steps(1) infinite;
}

.uc-glitch.glitching::before,
.uc-glitch:hover::before {
    left: -7px;
    text-shadow: var(--uc-before-shadow);
    clip-path: inset(0 0 0 0);
    opacity: 1;
    animation: uc-glitch-before var(--uc-before-dur) steps(1) infinite;
}

@keyframes uc-glitch-after {
    0%   { clip-path: inset(15% 0 70% 0); }
    10%  { clip-path: inset(40% 0 30% 0); }
    20%  { clip-path: inset(5%  0 80% 0); }
    30%  { clip-path: inset(60% 0 10% 0); }
    40%  { clip-path: inset(25% 0 55% 0); }
    50%  { clip-path: inset(80% 0 5%  0); }
    60%  { clip-path: inset(10% 0 65% 0); }
    70%  { clip-path: inset(45% 0 25% 0); }
    80%  { clip-path: inset(20% 0 50% 0); }
    90%  { clip-path: inset(70% 0 15% 0); }
    100% { clip-path: inset(35% 0 40% 0); }
}

@keyframes uc-glitch-before {
    0%   { clip-path: inset(60% 0 10% 0); }
    15%  { clip-path: inset(20% 0 50% 0); }
    30%  { clip-path: inset(75% 0 5%  0); }
    45%  { clip-path: inset(10% 0 70% 0); }
    60%  { clip-path: inset(40% 0 30% 0); }
    75%  { clip-path: inset(5%  0 85% 0); }
    90%  { clip-path: inset(55% 0 20% 0); }
    100% { clip-path: inset(30% 0 45% 0); }
}

/* ===== THIN OUTER BORDER ===== */
.uc-frame-border {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    z-index: 4;
    pointer-events: none;
}

/* ===== NOISE CANVAS - topmost ===== */
.uc-noise-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
    image-rendering: pixelated;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .uc-page {
        padding: 40px 20px;
    }

    .uc-frame {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 480px) {
    .uc-page {
        padding: 30px 16px;
    }
}