/* Mythiq.net — ESO Clock page styles.
   Drives the redesigned clock console in esoclock.php (bound by
   assets/js/eso-clock.js). Uses the site design tokens from style.css;
   the page accent is the ESO gold #a58655 with the Mythiq blue for night. */

.eso-clock {
    --gold: #a58655;
    --gold-soft: rgba(165, 134, 85, 0.35);
    --night: #3f6ea8;
    --panel: var(--card-bg);
    --panel-line: rgba(255, 255, 255, 0.07);

    /* Sky bands — one set of colours for the dial ring, the 24h strip and the
       legend, so a swatch in the legend reads on both. */
    --sky-night: #2c4064;
    --sky-dawn: #6f6a86;
    --sky-day: #a58655;
    --sky-dusk: #8a5f5a;
}

/* --- Shared page furniture --- */
.esoc-eyebrow {
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.esoc-section-head {
    max-width: 720px;
    margin-bottom: 45px;
}

.esoc-section-head h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 39px;
    line-height: 44px;
    color: var(--text-white);
    margin-top: 14px;
}

.esoc-section-head p {
    font-size: 19px;
    line-height: 28px;
    color: var(--text-light);
    margin-top: 12px;
}

/* --- 1. Console (hero + dial + timeline over the Tamriel backdrop) --- */
.esoc-console {
    position: relative;
    padding: 190px 0 90px;
    background-image: url('../img/uploads/2021/05/e65e2509846e60bca0b15250a04de3a9-scaled.jpg');
    background-position: center;
    background-size: cover;
}

.esoc-console::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(24, 24, 25, 0.92) 0%, rgba(24, 24, 25, 0.78) 45%, #202125 100%);
}

.esoc-console > .container {
    position: relative;
    z-index: 1;
}

.esoc-console-grid {
    display: grid;
    grid-template-columns: 1fr 560px;
    gap: 70px;
    align-items: center;
}

.esoc-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 59px;
    line-height: 59px;
    color: var(--text-white);
    margin-top: 16px;
}

.esoc-lead {
    font-size: 19px;
    line-height: 28px;
    color: var(--text-light);
    max-width: 620px;
    margin-top: 18px;
}

/* Live badge */
.esoc-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--gold-soft);
    border-radius: var(--radius-pill);
    padding: 7px 16px;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    background-color: rgba(165, 134, 85, 0.08);
}

.esoc-live::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--gold);
    animation: esoc-pulse 2s ease-in-out infinite;
}

@keyframes esoc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}

/* --- The dial ---
   Drawn entirely in SVG + CSS: an outer 24-hour ring coloured by sky band, an
   inner ring that fills as the Tamriel day elapses, and a single orb on an
   invisible arm. Every ring uses pathLength="100", so the arc maths in the
   markup is plain percentages and radii are free to change. */
.esoc-dial-wrap {
    display: flex;
    justify-content: center;
}

.esoc-dial {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
    /* Soft well behind the instrument so it lifts off the backdrop photo. */
    background: radial-gradient(closest-side, rgba(12, 12, 14, 0.85) 0%, rgba(12, 12, 14, 0.55) 70%, rgba(12, 12, 14, 0) 100%);
}

.esoc-dial-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
}

/* Night is the ring's base colour; the three lit bands stroke over it. */
.esoc-ring-base {
    stroke: var(--sky-night);
    stroke-width: 14;
}

.esoc-ring-band {
    stroke-width: 14;
    stroke-linecap: butt;
}

.esoc-ring-band.is-dawn { stroke: var(--sky-dawn); }
.esoc-ring-band.is-day  { stroke: var(--sky-day); }
.esoc-ring-band.is-dusk { stroke: var(--sky-dusk); }

/* Hairline elapsed ring, just outside the band ring. */
.esoc-ring-progress {
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.7;
    transition: stroke-dashoffset 1.4s linear;
}

.esoc-ring-progress.no-anim {
    transition: none;
}

