/*
 * Fantastic Voyage Labs design system
 *
 * Shared type scale, spacing, and building blocks for every page.
 * Sizes are ~75% of the Figma spec (FVL-Website-v03), with body text kept
 * at 15px or larger for readability. Colors and the grey .card live in styles.css.
 *
 * Load order on each page:
 *   modern-normalize.css -> fonts.css -> styles.css -> design-system.css -> header.css -> page CSS
 */

:root {
    /*
     * Fluid unit for large screens. Exactly 1px up to a 1440px-wide window (laptops),
     * then grows smoothly to 1.25px at 2560px (large monitors) and stops there.
     * Text, line heights and spacing below are written in it, so they grow together.
     * The rem minimum and maximum keep browser zoom working.
     */
    --px: clamp(0.0625rem, 0.0424107rem + 0.0223214vw, 0.078125rem);

    /* Typography: font size / line height pairs */
    --font-display: calc(48 * var(--px));             /* hero headline */
    --lh-display: calc(51 * var(--px));
    --font-hero-lead: calc(20 * var(--px));           /* hero supporting line */
    --lh-hero-lead: calc(24 * var(--px));
    --font-section-title: calc(39 * var(--px));       /* section headings (h2) */
    --lh-section-title: calc(48 * var(--px));
    --font-section-subtitle: calc(28 * var(--px));    /* line under a section heading */
    --lh-section-subtitle: calc(36 * var(--px));
    --font-card-title: calc(27 * var(--px));          /* titles inside cards and panels */
    --lh-card-title: calc(33 * var(--px));
    --font-subheading: calc(21 * var(--px));          /* headings inside a section (h3) */
    --lh-subheading: calc(27 * var(--px));
    --font-item-title: calc(17 * var(--px));          /* small headings within a card */
    --lh-item-title: calc(22 * var(--px));
    --font-lead: calc(17 * var(--px));                /* intro paragraph under a heading */
    --lh-lead: calc(22 * var(--px));
    --font-body: calc(15 * var(--px));                /* default paragraph text */
    --lh-body: calc(20 * var(--px));
    --font-article: calc(16 * var(--px));             /* long-form reading (articles, legal) */
    --lh-article: calc(26 * var(--px));
    --font-small: calc(13 * var(--px));               /* captions, footnotes, legal */
    --lh-small: calc(18 * var(--px));
    --font-stat-title: calc(24 * var(--px));          /* label above a big number (home stats) */
    --lh-stat-title: calc(27 * var(--px));
    --font-stat-value: calc(54 * var(--px));          /* big display numbers (home stats) */
    --lh-stat-value: calc(54 * var(--px));
    --font-nav: calc(15 * var(--px));                 /* header and footer links */
    --font-button: calc(14 * var(--px));              /* pill buttons */

    /* Spacing */
    --space-2xs: calc(10 * var(--px));
    --space-xs: calc(12 * var(--px));
    --space-sm: calc(15 * var(--px));
    --space-md: calc(18 * var(--px));
    --space-lg: calc(30 * var(--px));
    --space-xl: calc(48 * var(--px));                 /* heading block to section content */

    /* Section layout */
    --header-offset: 88px;            /* fixed header: 24px from the top + 64px bar */
    --section-max-width: clamp(1120px, 42.857vw + 502.86px, 1600px); /* 960px of content, growing to 1440px on large monitors */
    --article-max-width: calc(760 * var(--px));       /* readable line length for long-form text */
    --section-pad-y: calc(45 * var(--px));            /* space above and below each section */
    --section-pad-x: 80px;

    /* Corners */
    --radius-2xs: 4px;                /* badges, tags, focus outlines */
    --radius-xs: 12px;                /* form fields, images inside cards, dropdowns */
    --radius-sm: 18px;
    --radius-md: 24px;
    --radius-lg: 30px;
    --radius-pill: 100px;

    /* Controls */
    --button-height: calc(36 * var(--px));

    /* Motion: use these instead of hard-coded durations and offsets */
    --dur-fast: 150ms;                /* color and border changes */
    --dur-hover: 200ms;               /* hover states */
    --dur-base: 250ms;                /* small UI transitions */
    --dur-reveal: 800ms;              /* scroll reveals */
    --dur-header: 400ms;              /* header theme and scrolled-state changes */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* entrances */
    --shift-y: 18px;                  /* vertical reveal offset */
    --shift-x: 32px;                  /* horizontal reveal offset, large media only */
}

