/* ==========================================================================
   CALIGOBI 2026 — home.css
   Home page only. Shared tokens & components live in global.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-950);
  color: var(--ink-invert);
  padding-block: calc(var(--header-h) + 5.9rem) 3rem;
}

/* --------------------------------------------------------------------------
   Hero background
   Three layers, no photography: a gradient night sky, clouds drifting across
   it, and the poster's ornamental frame, which swaps orientation with the
   viewport. All of it scales to any size, so the hero holds up equally on a
   wide desktop and a tall phone screen.
   -------------------------------------------------------------------------- */
.hero-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Sampled from the poster's own BG Color layer: deep teal night easing into
   the olive haze it carries towards the horizon. */
.hero-poster__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #1a242a 0%,
    #202c31 34%,
    #2b3533 60%,
    #3f463c 82%,
    #585848 100%);
}

/* Clouds drift slowly across the sky */
.hero-poster__cloud {
  position: absolute;
  z-index: 1;
  width: clamp(180px, 26vw, 420px);
  height: auto;
  opacity: 0.85;
  will-change: transform;
}

.hero-poster__cloud--a {
  top: 16%;
  left: -12%;
  animation: poster-drift-a 64s linear infinite;
}

.hero-poster__cloud--b {
  top: 30%;
  right: -14%;
  width: clamp(140px, 20vw, 320px);
  opacity: 0.6;
  transform: scaleX(-1);
  animation: poster-drift-b 86s linear infinite;
}

.hero-poster__cloud--c {
  top: 7%;
  left: 34%;
  width: clamp(120px, 16vw, 260px);
  opacity: 0.4;
  animation: poster-drift-a 104s linear infinite;
}

@keyframes poster-drift-a {
  from { transform: translateX(-10%); }
  to   { transform: translateX(130vw); }
}

@keyframes poster-drift-b {
  from { transform: scaleX(-1) translateX(-10%); }
  to   { transform: scaleX(-1) translateX(130vw); }
}

/* Ornamental border: landscape art on desktop, portrait art on phones */
/* Height is tied to the viewport, not the hero. If tall content pushes the
   hero past one screen, the frame still closes on the first screen instead of
   having its bottom border fall below the fold. */
.hero-poster__frame {
  position: absolute;
  top: calc(var(--header-h) - 0.9rem);
  left: 0.7rem;
  right: 0.7rem;
  height: calc(100svh - var(--header-h) + 0.2rem);
  z-index: 4;
  display: block;
  pointer-events: none;
}

.hero-poster__frame img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* A soft vignette for depth. The heavy scrim this replaces was there to hold
   the headline over the bright dunes; against the gradient alone it would only
   flatten the background. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(125% 78% at 50% 46%,
    rgba(7, 13, 24, 0) 34%,
    rgba(7, 13, 24, 0.34) 100%);
}

/* Keep the copy and buttons inside the frame. The border ink sits about 3.7%
   in from the edge on the landscape frame and 7.5% on the portrait one, so the
   content is inset past that with room to spare — otherwise wide buttons run
   straight through the border on narrow screens. */
.hero-inner {
  position: relative;
  z-index: 6;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: clamp(2rem, 6.5vw, 7rem);
}

.hero-logo {
  width: clamp(70px, 8vw, 104px);
  height: auto;
  margin-bottom: clamp(0.6rem, 1.4vw, 1.1rem);
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.55)) saturate(1.15);
  animation: fade-up 1s var(--ease) both;
}

.hero-eyebrow {
  font-family: var(--font-label);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
  text-indent: 0.42em;
  animation: fade-up 1s 0.1s var(--ease) both;
}

.hero-title {
  font-size: clamp(2.3rem, 5.4vw, 4.5rem);
  margin-bottom: clamp(0.7rem, 1.3vw, 1.05rem);
  text-shadow: 0 6px 40px rgba(7, 13, 24, 0.6);
}

.hero-title span {
  display: block;
  animation: fade-up 1.1s var(--ease) both;
}
.hero-title span:nth-child(1) { animation-delay: 0.2s; }
.hero-title span:nth-child(2) { animation-delay: 0.32s; }

.hero-title em {
  font-style: normal;
  color: var(--accent);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}

.hero-rule {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: min(420px, 80%);
  color: var(--accent);
  margin-bottom: clamp(0.9rem, 1.6vw, 1.3rem);
  animation: fade-up 1s 0.44s var(--ease) both;
}
.hero-rule .orn-rule { flex: 1; --orn-color: currentColor; opacity: 0.6; height: 16px; }
.hero-rule .orn-ulzii { --orn-color: currentColor; width: 34px; height: 34px; flex: none; opacity: 0.85; }

