@keyframes tdc-detail-in {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.timeline-daily-c {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 3rem 6vw 0 6rem;
    background: var(--bg-color);
    color: var(--color-white);
    font-family: var(--font-family-base);
}

.timeline-daily-c__bg-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
    pointer-events: none;
}

.timeline-daily-c__bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            135deg,
            rgba(var(--color-dark-blue-rgb), 0.7) 0%,
            rgba(var(--color-dark-blue-rgb), 0.65) 50%,
            rgba(var(--color-dark-blue-rgb), 0.7) 100%
        );
    pointer-events: none;
}

/* Sound mute/unmute control (rendered only when the section has an MP3). */
.timeline-daily-c__sound-toggle {
    position: absolute;
    z-index: 5;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--color-white);
    background: rgba(var(--color-dark-blue-rgb), 0.55);
    border: 1px solid rgba(var(--color-white-rgb), 0.35);
    border-radius: 50%;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.timeline-daily-c__sound-toggle:hover {
    background: rgba(var(--color-dark-blue-rgb), 0.85);
    border-color: rgba(var(--color-white-rgb), 0.6);
}

.timeline-daily-c__sound-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.timeline-daily-c__sound-icon {
    display: block;
    pointer-events: none;
}

.timeline-daily-c__sound-icon--off {
    display: none;
}

.timeline-daily-c__sound-toggle.is-muted .timeline-daily-c__sound-icon--on {
    display: none;
}

.timeline-daily-c__sound-toggle.is-muted .timeline-daily-c__sound-icon--off {
    display: block;
}

