/* ==========================================================================
   CHRONOS — page-specific styles (chronos.html only)

   Chronos is an OMCOI-endorsed product, not a separate brand: the page keeps
   the site's chrome, grid and gold (--accent-gold #C4963C) and borrows from the
   Chronos brand only where the product needs to be recognisable — the
   monogram, the wider letter-spacing of the wordmark, and Georgia for the
   editorial pull quote. The brand navy (#081F35) is deliberately NOT used as a
   background: two navies on one page read as a mistake, not as a system.
   ========================================================================== */

/* --- Page-loader handoff ---
   premium.js normally fades the whole OMCOI loader (backdrop + logo) out
   together, which briefly reveals the real page before the video overlay
   below has faded in. Here the backdrop must stay solid black — only the
   logo fades — so the video overlay can snap in on an unbroken black screen
   (see js/chronos.js, which times the handoff to this fade). */

.page-loader.is-loaded {
    opacity: 1;
    visibility: visible;
    transition: none;
}

.page-loader__logo {
    transition: opacity 0.5s ease;
}

.page-loader.is-loaded .page-loader__logo {
    opacity: 0;
    animation: none;
}

/* Stacks the hint under the logo — the generic .page-loader (premium.css,
   every other page) has no second child, so this only matters here. */
.page-loader {
    flex-direction: column;
    cursor: pointer;
}

.page-loader__hint {
    margin-top: var(--space-lg);
    color: rgba(212, 175, 55, 0.55);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    animation: chronos-hint-pulse 2s ease-in-out infinite;
}

@keyframes chronos-hint-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.page-loader.is-loaded .page-loader__hint {
    transition: opacity 0.3s ease;
    opacity: 0;
    animation: none;
}

/* --- Intro video overlay --- */

.chronos-intro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #04111F;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.chronos-intro.is-visible {
    opacity: 1;
    pointer-events: auto;
    /* Snap in rather than fade — the backdrop already matches the loader's
       black (see handoff above), so a cross-fade here would just repaint the
       same color while racing premium.js's fixed loader-removal timer. */
    transition: none;
}

.chronos-intro.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.chronos-intro__video {
    display: block;
    width: min(80vmin, 640px);
    height: auto;
    aspect-ratio: 1 / 1;
}