.hero-dates {
  color: var(--ink-invert);
  margin: 0 0 clamp(0.7rem, 1.2vw, 0.95rem);
  font-size: clamp(0.88rem, 1.15vw, 1.05rem);
  letter-spacing: 0.24em;
  animation: fade-up 1s 0.52s var(--ease) both;
}
.hero-dates span {
  font-size: 0.8em;
  letter-spacing: 0.2em;
  color: rgba(233, 219, 198, 0.72);
}

.hero-lede {
  max-width: 44ch;
  font-size: clamp(0.94rem, 1.1vw, 1.05rem);
  color: rgba(244, 236, 224, 0.86);
  margin: 0;
  animation: fade-up 1s 0.6s var(--ease) both;
}

.hero-actions {
  justify-content: center;
  animation: fade-up 1s 0.7s var(--ease) both;
}

/* Countdown */
.countdown {
  margin-top: clamp(1.1rem, 2.2vw, 1.9rem);
  animation: fade-up 1s 0.82s var(--ease) both;
}

.countdown-label {
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

.countdown-units {
  display: flex;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  justify-content: center;
}

.cd-unit {
  min-width: clamp(56px, 6vw, 74px);
  padding: 0.7rem 0.4rem 0.55rem;
  border: 1px solid rgba(240, 221, 162, 0.26);
  border-radius: var(--radius);
  background: rgba(7, 13, 24, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cd-unit b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1;
  font-weight: 600;
  color: var(--ink-invert);
  font-variant-numeric: tabular-nums;
}

.cd-unit span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

.countdown.is-live .countdown-units { display: none; }

/* Scroll cue */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 4;
  width: 26px;
  height: 42px;
  border: 1px solid rgba(240, 221, 162, 0.45);
  border-radius: 14px;
  display: grid;
  place-items: start center;
  padding-top: 8px;
}

.hero-scroll span {
  width: 3px; height: 8px;
  border-radius: 2px;
  background: var(--gold-300);
  animation: scroll-cue 1.9s var(--ease) infinite;
}

@keyframes scroll-cue {
  0%   { opacity: 0; transform: translateY(-4px); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* Short desktop windows: tighten the hero so the countdown and the frame's
   bottom border both stay on the first screen. */
@media (min-width: 861px) and (max-height: 860px) {
  .hero { padding-block: calc(var(--header-h) + 4.6rem) 2.2rem; }
  .countdown { margin-top: 0.9rem; }
  .cd-unit { padding: 0.5rem 0.4rem 0.4rem; }
}

@media (max-width: 860px) {
  /* The portrait frame's border sits further in, and its side medallions
     further in again, so phones need a deeper inset. */
  .hero-inner { padding-inline: clamp(2.75rem, 13vw, 5rem); }

  .hero-poster__frame {
    top: calc(var(--header-h) - 0.6rem);
    left: 0.5rem;
    right: 0.5rem;
    height: calc(100svh - var(--header-h) + 0.1rem);
  }
}

@media (max-width: 700px) {
  .hero-scroll { display: none; }
}

/* --------------------------------------------------------------------------
   Lineup preview grid
   -------------------------------------------------------------------------- */
.lineup-preview { position: relative; }

/* An explicit row height lets every card's media fill its cell, so the
   mosaic stays flush no matter how the tiles are combined. */
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 11.5vw, 176px);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lineup-card { grid-row: span 2; }
.lineup-card--wide   { grid-column: span 2; }
.lineup-card--banner { grid-column: span 4; grid-row: span 2; }

.lineup-grid .card-media {
  aspect-ratio: auto;
  height: 100%;
}

.lineup-card--banner .card-media img { object-position: 50% 38%; }

@media (max-width: 1000px) {
  .lineup-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(115px, 17vw, 170px);
  }
  .lineup-card--wide,
  .lineup-card--banner { grid-column: span 2; }
}

@media (max-width: 560px) {
  .lineup-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(120px, 30vw, 160px);
  }
  .lineup-card--wide,
  .lineup-card--banner { grid-column: span 1; }
  /* Notes are hover-only on desktop; always show them on touch */
  .card-note { max-height: 7rem; opacity: 1; margin-top: 0.3rem; }
}

/* --------------------------------------------------------------------------
   Find your tribe
   -------------------------------------------------------------------------- */
/* Find your tribe — set like the CaliGobi poster: no card boxes, each entry a
   centred display heading over a bullet-separated list, all of it on the
   poster's own dark-to-sand gradient. Stops sampled from
   assets/img/"Social Media 1 (Horizontal) (2).jpg". */
.tribe {
  overflow: hidden;
  /* One continuous wash from the poster's night teal down into its desert
     warmth, rather than a band pinned to the foot — pinned, it was only ~9% of
     the section's height and read as a stripe rather than a gradient.
     It stops at a deep brown instead of the poster's bright tan (#be8443):
     the copy is thin cream and only reaches 2.7:1 against the tan, where it
     holds about 7:1 against this. */
  background: linear-gradient(180deg,
    #222d32 0%,
    #212d33 30%,
    #262f31 52%,
    #33362f 68%,
    #46402f 82%,
    #5c4e33 92%,
    #6b5836 100%);
}

.tribe-line {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  --orn-color: var(--accent);
  opacity: 0.55;
}

.tribe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.25rem, 2.6vw, 2.25rem);
}