@media (width < 1200px) {
    :root {
        --section-pad-x: 20px;
    }
}

@media (width < 848px) {
    :root {
        --font-section-title: 34px;
        --lh-section-title: 42px;
        --font-section-subtitle: 24px;
        --lh-section-subtitle: 32px;
    }
}

@media (width < 500px) {
    :root {
        --section-pad-y: 32px;
        --section-pad-x: 16px;
        --font-section-title: 28px;
        --lh-section-title: 34px;
        --font-section-subtitle: 20px;
        --lh-section-subtitle: 26px;
        --font-lead: 16px;
        --font-card-title: 24px;
        --lh-card-title: 30px;
    }
}

/* Section layout */
.section-container {
    max-width: var(--section-max-width);
    margin: 0 auto;
    padding: var(--section-pad-y) var(--section-pad-x);
}

/* First section on a page without a hero: clears the fixed header */
.page-top {
    padding-top: calc(var(--header-offset) + var(--section-pad-y));
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.section-title {
    font-size: var(--font-section-title);
    font-weight: 600;
    line-height: var(--lh-section-title);
}

.section-subtitle {
    color: var(--muted-text-color);
    font-size: var(--font-section-subtitle);
    line-height: var(--lh-section-subtitle);
}

.section-intro {
    font-size: var(--font-lead);
    line-height: var(--lh-lead);
}

/* Text */
.text-body {
    font-size: var(--font-body);
    line-height: var(--lh-body);
}

.text-small {
    font-size: var(--font-small);
    line-height: var(--lh-small);
}

/* List item with a small icon beside the text (icons from Phosphor, inlined as SVG) */
.icon-point {
    display: grid;
    grid-template-columns: 21px 1fr;
    gap: var(--space-2xs);
    align-items: start;
    list-style: none;
}

.icon-point-icon {
    width: 21px;
    height: 21px;
    margin-top: -1px;
    color: var(--btn-orange-color);
}

/*
 * Buttons. Every text button on the site (links and <button>s) uses .pill-btn plus one color:
 *   .pill-btn-orange   main action (Book a Demo, Submit, Register)
 *   .pill-btn-white    secondary action on dark backgrounds (hero)
 *   .pill-btn-navy     secondary action on light backgrounds
 *   .pill-btn-outline  quieter action on light backgrounds (registration options)
 *   .pill-btn-outline-light  quieter action on dark backgrounds (404 page)
 *   .pill-btn-danger   destructive action (delete registration)
 * Add .pill-btn-block for a full-width button. Round icon buttons use .icon-btn.
 */
.pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    padding: calc(6 * var(--px)) calc(18 * var(--px));
    border: none;
    border-radius: var(--radius-pill);
    font-family: "Fixel Display", sans-serif;
    font-size: var(--font-button);
    font-weight: 600;
    line-height: calc(24 * var(--px));
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--trans-fast);
    transition-property: color, background-color;
}

.pill-btn-block {
    width: 100%;
}

.pill-btn-orange {
    background: var(--btn-orange-color);
    color: var(--white-color);
}

.pill-btn-white {
    background: var(--white-color);
    color: var(--text-black-color);
}

.pill-btn-navy {
    background: var(--blue-color);
    color: var(--white-color);
}

.pill-btn-outline {
    border: 2px solid var(--blue-color);
    background: transparent;
    color: var(--blue-color);
}

.pill-btn-outline-light {
    border: 2px solid var(--white-color);
    background: transparent;
    color: var(--white-color);
}

.pill-btn-danger {
    background: var(--red-color);
    color: var(--white-color);
}

.pill-btn-orange:focus,
.pill-btn-white:focus {
    background: var(--blue-color);
    color: var(--white-color);
}

.pill-btn-navy:focus {
    background: var(--btn-orange-color);
    color: var(--white-color);
}

