/* --- clock-styles.css --- */

/* --- GLASS BLOCK CONTAINER -> REACTOR CORE --- */
.wc-glass-block {
    /* Deep dark monitor background */
    background: #000000;
    
    /* Heavy Industrial Bezel */
    border: 4px solid #27272a;
    border-radius: 8px; 
    
    /* Inset Shadow for Depth */
    box-shadow:
      inset 0 0 20px rgba(0, 0, 0, 1),
      0 0 0 1px #3f3f46, /* Outer hairline */
      0 10px 20px -5px rgba(0, 0, 0, 0.8);
    
    padding: 20px;
    width: 100%;
    aspect-ratio: 1 / 1;
    
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Scanlines */
.wc-glass-block::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: 10;
}

/* Grid Layout */
.wc-grid { 
    font-family: 'Space Mono', monospace; 
    transform-style: preserve-3d; 
    width: 85%;
    height: 87%;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 0; 
    z-index: 5;
}

/* Cell Styling */
.wc-cell { 
    backface-visibility: hidden; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, text-shadow 0.2s ease; 
    position: relative; 
    font-size: 18px; 
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 700;
}

/* Apostrophe */
#wc-0-2::before {
    content: "’";
    position: absolute; left: -0.25em; top: 0.05em;  
    font-family: inherit; font-weight: inherit;
    color: inherit !important; text-shadow: inherit !important;
    opacity: inherit; transition: inherit; animation: inherit;
    display: block; pointer-events: none; z-index: 1;
}
#wc-0-2.wc-char-inactive::before { opacity: 0; }

@media (min-width: 768px) {
    .wc-cell { font-size: 26px; }
}

/* --- COLORS & STATES --- */

/* JSK SPECIAL GLOW - Warm, Bright, Calm */
.wc-jsk-filament {
    color: #fbbf24 !important; /* Warm Amber Core */
    text-shadow: 
        0 0 10px rgba(251, 191, 36, 1),
        0 0 25px rgba(245, 158, 11, 0.9),
        0 0 50px rgba(245, 158, 11, 0.6) !important;
    opacity: 1 !important;
    transition: all 1.5s ease-in-out !important; /* Slow, calm ignition */
}

/* Standard Filament (Amber) */
.wc-force-filament {
    color: #f59e0b !important; 
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.6) !important;
    opacity: 1 !important;
}

/* Standard Data Stream (Teal) */
.wc-force-teal {
    color: #2dd4bf !important; 
    text-shadow: 0 0 8px rgba(45, 212, 191, 0.6) !important;
    opacity: 1 !important;
}

/* Standard Blink Animation */
.wc-blink-double-filament {
    color: #f59e0b !important;
    animation: blinkAnim 0.2s steps(2) 4;
}

@keyframes blinkAnim { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

/* Default "Off" State */
.wc-char-inactive { 
    color: #18181b; 
    opacity: 1; 
    text-shadow: none; 
}

/* Active States (Time) */
.wc-char-active-teal { 
    color: #2dd4bf; 
    text-shadow: 0 0 4px rgba(45, 212, 191, 0.8); 
    opacity: 1; 
}
.wc-char-active-ivory {
    color: #e4e4e7; 
    text-shadow: 0 0 4px rgba(228, 228, 231, 0.6); 
    opacity: 1;
}

/* Intro Ripple Animations */
@keyframes animTypeOn {
    0% { color: #18181b; text-shadow: none; }
    50% { color: #2dd4bf; text-shadow: 0 0 8px rgba(45, 212, 191, 0.6); }
    100% { color: #18181b; text-shadow: none; }
}

.wc-intro-core, .wc-intro-radial, .wc-intro-burgundy { 
    animation: animTypeOn 0.1s steps(2) 5 alternate; 
    animation-delay: var(--d); 
}