/* "Island Fresh v2" — default look for courier sites created from 2026-10-23 (first built for Starlight).
   Layer on top of the shared Island Fresh theme (site.css); loaded when courier_sites.template = 'v2'.
   Brand colour comes from the courier record (--blue / --blue-dark / --blue-soft), gold is the shared accent.
   Motion: transform/opacity only, every loop stops by itself, all off under reduced motion. */
:root {
  --sun: #f0b94d;          /* warmer gold than the shared yellow, still dark-text safe (8:1 with --ink) */
  --sun-soft: #fdf3dc;
  --gold: #cb9c4e;
  --gold-deep: #7a5718;    /* 5.6:1 on --sun-soft */
  --bg: #fffaf3;
}

/* Wide wordmark logo (the shared 64px width is sized for square logos) */
.brand img { width: auto; height: 46px; }
@media (min-width: 960px) { .brand img { height: 58px; } }
.foot-brand img { width: 210px; }

/* Hero: warm island sky, red + gold glow, a soft scatter of gold stars top-right */
.hero {
  background:
    radial-gradient(900px 440px at 88% -10%, rgba(240,185,77,.32), transparent 62%),
    radial-gradient(760px 420px at -8% 108%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 60%),
    linear-gradient(180deg, #fff6e8 0%, #fffdf9 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(203,156,78,.7) 1.3px, transparent 1.8px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(55% 55% at 85% 0%, #000, transparent 75%);
          mask-image: radial-gradient(55% 55% at 85% 0%, #000, transparent 75%);
  opacity: .55;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-grid { padding-bottom: 16px; }
@media (min-width: 960px) { .hero-grid { padding-bottom: 24px; } }
.hero .eyebrow { background: var(--sun-soft); color: var(--gold-deep); box-shadow: inset 0 0 0 1px rgba(203,156,78,.35); }
.route-card { border-color: #f0e2c6; box-shadow: 0 2px 4px rgba(20,33,61,.05), 0 18px 40px rgba(122,87,24,.14); }
.route-card::before { content: ""; display: block; height: 5px; margin: -24px -24px 20px; border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, var(--blue-dark), var(--blue) 55%, var(--sun)); }

/* Journey strip (Miami -> Jamaica), included at the bottom of the hero */
.journey { position: relative; z-index: 1; padding-bottom: 44px; }
.journey svg { width: 100%; height: auto; overflow: visible; }
.journey .arc { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 13; opacity: .5; }
.journey .arc-glow { fill: none; stroke: var(--sun); stroke-width: 10; stroke-linecap: round; opacity: .14; }
.journey .pin-ring { fill: none; stroke: var(--sun); stroke-width: 3; opacity: 0; }
.journey-labels { display: flex; justify-content: space-between; gap: 16px; margin-top: -6px; font: 600 .95rem/1.2 var(--font-body); color: var(--ink-2); }
.journey-labels span:last-child { text-align: right; }
.journey-labels strong { display: block; font: 700 1.05rem/1.2 var(--font-head); color: var(--ink); }
@media (max-width: 639px) { .journey-labels { font-size: .85rem; } .journey-labels strong { font-size: .95rem; } }

/* Benefits band and CTA: deep red to brand red, with a gold edge */
.benefits { background: linear-gradient(110deg, var(--blue-dark), var(--blue) 60%, color-mix(in srgb, var(--blue) 82%, #fff)); box-shadow: inset 0 -4px 0 var(--sun); }
.cta-band { background: radial-gradient(500px 220px at 90% 0%, rgba(240,185,77,.35), transparent 70%), linear-gradient(120deg, var(--blue-dark), var(--blue)); }
.cta-band p { color: rgba(255,255,255,.88); }

/* Headings: short red-to-gold underline */
.section-head h2::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 4px; margin-top: 14px;
  background: linear-gradient(90deg, var(--blue), var(--sun)); }
.section-head.center h2::after { margin-left: auto; margin-right: auto; }

/* Gold step numbers and icon accents */
.step::before { background: linear-gradient(135deg, #f7d48a, var(--gold)); box-shadow: 0 6px 14px rgba(203,156,78,.35); }
.icon.sun { background: var(--sun-soft); color: var(--gold-deep); }
.card:hover { border-color: #ecd3a3; }
.page-hero { background: radial-gradient(700px 300px at 90% -20%, rgba(240,185,77,.30), transparent 65%), linear-gradient(180deg, var(--sun-soft), var(--bg)); }
.site-footer { background: #17181d; box-shadow: inset 0 4px 0 var(--blue); }

@media (prefers-reduced-motion: no-preference) {
  /* Stars in the hero twinkle a few times, then rest */
  @keyframes v2-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
  .hero::before { animation: v2-twinkle 2.6s ease-in-out 3; }

  /* Journey: arc fades in, the plane flies Miami -> Jamaica three times and parks at Jamaica */
  @keyframes v2-fade { from { opacity: 0; } }
  .journey .arc { animation: v2-fade .8s .4s ease-out both; }
  .journey .plane { transform-box: view-box; animation: v2-fly 4.4s .9s cubic-bezier(.45,.05,.55,.95) 3 both; }
  @keyframes v2-fly {
    0%   { transform: translate(90px,150px) rotate(-21deg); }
    10%  { transform: translate(192px,114px) rotate(-17deg); }
    20%  { transform: translate(294px,86px) rotate(-13deg); }
    30%  { transform: translate(396px,66px) rotate(-9deg); }
    40%  { transform: translate(498px,54px) rotate(-4deg); }
    50%  { transform: translate(600px,50px) rotate(0deg); }
    60%  { transform: translate(702px,54px) rotate(4deg); }
    70%  { transform: translate(804px,66px) rotate(9deg); }
    80%  { transform: translate(906px,86px) rotate(13deg); }
    90%  { transform: translate(1008px,114px) rotate(17deg); }
    100% { transform: translate(1110px,150px) rotate(21deg); }
  }
  /* Gold ring pulses at Jamaica each time the plane lands */
  .journey .pin-ring { transform-box: fill-box; transform-origin: center; animation: v2-ping 4.4s .9s ease-out 3; }
  @keyframes v2-ping { 0%, 88% { opacity: 0; transform: scale(.6); } 92% { opacity: .9; } 100% { opacity: 0; transform: scale(2.2); } }
  /* Small stars along the route twinkle */
  .journey .tw { transform-box: fill-box; transform-origin: center; animation: v2-star 2.2s ease-in-out 4 both; }
  .journey .tw:nth-of-type(2) { animation-delay: .5s; }
  .journey .tw:nth-of-type(3) { animation-delay: 1s; }
  .journey .tw:nth-of-type(4) { animation-delay: 1.5s; }
  @keyframes v2-star { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
}

/* Preview ribbon (draft sites only): gold stars, a shine, and the text scrolls left to right
   3 times, then rests in the centre. Hover pauses it. Off under reduced motion. */
.staging { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--blue-dark) 55%, var(--ink)), var(--ink)); }
.staging-text { display: inline-block; white-space: nowrap; }
.staging-text::before, .staging-text::after { content: "\2605"; color: var(--sun); margin: 0 10px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes v2-ticker { from { transform: translateX(-70vw); } to { transform: translateX(70vw); } }
  .staging-text { animation: v2-ticker 9s linear .4s 3; }
  .staging:hover .staging-text { animation-play-state: paused; }
  @keyframes v2-ribbon-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  .staging::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 35%, rgba(240,185,77,.22) 50%, transparent 65%);
    transform: translateX(-100%); animation: v2-ribbon-shine 3.2s ease-in-out 1s 3; }
}