/* ============================================================
   CAPRICORN SUITES — "Stunning" enhancement layer (additive)
   Loaded AFTER styles.css. Elevates the homepage + global polish
   without altering the base system. Safe to remove.
   ============================================================ */

/* ---------- 1. Header: fix the 920–1080px overflow dead-zone ----------
   The desktop nav + tel + book button don't fit between 920 and ~1080px,
   so collapse to the hamburger earlier. */
@media (max-width: 1200px) {
  .nav, .header-contact { display: none !important; }
  .hamburger { display: flex !important; }
}

/* ---------- 2. Film-grain depth (global, very subtle) ----------
   A fixed, non-interactive grain over the whole page. Gives the warm
   ivory real paper-like richness instead of flat fill. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: .025; } }

/* ---------- 3. Cinematic hero ---------- */
/* Left stays a crisp cream reading-field; the right reveals the photo with a
   warm gold vignette and an indigo floor for depth. */
.hero-full .hero-scrim {
  background:
    radial-gradient(100% 86% at 92% 4%, rgba(194,163,94,.18), transparent 58%),
    linear-gradient(98deg,
      rgba(246,241,231,.975) 0%,
      rgba(246,241,231,.90) 24%,
      rgba(246,241,231,.50) 44%,
      rgba(246,241,231,.12) 64%,
      rgba(246,241,231,0) 82%),
    linear-gradient(0deg, rgba(22,15,54,.34), transparent 44%);
}
.hero-full .hero-bg image-slot { filter: saturate(1.07) contrast(1.04); }
/* Warm "golden-hour" wash over the photo, gold tint at the top-right */
.hero-full .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 92% 8%, rgba(194,163,94,.16), transparent 60%),
    linear-gradient(180deg, transparent 62%, rgba(22,15,54,.22));
  z-index: 1;
  pointer-events: none;
}
.hero-full .hero-bg { will-change: transform; }

/* Bigger, more confident display headline */
.hero-full .display {
  font-size: clamp(3.2rem, 8.4vw, 7rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
/* Hand-drawn gold underline that sweeps in under "no fuss." */
.hero-copy h1 .serif-italic {
  position: relative;
  color: var(--teal);
  white-space: nowrap;
}
.hero-copy h1 .serif-italic::after {
  content: "";
  position: absolute;
  left: 0; right: .08em;
  bottom: 0.06em;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sand), var(--sand-deep));
  transform: scaleX(1);
  transform-origin: left;
}

/* Eyebrow: a small, still gold locator dot (no pulse — calm, not "live") */
.hero-copy .eyebrow::before {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sand);
}

/* Booking widget: lift it with a gold hairline + deeper float */
.bookwidget.floating {
  box-shadow: 0 40px 100px rgba(27,20,66,.26), 0 10px 30px rgba(42,30,92,.12);
  border-color: rgba(194,163,94,.32);
}
.bookwidget.floating::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(194,163,94,.55), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Refined hero scroll cue */
.hero-scroll { color: var(--teal-light); }

/* ---------- 0. Hero copy: crisp, still resting state ----------
   The hero headline/intro rest fully crisp with no entrance motion — stillness
   reads as luxury, and this guarantees the hero is never trapped invisible.
   (Scroll reveals for the rest of the page are handled safely in styles.css,
   gated on body.loaded so they only hide once JS is confirmed running.) */
.rise { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }

/* ---------- 4. Feature ribbon (static, calm) ----------
   Replaces the old scrolling marquee. The same proof-points, set as a quiet
   centred row with small gold diamond separators — premium, never kinetic. */