/* Hover only where there's a real pointer, so taps don't leave buttons stuck */
@media (hover: hover) {
    .pill-btn-orange:hover,
    .pill-btn-white:hover,
    .pill-btn-outline:hover {
        background: var(--blue-color);
        color: var(--white-color);
    }

    .pill-btn-navy:hover {
        background: var(--btn-orange-color);
        color: var(--white-color);
    }

    .pill-btn-outline-light:hover {
        background: var(--white-color);
        color: var(--blue-color);
    }

    .pill-btn-danger:hover {
        background: #d00a0a;
    }
}

.pill-btn:disabled,
.pill-btn:disabled:hover,
.pill-btn:disabled:focus {
    background: var(--disabled-btn-color);
    color: var(--white-color);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Round icon buttons: mobile menu toggle, modal close */
.icon-btn {
    border-radius: 50%;
    background: var(--btn-orange-color);
    color: var(--white-color);
    transition: var(--trans-fast);
    transition-property: color, background-color;
}

.icon-btn:focus {
    background: var(--blue-color);
}

@media (hover: hover) {
    .icon-btn:hover {
        background: var(--blue-color);
    }
}

.pill-btn:focus-visible {
    outline: 2px solid var(--btn-orange-color);
    outline-offset: 3px;
}

/*
 * Media frame: a fixed-ratio, clipped box holding either an <img> or a
 * <video muted loop playsinline poster="...">. Both fill it the same way, so a
 * looping video can replace an image without touching layout or animation.
 * Set --media-ratio and --media-radius to adjust.
 */
.media-frame {
    position: relative;
    aspect-ratio: var(--media-ratio, 16 / 10);
    overflow: hidden;
    border-radius: var(--media-radius, 12px);
}

.media-frame > img,
.media-frame > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms var(--ease-out);
}

@media (hover: hover) {
    .media-frame:hover > img,
    .media-frame:hover > video {
        transform: scale(1.03);
    }
}

/*
 * Scroll reveals (driven by js/motion.js).
 * Hidden states are scoped to .js-ready, which an inline script in <head> adds,
 * so the page stays fully visible if JavaScript doesn't run.
 * Per-section offsets and timing are set with --reveal-x, --reveal-y and --reveal-dur.
 */
/* Uses translate (not transform) so a card's own hover lift still works after it fades in */
.js-ready .reveal {
    opacity: 0;
    translate: var(--reveal-x, 0px) var(--reveal-y, var(--shift-y));
    transition:
        opacity var(--reveal-dur, var(--dur-reveal)) var(--ease-out) var(--reveal-delay, 0ms),
        translate var(--reveal-dur, var(--dur-reveal)) var(--ease-out) var(--reveal-delay, 0ms),
        transform var(--dur-hover) var(--ease-out),
        box-shadow var(--dur-hover) var(--ease-out);
}

.js-ready .reveal.is-in {
    opacity: 1;
    translate: none;
}

/* Fallback: if js/motion.js hasn't started by the time the <head> timer fires
   (blocked or slow), show everything instead of leaving it hidden */
.js-ready.reveal-timeout:not(.motion-on) .reveal {
    opacity: 1;
    translate: none;
    transition: none;
}

/* Blocks found automatically on pages with the auto-reveal class wait here until they scroll in */
.js-ready .reveal-pending {
    opacity: 0 !important;
}

/* Avoid a flash of content before js/motion.js runs; the inline script in <head> lifts this after 1s regardless */
.js-ready.auto-reveal:not(.motion-on):not(.reveal-timeout) main {
    opacity: 0;
}

@media print {
    .js-ready .reveal,
    .js-ready .reveal-pending,
    .js-ready.auto-reveal main {
        opacity: 1 !important;
        translate: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-ready .reveal {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/*
 * Clickable cards (links, buttons, expandable items) lift slightly under the pointer.
 * Information-only cards get no hover, so nothing suggests a click that does nothing.
 */
.card-hover {
    transition:
        transform var(--dur-hover) var(--ease-out),
        box-shadow var(--dur-hover) var(--ease-out);
}

@media (hover: hover) {
    .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
}

/* Linked cards lift on keyboard focus too */
.card-hover:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}