/* =============================================================================
   TOURBIRTH — HOME PAGE STYLES
   css/pages/home.css
   Page-specific overrides for index.html.
   Sections: Hero · Clarity Line · What We Do · House of Connection ·
             Tourbirth 12 · Discovery Blueprint · Film Series ·
             Testaments Teaser · Founder Teaser · Credibility Line
   ============================================================================= */

/* ── Homepage hero — gradient overlay (heavier at bottom) ─────────────────── */

.hero--home .hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(11, 29, 42, 0.55) 0%,
    rgba(11, 29, 42, 0.48) 38%,
    rgba(11, 29, 42, 0.88) 100%
  );
}

/* ── Homepage hero — heading max-width override ────────────────────────────── */

.hero--home .hero__content h1 {
  max-width: 680px;
}

/* ── Clarity Line / manifesto sections that follow a 100svh hero ─────────────
   These editorial transition sections need tighter top padding so they
   visually attach to the hero rather than reading as a separate beat. */
.section--manifesto {
  padding-top: calc(var(--nav-height) + var(--space-sm));
}

/* ── "What We Do" pathways statement — needs heading-level prominence, not
   body-copy weight (client feedback: line reads as a caption under the H2). ── */
.section-statement {
  font-family:    var(--font-display, 'Cormorant Garamond', serif);
  font-size:      var(--fs-h3);
  font-weight:    500;
  line-height:    var(--lh-subhead);
  letter-spacing: 0.01em;
  color:          inherit;
}

/* ── Discovery Blueprint bridge: muted italic strapline beneath body copy ──── */
.blueprint-strapline {
  font-family:    var(--font-display);
  font-style:     italic;
  font-size:      var(--fs-body);
  letter-spacing: 0.02em;
  color:          var(--sage);
}

/* ── Founder teaser pull quote (offwhite background, muted sage) ───────────── */
.founder-teaser-quote {
  color:   var(--sage);
  opacity: 0.78;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — TRAVEL-FORWARD ENHANCEMENTS
   Cinematic video hero · pathway image cards · full-bleed Tourbirth 12 band.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero background film ─────────────────────────────────────────────────── */
.hero__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
  transform:  scale(1.06);
  transition: var(--transition-hero-img, transform 1800ms cubic-bezier(0.23, 1, 0.32, 1));
}

.hero.is-visible .hero__video { transform: scale(1); }

/* Photographic hero (travel still with a slow ken-burns drift) */
.hero__media-photo {
  position: absolute;
  inset:    0;
  z-index:  0;
  overflow: hidden;
}
.hero__media-photo img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 42%;
  animation:       heroDrift 28s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}


/* ── "What We Do" — three pathway image cards ─────────────────────────────── */
.home-pathway {
  position: relative;
}

.home-pathway__media {
  display:       block;
  position:      relative;
  width:         100%;
  aspect-ratio:  4 / 5;
  margin-bottom: var(--space-md);
  overflow:      hidden;
  border-radius: 14px;
  border:        1px solid color-mix(in srgb, var(--gold) 18%, transparent);
}

.home-pathway__media img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  /* Keep the travel colour VIVID — no grayscale/darkening */
  filter:     saturate(1.06) contrast(1.02);
  transform:  scale(1.02);
  transition: transform 1200ms var(--ease-cinematic),
              filter    800ms  var(--ease-luxury);
}

/* Just a whisper of a bottom scrim so the numeral reads — colour stays vibrant */
.home-pathway__media::after {
  content:        '';
  position:       absolute;
  inset:          0;
  pointer-events: none;
  background:     linear-gradient(to top, rgba(11, 29, 42, 0.32), transparent 42%);
}

.home-pathway:hover .home-pathway__media img,
.home-pathway:focus-within .home-pathway__media img {
  transform: scale(1.08);
  filter:    saturate(1.14) contrast(1.04) brightness(1.03);
}

/* Pull the roman numeral up to overlap the image's lower edge — editorial detail */
.home-pathway .roman-numeral {
  position:    relative;
  z-index:     1;
  display:     block;
  margin-top:  calc(-1 * var(--space-lg));
  margin-left: var(--space-xs);
}


/* ── Tourbirth 12 teaser — full-bleed cinematic band ──────────────────────── */
.home-tb12-band {
  position: relative;
  overflow: hidden;
}

.home-tb12-band__bg {
  position:       absolute;
  inset:          0;
  z-index:        0;
  pointer-events: none;
}

.home-tb12-band__bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     brightness(0.64) contrast(1.04) saturate(1.05);
  /* Slow ken-burns drift for a sense of motion without video weight */
  transform-origin: center;
  animation:  homeBandDrift 26s ease-in-out infinite alternate;
}

@keyframes homeBandDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(0, -2%, 0); }
}

