/* ==========================================================================
   MARY'S BIRTHDAY WEEKEND — HOUSTON, TX
   Hero / opening screen only. Editorial luxury cover treatment.
   ========================================================================== */

:root {
  /* Neutrals */
  --white: #fdfaf5;
  --ivory: #f4ead9;

  /* Night sky — deep plum / aubergine, sampled from hero.png */
  --aubergine-950: #170c22;
  --aubergine-900: #23122f;
  --plum-800: #341a3f;
  --plum-600: #4a2350;
  --blush-500: #c9598b;

  /* Champagne gold — script + destination moments */
  --gold-700: #8a6a3a;
  --gold-500: #cda05f;
  --gold-300: #e9cd9a;
  --gold-100: #f6e9cf;

  --shadow-text-soft: 0 2px 18px rgba(23, 12, 34, 0.55);
  --shadow-text-strong: 0 4px 28px rgba(10, 5, 16, 0.75);

  --font-script: "Herr Von Muellerhoff", cursive;
  --font-serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--aubergine-950);
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   HERO — LOCKED COMPONENT
   The hero is approved and must never visually change because of styling
   added for sections beneath it (e.g. Assets/css/itinerary.css). CSS custom
   properties cascade by DOM proximity, not stylesheet load order: a later
   stylesheet's `:root { --font-script: ... }` silently wins over an earlier
   one for every element unless something closer in the tree re-pins it. To
   make the hero immune to that (now and for any future section work),
   every custom property the hero actually uses is re-declared here, scoped
   to `.hero` itself, so its subtree always resolves to these exact values
   no matter what any other stylesheet defines at :root.
   ========================================================================== */

.hero {
  /* Re-pinned, not just inherited from :root above — see comment block. */
  --white: #fdfaf5;
  --ivory: #f4ead9;
  --aubergine-950: #170c22;
  --aubergine-900: #23122f;
  --plum-800: #341a3f;
  --plum-600: #4a2350;
  --blush-500: #c9598b;
  --gold-700: #8a6a3a;
  --gold-500: #cda05f;
  --gold-300: #e9cd9a;
  --gold-100: #f6e9cf;
  --shadow-text-soft: 0 2px 18px rgba(23, 12, 34, 0.55);
  --shadow-text-strong: 0 4px 28px rgba(10, 5, 16, 0.75);
  --font-script: "Herr Von Muellerhoff", cursive;
  --font-serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--aubergine-950);
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 14px calc(env(safe-area-inset-bottom, 0px) + 20px);
}

/* Dedicated photo layer — kept separate from .hero so the slow cinematic
   zoom can animate the artwork without moving the typography above it. */
.hero-photo-layer {
  position: absolute;
  inset: -2%;
  background-image: url("../img/hero/hero.png");
  background-size: cover;
  /* Portrait artwork on a portrait phone is height-driven by `cover`, so the
     full sky-to-table story already shows regardless of this Y value here —
     it only starts to matter once a viewport gets wide enough to crop
     vertically (see breakpoints below). */
  background-position: center 42%;
  transform-origin: 55% 35%;
  animation: hero-ken-burns 36s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo-layer { animation: none !important; }
}

/* Restrained legibility scrim — never a flat opaque block. Darkest at the
   very top/bottom edges, lightest through the middle where the skyline
   should read clearly behind the typography. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(19, 10, 28, 0.6) 0%,
      rgba(19, 10, 28, 0.16) 16%,
      rgba(19, 10, 28, 0.06) 38%,
      rgba(19, 10, 28, 0.2) 58%,
      rgba(19, 10, 28, 0.36) 78%,
      rgba(14, 7, 20, 0.58) 100%
    );
  pointer-events: none;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 50% 42%, rgba(0, 0, 0, 0) 45%, rgba(12, 6, 18, 0.45) 100%);
  pointer-events: none;
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Soft localized glow sitting behind a type group — improves contrast
   against a busy part of the photograph without a flat overlay box. */
