/* ============================================
   SPACE & TIME — LIVE CLOCK
   Ornate gold astrolabe-style analog clock,
   sits directly above the "Tejedor de Mundos"
   mission heading. Matches the gold/neon dark
   palette already defined in globe.css.
   ============================================ */

.space-time-clock-section {
    position: relative;
    z-index: 2;
    background: #04060a;
    padding: 70px 30px 10px;
    text-align: center;
}

.space-time-clock-label {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.75;
    margin: 0 0 34px;
}

.space-time-clock {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
}

/* decorative rotating rings — the "space" half of Space & Time */
.stc-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.stc-ring-outer {
    border: 1px dashed rgba(200, 169, 110, 0.35);
    box-shadow: 0 0 24px rgba(200, 169, 110, 0.12) inset,
                0 0 30px rgba(200, 169, 110, 0.08);
    animation: stc-spin 90s linear infinite;
}

.stc-ring-inner {
    inset: 14px;
    border: 1px dotted rgba(77, 166, 255, 0.28);
    animation: stc-spin-reverse 70s linear infinite;
}

@keyframes stc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes stc-spin-reverse {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}

.stc-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(200, 169, 110, 0.25));
}

.stc-face-bg {
    fill: rgba(10, 14, 20, 0.55);
    stroke: rgba(200, 169, 110, 0.5);
    stroke-width: 1;
}

.stc-tick {
    stroke: rgba(200, 169, 110, 0.55);
    stroke-width: 1.5;
}

.stc-tick-major {
    stroke: var(--gold-light);
    stroke-width: 2;
}

.stc-numeral {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    fill: var(--gold-light);
    text-anchor: middle;
    dominant-baseline: middle;
}

.stc-star {
    fill: var(--neon-blue);
    opacity: 0.7;
}

/* hands */
.stc-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 3px;
    will-change: transform;
}

.stc-hand-hour {
    width: 5px;
    height: 30%;
    margin-left: -2.5px;
    background: linear-gradient(to top, var(--gold), var(--gold-light));
    box-shadow: 0 0 6px rgba(200, 169, 110, 0.6);
}

.stc-hand-minute {
    width: 3px;
    height: 40%;
    margin-left: -1.5px;
    background: linear-gradient(to top, var(--gold), var(--gold-light));
    box-shadow: 0 0 6px rgba(200, 169, 110, 0.5);
}

.stc-hand-second {
    width: 1.5px;
    height: 42%;
    margin-left: -0.75px;
    background: var(--neon-pink);
    box-shadow: 0 0 8px rgba(255, 47, 176, 0.75);
}

.stc-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold-light), var(--gold));
    box-shadow: 0 0 10px rgba(200, 169, 110, 0.8);
}

.space-time-clock-caption {
    margin: 28px 0 0;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.space-time-clock-caption span {
    color: var(--gold);
    font-style: normal;
    letter-spacing: 0.08em;
}

.space-time-clock-caption span.is-linked {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.space-time-clock-caption span.is-linked:hover,
.space-time-clock-caption span.is-linked:focus-visible {
    color: var(--gold-light);
}

@media (prefers-reduced-motion: reduce) {
    .stc-ring-outer,
    .stc-ring-inner {
        animation: none;
    }
}

@media (max-width: 768px) {
    .space-time-clock-section {
        padding: 50px 20px 4px;
    }

    .space-time-clock {
        width: 168px;
        height: 168px;
    }

    .space-time-clock-label {
        margin-bottom: 26px;
        font-size: 11px;
    }

    .stc-numeral {
        font-size: 10px;
    }
}