/* Obsidian → gold veil keeps the copy legible and on-brand */
.home-tb12-band__bg::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(120deg,
                    rgba(11, 29, 42, 0.88),
                    rgba(11, 29, 42, 0.62) 55%,
                    rgba(198, 169, 107, 0.22));
}

.home-tb12-band > .container {
  position: relative;
  z-index:  1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { transition: none; }
  .hero__media-photo img { animation: none; transform: scale(1.04); }
  .home-tb12-band__bg img { animation: none; transform: scale(1.06); }
  .home-pathway__media img { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COLD-VISITOR DESIRE LAYER — concrete hook + a day's daydream + seductive wall
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero — primary CTA + secondary "browse first" link */
.hero__cta-row {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-md) var(--space-lg);
}
.hero__cta-secondary {
  color:          var(--offwhite);
  font-size:      var(--fs-small);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}

/* "A day, designed" — a concrete, sensory walk-through */
.home-day__moments {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-lg);
  margin-top:            var(--space-xl);
}
@media (min-width: 768px)  { .home-day__moments { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .home-day__moments { grid-template-columns: repeat(4, 1fr); } }

.home-day__moment {
  padding-top: var(--space-md);
  border-top:  1px solid color-mix(in srgb, var(--gold) 32%, transparent);
}
.home-day__time {
  display:        block;
  font-family:    var(--font-display);
  font-size:      0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--gold-deep);
}
.home-day__moment-title {
  margin-top:  var(--space-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size:   clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.2;
}
.home-day__moment p {
  margin-top:  var(--space-sm);
  line-height: var(--lh-body);
}

.home-day__included {
  margin-top: var(--space-2xl);
  text-align: left;
}
.home-day__included-list {
  list-style:      none;
  margin:          var(--space-md) 0 0;
  padding:         0;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: flex-start;
  gap:             var(--space-sm) var(--space-lg);
}
.home-day__included-list li {
  position:       relative;
  padding-left:   1.4rem;
  font-size:      var(--fs-small);
  letter-spacing: 0.04em;
}
.home-day__included-list li::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           0.55em;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--gold);
}

.home-day__cta { margin-top: var(--space-2xl); }

/* "By Invitation" — exclusivity framed as the prize (left-aligned) */
.home-invite__heading { max-width: 24ch; }
.home-invite .lead { max-width: 54ch; }


/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE-FIRST / BOLD UPGRADE — vibrant + cinematic
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bolder, bigger headings across the home page (less editorial-restrained) */
.hero--home .hero__content h1 { font-weight: 400; letter-spacing: 0.01em; }
.section-heading { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 400; }

/* ── Manifesto, reborn as a cinematic full-bleed photo band ───────────────── */
.home-quote-band {
  position: relative;
  overflow: hidden;
}
.home-quote-band__bg {
  position:       absolute;
  inset:          0;
  z-index:        0;
  pointer-events: none;
}
.home-quote-band__bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     brightness(0.52) contrast(1.05) saturate(1.06);
  animation:  homeBandDrift 30s ease-in-out infinite alternate;
}
.home-quote-band__bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(120deg,
                rgba(11, 29, 42, 0.78),
                rgba(11, 29, 42, 0.40) 55%,
                rgba(198, 169, 107, 0.28));
}
.home-quote-band > .container { position: relative; z-index: 1; }
.home-quote-band .pull-quote {
  color:      var(--offwhite);
  font-size:  clamp(2rem, 5vw, 4rem);
  line-height: 1.18;
  max-width:  22ch;
  margin-inline: auto;
}
.home-quote-band .gold-rule { background-color: rgba(245, 243, 238, 0.45); }

/* ── Full-bleed cinematic gallery — pure image-first impact ───────────────── */
.home-gallery {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;                 /* hairline seam, near edge-to-edge */
  background:            var(--obsidian);
}
@media (max-width: 760px) { .home-gallery { grid-template-columns: repeat(2, 1fr); } }

.home-gallery__item {
  position:     relative;
  display:      block;
  overflow:     hidden;
  aspect-ratio: 4 / 3;
}
.home-gallery__item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     saturate(1.06);
  transition: transform 1100ms var(--ease-cinematic), filter 600ms var(--ease-luxury);
}
.home-gallery__item:hover img {
  transform: scale(1.07);
  filter:    saturate(1.16) brightness(1.04);
}
.home-gallery__item::after {
  content:        '';
  position:       absolute;
  inset:          0;
  pointer-events: none;
  background:     linear-gradient(to top, rgba(11, 29, 42, 0.30), transparent 55%);
}
.home-gallery__caption {
  position:       absolute;
  left:           var(--space-md);
  bottom:         var(--space-md);
  z-index:        1;
  font-family:    var(--font-display);
  font-size:      0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--offwhite);
}