.esoc-tick {
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 1.5;
}

.esoc-tick.is-major {
    stroke: rgba(255, 255, 255, 0.32);
    stroke-width: 2;
}

.esoc-hour {
    fill: var(--text-muted);
    font-family: var(--font-body, inherit);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Orbit box: a square whose half-width is the orb's radius (r=170 of the
   400-unit viewBox), so the orb stays on the ring at any size. */
.esoc-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 85%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.esoc-arm {
    position: absolute;
    inset: 0;
    transform: rotate(var(--a, 0deg));
    transition: transform 1.4s linear;
}

.esoc-orb {
    position: absolute;
    left: 50%;
    top: 0;
    width: 7%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9b8 0%, #f0c46e 45%, #b8853a 100%);
    box-shadow: 0 0 0 5px rgba(24, 24, 25, 0.9), 0 0 26px 4px rgba(255, 200, 110, 0.55);
    transition: background 1.2s ease, box-shadow 1.2s ease;
}

.esoc-arm.is-night .esoc-orb {
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #cfe2fa 45%, #7ea3d0 100%);
    box-shadow: 0 0 0 5px rgba(24, 24, 25, 0.9), 0 0 26px 4px rgba(130, 190, 255, 0.5);
}

.esoc-dial-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    text-align: center;
    pointer-events: none;
}

.esoc-dial-label {
    display: block;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.esoc-time {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 68px;
    line-height: 68px;
    color: var(--text-white);
    margin-top: 12px;
    font-variant-numeric: tabular-nums;
}

.esoc-dial-phase {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 14px;
}

/* Next horizon event, folded into the dial instead of a separate panel. */
.esoc-dial-next {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-line);
}

.esoc-dial-next b {
    display: block;
    font-weight: 600;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

/* --- 24-hour timeline strip --- */
.esoc-timeline {
    position: relative;
    z-index: 1;
    margin-top: 70px;
}

.esoc-timeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.esoc-timeline-head h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: var(--text-white);
}

.esoc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.esoc-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 18px;
    color: var(--text-muted);
}

.esoc-legend i {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.esoc-swatch-night { background-color: var(--sky-night); }
.esoc-swatch-dawn  { background-color: var(--sky-dawn); }
.esoc-swatch-day   { background-color: var(--sky-day); }
.esoc-swatch-dusk  { background-color: var(--sky-dusk); }

.esoc-track {
    position: relative;
    height: 46px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--panel-line);
    /* 00-05 night | 05-07 dawn | 07-17 day | 17-19 dusk | 19-24 night */
    background-image: linear-gradient(90deg,
        var(--sky-night) 0%, var(--sky-night) 20.83%,
        var(--sky-dawn) 20.83%, var(--sky-dawn) 29.17%,
        var(--sky-day) 29.17%, var(--sky-day) 70.83%,
        var(--sky-dusk) 70.83%, var(--sky-dusk) 79.17%,
        var(--sky-night) 79.17%, var(--sky-night) 100%);
}

.esoc-track-marker {
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 0;
    width: 2px;
    background-color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
    transition: left 1.4s linear;
}

.esoc-track-marker::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff;
}

.esoc-track-hours {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.esoc-track-hours span {
    font-size: 13px;
    line-height: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- 2. Night windows --- */
.esoc-nights {
    padding: 100px 0 0;
}

.esoc-night-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.esoc-night-card {
    background-color: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-md);
    padding: 26px;
    transition: border-color var(--transition-speed), transform var(--transition-speed);
}

.esoc-night-card:hover {
    border-color: rgba(165, 134, 85, 0.5);
    transform: translateY(-3px);
}

.esoc-night-card.is-active {
    border-color: var(--gold);
    background-image: linear-gradient(180deg, rgba(165, 134, 85, 0.12) 0%, rgba(24, 24, 25, 0) 60%);
}

.esoc-night-tag {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--night);
    border: 1px solid rgba(63, 110, 168, 0.45);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
}

