/* ==========================================================================
   Sponsor Harbor — site styles
   Layer order: base -> layout -> components -> sections -> scene -> utilities
   Every color, timing, easing, space and radius comes from tokens.css.
   The hero illustration's drawing geometry (cqi units) lives with the scene,
   like coordinates in an SVG. Mobile first; wider screens add to it.
   Breakpoints (media queries cannot read custom properties, so they are
   listed here once): 40rem large phone, 56rem tablet, 64rem desktop.
   ========================================================================== */

@layer base, layout, components, sections, scene, utilities;

/* ============================== BASE ============================== */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--header-height) + var(--space-4));
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    margin: 0;
    min-height: 100svh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }

  h1,
  h2,
  h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  p {
    margin: 0;
    text-wrap: pretty;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
    color: inherit;
  }

  svg {
    display: block;
  }

  :focus-visible {
    outline: var(--focus-ring) solid var(--color-focus);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
  }

  .contact :focus-visible,
  .audience--brand :focus-visible {
    outline-color: var(--color-focus-on-dark);
  }
}

/* ============================== LAYOUT ============================== */
@layer layout {
  .wrap {
    inline-size: 100%;
    max-inline-size: var(--width-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .wrap--narrow {
    max-inline-size: var(--width-narrow);
  }

  .section {
    padding-block: var(--space-section);
  }

  .section--alt {
    background: var(--color-bg-alt);
  }
}

/* ============================== COMPONENTS ============================== */
@layer components {
  /* ---- Logo ---- */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--tap-min);
    text-decoration: none;
  }

  .logo__mark {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
  }

  .logo__tile {
    fill: var(--color-brand);
  }

  .logo__sail {
    fill: var(--color-on-brand);
  }

  .logo__wave {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 3;
    stroke-linecap: round;
  }

  .logo__word {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
  }

  .logo__word-accent {
    color: var(--color-brand);
  }

  .logo--small .logo__mark {
    inline-size: 1.875rem;
    block-size: 1.875rem;
  }

  /* ---- Eyebrow ---- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
    color: var(--color-accent-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .eyebrow::before {
    content: "";
    inline-size: var(--space-2);
    block-size: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
  }

  .eyebrow--brand {
    color: var(--color-brand);
  }

  .eyebrow--brand::before {
    background: var(--color-brand);
  }

  .eyebrow--accent {
    color: var(--color-accent-on-dark);
  }

  /* ---- Buttons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-5);
    border: var(--border-thick) solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform var(--dur-tap) var(--ease-ui),
      box-shadow var(--dur-ui) var(--ease-ui),
      background-color var(--dur-ui) var(--ease-ui);
  }

  .btn:active {
    transform: scale(var(--press-scale));
  }

  .btn--small {
    padding-inline: var(--space-4);
    font-size: var(--text-sm);
  }

  .btn--large {
    min-block-size: var(--tap-large);
    padding-inline: var(--space-6);
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn--primary {
    background: var(--color-brand);
    color: var(--color-on-brand);
    box-shadow: var(--shadow-brand);
  }

  .btn--primary:hover {
    background: var(--color-brand-strong);
  }

  .btn--outline {
    border-color: var(--color-text);
    color: var(--color-text);
    background: var(--color-surface);
  }

  .btn--outline:hover {
    background: var(--color-brand-tint);
  }

  .btn--accent {
    background: var(--color-accent);
    color: var(--color-text);
  }

  .btn--accent:hover {
    background: var(--color-accent-soft);
  }

  .btn--light {
    background: var(--color-surface);
    color: var(--color-text);
  }

  .btn--light:hover {
    background: var(--color-brand-tint);
  }

  .btn--ghost-light {
    border-color: var(--color-on-dark-line);
    color: var(--color-on-dark);
    background: transparent;
  }

  .btn--ghost-light:hover {
    border-color: var(--color-on-dark);
  }

  @media (max-width: 39.99rem) {
    .btn--block-mobile {
      inline-size: 100%;
    }
  }

  /* ---- Skip link ---- */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-4);
    z-index: var(--z-menu);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-on-brand);
    transform: translateY(var(--skip-hidden-shift));
  }

  .skip-link:focus {
    transform: none;
  }
}