/* ── House of Connection — cinematic full-bleed image band ────────────────── */
.home-house-band { position: relative; overflow: hidden; }
.home-house-band__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.home-house-band__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.42) contrast(1.05) saturate(1.05);
  animation: homeBandDrift 32s ease-in-out infinite alternate;
}
.home-house-band__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(11,29,42,0.88), rgba(11,29,42,0.55) 60%, rgba(11,29,42,0.72));
}
.home-house-band > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .home-house-band__bg img { animation: none; transform: scale(1.04); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ONE FIXED BACKGROUND — the cinematic bands share a single parallax-fixed
   photo (it stays put while content scrolls). The white editorial sections sit
   opaque on top; the bands reveal the fixed image through a dark veil.
   ═══════════════════════════════════════════════════════════════════════════ */
.home-fixed-band {
  background-image:      url('../../assets/images/travel/aerial.webp');
  background-size:       cover;
  background-position:   center;
  background-attachment: fixed;
}

/* Hero carousel (cross-fading video/image slides) is defined once in
   css/travel.css, including the GPU-layer promotion (will-change/transform/
   backface-visibility) that keeps the cross-fade smooth on mobile GPUs —
   a duplicate, weaker rule here used to load after it and silently strip
   that promotion, hard-cutting the fade on phones. Do not redefine it here. */

/* Bands: veil over the fixed image so light copy stays legible */
.home-fixed-band { position: relative; }
.home-fixed-band::before {
  content:    '';
  position:   absolute;
  inset:      0;
  z-index:    0;
  background: linear-gradient(115deg,
                rgba(11, 29, 42, 0.82),
                rgba(11, 29, 42, 0.55) 55%,
                rgba(11, 29, 42, 0.74));
}
.home-fixed-band > .container { position: relative; z-index: 1; }

/* Band copy stays light over the dark-veiled image — in BOTH themes */
.home-fixed-band h2,
.home-fixed-band h3,
.home-fixed-band .pull-quote,
.home-fixed-band .accent-line,
.home-fixed-band blockquote,
.home-fixed-band blockquote p,
.home-fixed-band .lead { color: var(--offwhite); }
.home-fixed-band p { color: rgba(245, 243, 238, 0.88); }
.home-fixed-band .section-eyebrow,
.home-fixed-band .eyebrow { color: var(--gold); }
.home-fixed-band .credential,
.home-fixed-band .caption,
.home-fixed-band .investment-note,
.home-fixed-band figcaption { color: rgba(245, 243, 238, 0.60); }
.home-fixed-band .btn-outline { color: var(--offwhite); border-color: rgba(198, 169, 107, 0.6); }
.home-fixed-band .btn-outline:hover { color: var(--obsidian); background-color: var(--gold); border-color: var(--gold); }

/* "A day" band specifics over the image */
.home-fixed-band .home-day__time { color: var(--gold); }
.home-fixed-band .home-day__included-list li { color: rgba(245, 243, 238, 0.88); }
.home-fixed-band .home-day__moment { border-top-color: rgba(198, 169, 107, 0.4); }

/* "Nine years" closing line — lift the text above the veil */
.home-fixed-band .credibility-line__text { position: relative; z-index: 1; }

/* Hero (#3) — legible white copy on the bright fixed image */
.hero--home .hero__content h1,
.hero--home .hero__content .lead,
.hero--home .hero__content .eyebrow,
.hero--home .hero__content .credential {
  text-shadow: 0 2px 26px rgba(11, 29, 42, 0.55);
}

/* Mobile: background-attachment:fixed is janky on touch — fall back to scroll */
@media (max-width: 900px) {
  .hero--home,
  .home-fixed-band { background-attachment: scroll; }
}

/* ── Gallery labels (#6): each image names its destination + reveals a CTA ──── */
.home-gallery__label {
  position:       absolute;
  inset-inline:   0;
  bottom:         0;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  padding:        var(--space-md);
  background:     linear-gradient(to top, rgba(11, 29, 42, 0.82), transparent);
  transform:      translateY(10px);
  opacity:        0.94;
  transition:     transform 520ms var(--ease-cinematic), opacity 400ms var(--ease-luxury);
}
.home-gallery__item:hover .home-gallery__label,
.home-gallery__item:focus-visible .home-gallery__label {
  transform: translateY(0);
  opacity:   1;
}
.home-gallery__label-name {
  font-family:    var(--font-display);
  font-size:      clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight:    400;
  letter-spacing: 0.02em;
  color:          var(--offwhite);
}
.home-gallery__label-cta {
  font-family:    var(--font-body);
  font-size:      0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        0;
  transform:      translateX(-6px);
  transition:     opacity 400ms var(--ease-luxury), transform 400ms var(--ease-cinematic);
}
.home-gallery__item:hover .home-gallery__label-cta,
.home-gallery__item:focus-visible .home-gallery__label-cta {
  opacity:   1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-quote-band__bg img { animation: none; transform: scale(1.04); }
  .home-gallery__item img { transition: none; }
}