/* =====================================================================
   Scroll-to-expand intro
   ---------------------------------------------------------------------
   A full-screen opening section. A small media card (image or video)
   grows to fill the screen as the visitor scrolls, while the headline
   slides away and the background fades out. js/expand-intro.js drives
   it by setting the CSS variables below on the .xi element.

   To reuse it: copy the markup from index.html, then swap the images,
   headline words and text. Sizes and colours are the variables in
   the first rule.
   ===================================================================== */

/* Shared by the intro and the content that follows it */
:root {
  --xi-h-share: 0.65;               /* finished image height, as a share of the space under the nav bar */
  --xi-bg: #FBF7EF;                 /* shows once the photo has faded */
}

.xi {
  /* Card size before the visitor scrolls */
  --xi-w0: 300px;
  --xi-h0: 400px;
  /* Card size once fully expanded: full width, and a share of the height under the nav bar.
     Change --xi-h-share (top of this file) to make it taller or shorter (0.5 = half). */
  --xi-w1: 95vw;
  --xi-h1: calc((100vh - var(--header-h, 0px)) * var(--xi-h-share));
  --xi-h1: calc((100svh - var(--header-h, 0px)) * var(--xi-h-share));
  /* Colours */

  /* Values the script updates while scrolling (these are the starting ones) */
  --xi-clip-y: 0px;                 /* how much of the card is hidden top and bottom */
  --xi-clip-x: 0px;                 /* ...and left and right */
  --xi-radius: 16px;
  --xi-zoom: 1.12;
  --xi-word-x: 0px;
  --xi-word-o: 1;
  --xi-bg-o: 1;
  --xi-top-o: 1;
  --xi-hint-o: 1;
  --xi-flare-x: -130%;
  --xi-flare-o: 0;

  position: relative;
  /* Fills the screen below the sticky nav bar. 'svh' = small viewport height, so mobile address bars don't cut it off */
  /* (the extra 1px is the nav bar's bottom border) */
  height: calc(100vh - var(--header-h, 0px) - 1px);
  height: calc(100svh - var(--header-h, 0px) - 1px);
  overflow: hidden;
  background: var(--xi-bg);
  color: #fff;
  isolation: isolate;
}

/* ---------- Background photo ---------- */
.xi-bg { position: absolute; inset: 0; z-index: 0; opacity: var(--xi-bg-o); }
.xi-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Dark-to-clear gradient so the white text stays readable, plus a warm golden-hour wash */
.xi-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 72% 18%, rgba(255, 176, 64, .38), transparent 70%),
    linear-gradient(180deg, rgba(18, 14, 8, .62) 0%, rgba(18, 14, 8, .28) 42%, rgba(18, 14, 8, .6) 100%);
}

/* ---------- Tagline ---------- */
.xi-top {
  position: absolute; top: clamp(18px, 4vh, 44px); left: 16px; right: 16px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  opacity: var(--xi-top-o);
}
/* The page's H1: a small label-style line above the tagline (white, to sit on the photo) */
.xi-heading {
  margin: 0; font-size: clamp(.72rem, 1vw, .82rem); font-weight: 700; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.xi-tagline { margin: 0; font-size: clamp(.9rem, 1.3vw, 1.05rem); font-weight: 500; color: rgba(255, 255, 255, .9); letter-spacing: .01em; }

/* ---------- Card ---------- */
.xi-stage { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }

/* The card box is big enough for both its starting and finished shapes;
   clip-path hides the edges so only the right part shows. Animating the
   clip is smooth and never stretches the photo. */
.xi-card {
  position: relative; width: var(--xi-w1); height: max(var(--xi-h0), var(--xi-h1)); overflow: hidden;
  clip-path: inset(var(--xi-clip-y) var(--xi-clip-x) round var(--xi-radius));
  background: #0E0C0A;
  will-change: clip-path;
}
.xi-card img, .xi-card video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(var(--xi-zoom)); will-change: transform;
}
/* A soft band of sunlight that sweeps across the glass once as it expands */
.xi-flare {
  position: absolute; inset: -10% -40%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 232, 180, .6) 49%, rgba(255, 255, 255, .75) 50%, rgba(255, 232, 180, .6) 51%, transparent 62%);
  transform: translateX(var(--xi-flare-x)); opacity: var(--xi-flare-o);
  will-change: transform, opacity;
}