/* ============================== SECTIONS ============================== */
@layer sections {
  /* ---- Header ---- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: var(--color-header-bg);
    border-block-end: var(--border-thin) solid var(--color-line);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: var(--header-height);
  }

  .site-nav {
    display: none;
    margin-inline-start: auto;
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-1);
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .site-nav__link:hover {
    color: var(--color-text);
    background: var(--color-bg-alt);
  }

  .site-header__cta {
    display: none;
  }

  /* Mobile menu (native <details>: works without JS) */
  .menu {
    margin-inline-start: auto;
  }

  .menu__toggle {
    display: grid;
    place-items: center;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    border-radius: var(--radius-pill);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu__toggle::-webkit-details-marker {
    display: none;
  }

  .menu__icon,
  .menu__icon::before,
  .menu__icon::after {
    display: block;
    inline-size: var(--icon-bar-width);
    block-size: var(--border-thick);
    border-radius: var(--radius-pill);
    background: var(--color-text);
    transition: transform var(--dur-ui) var(--ease-ui), opacity var(--dur-ui) var(--ease-ui);
  }

  .menu__icon {
    position: relative;
  }

  .menu__icon::before,
  .menu__icon::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }

  .menu__icon::before {
    transform: translateY(calc(var(--icon-bar-gap) * -1));
  }

  .menu__icon::after {
    transform: translateY(var(--icon-bar-gap));
  }

  .menu[open] .menu__icon {
    background: transparent;
  }

  .menu[open] .menu__icon::before {
    transform: rotate(45deg);
  }

  .menu[open] .menu__icon::after {
    transform: rotate(-45deg);
  }

  .menu__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--gutter) var(--space-5);
    background: var(--color-surface);
    border-block-end: var(--border-thin) solid var(--color-line);
    box-shadow: var(--shadow-lg);
  }

  .menu__link {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-large);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }

  .menu__link:active {
    background: var(--color-bg-alt);
  }

  .menu__panel .btn {
    margin-block-start: var(--space-3);
  }

  @media (min-width: 64rem) {
    .site-nav,
    .site-header__cta {
      display: flex;
    }

    .site-header__cta {
      margin-inline-start: var(--space-2);
    }

    .menu {
      display: none;
    }
  }

  /* ---- Hero ---- */
  .hero {
    padding-block: var(--space-6) var(--space-section);
  }

  .hero__inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
  }

  .hero__title {
    font-size: var(--text-hero);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
  }

  .hero__title-mark {
    color: var(--color-brand);
    text-decoration: underline wavy var(--color-accent);
    text-decoration-thickness: var(--wave-thickness);
    text-underline-offset: var(--wave-offset);
    text-decoration-skip-ink: none;
  }

  .hero__lede {
    max-inline-size: var(--width-text);
    margin-block-start: var(--space-5);
    color: var(--color-text-soft);
    font-size: var(--text-lg);
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  .hero__actions .btn {
    padding-inline: var(--space-4);
    white-space: nowrap;
  }

  .hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }

  .hero__facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .hero__facts li::before {
    content: "";
    inline-size: var(--check-size);
    block-size: calc(var(--check-size) / 2);
    border-inline-start: var(--border-thick) solid var(--color-success);
    border-block-end: var(--border-thick) solid var(--color-success);
    transform: translateY(var(--check-lift)) rotate(-45deg);
  }

  .hero__scene {
    margin: 0;
  }

  @media (min-width: 40rem) {
    .hero__actions {
      display: flex;
      flex-wrap: wrap;
    }
  }

  @media (min-width: 64rem) {
    .hero {
      padding-block-start: var(--space-8);
    }

    .hero__inner {
      grid-template-columns: 1.05fr 1fr;
      grid-template-areas:
        "copy scene"
        "facts scene";
      column-gap: var(--space-8);
      row-gap: var(--space-5);
    }

    .hero__copy {
      grid-area: copy;
      align-self: end;
    }

    .hero__scene {
      grid-area: scene;
    }

    .hero__facts {
      grid-area: facts;
      align-self: start;
    }

    .hero__actions .btn {
      padding-inline: var(--space-6);
    }
  }

  /* ---- Section heads ---- */
  .section-head {
    max-inline-size: var(--width-text);
    margin-block-end: var(--space-7);
  }

  .section-head__title {
    font-size: var(--text-2xl);
  }

  .section-head__text {
    margin-block-start: var(--space-4);
    color: var(--color-text-soft);
    font-size: var(--text-lg);
  }

  /* ---- Route (how it works) ---- */
  .route {
    position: relative;
    padding-inline-start: calc(var(--buoy-size) + var(--space-5));
  }

  .route__track {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--buoy-size);
    container-type: size;
  }

  .route__line,
  .route__fill {
    position: absolute;
    inset-block: calc(var(--buoy-size) / 2);
    inset-inline-start: calc(50% - var(--border-thick) / 2);
    inline-size: var(--border-thick);
  }

  .route__line {
    background: repeating-linear-gradient(
      to bottom,
      var(--color-line-strong) 0 var(--dash),
      transparent var(--dash) calc(var(--dash) * 2)
    );
  }

  .route__fill {
    background: var(--color-brand);
    transform-origin: top;
  }

  .route__boat {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-scene-front);
    display: grid;
    place-items: center;
    inline-size: var(--buoy-size);
    block-size: var(--buoy-size);
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    box-shadow: var(--shadow-brand);
    transform: translateY(calc(100cqh - 100%));         /* resting: arrived */
  }

  .route__boat svg {
    inline-size: 70%;
    block-size: 70%;
  }

  .route__boat-sail {
    fill: var(--color-on-brand);
  }

  .route__boat-hull {
    fill: var(--color-accent);
  }

  .route__steps {
    display: grid;
    gap: var(--space-7);
  }

  .step {
    position: relative;
  }

  .step__buoy {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc((var(--buoy-size) + var(--space-5)) * -1);
    display: grid;
    place-items: center;
    inline-size: var(--buoy-size);
    block-size: var(--buoy-size);
    border: var(--border-thick) solid var(--color-brand);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-brand);
    font-family: var(--font-display);
    font-weight: var(--weight-black);
  }

  .step__title {
    padding-block-start: var(--space-2);
    font-size: var(--text-xl);
  }

  .step__text {
    margin-block-start: var(--space-2);
    color: var(--color-text-soft);
  }

  @media (min-width: 64rem) {
    .route {
      padding-inline-start: 0;
      padding-block-start: calc(var(--buoy-size) + var(--space-5));
    }

    .route__track {
      inset-inline: 0;
      inset-block: 0 auto;
      inline-size: auto;
      block-size: var(--buoy-size);
    }

    .route__line,
    .route__fill {
      inset-block: calc(50% - var(--border-thick) / 2) auto;
      inset-inline: calc(var(--buoy-size) / 2);
      inline-size: auto;
      block-size: var(--border-thick);
    }

    .route__line {
      background: repeating-linear-gradient(
        to right,
        var(--color-line-strong) 0 var(--dash),
        transparent var(--dash) calc(var(--dash) * 2)
      );
    }

    .route__fill {
      transform-origin: left;
    }

    .route__boat {
      transform: translateX(calc(100cqw - 100%));
    }

    .route__steps {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-6);
    }

    .step__buoy {
      inset-block-start: calc((var(--buoy-size) + var(--space-5)) * -1);
      inset-inline-start: 0;
    }

    .step__title {
      padding-block-start: 0;
    }
  }

  /* The boat sails the route as the list scrolls through the screen.
     Browsers without scroll-driven animations keep the still route. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .route {
        view-timeline-name: --route;
      }

      .route__boat,
      .route__fill {
        animation-duration: auto;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: --route;
        animation-range: cover var(--route-anchor) cover calc(100% - var(--route-anchor));
      }

      .route__boat {
        animation-name: route-sail-down;
      }

      .route__fill {
        animation-name: route-fill-down;
      }

      @media (min-width: 64rem) {
        .route__boat,
        .route__fill {
          animation-range: contain 0% contain 80%;
        }

        .route__boat {
          animation-name: route-sail-across;
        }

        .route__fill {
          animation-name: route-fill-across;
        }
      }
    }
  }

  @keyframes route-sail-down {
    from { transform: translateY(0) rotate(calc(var(--scene-bob-tilt) * -2)); }
    50%  { transform: translateY(calc((100cqh - 100%) / 2)) rotate(calc(var(--scene-bob-tilt) * 2)); }
    to   { transform: translateY(calc(100cqh - 100%)) rotate(0deg); }
  }

  @keyframes route-sail-across {
    from { transform: translateX(0) rotate(calc(var(--scene-bob-tilt) * -2)); }
    50%  { transform: translateX(calc((100cqw - 100%) / 2)) rotate(calc(var(--scene-bob-tilt) * 2)); }
    to   { transform: translateX(calc(100cqw - 100%)) rotate(0deg); }
  }

  @keyframes route-fill-down {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }

  @keyframes route-fill-across {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* ---- Audiences ---- */
  .audiences {
    display: grid;
    gap: var(--space-5);
  }

  .audience {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .audience__title {
    font-size: var(--text-2xl);
  }

  .audience--brand {
    background: var(--color-text);
    color: var(--color-on-dark);
  }

  .perks {
    display: grid;
    align-self: stretch;
    margin-block: var(--space-6);
  }

  .perk {
    position: relative;
    padding-block: var(--space-4);
    padding-inline-start: calc(var(--check-size) + var(--space-4));
    border-block-start: var(--border-thin) solid var(--color-line);
  }

  .perk::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--space-4) + var(--check-top));
    inline-size: var(--check-size);
    block-size: calc(var(--check-size) / 2);
    border-inline-start: var(--border-thick) solid var(--color-brand);
    border-block-end: var(--border-thick) solid var(--color-brand);
    transform: rotate(-45deg);
  }

  .perk__title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
  }

  .perk__text {
    margin-block-start: var(--space-1);
    color: var(--color-text-soft);
  }

  .audience--brand .perk {
    border-color: var(--color-on-dark-line);
  }

  .audience--brand .perk::before {
    border-color: var(--color-accent);
  }

  .audience--brand .perk__text {
    color: var(--color-on-dark-soft);
  }

  .audience .btn {
    margin-block-start: auto;
  }

  @media (min-width: 40rem) {
    .audience {
      padding: var(--space-7);
    }
  }

  @media (min-width: 56rem) {
    .audiences {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* ---- Niches ---- */
  .niches {
    display: grid;
    gap: var(--space-4);
  }

  .niche {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    align-items: center;
    padding: var(--space-5);
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .niche__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    inline-size: var(--niche-icon);
    block-size: var(--niche-icon);
    border-radius: var(--radius-md);
    background: var(--niche-tint);
  }

  .niche__icon svg {
    inline-size: 60%;
    block-size: 60%;
  }

  .niche__shape {
    fill: var(--niche-color);
  }

  .niche__detail {
    fill: none;
    stroke: var(--color-surface);
    stroke-width: 3;
    stroke-linecap: round;
  }

  .niche--tech .niche__detail {
    stroke: var(--niche-color);
  }

  .niche--home {
    --niche-tint: var(--color-warm-tint);
    --niche-color: var(--color-accent);
  }

  .niche--tech {
    --niche-tint: var(--color-brand-tint);
    --niche-color: var(--color-brand);
  }

  .niche__title {
    font-size: var(--text-xl);
  }

  .niche__text {
    color: var(--color-text-soft);
  }

  @media (min-width: 40rem) {
    .niches {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* ---- FAQ ---- */
  .faq {
    display: grid;
    gap: var(--space-3);
  }

  .faq__item {
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .faq__q {
    position: relative;
    display: flex;
    align-items: center;
    min-block-size: var(--tap-large);
    padding: var(--space-4) calc(var(--space-5) * 2 + var(--plus-size)) var(--space-4) var(--space-5);
    font-weight: var(--weight-bold);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .faq__q::-webkit-details-marker {
    display: none;
  }

  .faq__q::before,
  .faq__q::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--space-5);
    inset-block-start: calc(50% - var(--border-thick) / 2);
    inline-size: var(--plus-size);
    block-size: var(--border-thick);
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    transition: transform var(--dur-ui) var(--ease-ui);
  }

  .faq__q::after {
    transform: rotate(90deg);
  }

  .faq__item[open] .faq__q::after {
    transform: rotate(0deg);
  }

  .faq__a {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-soft);
  }

  .faq__a a {
    color: var(--color-brand);
    font-weight: var(--weight-semibold);
  }

  /* ---- Contact ---- */
  .contact {
    position: relative;
    padding-block: var(--space-section);
    background: var(--color-brand-deep);
    color: var(--color-on-dark);
    text-align: center;
  }

  .contact__inner {
    display: grid;
    justify-items: center;
  }

  .contact__title {
    font-size: var(--text-2xl);
  }

  .contact__text {
    max-inline-size: var(--width-text);
    margin-block-start: var(--space-4);
    color: var(--color-on-dark-soft);
    font-size: var(--text-lg);
  }

  .contact__actions {
    display: grid;
    gap: var(--space-3);
    inline-size: 100%;
    max-inline-size: var(--contact-actions);
    margin-block-start: var(--space-6);
  }

  .contact__status {
    min-block-size: var(--leading-body);
    margin-block-start: var(--space-3);
    color: var(--color-on-dark-soft);
    font-size: var(--text-sm);
  }

  @media (min-width: 40rem) {
    .contact__actions {
      display: flex;
      justify-content: center;
      max-inline-size: none;
    }
  }

  /* ---- Footer ---- */
  .site-footer {
    padding-block: var(--space-7);
    border-block-start: var(--border-thin) solid var(--color-line);
  }

  .site-footer__inner {
    display: grid;
    gap: var(--space-3);
  }

  .site-footer__note,
  .site-footer__meta {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
  }

  .site-footer__meta a {
    display: inline-block;
    padding-block: var(--space-3);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }

  @media (min-width: 56rem) {
    .site-footer__inner {
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: var(--space-6);
    }
  }
}

/* ==========================================================================
   SCENE — the hero film
   The story: a creator's boat (carrying a video) and a brand's boat
   (carrying a product crate) sail into harbor. Gangways drop onto the
   lighthouse pier, the brand's "Sponsor" tag is tossed into the video's
   timeline, the video plays, a coin travels brand -> harbor -> creator,
   and the lighthouse sweeps once. Then everything floats.

   The resting CSS below IS the final frame, so reduced motion, old
   browsers and no-JS all get the finished picture. Animations only run
   under prefers-reduced-motion: no-preference, and only touch transform
   and opacity.
   ========================================================================== */
@layer scene {
  .scene {
    position: relative;
    container-type: inline-size;
    aspect-ratio: var(--scene-ratio);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: linear-gradient(to bottom, var(--scene-sky-top), var(--scene-sky-bottom) 70%);
    box-shadow: var(--shadow-lg);
    isolation: isolate;
  }

  .scene > * {
    position: absolute;
  }

  .scene__sun {
    inset-block-start: 7cqi;
    inset-inline-start: 72cqi;
    inline-size: 15cqi;
    aspect-ratio: 1;
    border-radius: var(--radius-pill);
    background: var(--scene-sun);
    box-shadow: 0 0 0 3cqi var(--scene-sun-halo);
  }

  /* Lighthouse on the pier end */
  .scene__lighthouse {
    z-index: var(--z-scene-back);
    inset-inline-start: 43cqi;
    inset-block-start: 8.4cqi;
    inline-size: 14cqi;
    block-size: 47.6cqi;
  }

  .scene__lighthouse svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .lh__roof { fill: var(--scene-hull); }
  .lh__lamp { fill: var(--scene-lamp); }
  .lh__rail { fill: var(--scene-hull); }
  .lh__tower { fill: var(--scene-tower); }
  .lh__band { fill: var(--scene-tower-band); }
  .lh__door { fill: var(--scene-hull); }

  .scene__lamp-glow {
    position: absolute;
    inset-block-start: 16.2%;
    inset-inline-start: 50%;
    inline-size: 16cqi;
    aspect-ratio: 1;
    margin: -8cqi 0 0 -8cqi;
    border-radius: var(--radius-pill);
    background: radial-gradient(closest-side, var(--scene-lamp-glow), transparent);
    opacity: var(--scene-glow-rest);
  }

  .scene__beam {
    z-index: var(--z-scene-back);
    inset-block-start: 16.1cqi;
    inset-inline-start: 50cqi;
    inline-size: 62cqi;
    block-size: 18cqi;
    margin-block-start: -9cqi;
    background: linear-gradient(to right, var(--scene-lamp-beam), transparent);
    clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%);
    transform-origin: 0 50%;
    transform: rotate(var(--scene-beam-rest));
    opacity: var(--scene-beam-opacity);
  }

  /* Water */
  .scene__sea {
    inset-inline: 0;
    inset-block-end: 0;
  }

  .scene__sea--back {
    z-index: var(--z-scene-back);
    inset-block-start: 55cqi;
    background: var(--scene-sea-back);
  }

  .scene__sea--front {
    z-index: var(--z-scene-front);
    inset-block-start: 68.5cqi;
    background: linear-gradient(to bottom, var(--scene-sea-front), var(--scene-sea-deep));
  }

  .scene__swell {
    position: absolute;
    inset-block-end: calc(100% - 1px);
    inset-inline-start: 0;
    inline-size: 200%;
    block-size: 3cqi;
  }

  .scene__swell svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .scene__sea--back path { fill: var(--scene-sea-back); }
  .scene__sea--front path { fill: var(--scene-sea-front); }

  /* Pier */
  .scene__dock {
    z-index: var(--z-scene-back);
    inset-inline-start: 40cqi;
    inset-block-start: 56cqi;
    inline-size: 20cqi;
    block-size: 7cqi;
  }

  .scene__dock svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .dock__deck { fill: var(--scene-wood); }
  .dock__post { fill: var(--scene-wood-dark); }

  /* Boats */
  .scene__boat {
    z-index: var(--z-scene-mid);
    inset-block-end: 13cqi;
    inline-size: 36cqi;
  }

  .scene__boat--creator {
    z-index: var(--z-scene-lead);
    inset-inline-start: 2cqi;
  }

  .scene__boat--brand { inset-inline-end: 2cqi; }

  .scene__float {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: 50% 100%;
  }

  .scene__hull {
    position: relative;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 300 / 80;
  }

  .hull__body { fill: var(--scene-hull); }
  .hull__stripe { fill: var(--scene-hull-stripe); }
  .hull__rim { fill: var(--scene-hull-rim); }

  .scene__plank {
    position: absolute;
    inset-block-end: 8.6cqi;
    inline-size: 7.5cqi;
    block-size: 1.1cqi;
    border-radius: 0.3cqi;
    background: var(--scene-wood);
  }

  .scene__plank--creator {
    inset-inline-start: calc(100% - 1.5cqi);
    transform-origin: 0 50%;
    transform: rotate(var(--scene-plank-rest));
  }

  .scene__plank--brand {
    inset-inline-end: calc(100% - 1.5cqi);
    transform-origin: 100% 50%;
    transform: rotate(calc(var(--scene-plank-rest) * -1));
  }

  /* Video card on the creator's boat */
  .vcard {
    position: relative;
    z-index: var(--z-scene-back);
    inline-size: 30cqi;
    margin-block-end: -0.4cqi;
    padding: 1.2cqi;
    border-radius: 1.6cqi;
    background: var(--scene-card);
    box-shadow: var(--shadow-md);
  }

  .vcard__thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: 0.9cqi;
    background: linear-gradient(135deg, var(--scene-thumb), var(--scene-sea-mid));
  }

  .vcard__play {
    position: relative;
    inline-size: 7cqi;
    block-size: 5cqi;
    border-radius: 1.4cqi;
    background: var(--scene-play);
  }

  .vcard__play::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 2.2cqi;
    block-size: 2.4cqi;
    background: var(--scene-card);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translateX(0.2cqi);
  }

  .vcard__meta {
    display: flex;
    align-items: center;
    gap: 1cqi;
    margin-block-start: 1cqi;
  }

  .vcard__avatar {
    flex: none;
    inline-size: 3.2cqi;
    aspect-ratio: 1;
    border-radius: var(--radius-pill);
    background: var(--scene-sun);
  }

  .vcard__lines {
    display: grid;
    flex: 1;
    gap: 0.6cqi;
  }

  .vcard__lines span {
    block-size: 0.9cqi;
    border-radius: var(--radius-pill);
    background: var(--scene-ink-line);
  }

  .vcard__lines span + span {
    inline-size: 60%;
    background: var(--scene-ink-line-soft);
  }

  .vcard__timeline {
    position: relative;
    block-size: 1.4cqi;
    margin-block-start: 1.2cqi;
    border-radius: var(--radius-pill);
    background: var(--scene-ink-line-soft);
  }

  .vcard__progress {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--scene-hull);
    transform-origin: 0 50%;
    transform: scaleX(var(--scene-progress-rest));
  }

  .vcard__tag,
  .crate__sticker {
    display: grid;
    place-items: center;
    inline-size: 10.5cqi;
    block-size: 2.8cqi;
    border-radius: 0.6cqi;
    background: var(--scene-tag);
    color: var(--scene-tag-text);
    font-size: 1.6cqi;
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
  }

  .vcard__tag {
    position: absolute;
    inset-inline-start: 40%;
    inset-block-start: -0.7cqi;
    z-index: var(--z-scene-front);
    box-shadow: var(--shadow-sm);
  }

  .vcard__paid {
    position: absolute;
    inset-block-start: -1.8cqi;
    inset-inline-end: -1.8cqi;
    display: inline-flex;
    align-items: center;
    gap: 0.6cqi;
    padding: 0.7cqi 1.4cqi;
    border-radius: var(--radius-pill);
    background: var(--scene-paid);
    color: var(--scene-tag-text);
    font-size: 2cqi;
    font-weight: var(--weight-bold);
    line-height: 1;
    box-shadow: var(--shadow-md);
  }

  .vcard__paid::before {
    content: "";
    inline-size: 1.4cqi;
    block-size: 0.7cqi;
    border-inline-start: 0.35cqi solid currentColor;
    border-block-end: 0.35cqi solid currentColor;
    transform: translateY(-0.2cqi) rotate(-45deg);
  }

  .scene__coin {
    position: absolute;
    z-index: var(--z-scene-fx);
    inset-block-start: -2.2cqi;
    inset-inline-end: 1.6cqi;
    inline-size: 4.6cqi;
    aspect-ratio: 1;
    border: 0.5cqi solid var(--scene-coin-edge);
    border-radius: var(--radius-pill);
    background: var(--scene-coin);
    opacity: 0;
  }

  .scene__coin::after {
    content: "";
    position: absolute;
    inset: 22%;
    border: 0.35cqi solid var(--scene-coin-edge);
    border-radius: var(--radius-pill);
  }

  /* Product crate on the brand's boat */
  .crate {
    position: relative;
    z-index: var(--z-scene-back);
    inline-size: 17cqi;
    block-size: 13cqi;
    margin-block-end: -0.4cqi;
    border-radius: 0.6cqi;
    background: var(--scene-box);
    box-shadow: inset 0 -1cqi 0 var(--scene-box-dark);
  }

  .crate__lid {
    position: absolute;
    inset-inline: -0.6cqi;
    inset-block-start: -0.4cqi;
    block-size: 2.4cqi;
    border-radius: 0.5cqi;
    background: var(--scene-box-dark);
  }

  .crate__label {
    position: absolute;
    inset-inline: 2cqi;
    inset-block-start: 3.4cqi;
    padding-block: 0.6cqi;
    border-radius: 0.4cqi;
    background: var(--scene-card);
    color: var(--scene-hull);
    font-family: var(--font-display);
    font-size: 2cqi;
    font-weight: var(--weight-black);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .crate__sticker {
    position: absolute;
    inset-inline-start: 1.2cqi;
    inset-block-end: 2cqi;
    transform: rotate(var(--scene-sticker-tilt));
    opacity: 0;
  }

  /* ---------- The film ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .scene__boat--creator {
      animation: sail-in-start var(--dur-sail) var(--ease-glide) var(--at-sail) both;
    }

    .scene__boat--brand {
      animation: sail-in-end var(--dur-sail) var(--ease-glide) var(--at-sail) both;
    }

    .scene__boat .scene__float {
      animation:
        hull-dock var(--dur-dock) var(--ease-dock) var(--at-dock),
        hull-bob var(--dur-bob) var(--ease-float) var(--at-float) infinite;
    }

    .scene__boat--brand .scene__float {
      animation-direction: normal, reverse;
    }

    .scene__plank--creator {
      animation: plank-drop-start var(--dur-rope) var(--ease-dock) var(--at-rope) both;
    }

    .scene__plank--brand {
      animation: plank-drop-end var(--dur-rope) var(--ease-dock) var(--at-rope) both;
    }

    .crate__sticker {
      animation: hand-off var(--dur-instant) linear var(--at-toss) both;
    }

    .vcard__tag {
      animation:
        tag-toss var(--dur-toss) var(--ease-toss) var(--at-toss) both,
        tag-snap var(--dur-snap) var(--ease-dock) calc(var(--at-toss) + var(--dur-toss));
    }

    .vcard__progress {
      animation: video-play var(--dur-play) linear calc(var(--at-toss) + var(--dur-toss)) both;
    }

    .scene__coin {
      animation: coin-run var(--dur-coin) var(--ease-toss) var(--at-coin) both;
    }

    .vcard__paid {
      animation: paid-pop var(--dur-pop) var(--ease-dock) var(--at-paid) both;
    }

    .scene__beam {
      animation: beam-sweep var(--dur-beam) var(--ease-glide) var(--at-beam) both;
    }

    .scene__lamp-glow {
      animation: lamp-flare var(--dur-beam) var(--ease-glide) var(--at-beam) both;
    }

    .scene__swell {
      animation: swell var(--dur-swell) linear infinite;
    }

    .scene__swell--slow {
      animation-duration: var(--dur-swell-slow);
    }

    /* Endless loops rest while the scene is off screen (set by site.js). */
    .scene.is-offscreen .scene__swell {
      animation-play-state: paused;
    }

    /* Pause only the endless bob, never the one-time docking dip. */
    .scene.is-offscreen .scene__float {
      animation-play-state: running, paused;
    }
  }

  @keyframes sail-in-start {
    from {
      transform: translateX(calc(var(--scene-sail-distance) * -1)) rotate(calc(var(--scene-bob-tilt) * -1.5));
    }
    to {
      transform: none;
    }
  }

  @keyframes sail-in-end {
    from {
      transform: translateX(var(--scene-sail-distance)) rotate(calc(var(--scene-bob-tilt) * 1.5));
    }
    to {
      transform: none;
    }
  }

  /* The hull meets the water: dips, then settles */
  @keyframes hull-dock {
    from { transform: none; }
    35%  { transform: translateY(var(--scene-bob-rise)) scaleY(var(--scene-dock-squash)); }
    to   { transform: none; }
  }

  @keyframes hull-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(calc(var(--scene-bob-rise) * -1)) rotate(var(--scene-bob-tilt)); }
    75%      { transform: translateY(calc(var(--scene-bob-rise) * 0.4)) rotate(calc(var(--scene-bob-tilt) * -1)); }
  }

  @keyframes plank-drop-start {
    from { transform: rotate(var(--scene-plank-stowed)); }
    to   { transform: rotate(var(--scene-plank-rest)); }
  }

  @keyframes plank-drop-end {
    from { transform: rotate(calc(var(--scene-plank-stowed) * -1)); }
    to   { transform: rotate(calc(var(--scene-plank-rest) * -1)); }
  }

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

  /* The tag starts exactly where the crate's sticker was, arcs over the
     pier and lands in the timeline. site.js measures the real offsets. */
  @keyframes tag-toss {
    0% {
      opacity: 0;
      transform: translate(var(--scene-toss-x), var(--scene-toss-y)) rotate(var(--scene-sticker-tilt));
    }
    1% {
      opacity: 1;
      transform: translate(var(--scene-toss-x), var(--scene-toss-y)) rotate(var(--scene-sticker-tilt));
    }
    50% {
      transform: translate(calc(var(--scene-toss-x) * 0.5), var(--scene-toss-arc)) rotate(180deg) scale(1.25);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0) rotate(360deg);
    }
  }

  @keyframes tag-snap {
    from { transform: scale(1.3, 0.7); }
    to   { transform: none; }
  }

  @keyframes video-play {
    from { transform: scaleX(var(--scene-progress-start)); }
    to   { transform: scaleX(var(--scene-progress-rest)); }
  }

  /* Brand -> harbor (lamp) -> creator */
  @keyframes coin-run {
    0% {
      opacity: 0;
      transform: translate(var(--scene-coin-start-x), var(--scene-coin-start-y)) scale(0.4);
    }
    8% {
      opacity: 1;
      transform: translate(var(--scene-coin-start-x), calc(var(--scene-coin-start-y) - var(--scene-coin-hop))) scale(1);
    }
    45% {
      transform: translate(var(--scene-coin-mid-x), var(--scene-coin-mid-y)) scale(1.15);
    }
    88% {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(0, 0) scale(0.5);
    }
  }

  @keyframes paid-pop {
    from {
      opacity: 0;
      transform: scale(0.3) rotate(-12deg);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes beam-sweep {
    from {
      opacity: 0;
      transform: rotate(var(--scene-beam-start));
    }
    20% {
      opacity: var(--scene-beam-peak);
    }
    to {
      opacity: var(--scene-beam-opacity);
      transform: rotate(var(--scene-beam-rest));
    }
  }

  @keyframes lamp-flare {
    from {
      opacity: var(--scene-glow-rest);
      transform: scale(0.6);
    }
    30% {
      opacity: 1;
      transform: scale(1.5);
    }
    to {
      opacity: var(--scene-glow-rest);
      transform: none;
    }
  }

  @keyframes swell {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--scene-swell-shift)); }
  }
}

/* ============================== UTILITIES ============================== */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  [hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: var(--dur-instant);
    }
  }
}