/* "Experiencia" — full-bleed video statement.
   Replaces the earlier image-card-and-copy layout entirely; the only pieces
   kept are the grain and the registration marks, which are the section's link
   to the rest of the page. Inherits the hero's tokens rather than redefining
   them. */
:root {
  /* Was a cream canvas. The section is now a full-screen video sitting
     between two dark neighbours (the story ends dark, .rooms starts dark), so
     a light ground would have read as a flash between them. */
  --of-canvas: #0d0d0f;
  --of-ink: 244, 239, 232;
}

.offering {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background-color: var(--of-canvas);
  color: rgb(var(--of-ink));
  font-family: var(--ov-font-display);
  overflow: hidden;
  isolation: isolate;
}

/* ── Video ───────────────────────────────────────────────────────────── */
/* The reveal lives here. A single clip-path inset opening from the centre
   line outward: one property, on one element, no layout and no extra copies
   of the video — which is why it costs almost nothing per frame compared to
   sliding two duplicated halves apart. */
.offering-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: inset(50% 0% 50% 0%);
  will-change: clip-path;
}

.offering-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slightly oversized so the parallax drift in offering.js never exposes an
     edge. */
  transform: scale(1.06);
  will-change: transform;
}

/* The source is an aerial shot under a bright sky — white type would not hold
   against it unaided. Heavier top and bottom so the type sits in the calmer
   middle, and a light overall wash to keep contrast without dulling the
   greens. */
.offering-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 50% at 50% 50%, rgba(8, 10, 12, 0.42) 0%, transparent 75%),
    linear-gradient(
      to bottom,
      rgba(8, 10, 12, 0.55) 0%,
      rgba(8, 10, 12, 0.12) 32%,
      rgba(8, 10, 12, 0.18) 62%,
      rgba(8, 10, 12, 0.72) 100%
    );
}

.offering-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Registration marks, now light on the darkened video. */
.offering-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 3;
  pointer-events: none;
}
.offering-corner::before,
.offering-corner::after {
  content: "";
  position: absolute;
  background: rgba(var(--of-ink), 0.5);
}
.offering-corner::before { width: 1px; height: 14px; left: 50%; top: 0; transform: translateX(-50%); }
.offering-corner::after { width: 14px; height: 1px; top: 50%; left: 0; transform: translateY(-50%); }
.offering-corner-tl { top: 32px; left: 32px; }
.offering-corner-br { bottom: 32px; right: 32px; }

/* ── Statement ───────────────────────────────────────────────────────── */
/* Kept as `.offering-inner` on purpose: rooms.js scales and fades this exact
   selector as the rooms panel rides up over the section. */
.offering-inner {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 0 1.5rem;
  will-change: transform, opacity;
}

.offering-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--vc-serif);
  font-weight: 400;
  font-size: clamp(0.6rem, 0.92vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  /* The tracking is applied to the right of every glyph including the last,
     which visually pushes the line off-centre; this pulls it back. */
  text-indent: 0.42em;
  color: rgba(var(--of-ink), 0.92);
  text-shadow: 0 2px 20px rgba(8, 10, 12, 0.5);
}

.offering-word {
  margin: 0;
  font-family: var(--vc-serif);
  font-style: italic;
  /* Zodiak Bold Italic (701) is loaded explicitly in the document head. Asking
     for 700 without it would have produced a synthesised bold, which smears a
     high-contrast serif italic. */
  font-weight: 700;
  font-size: clamp(2.5rem, 9vw, 7.25rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: rgb(var(--of-ink));
  text-shadow: 0 4px 40px rgba(8, 10, 12, 0.55);
}

.offering-char {
  display: inline-block;
  will-change: transform, opacity;
}

@media (max-width: 767px) {
  .offering-corner { display: none; }
  .offering-kicker { letter-spacing: 0.3em; text-indent: 0.3em; }
}

@media (prefers-reduced-motion: reduce) {
  .offering-video { transform: none; }
  .offering-frame { clip-path: none; }
}