/* ============================================================================
   ATLAS HERO KIT: the hub's type voices and the destination wheel
   ----------------------------------------------------------------------------
   Shared by the destinations hub (destinations.html, with css/atlas.css) and
   the home hero (index.html, laid out in css/styles.css section 73). Moved
   here unchanged from css/atlas.css so both pages run one copy. Each page
   owns its own hero layout and turns the wheel on with its own --wc-w; this
   file owns the look, the motion surfaces and the fallbacks.

     1. Type voices (display, script, eyebrow, meta stats)
     2. Destination wheel
     3. Wheel card details (in-season badge, detail panel)
     4. Peek (the larger card a mouse hover raises) and the wheel controls
   ========================================================================= */

:root {
  --at-script: 'Beau Rivage', cursive;
}

/* ---------------------------------------------------------------------------
   1. Type voices
   ------------------------------------------------------------------------ */

.at-display {
  font-family: var(--font);
  font-weight: var(--weight-ultra);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.94;
  text-wrap: balance;
}

.at-d-hero { font-size: clamp(2.9rem, 7.8vw, 6.4rem); }
.at-d-sec  { font-size: clamp(2rem, 4.6vw, 3.4rem); }

/* The one handwritten voice on the page. Kept to two uses (hero, closing CTA)
   so it stays an accent rather than a second body face. */
.at-script {
  font-family: var(--at-script);
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}

.at-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.at-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}

.at-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-top: 2.4rem;
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-caps: all-small-caps;
}

.at-meta b {
  display: block;
  font-size: 2rem;
  font-weight: var(--weight-ultra);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  line-height: 1.1;
}

/* ---------------------------------------------------------------------------
   2. Destination wheel
   Cards ride the top of a wheel whose hub sits below the stage: each card
   rises in at the left end of the arc, crests (frontmost, full size) and
   fades out at the right. initAtlasWheel (js/main.js) sets each card's
   transform, opacity and stacking every frame, sizes the rim from the
   measured card, and loads a photo only as its card nears the arc. Hidden
   until a page turns it on (display, --wc-w, height); without JS it never is.
   Reduced motion: a still fan with the in-season card at the crest.
   ------------------------------------------------------------------------ */

.at-wheel {
  display: none;
  /* Cards stack by z-index up to 1000 (crest frontmost); keep that contest
     inside the wheel so no card can paint over the fixed header, the tab bar
     or the cookie banner. */
  isolation: isolate;
}

/* Vertical moves stay with the page; a horizontal pull turns the wheel
   (initAtlasWheel). */
