/* Shipping animation fitted to the existing home slideshow footprint. */
.ship-hero {
  --ink: #0a1c20; --ink-2: #0f2a2e; --mint: #86dcb4;
  --mint-soft: #a8ecc8; --forest: #1b4433; --mist: #cfdad6;
  --muted: #7f9792; --paper: #fff;
}
  
  .ship-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 2.2 / 1;
    min-height: 460px;
    max-height: 820px;
    width: 100%;
    border-radius: 18px;
    color: var(--paper);
    background:
      radial-gradient(70% 120% at 74% 70%, #12333a 0%, rgba(18, 51, 58, 0) 60%),
      linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 55%);
  }
  .ship-hero canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .ship-hero__copy {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 0 clamp(1.5rem, 4.6vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 54%;
    pointer-events: none;
  }

  /* "Shipped domestically" badge: live dot that pings, plus a light sweep every few seconds */
  .ship-hero__badge {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 clamp(1.2rem, 2.4vw, 2.2rem);
    padding: 0.55rem 1rem 0.55rem 0.85rem;
    font: 600 clamp(0.85rem, 0.9vw, 0.95rem)/1 Manrope, var(--font);
    color: var(--paper);
    background: rgba(134, 220, 180, 0.1);
    border: 1px solid rgba(134, 220, 180, 0.45);
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(134, 220, 180, 0);
  }
  .ship-hero__badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-120%);
  }
  .ship-hero__live {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
  }
  .ship-hero__live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--mint);
    opacity: 0;
  }
  .ship-hero__flags { display: inline-flex; gap: 4px; }
  .ship-hero__flags svg { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }

  .ship-hero h1 {
    margin: 0;
    font-family: Manrope, var(--font);
    font-weight: 500;
    font-size: clamp(2.3rem, 3.6vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
  }
  .ship-hero h1 .line { display: block; white-space: nowrap; }
  .ship-hero h1 .accent { color: var(--mint); }

  .ship-hero p {
    margin: clamp(1.1rem, 2vw, 1.8rem) 0 0;
    max-width: 30rem;
    font-size: clamp(1rem, 1.12vw, 1.2rem);
    line-height: 1.65;
    color: var(--mist);
  }

  .ship-hero__cta {
    pointer-events: auto;
    margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
    display: inline-block;
    padding: 1.05rem 1.9rem;
    font: 600 1.05rem/1 Manrope, var(--font);
    color: var(--forest);
    background: var(--mint-soft);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
  }
  .ship-hero__cta:hover { background: #c2f4d9; }
  .ship-hero__cta:active { transform: translateY(1px); }
  .ship-hero__cta:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }

  .ship-hero__note {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: clamp(1.4rem, 2.6vw, 2.4rem);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--muted);
  }
  .ship-hero__note svg { flex: none; }
  .ship-hero__note b { display: block; font-weight: 400; color: var(--mist); }

  /* Reveal choreography, synced to the canvas clock (t = 0 when .is-playing is set). */
  .ship-hero .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .ship-hero .w > span { display: inline-block; transform: translateY(110%); }
  .ship-hero .fade { opacity: 0; transform: translateY(10px); }
  .ship-hero.is-playing .w > span { animation: rise 1s cubic-bezier(.16, 1, .3, 1) var(--d) both; }
  .ship-hero.is-playing .fade { animation: fade .9s cubic-bezier(.16, 1, .3, 1) var(--d) both; }
  .ship-hero.is-playing .ship-hero__badge {
    animation: fade .9s cubic-bezier(.16, 1, .3, 1) var(--d) both, glow 2.4s ease-in-out 2.6s infinite;
  }
  .ship-hero.is-playing .ship-hero__live { animation: blink 1.2s steps(1, end) 2.6s infinite; }
  .ship-hero.is-playing .ship-hero__live::after { animation: ping 1.2s cubic-bezier(0, 0, .2, 1) 2.6s infinite; }
  .ship-hero.is-playing .ship-hero__badge::after { animation: sweep 4.8s ease-in-out 2.3s infinite; }
  @keyframes rise { to { transform: none; } }
  @keyframes fade { to { opacity: 1; transform: none; } }
  @keyframes blink { 0%, 70% { opacity: 1; } 85% { opacity: .35; } }
  @keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
  @keyframes glow {
    0%, 100% { border-color: rgba(134, 220, 180, .45); box-shadow: 0 0 0 0 rgba(134, 220, 180, 0); }
    50% { border-color: rgba(168, 236, 200, .95); box-shadow: 0 0 18px 0 rgba(134, 220, 180, .35); }
  }
  @keyframes sweep { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

  @media (max-width: 860px) {
    .ship-hero { aspect-ratio: auto; height: 860px; max-height: none; }
    .ship-hero__badge { gap: 0.5rem; padding: 0.5rem 0.8rem 0.5rem 0.7rem; font-size: 0.78rem; white-space: nowrap; }
    .ship-hero__copy { max-width: 100%; height: auto; padding-top: 2.6rem; justify-content: flex-start; }
    .ship-hero h1 { font-size: clamp(2.1rem, 9vw, 3.2rem); }
    .ship-hero h1 .line { white-space: normal; }
    .ship-hero__note { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ship-hero:not(.force-motion) .w > span,
    .ship-hero:not(.force-motion) .fade { transform: none; opacity: 1; animation: none !important; }
    .ship-hero:not(.force-motion) .ship-hero__badge,
    .ship-hero:not(.force-motion) .ship-hero__badge::after,
    .ship-hero:not(.force-motion) .ship-hero__live,
    .ship-hero:not(.force-motion) .ship-hero__live::after { animation: none !important; }
  }

  
/* Integration with the homepage carousel and its shared controls. */
.ship-hero h1 .line{width:auto;height:auto;background:none}
.ship-hero__badge{max-width:100%;line-height:1.35}
.ship-hero__flags{flex-shrink:0}
.ship-hero__motion{position:absolute;bottom:60px;right:18px;z-index:2;min-height:36px;padding:7px 12px;border:1px solid #7f9792;border-radius:6px;color:#cfdad6;background:#0a1c20;font-size:12px}
.ship-hero.is-paused *,.ship-hero.is-paused *::before,.ship-hero.is-paused *::after{animation-play-state:paused!important}
.ship-hero .w>span{transform:none}.ship-hero .fade{opacity:1;transform:none}
@keyframes rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:861px){.ship-hero__copy{max-width:58%;padding-inline:clamp(24px,3vw,60px)}.ship-hero h1{font-size:clamp(28px,3.1vw,46px)}.ship-hero__badge{font-size:12px}}
@media(max-width:860px){.ship-hero__badge{white-space:normal}.ship-hero__copy{padding-inline:24px}.ship-hero h1{font-size:clamp(29px,7.5vw,48px)}}