.hero-stack::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  background: radial-gradient(60% 58% at 50% 46%, rgba(10, 5, 16, 0.4) 0%, rgba(10, 5, 16, 0.16) 48%, rgba(10, 5, 16, 0) 75%);
  pointer-events: none;
}

.hero-script,
.hero-serif { position: relative; z-index: 1; }

/* -- Weekend / Trip moment ------------------------------------------------ */

.hero-script {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--white);
  line-height: 0.78;
  text-shadow: var(--shadow-text-strong);
  animation: hero-rise 1.1s var(--ease-editorial) both;
}

.hero-script--weekend {
  font-size: clamp(4.2rem, 21.5vw, 6.4rem);
  transform: translateX(-3%);
  animation-delay: 0.05s;
}

.hero-serif {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 0.92;
  animation: hero-rise 1.1s var(--ease-editorial) both;
}

.hero-serif--trip {
  font-size: clamp(3.1rem, 17vw, 4.4rem);
  margin-top: -0.22em;
  color: var(--gold-300);
  background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 5px rgba(10, 5, 16, 0.75))
    drop-shadow(0 8px 24px rgba(10, 5, 16, 0.5));
  animation-delay: 0.22s;
}

/* -- Invitation copy ------------------------------------------------------- */

.hero-invite {
  position: relative;
  z-index: 1;
  margin: 1.15rem 0 1.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.68rem, 2.6vw, 0.82rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
  line-height: 1.7;
  text-shadow: var(--shadow-text-soft);
  animation: hero-rise 1.1s var(--ease-editorial) both;
  animation-delay: 0.38s;
}

/* -- Mary / Birthday moment ------------------------------------------------ */

.hero-stack--name {
  margin-bottom: 1.85rem;
}

.hero-stack--name::before {
  inset: -6% -8%;
  background: radial-gradient(58% 60% at 50% 42%, rgba(10, 5, 16, 0.5) 0%, rgba(10, 5, 16, 0.22) 48%, rgba(10, 5, 16, 0) 76%);
}

.hero-script--mary {
  font-size: clamp(5.6rem, 31.5vw, 9.4rem);
  color: var(--gold-300);
  background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-500) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 7px rgba(10, 5, 16, 0.85))
    drop-shadow(0 12px 34px rgba(10, 5, 16, 0.6));
  animation-delay: 0.52s;
}

.hero-serif--birthday {
  font-size: clamp(2.9rem, 15.5vw, 4.1rem);
  margin-top: -0.3em;
  color: var(--white);
  text-shadow: var(--shadow-text-strong);
  animation-delay: 0.68s;
}

/* Mobile-only clipping fix (<700px, same breakpoint the tablet/desktop
   rules below start at — this leaves the desktop hero untouched). Herr Von
   Muellerhoff's ascenders/swashes exceed the 0.78 line-height above, and
   because Mary's is painted with -webkit-background-clip:text, any glyph
   ink that overshoots the element's own padding-box has no gradient there
   to paint it with — it renders with no fill at all, reading as a clipped
   stroke on an actual phone even though nothing is literally cropping it.
   padding-top extends that padding-box upward (background-origin defaults
   to padding-box) so the full glyph gets painted, without touching
   line-height/size or adding any space below Mary — Birthday's existing
   -0.3em pull-up is untouched, so their relationship doesn't change.

   padding-left/right do the same job horizontally: "Mary's" widened the
   word versus "Mary", and the script capital M's entry swash extends left
   of its own nominal glyph origin (the same overshoot idea as the ascender
   fix, just sideways) — .hero's own overflow:hidden was cropping that
   swash. padding-left is intentionally larger than padding-right since the
   overshoot is a left-side entry stroke, not a trailing one; because
   .hero-stack--name centers each line by its own box (align-items:center),
   the lopsided padding also nudges the whole word right by a few px so
   both the M and the closing "'s" clear their edges — Birthday is a
   separate, independently-centered flex item, so it does not move. */
@media (max-width: 699px) {
  .hero-script--mary {
    padding-top: 0.22em;
    padding-left: 0.2em;
    padding-right: 0.08em;
  }
}