.ribbon {
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}
.ribbon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 0;
  padding-block: clamp(18px, 2.4vw, 26px);
}
.ribbon-list li {
  position: relative;
  padding-inline: clamp(14px, 2.2vw, 30px);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ribbon-list li + li::before {
  content: "";
  position: absolute;
  left: -1px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  background: var(--sand);
  transform: rotate(45deg);
}
/* On phones the hero chips already carry these proof points, and 8 stacked
   labels read as clutter — keep mobile calm by hiding the decorative band. */
@media (max-width: 640px) { .ribbon { display: none; } }

/* ---------- 5. Count-up numerals: tabular + subtle settle ---------- */
.stat .num, .score-card .big { font-variant-numeric: tabular-nums; }
.count[data-counting] { color: inherit; }

/* ---------- 6. Parallax media (split blocks) ---------- */
.split-media.parallax image-slot,
.split-media.parallax { will-change: transform; }
.split-media { transition: box-shadow .4s var(--ease); }
.split-media:hover { box-shadow: var(--sh-xl); }

/* A thin gold frame inset on split media for an editorial "plate" feel */
.split-media::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: calc(var(--r-lg) - 12px);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ---------- 7. Primary buttons: refined, calm hover ----------
   No sweeping "sheen" — the lift + shadow + colour shift from styles.css is the
   whole interaction. Restraint reads as more premium than a shiny effect. */

/* ---------- 8. Chapter numbers: editorial weight ---------- */
.chapter-no {
  font-size: 1.5rem;
  font-weight: 460;
  color: var(--teal);
  font-feature-settings: "tnum";
}
.field .chapter-no { color: var(--sand); }

/* ---------- 9. (reveal handling moved to section 0 above) ---------- */

/* ---------- 10. Cinematic image hover-zoom (slow, clipped, GPU transform) ----------
   A gentle, premium scale on the imagery — clipped by the frame so it reads as
   the photo "breathing" toward you, never a jump. Applied across the media tiles. */
.card-media, .gc-media, .bento-item, .split-media { overflow: hidden; }
.card-media image-slot,
.gc-media image-slot,
.bento-item image-slot,
.split-media image-slot { transition: transform .7s var(--ease-out); }
.card:hover .card-media image-slot,
.guide-card:hover .gc-media image-slot,
.bento-item:hover image-slot,
.split-media:hover image-slot { transform: scale(1.05); }
@media (hover: none) {
  .card:hover .card-media image-slot,
  .guide-card:hover .gc-media image-slot,
  .bento-item:hover image-slot,
  .split-media:hover image-slot { transform: none; }
}

/* ---------- 11. Score cards: gold accent on hover ---------- */
.score-card { position: relative; overflow: hidden; }
.score-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--sand);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s var(--ease);
}
.score-card:hover::before { transform: scaleY(1); }

/* ---------- 12. First-paint guard for hero photo ---------- */
.hero-bg image-slot::part(frame) { background: var(--teal-tint); }

/* ---------- 13. image-slot rendering ---------- */
/* Real images fill their frame; the component injects a plain <img>. */
image-slot { display: block; width: 100%; height: 100%; }
image-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Branded fallback tile — used only where no real photo of the property
   exists yet (e.g. the Marina, a café). Reads as an intentional captioned
   plate, never an empty box, and never a misleading stock photo. */
.img-tile {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px;
  background:
    radial-gradient(120% 120% at 18% 12%, rgba(194,163,94,.20), transparent 55%),
    linear-gradient(150deg, var(--teal) 0%, var(--teal-dark) 78%);
  color: #fff;
  position: relative;
}
.img-tile::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: inherit;
  pointer-events: none;
}
.img-tile-cap {
  font-family: var(--display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.3;
  color: rgba(255,255,255,.94);
  max-width: 26ch;
}
.img-tile-cap::before {
  content: "Capricorn Suites";
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 10px;
}

/* ---------- 14. Day/night: warmer golden-hour hero after dusk ---------- */
body.is-evening .hero-full .hero-bg::after {
  background:
    radial-gradient(95% 75% at 90% 6%, rgba(194,163,94,.30), transparent 62%),
    linear-gradient(180deg, transparent 50%, rgba(22,15,54,.36));
}