.at-wheel-stage {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.at-wheel.is-dragging .at-wheel-stage { cursor: grabbing; }
.at-wheel.is-dragging .at-wc-card { transition: none; }

/* The rim: one hairline circle just under the cards' feet (sized by JS), plus
   a dashed inner ring; both turn with the wheel. Clipped to the stage and
   faded at both ends so it reads as the top of a wheel, not a stray circle. */
.at-wheel-arc {
  position: absolute;
  inset: -12px 0 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.at-wheel-rim {
  position: absolute;
  left: 50%;
  top: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  will-change: transform;
}

.at-wheel-rim::after {
  content: "";
  position: absolute;
  inset: 34px;
  border: 1px dashed rgba(20, 20, 20, 0.16);
  border-radius: 50%;
}

.at-wheel-ring {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-wc {
  position: absolute;
  top: 10px;
  left: 50%;
  width: var(--wc-w);
  margin-left: calc(var(--wc-w) / -2);
  visibility: hidden;
  will-change: transform, opacity;
}

.at-wc-card {
  display: flex;
  flex-direction: column;
  padding: 7px 7px 12px;
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(36, 29, 23, 0.06), 0 16px 34px -16px rgba(36, 29, 23, 0.3);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.at-wc.is-crest .at-wc-card {
  box-shadow: 0 1px 2px rgba(36, 29, 23, 0.06), 0 26px 50px -18px rgba(36, 29, 23, 0.42);
}

/* Only a real hover lifts a card: on touch a tap would leave it stuck up. */
@media (hover: hover) and (pointer: fine) {
  .at-wc-card:hover {
    color: var(--color-ink);
    transform: translateY(-10px) scale(1.035);
    box-shadow: 0 1px 2px rgba(36, 29, 23, 0.06), 0 36px 64px -20px rgba(36, 29, 23, 0.5);
  }

  .at-wc-card:hover .at-wc-media img { transform: var(--zoom); }
}

.at-wc.is-open .at-wc-card {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 1px 2px rgba(36, 29, 23, 0.06), 0 36px 64px -20px rgba(36, 29, 23, 0.5);
}

.at-wc-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 10px;
  background: #ECE7DF;
}

.at-wc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease, transform var(--zoom-dur) var(--ease);
}

.at-wc-media img.is-loaded { opacity: 1; }

.at-wc-eyebrow {
  margin: 11px 5px 0;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.at-wc-name {
  margin: 4px 5px 0;
  font-size: 17px;
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Two lines reserved, so the multi-season cards (Japan, Turkey) stand as tall
   as the rest and the fan keeps one silhouette. */
.at-wc-best {
  min-height: 2.7em;
  margin: 4px 5px 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-muted);
}

/* Pause/play (WCAG 2.2.2: motion that runs past 5s needs a stop). It sits at
   the wheel's hub side, under the crest card. */
.at-wheel-toggle {
  position: absolute;
  left: calc(50% - 20px);
  bottom: -6px;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.at-wheel-toggle:hover { color: #fff; background: var(--color-ink); }
.at-wheel-toggle:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }
.at-wheel-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.at-wheel-toggle .at-wheel-icon-play { fill: currentColor; stroke-width: 1.5; }
.at-wheel-toggle .at-wheel-icon-play,
.at-wheel-toggle[aria-pressed="true"] .at-wheel-icon-pause { display: none; }
.at-wheel-toggle[aria-pressed="true"] .at-wheel-icon-play { display: block; }

/* Entrance: the stage fades up as the wheel spins in (initAtlasWheel adds
   .is-on once the first cards are placed). */
.has-js .at-wheel-stage { opacity: 0; transform: translateY(14px); }
.has-js .at-wheel.is-on .at-wheel-stage {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .has-js .at-wheel-stage,
  .has-js .at-wheel.is-on .at-wheel-stage { opacity: 1; transform: none; transition: none; }
  .at-wc-card,
  .at-wc-media img { transition: none; }
  .at-wc-card:hover,
  .at-wc.is-open .at-wc-card,
  .at-wc-card:hover .at-wc-media img { transform: none; }
  .at-wheel-toggle,
  .at-wheel-hint { display: none; }
}

/* Swipe hint: touch screens only, on a page whose cards carry details, and
   gone once the visitor has turned the wheel by hand. */
.at-wheel-hint { display: none; }

@media (hover: none) {
  .at-wheel.has-details .at-wheel-hint {
    position: absolute;
    left: 0;
    bottom: 4px;
    display: block;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    transition: opacity var(--dur-fast) var(--ease);
  }

  .at-wheel.was-swiped .at-wheel-hint { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   3. Wheel card details
   Built by initAtlasWheel for cards that carry their spoke's facts (Home):
   a badge on the photo when the place is at its best this month, and a panel
   that rises over the photo with the teaser, the year at a glance, the flight
   and this month's temperature, on the card a tap or a swipe lands on
   (.is-open). With a mouse, hovering a card raises the peek instead (4).
   ------------------------------------------------------------------------ */

.at-wc-now {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 2px 8px -2px rgba(20, 20, 20, 0.25);
  transition: opacity 240ms var(--ease);
}

.at-wc-now::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #0F7A34;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(15, 122, 52, 0.18);
}

.at-wc-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 12px 12px;
  color: #fff;
  background: linear-gradient(180deg, rgba(16, 13, 11, 0.05) 0%, rgba(16, 13, 11, 0.55) 28%, rgba(16, 13, 11, 0.9) 58%, rgba(16, 13, 11, 0.95) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}

.at-wc-detail > * {
  transform: translateY(10px);
  opacity: 0;
  transition: transform 460ms var(--ease), opacity 320ms var(--ease);
}

.at-wc-detail > :nth-child(2) { transition-delay: 40ms; }
.at-wc-detail > :nth-child(3) { transition-delay: 80ms; }
.at-wc-detail > :nth-child(4) { transition-delay: 120ms; }

.at-wc.is-open .at-wc-detail,
.at-wc.is-open .at-wc-detail > * { opacity: 1; transform: none; }
.at-wc.is-open .at-wc-now { opacity: 0; }


.at-wc-teaser {
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  line-height: 1.28;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* The year at a glance: one column per month, the bar's height is the hub's
   rating (Ideal, Good, Shoulder, Off Season), this month in its on-dark
   rating colour (css/atlas.css restates the same four). */
.at-wc-cal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
}

.at-wc-m {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.at-wc-bar {
  height: 20px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.62) var(--h), rgba(255, 255, 255, 0.1) var(--h));
  border-radius: 2px;
}

.at-wc-m.r-3 .at-wc-bar { --h: 100%; }
.at-wc-m.r-2 .at-wc-bar { --h: 66%; }
.at-wc-m.r-1 .at-wc-bar { --h: 38%; }
.at-wc-m.r-0 .at-wc-bar { --h: 14%; }
.at-wc-m.is-now.r-3 .at-wc-bar { background: linear-gradient(to top, #6EE7A0 var(--h), rgba(110, 231, 160, 0.18) var(--h)); }
.at-wc-m.is-now.r-2 .at-wc-bar { background: linear-gradient(to top, #8FCBFF var(--h), rgba(143, 203, 255, 0.18) var(--h)); }
.at-wc-m.is-now.r-1 .at-wc-bar { background: linear-gradient(to top, #F5C36B var(--h), rgba(245, 195, 107, 0.18) var(--h)); }
.at-wc-m.is-now.r-0 .at-wc-bar { background: linear-gradient(to top, #FF8A8E var(--h), rgba(255, 138, 142, 0.18) var(--h)); }

.at-wc-ml {
  font-size: 8.5px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.at-wc-m.is-now .at-wc-ml { color: #fff; }

.at-wc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}

.at-wc-go {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  color: #fff;
}

/* Phone-sized cards keep the panel to what fits: a smaller voice, no trip
   length. */
@container (max-width: 160px) {
  .at-wc-detail { gap: 7px; padding: 10px 9px 9px; }
  .at-wc-teaser { font-size: 12px; }
  .at-wc-bar { height: 16px; }
  .at-wc-ml { font-size: 7.5px; }
  .at-wc-facts { font-size: 9.5px; column-gap: 8px; }
  .at-wc-facts .at-wc-len { display: none; }
  .at-wc-go { font-size: 11px; }
  .at-wc-now { top: 6px; left: 6px; padding: 3px 7px 3px 6px; font-size: 8.5px; }
  .at-wc-now.ss-tag { gap: 4px; padding-right: 6px; font-size: 8px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  .at-wc-detail,
  .at-wc-detail > *,
  .at-wc-now { transition: none; }
  .at-wc-detail > * { transform: none; }
}

/* ---------------------------------------------------------------------------
   4. Peek and wheel controls
   The peek grows out of the hovered card (--peek-from is the card's width as
   a share of the peek's, so it starts at the card's own size) and goes the
   moment the pointer leaves it. Placed by initAtlasWheel, inside the wheel's
   isolated stack so it never paints over the header.
   ------------------------------------------------------------------------ */

.at-peek {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  display: block;
  width: clamp(320px, 25vw, 372px);
  overflow: hidden;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(36, 29, 23, 0.06), 0 40px 90px -24px rgba(36, 29, 23, 0.55);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(var(--peek-from, 0.7));
  transition: opacity 160ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
}

.at-peek.is-in {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity 200ms var(--ease), transform 420ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.at-peek-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #ECE7DF;
}

.at-peek-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.at-peek-lo { filter: saturate(1.05); }
.at-peek-hi { opacity: 0; transition: opacity 300ms ease, transform 1.6s var(--ease); }
.at-peek-hi.is-loaded { opacity: 1; }
.at-peek.is-in .at-peek-hi { transform: scale(1.04); }
.at-peek-now { top: 12px; left: 12px; }
.at-peek-now[hidden] { display: none; }

.at-peek-body { padding: 18px 20px 20px; }

.at-peek-eyebrow {
  margin: 0;
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.at-peek-name {
  margin: 6px 0 0;
  font-size: 28px;
  font-weight: var(--weight-ultra);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.at-peek-teaser {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* The year at a glance on light: the same bars as the card panel, in ink. */
.at-peek-cal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  margin-top: 16px;
}

.at-peek .at-wc-bar {
  height: 26px;
  background: linear-gradient(to top, rgba(20, 20, 20, 0.34) var(--h), rgba(20, 20, 20, 0.06) var(--h));
}

.at-peek .at-wc-m.is-now.r-3 .at-wc-bar { background: linear-gradient(to top, #0F7A34 var(--h), rgba(15, 122, 52, 0.12) var(--h)); }
.at-peek .at-wc-m.is-now.r-2 .at-wc-bar { background: linear-gradient(to top, #1466B5 var(--h), rgba(20, 102, 181, 0.12) var(--h)); }
.at-peek .at-wc-m.is-now.r-1 .at-wc-bar { background: linear-gradient(to top, #8A5A00 var(--h), rgba(138, 90, 0, 0.12) var(--h)); }
.at-peek .at-wc-m.is-now.r-0 .at-wc-bar { background: linear-gradient(to top, #B00710 var(--h), rgba(176, 7, 16, 0.12) var(--h)); }
.at-peek .at-wc-ml { font-size: 9.5px; color: var(--color-muted); }
.at-peek .at-wc-m.is-now .at-wc-ml { color: var(--color-ink); font-weight: var(--weight-bold); }

.at-peek-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.at-peek-facts dt {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.at-peek-facts dd {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.at-peek-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.at-peek-cta { min-height: 44px; padding-inline: 1.15rem; font-size: 0.9375rem; }

.at-peek-plan {
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: rgba(20, 20, 20, 0.25);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

.at-peek-plan:hover { color: var(--color-ink); text-decoration-color: currentColor; }

/* Controls: pause and sound side by side under the crest. In a group they
   sit in flow; the hub's lone toggle keeps its own placement (section 2). */
.at-wheel-controls {
  position: absolute;
  left: 50%;
  bottom: -6px;
  z-index: 200;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.at-wheel-controls .at-wheel-toggle { position: static; }
.at-wheel-sound[hidden] { display: none; }
.at-wheel-sound .at-wheel-icon-off,
.at-wheel-sound[aria-pressed="false"] .at-wheel-icon-on { display: none; }
.at-wheel-sound[aria-pressed="false"] .at-wheel-icon-off { display: block; }

@media (prefers-reduced-motion: reduce) {
  .at-peek,
  .at-peek.is-in,
  .at-peek-hi { transition: none; transform: none; }
  .at-peek.is-in .at-peek-hi { transform: none; }
  .at-wheel-controls .at-wheel-toggle { display: grid; }
  .at-wheel-controls [data-wheel-toggle] { display: none; }
}

/* Season specials on the wheel (styles.css section 74 owns the tag): the
   postcard frame turns brand red, its type white, with a red glow. */
.at-wc[data-special] .at-wc-card {
  color: #fff;
  background: linear-gradient(165deg, #EE121C 0%, #C40812 100%);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(120, 0, 6, 0.2), 0 22px 44px -16px rgba(196, 8, 18, 0.6);
}

.at-wc[data-special] .at-wc-media { background: #9E0610; }
.at-wc[data-special] .at-wc-eyebrow { color: rgba(255, 255, 255, 0.82); }
.at-wc[data-special] .at-wc-best { color: rgba(255, 255, 255, 0.85); }

@media (hover: hover) and (pointer: fine) {
  .at-wc[data-special] .at-wc-card:hover {
    color: #fff;
    box-shadow: 0 1px 2px rgba(120, 0, 6, 0.2), 0 36px 64px -20px rgba(196, 8, 18, 0.7);
  }
}

/* The tag replaces the in-season badge: it keeps the badge's place, not its look. */
.at-wc-now.ss-tag { color: #fff; background: var(--color-accent); }
.at-wc-now.ss-tag::before { width: 8px; height: 8px; background: currentColor; border-radius: 0; box-shadow: none; }

.at-peek.is-special {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.16), 0 40px 90px -24px rgba(176, 7, 16, 0.55);
}

.at-peek.is-special .at-peek-body { border-top: 3px solid var(--color-accent); }