.tribe-card {
  position: relative;
  text-align: center;
  padding: 0;
  background: none;
  border: 0;
  transition: transform 0.5s var(--ease);
}

.tribe-card:hover { transform: translateY(-4px); }

.tribe-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--pack-white);
  margin-bottom: 0.55rem;
  /* The poster sets these outlined; a tight dark shadow gives the same weight
     against the gradient without pulling in a second face. */
  text-shadow: 0 2px 0 rgba(10, 16, 20, 0.5), 0 0 20px rgba(10, 16, 20, 0.35);
}

.tribe-card p {
  font-size: clamp(0.74rem, 0.92vw, 0.86rem);
  line-height: 1.6;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(244, 236, 224, 0.88);
  margin: 0;
  text-shadow: 0 1px 6px rgba(10, 16, 20, 0.55);
}

/* "Nomadic Adventure" and "Silk Road Bazaar" wrap to a second line while the
   other six headings do not, which left the lists in a row 38px out of step.
   Reserving two lines for every heading puts them back on a shared baseline.
   Below 520px the grid is a single column, so there is no row to align to. */
@media (min-width: 521px) {
  .tribe-card h3 { min-height: 2.2em; }
}

@media (max-width: 900px) { .tribe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tribe-grid { grid-template-columns: 1fr; } }

.split--wellness .split-media { aspect-ratio: 3 / 4; }

@media (max-width: 900px) {
  .split--wellness .split-media { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Desert experiences list
   -------------------------------------------------------------------------- */
.exp-list { border-top: 1px solid var(--line); }

.exp-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 15rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 2.8vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.45s var(--ease);
}

.exp-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--grad-ember);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
}

.exp-row:hover { padding-left: 1.5rem; }
.exp-row:hover::before { transform: scaleY(1); transform-origin: top; }

.exp-index {
  font-family: var(--font-label);
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.exp-name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.05;
  color: var(--heading);
}

.exp-note {
  color: var(--ink-soft);
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .exp-row {
    grid-template-columns: 3rem 1fr;
    row-gap: 0.5rem;
  }
  .exp-note { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   From sunset to firelight
   -------------------------------------------------------------------------- */
.firelight { overflow: hidden; }

.firelight-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.firelight-media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
}

.firelight-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.firelight-media--small {
  position: absolute;
  right: -8%;
  bottom: -8%;
  width: 44%;
  aspect-ratio: 3 / 4;
  border: 4px solid var(--navy-950);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.9);
}

@media (max-width: 900px) {
  .firelight-inner { grid-template-columns: 1fr; }
  .firelight-media { aspect-ratio: 3 / 4; max-width: 520px; }
  .firelight-media--small { width: 40%; right: -4%; bottom: -5%; }
}

@media (max-width: 520px) {
  .firelight-media--small { display: none; }
}

/* --------------------------------------------------------------------------
   Full moon CTA
   -------------------------------------------------------------------------- */
.moon {
  overflow: hidden;
  text-align: center;
}

.moon-orb {
  position: absolute;
  top: clamp(-6rem, -6vw, -2rem);
  left: 50%;
  translate: -50% 0;
  width: clamp(260px, 40vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, var(--sand-50) 0%, var(--sand-200) 42%, var(--sand-400) 72%, var(--gold-600) 100%);
  opacity: 0.16;
  filter: blur(1px);
  box-shadow: 0 0 140px 60px rgba(240, 221, 162, 0.12);
}

/* Sits at the top of the section like the other breaks, rather than floating
   mid-section the way the cloud band it replaces did. Named -rule, not -line:
   .moon-line is the "Come as strangers" paragraph further down. */
.moon-rule {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  --orn-color: var(--accent);
  opacity: 0.7;
}

.moon-inner { position: relative; z-index: 1; }

.moon-meta {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 1.25rem;
  color: var(--accent);
  letter-spacing: 0.26em;
}
.moon-meta span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82em;
  color: rgba(233, 219, 198, 0.72);
}

.moon-line {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-style: italic;
  color: var(--ink-invert);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Plan your journey
   -------------------------------------------------------------------------- */
.journey-inner {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  background: var(--grad-dune);
  border: 1px solid rgba(180, 133, 36, 0.28);
  border-radius: var(--radius-card);
}

.journey-inner h2 { margin-bottom: 2rem; color: var(--heading); max-width: 22ch; margin-inline: auto; }

.journey-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.journey-tags li {
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(11, 21, 38, 0.18);
  border-radius: 100px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.4);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.journey-tags li:hover { border-color: var(--gold-500); color: var(--heading); }

@media (max-width: 620px) {
  .framed > .orn-horn { width: 46px; height: 46px; }
}