/* Home hero carousel (ported from the hp.globltravel.com prototype).
   Card positions and tilt are written by hero-carousel.js every frame, so this
   file only sets size, look and fades. Class prefix: .hc-  */

.hc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
  height: 100svh; min-height: 600px;
  padding-top: calc(var(--bar-h) + 12px);
}
/* Phones: fill the tallest the screen ever gets (100lvh), so the photo and
   mist carry on behind the browser's URL bar instead of stopping above it and
   showing the section below. The matching bottom padding keeps the dots and
   the reassurances above that bar. */
@media (max-width: 719px) {
  .hc-hero {
    min-height: 640px; padding-top: calc(var(--bar-h) + 10px);
    height: 100lvh; padding-bottom: calc(100lvh - 100svh);
  }
}

/* ── Blurred background ─────────────────────────────────────────────────── */
/* hp.js nudges the whole layer a few px against the cursor (subtle parallax). */
.hc-bg { position: absolute; inset: 0; z-index: -1; background: var(--bg); will-change: transform; }
/* One layer per card. hp.js slides them sideways with the cards and clouds and
   cross-fades by distance, so each is wider than the screen to hide its edge. */
.hc-bg__img {
  position: absolute; top: -6%; left: -20%; width: 140%; max-width: none; height: 112%; object-fit: cover;
  opacity: 0; visibility: hidden; filter: saturate(115%) brightness(.62);
  will-change: transform, opacity;
}
.hc-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgba(10,12,16,.05), rgba(10,12,16,.55) 70%, rgba(10,12,16,.85)),
    linear-gradient(180deg, rgba(10,12,16,.35), rgba(10,12,16,0) 30%, rgba(10,12,16,0) 70%, rgba(10,12,16,.7));
}

/* ── Stage + cards ──────────────────────────────────────────────────────── */
.hc-stage {
  position: relative; perspective: 1500px; perspective-origin: 50% 45%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
/* Deliberately NOT preserve-3d: in a shared 3D scene the browser depth-sorts
   the cards' planes, so a bent neighbour could slice through the centre card's
   overhanging title, and clicks landed on the track. Each card keeps real
   perspective from the track but is painted in z-index order. */
.hc-track {
  --w: 280px; --h: 420px;
  position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 45%;
  will-change: transform; pointer-events: none; transition: opacity .2s ease;
}
.hc-track.is-faded { opacity: 0; }

.hc-card {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  cursor: pointer; will-change: transform; pointer-events: auto;
}
.hc-card.is-centre { cursor: default; }
.hc-card__media {
  position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: var(--surface);
  box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), 0 12px 24px -12px rgba(0,0,0,.6);
}
.hc-card__media img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Legibility gradient for the centre card's text, plus the dimming layer
   side cards get (its opacity is set by hp.js). */