@media (max-width: 768px) {
    .timeline-daily-c__sound-toggle {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.timeline-daily-c__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.timeline-daily-c__clock {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.timeline-daily-c__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.timeline-daily-c__segments {
    transform-origin: 300px 300px;
}

.timeline-daily-c__segment-img {
    opacity: 0.65;
    filter: grayscale(35%) brightness(0.75);
    pointer-events: none;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.timeline-daily-c__segment-img.is-active,
.timeline-daily-c__segment-img.previsu,
.timeline-daily-c__segments g:hover > .timeline-daily-c__segment-img {
    opacity: 1;
    filter: grayscale(0%) brightness(1);
}

.timeline-daily-c__segment {
    cursor: pointer;
    pointer-events: auto;
}

.timeline-daily-c__segment-stroke {
    fill: none;
    stroke: rgba(var(--color-dark-blue-rgb), 0.95);
    stroke-width: 2;
    pointer-events: none;
}

.timeline-daily-c__inner-disc {
    fill: transparent;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25));
}

.timeline-daily-c__tick {
    stroke: var(--color-white);
    stroke-width: 1.5;
}

.timeline-daily-c__tick--major {
    stroke-width: 2.5;
}

.timeline-daily-c__num {
    fill: var(--color-white);
    font-family: var(--font-family-base);
    font-size: 22px;
    font-weight: var(--font-weight-medium);
}

.timeline-daily-c__hand {
    stroke: var(--color-white);
    stroke-linecap: round;
    transform-origin: 300px 300px;
    transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.timeline-daily-c__hand--hour {
    stroke-width: 5;
}

.timeline-daily-c__hand--minute {
    stroke-width: 3;
    transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.timeline-daily-c__hand-center {
    fill: var(--gold);
}

.timeline-daily-c__labels {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.timeline-daily-c__label {
    position: absolute;
    border-radius: var(--pill-radius);
    padding: 0.35rem 0.7rem;
    color: rgba(var(--color-white-rgb), 0.55);
    font-size: var(--font-size-xs-2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-label);
    letter-spacing: 0.02em;
    text-transform: capitalize;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}

.timeline-daily-c__label > span {
    position: relative;
    z-index: 1;
}

.timeline-daily-c__label:hover,
.timeline-daily-c__label:focus-visible {
    color: var(--color-white);
    outline: 0;
}

.timeline-daily-c__label.is-active {
    color: var(--color-white);
    background: var(--gold);
}

.timeline-daily-c__content {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.timeline-daily-c__intro {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.timeline-daily-c__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gold);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
}

.timeline-daily-c__eyebrow::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
}

.timeline-daily-c__title {
    max-width: 680px;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-heading-relaxed);
    letter-spacing: 0;
    text-transform: uppercase;
}

.timeline-daily-c .hero-post__scroll-hint{
        position: initial;
    right: inherit;
    bottom: inherit;
    opacity: 1;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}
.timeline-daily-c .hero-post__scroll-line{
    width: 50px;
    height: 1px;
}
.timeline-daily-c .hero-post__scroll-text{
    writing-mode: horizontal-tb;
}

.timeline-daily-c__title-line {
    display: block;
}

.timeline-daily-c__gold {
    color: var(--gold);
    font-style: normal;
}

.timeline-daily-c__lead {
    max-width: 540px;
    color: rgba(var(--color-white-rgb), 0.75);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-copy);
}

.timeline-daily-c__lead > * {
    margin: 0;
}

.timeline-daily-c__lead > * + * {
    margin-top: var(--space-sm);
}

.timeline-daily-c__details {
    position: relative;
    min-height: 200px;
}

.timeline-daily-c__detail {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    gap: 0.9rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(var(--color-gold-rgb), 0.35);
}

.timeline-daily-c__detail.is-active {
    display: flex;
    animation: tdc-detail-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-daily-c__detail-time {
    color: var(--gold);
    font-size: var(--font-size-xs-2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
}

.timeline-daily-c__detail-title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-heading);
    text-transform: uppercase;
}

.timeline-daily-c__detail-text {
    max-width: 460px;
    color: rgba(var(--color-white-rgb), 0.78);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-copy);
}

.timeline-daily-c__detail-text > * {
    margin: 0;
}

.timeline-daily-c__detail-text > * + * {
    margin-top: var(--space-sm);
}

.timeline-daily-c__clock,
.timeline-daily-c__eyebrow,
.timeline-daily-c__title-line,
.timeline-daily-c__lead,
.timeline-daily-c__detail-time,
.timeline-daily-c__detail-title,
.timeline-daily-c__detail-text {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.timeline-daily-c__segments {
    opacity: 0;
    transform: rotate(-180deg);
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.timeline-daily-c__svg .timeline-daily-c__hand-center,
.timeline-daily-c__svg .timeline-daily-c__num,
.timeline-daily-c__svg .timeline-daily-c__tick {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.timeline-daily-c__svg .timeline-daily-c__hand {
    opacity: 0;
}

@keyframes tdc-hand-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.timeline-daily-c__label {
    opacity: 0;
}

@keyframes tdc-label-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.timeline-daily-c.is-visible .timeline-daily-c__label {
    animation: tdc-label-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.timeline-daily-c__eyebrow::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-daily-c.is-visible .timeline-daily-c__clock,
.timeline-daily-c.is-visible .timeline-daily-c__eyebrow,
.timeline-daily-c.is-visible .timeline-daily-c__title-line,
.timeline-daily-c.is-visible .timeline-daily-c__lead,
.timeline-daily-c.is-visible .timeline-daily-c__detail-time,
.timeline-daily-c.is-visible .timeline-daily-c__detail-title,
.timeline-daily-c.is-visible .timeline-daily-c__detail-text {
    opacity: 1;
    transform: translateY(0);
}

.timeline-daily-c.is-visible .timeline-daily-c__segments {
    opacity: 1;
    transform: rotate(0deg);
}

.timeline-daily-c.is-visible .timeline-daily-c__svg .timeline-daily-c__hand-center,
.timeline-daily-c.is-visible .timeline-daily-c__svg .timeline-daily-c__num,
.timeline-daily-c.is-visible .timeline-daily-c__svg .timeline-daily-c__tick {
    opacity: 1;
    transition-delay: 0.9s;
}

.timeline-daily-c.is-visible .timeline-daily-c__svg .timeline-daily-c__hand {
    animation: tdc-hand-in 0.6s ease-out 0.9s forwards;
}

.timeline-daily-c.is-visible .timeline-daily-c__eyebrow::before {
    transform: scaleX(1);
    transition-delay: 0.35s;
}

.timeline-daily-c.is-visible .timeline-daily-c__eyebrow {
    transition-delay: 0.1s;
}

.timeline-daily-c.is-visible .timeline-daily-c__title-line:nth-child(1) {
    transition-delay: 0.25s;
}

.timeline-daily-c.is-visible .timeline-daily-c__title-line:nth-child(2) {
    transition-delay: 0.38s;
}

.timeline-daily-c.is-visible .timeline-daily-c__lead {
    transition-delay: 0.55s;
}

.timeline-daily-c.is-visible .timeline-daily-c__detail-time {
    transition-delay: 0.95s;
}

.timeline-daily-c.is-visible .timeline-daily-c__detail-title {
    transition-delay: 1.08s;
}

.timeline-daily-c.is-visible .timeline-daily-c__detail-text {
    transition-delay: 1.22s;
}

.timeline-daily-c.is-visible .timeline-daily-c__clock {
    transition-delay: 0.15s;
}

.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="0"] { animation-delay: 1.10s; }
.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="1"] { animation-delay: 1.18s; }
.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="2"] { animation-delay: 1.26s; }
.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="3"] { animation-delay: 1.34s; }
.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="4"] { animation-delay: 1.42s; }
.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="5"] { animation-delay: 1.50s; }
.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="6"] { animation-delay: 1.58s; }
.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="7"] { animation-delay: 1.66s; }
.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="8"] { animation-delay: 1.74s; }
.timeline-daily-c.is-visible .timeline-daily-c__label[data-index="9"] { animation-delay: 1.82s; }