.chronos-intro__skip {
    position: absolute;
    bottom: clamp(1rem, 3vh, 2rem);
    color: rgba(212, 175, 55, 0.35);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

/* Autoplay-with-sound is blocked by every browser, so the video starts
   muted and this is the only way to turn it on — see js/chronos.js, which
   stops the click from also triggering the overlay's skip-on-click. */
.chronos-intro__sound {
    position: absolute;
    top: clamp(1rem, 3vh, 2rem);
    right: clamp(1rem, 3vh, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(4, 17, 31, 0.55);
    color: rgba(212, 175, 55, 0.75);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.chronos-intro__sound:hover,
.chronos-intro__sound:focus-visible {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: rgba(4, 17, 31, 0.8);
}

.chronos-intro__sound-icon {
    width: 18px;
    height: 18px;
}

.chronos-intro__sound-icon--on {
    display: none;
}

.chronos-intro__sound.is-unmuted .chronos-intro__sound-icon--off {
    display: none;
}

.chronos-intro__sound.is-unmuted .chronos-intro__sound-icon--on {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .chronos-intro { display: none; }
}

/* --- Hero: EVOLEN banner treatment ---
   Reproduces the Chronos banner from the EVOLEN one-pager (EVOLEN/02_Chronos.pdf):
   eyebrow mark top-left, the emblem bleeding in from the right behind a
   left-aligned, two-tone headline. See chronos.html for the copy sourcing note. */

/* Chronos Midnight navy — distinct from the site's #0D1520 so the product
   feels like its own world while still living inside the OMCOI shell. */
.chronos-hero {
    background:
        radial-gradient(ellipse at 50% 35%, #163A63 0%, #081F35 50%, #04111F 100%);
}

.chronos-hero.hero--page {
    min-height: 62vh;
    justify-content: flex-start;
    overflow: hidden;
}

/* Clipped to start below the header (var(--header-height)) so the emblem
   can never show through the transparent header behind the nav / MyOMCOI
   button — the frame, not the image, owns the clip. */
.chronos-hero__art-frame {
    position: absolute;
    inset: var(--header-height) 0 0 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* The emblem's own canvas is a flat navy square, not a cutout — the radial
   mask fades its corners into the hero's gradient instead of leaving a
   visible rectangle. Bleeding it off the top/right edges of the frame
   hides the other two edges for free. */
.chronos-hero__art {
    position: absolute;
    top: 50%;
    right: clamp(-8%, 1vw, 2%);
    transform: translateY(-45%);
    width: clamp(360px, 44vw, 720px);
    height: auto;
    opacity: 0.94;
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 55%, transparent 100%);
}

.chronos-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 880px;
    width: 100%;
    /* Auto margins center this flex item within the hero regardless of the
       container's justify-content: flex-start (needed elsewhere so the
       emblem frame, a sibling, can stay pinned right). */
    margin: 0 auto;
    /* .hero is a flex container (align-items: center from the base .hero
       rule); flex items default to min-width: auto, which can stop long
       headline text from shrinking to wrap on narrow viewports. */
    min-width: 0;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.chronos-hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.chronos-hero__eyebrow .hero__label {
    margin-bottom: 0;
}

.chronos-hero__eyebrow .hero__label::before,
.chronos-hero__eyebrow .hero__label::after {
    display: none;
}

/* Official brand wordmark (rev08, assets/images/chronos/chronos-wordmark.png)
   — the top-of-hero signature, sized up so it reads as the product's name,
   not a footnote. The clock hand replacing the "O" is baked into the
   image; it cannot be reproduced with a font. */
.chronos-hero__wordmark {
    margin-bottom: var(--space-xl);
}

.chronos-hero__wordmark-img {
    display: block;
    width: clamp(240px, 26vw, 380px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 22px rgba(212, 175, 55, 0.25));
}

.chronos-hero__sub {
    display: block;
    margin-top: var(--space-sm);
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

/* Two-tone tagline under the wordmark — the validated catchphrase, closing
   on the gold accent (see chronos.html for the sourcing note on each
   locale). Each clause sits on its own centered line. */
.chronos-hero__headline {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 2.7vw, 2.35rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: #fff;
}

.chronos-hero__headline-accent {
    display: block;
    color: var(--accent-gold);
}

@media (max-width: 991px) {
    .chronos-hero__art {
        width: clamp(320px, 60vw, 520px);
        opacity: 0.55;
    }
}

@media (max-width: 767px) {
    .chronos-hero.hero--page {
        min-height: 56vh;
    }
    .chronos-hero__content {
        max-width: 100%;
        padding: 0 var(--space-xl);
    }
    .chronos-hero__eyebrow .hero__label {
        text-align: left;
    }
    .chronos-hero__art {
        right: 50%;
        transform: translate(50%, -45%);
        opacity: 0.25;
    }
    .chronos-hero__wordmark-img {
        width: clamp(180px, 46vw, 260px);
    }
}

/* --- Editorial prose block --- */

.chronos-prose {
    max-width: 720px;
    margin: 0 auto;
}

.chronos-prose p {
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: var(--space-lg);
    color: var(--light-text-secondary);
}

.chronos-prose p:last-child {
    margin-bottom: 0;
    color: var(--light-text);
    font-weight: 500;
}

/* The five-months-late line. It carries the whole argument, so it is set apart
   rather than left to sit in the run of text. */
.chronos-prose__pull {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.32rem !important;
    line-height: 1.5 !important;
    font-style: italic;
    color: var(--light-text) !important;
    padding: var(--space-lg) 0 var(--space-lg) var(--space-xl);
    border-left: 2px solid var(--accent-gold);
    margin: var(--space-xl) 0;
}

/* --- Status facts --- */

.chronos-fact {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    background: var(--light-card-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light-sm);
}

.chronos-fact__value {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-gold-dark);
    margin-bottom: var(--space-xs);
}

.chronos-fact__label {
    display: block;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--light-text-secondary);
}

.chronos-scope {
    max-width: 720px;
    margin: var(--space-2xl) auto 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--light-text-secondary);
}

/* --- Keep-me-informed --- */

.chronos-signup {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(196, 150, 60, 0.10) 0%, transparent 60%),
        var(--neutral-950);
}

.chronos-signup__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

/* Brand signature, not a headline: small, tracked, gold, sitting above the
   ask rather than competing with it. */
.chronos-motto {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    font-style: italic;
    letter-spacing: 0.06em;
    color: var(--accent-gold);
    margin-bottom: var(--space-xl);
}

.chronos-signup__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-sm);
}

.chronos-signup__lead {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--neutral-400);
    margin-bottom: var(--space-2xl);
}

.chronos-form {
    text-align: left;
}

.chronos-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

@media (max-width: 640px) {
    .chronos-form__row { grid-template-columns: 1fr; }
}

.chronos-form__optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--neutral-500);
}

.chronos-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--neutral-400);
    cursor: pointer;
}

.chronos-consent input {
    margin-top: 0.25em;
    flex-shrink: 0;
    accent-color: var(--accent-gold);
    width: 16px;
    height: 16px;
}

.chronos-signup .btn {
    width: 100%;
}

.chronos-signup .form-status {
    text-align: center;
}

.chronos-privacy,
.chronos-legal {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--neutral-500);
    margin-top: var(--space-lg);
}

.chronos-legal {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--glass-border);
    color: var(--neutral-600);
}