/* ---------- Headline split around the card ---------- */
.xi-words {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--xi-w0) + 56px);
  padding: 0 16px;
}
.xi-word {
  flex: 1; margin: 0; font-weight: 800; line-height: 1; letter-spacing: -0.045em;
  font-size: clamp(2.2rem, 4.8vw, 5.6rem); color: #fff;
  text-shadow: 0 6px 34px rgba(0, 0, 0, .35);
  opacity: var(--xi-word-o); will-change: transform, opacity;
}
.xi-word-left { text-align: right; transform: translateX(calc(var(--xi-word-x) * -1)); }
.xi-word-right { text-align: left; transform: translateX(var(--xi-word-x)); }

/* ---------- "Scroll to expand" hint ---------- */
.xi-hint {
  position: absolute; left: 50%; top: calc(50% + var(--xi-h0) / 2 + 22px); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .9);
  opacity: var(--xi-hint-o); transform: translateX(-50%); pointer-events: none;
}
.xi-hint svg { width: 18px; height: 18px; animation: xi-bounce 1.6s ease-in-out infinite; }
@keyframes xi-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- Content that appears once the card has expanded ---------- */
/* Pulled up into the empty band under the finished image, so it sits just below it.
   The band is half of what the image doesn't fill; 36px of it is kept as breathing room.
   It stays invisible and unclickable until the image has fully expanded. */
.xi-after {
  position: relative;
  margin-top: calc((100vh - var(--header-h, 0px) - 1px) * (1 - var(--xi-h-share)) / -2 + 36px);
  margin-top: calc((100svh - var(--header-h, 0px) - 1px) * (1 - var(--xi-h-share)) / -2 + 36px);
  padding: 0 0 clamp(32px, 5vw, 64px);
  text-align: center;
  pointer-events: none;
}
.xi-done .xi-after { pointer-events: auto; background: linear-gradient(180deg, var(--xi-bg) 0%, var(--xi-bg) 30%, #fff 100%); }
.xi-after-inner { max-width: 880px; margin: 0 auto; opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.xi-done .xi-after-inner { opacity: 1; transform: none; }
.xi-after h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.xi-after p { margin: 20px auto 0; max-width: 680px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); }
.xi-after .hero-actions { justify-content: center; }

/* ---------- While the animation holds the page in place ---------- */
/* Stops normal scrolling and the iOS rubber-band bounce */
html.xi-locked, html.xi-locked body { overflow: hidden; overscroll-behavior: none; }
/* The floating WhatsApp button waits until the intro has expanded, so it doesn't cover the hint */
.wa-float { transition: opacity .4s ease; }
html.xi-locked .wa-float { opacity: 0; pointer-events: none; }

/* ---------- Phones: smaller card, headline above and below it ---------- */
@media (max-width: 800px) {
  .xi { --xi-w0: 190px; --xi-h0: 250px; }
  .xi-words { flex-direction: column; gap: calc(var(--xi-h0) + 44px); }
  .xi-word { flex: 0 0 auto; text-align: center; font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .xi-word-left, .xi-word-right { text-align: center; }
  .xi-hint { top: auto; bottom: clamp(18px, 4vh, 36px); }
  .xi-heading { font-size: .68rem; letter-spacing: .06em; } /* fits on one line on phones */
}
/* Short phones: tighter top lines so they clear the headline */
@media (max-width: 800px) and (max-height: 700px) {
  .xi { --xi-w0: 160px; --xi-h0: 200px; }
  .xi-top { top: 12px; gap: 6px; }
  .xi-tagline { font-size: .8rem; line-height: 1.35; }
  .xi-words { gap: calc(var(--xi-h0) + 36px); }
}

/* Very narrow phones: keep the H1 on one line */
@media (max-width: 360px) {
  .xi-heading { font-size: .62rem; letter-spacing: .03em; }
}

/* ---------- Reduced motion: no animation, no bouncing hint ---------- */
@media (prefers-reduced-motion: reduce) {
  .xi-hint svg { animation: none; }
  .xi-after-inner { transition: none; }
}