@media (max-width: 1100px) {
    .timeline-daily-c {
        padding: var(--space-4xl) var(--space-section-x);
    }

    .timeline-daily-c__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .timeline-daily-c__content {
        align-items: center;
        text-align: center;
    }

    .timeline-daily-c__eyebrow {
        justify-content: center;
    }

    .timeline-daily-c__details {
        width: 100%;
        max-width: 540px;
        min-height: auto;
    }

    .timeline-daily-c__detail {
        position: relative;
        inset: auto;
        align-items: center;
        padding: 2rem 1rem 0;
        border-top: 1px solid rgba(var(--color-gold-rgb), 0.35);
        border-left: none;
        text-align: center;
    }

    .timeline-daily-c__detail:not(.is-active) {
        display: none;
    }
}

@media (max-width: 1023px) {
    .timeline-daily-c__labels {
        display: none;
    }
}

@media (max-width: 640px) {
    .timeline-daily-c {
        min-height: auto;
        padding: var(--section-padding-mobile);
    }

    .timeline-daily-c__clock {
        max-width: min(100%, 420px);
    }

    .timeline-daily-c__label {
        padding: 0.25rem 0.45rem;
        font-size: var(--font-size-2xs);
    }

    .timeline-daily-c__title {
        font-size: var(--font-size-xl-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-daily-c__clock,
    .timeline-daily-c__eyebrow,
    .timeline-daily-c__title-line,
    .timeline-daily-c__lead,
    .timeline-daily-c__detail-time,
    .timeline-daily-c__detail-title,
    .timeline-daily-c__detail-text,
    .timeline-daily-c__segments,
    .timeline-daily-c__label,
    .timeline-daily-c__svg .timeline-daily-c__hand,
    .timeline-daily-c__svg .timeline-daily-c__hand-center,
    .timeline-daily-c__svg .timeline-daily-c__num,
    .timeline-daily-c__svg .timeline-daily-c__tick {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    .timeline-daily-c__eyebrow::before {
        transform: scaleX(1);
        transition: none;
    }
}