.esoc-night-card.is-active .esoc-night-tag {
    color: var(--gold);
    border-color: var(--gold-soft);
}

.esoc-night-time {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 27px;
    line-height: 32px;
    color: var(--text-white);
    margin-top: 18px;
    font-variant-numeric: tabular-nums;
}

.esoc-night-meta {
    font-size: 15px;
    line-height: 22px;
    color: var(--text-muted);
    margin-top: 8px;
}

.esoc-night-count {
    font-size: 17px;
    line-height: 24px;
    color: var(--gold);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--panel-line);
    font-variant-numeric: tabular-nums;
}

.esoc-note {
    font-size: 15px;
    line-height: 24px;
    color: var(--text-muted);
    margin-top: 22px;
}

/* --- 3. Server resets --- */
.esoc-resets {
    padding: 100px 0 0;
}

.esoc-reset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.esoc-reset-card {
    background-color: var(--panel);
    border: 1px solid var(--panel-line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-md);
    padding: 26px;
}

.esoc-reset-card.is-blue {
    border-left-color: var(--mythiq-blue);
}

.esoc-reset-name {
    font-size: 16px;
    line-height: 22px;
    color: var(--text-white);
    font-weight: 600;
}

.esoc-reset-count {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    color: var(--text-white);
    margin-top: 12px;
    font-variant-numeric: tabular-nums;
}

.esoc-reset-at {
    font-size: 15px;
    line-height: 22px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* --- 4. What the clock is for --- */
.esoc-uses {
    padding: 100px 0 110px;
}

.esoc-use-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.esoc-use-card {
    background-color: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-md);
    padding: 34px;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    align-items: start;
    transition: border-color var(--transition-speed);
}

.esoc-use-card:hover {
    border-color: rgba(165, 134, 85, 0.5);
}

.esoc-use-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--gold);
    background-color: rgba(165, 134, 85, 0.1);
    border: 1px solid var(--gold-soft);
}

.esoc-use-card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: var(--text-white);
}

.esoc-use-card p {
    font-size: 17px;
    line-height: 26px;
    color: var(--text-light);
    margin-top: 10px;
}

.esoc-use-when {
    display: inline-block;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 16px;
    padding: 7px 12px;
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-sm);
}

/* --- Responsive --- */
@media (max-width: 1440px) {
    .esoc-console-grid {
        grid-template-columns: 1fr 440px;
        gap: 50px;
    }
    .esoc-dial-center {
        width: 200px;
    }
    .esoc-time {
        font-size: 56px;
        line-height: 56px;
    }
}

@media (max-width: 1200px) {
    .esoc-night-grid,
    .esoc-reset-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .esoc-console {
        padding: 150px 0 70px;
    }
    .esoc-console-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }
    .esoc-title {
        font-size: 42px;
        line-height: 1.1;
    }
    .esoc-section-head h2 {
        font-size: 32px;
        line-height: 1.15;
    }
    .esoc-nights,
    .esoc-resets {
        padding-top: 70px;
    }
    .esoc-uses {
        padding: 70px 0 80px;
    }
    .esoc-use-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .esoc-console {
        padding: 130px 0 60px;
    }
    .esoc-title {
        font-size: 34px;
    }
    .esoc-dial {
        max-width: 340px;
    }
    .esoc-dial-center {
        width: 160px;
    }
    .esoc-time {
        font-size: 42px;
        line-height: 42px;
    }
    .esoc-dial-next {
        margin-top: 12px;
        padding-top: 10px;
        font-size: 13px;
        line-height: 18px;
    }
    .esoc-hour {
        font-size: 16px;
    }
    .esoc-night-grid,
    .esoc-reset-grid {
        grid-template-columns: 1fr;
    }
    .esoc-track-hours span:nth-child(even) {
        display: none;
    }
    .esoc-use-card {
        padding: 26px;
        grid-template-columns: 1fr;
        gap: 18px;
    }
}