.hc-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,.2) 0%, rgba(10,12,16,0) 28%, rgba(10,12,16,.1) 50%, rgba(10,12,16,.78) 100%);
}
.hc-card__dim { position: absolute; inset: 0; z-index: 1; background: #07090c; opacity: 0; }
/* Soft light that follows the tilt, so the frame reads as a surface. */
.hc-card__glare {
  position: absolute; inset: 0; z-index: 2; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
}

.hc-card__tag, .hc-card__copy {
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.hc-card.is-current .hc-card__tag,
.hc-card.is-current .hc-card__copy {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.hc-card.is-current .hc-card__copy { transition-delay: .06s; }

.hc-card__tag {
  position: absolute; z-index: 3; top: 16px; right: 16px;
  padding: 5px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 4px;
  font: 500 11px/1 var(--font-body); letter-spacing: .06em; color: #fff;
  background: rgba(10,12,16,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Title overhangs the card's left edge, like a magazine cover line. */
.hc-card__copy {
  position: absolute; z-index: 3; left: -24%; right: -34%; top: 50%;
  pointer-events: none;
}
.hc-card__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: calc(var(--w) * .145); line-height: 1.02; letter-spacing: .035em; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.45); text-wrap: initial;
}
.hc-card__title span { display: block; }
.hc-card__title span + span { color: var(--accent); }
.hc-card__rule { display: block; width: 38px; height: 2px; margin: 16px 0 12px; background: #fff; border-radius: 2px; }
.hc-card__sub { margin: 0 0 18px; max-width: 26ch; color: var(--soft); font-size: 15px; line-height: 1.45;
                text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hc-card__cta {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font: 600 13.5px/1 var(--font-display); letter-spacing: .02em;
  box-shadow: 0 12px 28px -14px rgba(53,228,163,.9);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hc-card__cta svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.hc-card__cta:hover { background: #4cf0b3; box-shadow: 0 16px 34px -14px rgba(53,228,163,1); }
.hc-card__cta:hover svg { transform: translateX(3px); }
.hc-card__cta:active { transform: translateY(1px); }

/* ── Controls ───────────────────────────────────────────────────────────── */
.hc-controls { display: flex; justify-content: center; padding-block: 0 clamp(20px, 4vh, 40px); }
.hc-dots { display: flex; align-items: center; gap: 8px; }
.hc-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.32);
  transition: width .45s var(--ease), background-color .3s ease;
}
.hc-dot:hover { background: rgba(255,255,255,.6); }
.hc-dot[aria-selected="true"] { width: 26px; background: var(--accent); }
/* Bigger hit area without a bigger dot. */
.hc-dot { position: relative; }
.hc-dot::before { content: ""; position: absolute; inset: -10px -4px; }

/* Bare chevrons at the screen edges, as in the reference - no ring. A soft
   filled circle appears only on hover/press. */
.hc-arrow {
  position: absolute; top: calc(50% - 30px); z-index: 5;
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: #fff;
  transition: background-color .2s ease, transform .18s ease;
}
.hc-arrow svg { width: 28px; height: 28px; stroke-width: 1.5; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
.hc-arrow--prev { left: clamp(8px, 1.6vw, 28px); }
.hc-arrow--next { right: clamp(8px, 1.6vw, 28px); }
.hc-arrow:hover { background: rgba(255,255,255,.14); }
.hc-arrow:active { transform: scale(.92); background: rgba(255,255,255,.22); }

@media (max-width: 989px) {
  .hc-controls { align-items: center; gap: 18px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .hc-arrow { position: relative; top: auto; z-index: 6; width: 42px; height: 42px; }
  .hc-arrow svg { width: 18px; height: 18px; }
  .hc-card__copy { left: -7%; right: -7%; }
  .hc-card__title { font-size: calc(var(--w) * .13); }
  .hc-card__sub { font-size: 14px; }
}

/* ── Clouds ─────────────────────────────────────────────────────────────── */
.hc-clouds {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: clamp(160px, 30vh, 320px);
  pointer-events: none; overflow: hidden;
}
/* Fades the very bottom into the page colour so the next section continues it. */
.hc-clouds::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, rgba(10,12,16,0), var(--bg));
}
.hc-clouds__drift { position: absolute; inset: 0; animation: hc-drift 140s linear infinite; }
.hc-clouds__drift--near { animation-duration: 90s; }
.hc-clouds__drift--far { opacity: .8; }
/* Three tiles wide; hp.js keeps its offset inside one tile so it never runs out. */
.hc-clouds__strip {
  --tile: 1200px;
  position: absolute; top: 0; bottom: 0; left: calc(var(--tile) * -1); width: calc(var(--tile) * 3);
  background-repeat: repeat-x; background-size: var(--tile) 100%; will-change: transform;
}
.hc-clouds__drift--far .hc-clouds__strip { background-image: url("/static/hero/clouds-far.webp"); }
.hc-clouds__drift--near .hc-clouds__strip { background-image: url("/static/hero/clouds-near.webp"); }
@keyframes hc-drift { from { transform: translateX(0); } to { transform: translateX(-240px); } }
/* Dots sit above the mist. (Not the whole controls row: that would become the
   arrows' positioning box and drop them to the bottom on desktop.) */
.hc-dots { position: relative; z-index: 6; }

/* ── Cursor (desktop mouse only; hp.js adds .has-dot-cursor) ────────────── */
.hc-cursor { display: none; }
.has-dot-cursor .hc-hero, .has-dot-cursor .hc-hero * { cursor: none !important; }
.has-dot-cursor .hc-cursor {
  display: block; position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,.35); opacity: 0;
  transition: opacity .2s ease, width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background-color .25s ease;
}
.has-dot-cursor .hc-cursor.is-on { opacity: 1; }
.has-dot-cursor .hc-cursor.is-link { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: rgba(255,255,255,.85); }

@media (prefers-reduced-motion: reduce) {
  .hc-clouds__drift { animation: none; }
  .hc-bg__img { transition: opacity .4s linear; }
  .hc-card__tag, .hc-card__copy, .hc-card.is-current .hc-card__tag, .hc-card.is-current .hc-card__copy {
    transform: none; transition: opacity .3s linear;
  }
}