/* -- Destination + dates ---------------------------------------------------- */

.hero-destination {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: hero-rise 1.1s var(--ease-editorial) both;
  animation-delay: 0.84s;
}

.hero-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  padding: 0.9em 2.1em 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 236, 205, 0.1) 100%);
  border: 1px solid rgba(233, 205, 154, 0.55);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 18px 40px -20px rgba(10, 5, 16, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hero-pill__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.62rem, 2.3vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
}

.hero-pill__city {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 8.6vw, 2.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 0 18px rgba(233, 205, 154, 0.55), 0 2px 10px rgba(10, 5, 16, 0.6);
}

.hero-dates {
  margin: 1.1rem 0 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(0.78rem, 3vw, 0.95rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-100);
  text-shadow: 0 2px 10px rgba(10, 5, 16, 0.85), 0 0 20px rgba(10, 5, 16, 0.55);
}

/* -- Scroll cue -------------------------------------------------------------- */

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  z-index: 2;
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(253, 250, 245, 0.55);
  border-radius: 999px;
  opacity: 0.85;
}

.hero-scroll-cue span {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 999px;
  background: var(--gold-300);
  animation: hero-scroll-dot 2.2s ease-in-out infinite;
}

@keyframes hero-scroll-dot {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(10px); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 0; }
}

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

/* -- Entrance motion --------------------------------------------------------- */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-script,
  .hero-serif,
  .hero-invite,
  .hero-destination {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .hero-scroll-cue span { animation: none !important; opacity: 0.6; }
}

/* ==========================================================================
   RESPONSIVE — TABLET / DESKTOP
   Editorial column stays centered and scales gracefully; it never just
   stretches the mobile layout across the full width of the screen.
   ========================================================================== */

@media (min-width: 700px) {
  .hero-photo-layer { background-position: center 24%; }

  .hero-content { max-width: 640px; }

  .hero-invite { margin: 1.4rem 0 1.8rem; }
  .hero-stack--name { margin-bottom: 2.3rem; }

  .hero-pill { padding: 1.05em 2.8em 1.2em; }
}

@media (min-width: 1100px) {
  .hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 40px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 36px);
  }

  .hero-photo-layer { background-position: center 20%; }

  .hero-content { max-width: 760px; }

  .hero-script--weekend { font-size: clamp(5.6rem, 11.5vw, 9rem); transform: translateX(-4%); }
  .hero-serif--trip { font-size: clamp(3.6rem, 6.4vw, 5.3rem); }
  .hero-script--mary { font-size: clamp(6.4rem, 15vw, 11.5rem); }
  .hero-serif--birthday { font-size: clamp(3.3rem, 5.8vw, 4.9rem); }
  .hero-pill__city { font-size: clamp(2.1rem, 3.4vw, 2.9rem); }

  .hero-invite { font-size: 0.92rem; }
  .hero-dates { font-size: 0.95rem; }
}

@media (min-width: 1500px) {
  .hero-photo-layer { background-position: center 16%; }
}

/* Short laptop viewports (limited height, not width) — tighten vertical
   rhythm so the full composition comfortably fits without scrolling. */
@media (min-width: 700px) and (max-height: 780px) {
  .hero { padding-top: 20px; padding-bottom: 18px; }
  .hero-invite { margin: 0.9rem 0 1.1rem; }
  .hero-stack--name { margin-bottom: 1.3rem; }
  .hero-script--weekend { font-size: clamp(3.6rem, 8vw, 5.4rem); }
  .hero-serif--trip { font-size: clamp(2.6rem, 5.6vw, 3.6rem); }
  .hero-script--mary { font-size: clamp(4.2rem, 10vw, 6.6rem); }
  .hero-serif--birthday { font-size: clamp(2.3rem, 5vw, 3.3rem); }
  .hero-pill { padding: 0.7em 2.3em 0.85em; }
  .hero-pill__city { font-size: clamp(1.5rem, 3vw, 2rem); }
  .hero-dates { margin-top: 0.6rem; }
}