/* ==========================================================================
   mariainglesby.com — shared styles
   Palette drawn from the Soaring Beyond cover: aqua/teal waves + soft gold.
   Headings: Great Vibes · Body: Inter
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #f9f7f4;
  color: #3a4543;
}

.font-display {
  font-family: 'Great Vibes', cursive;
}

/* Script headings need extra breathing room — descenders on Great Vibes are long. */
.font-display {
  line-height: 1.25;
  padding-bottom: 0.08em;
}

/* --------------------------------------------------------------------------
   Hero — layered aqua waves with the custom video on top
   -------------------------------------------------------------------------- */

/* Base tone behind everything. Sits in the same light aqua range as the video
   footage, so the moment before the first frame decodes reads as the same
   hero rather than as a flash that later brightens. */
.hero-stage {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, #4a9a93 0%, #6bb5ae 40%, #94d1c9 100%);
}

/* Animated wave fallback. Renders immediately and keeps the hero alive if the
   video is missing, still loading, or blocked by a data saver. */
.hero-waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}

.hero-waves svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  min-height: 420px;
}

.wave-a {
  animation: wave-drift 22s linear infinite;
  opacity: 0.55;
}
.wave-b {
  animation: wave-drift 34s linear infinite reverse;
  opacity: 0.4;
}
.wave-c {
  animation: wave-drift 46s linear infinite;
  opacity: 0.28;
}

@keyframes wave-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Slow luminous sheen drifting across the waves. */
.hero-sheen {
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: radial-gradient(ellipse 45% 45% at 30% 40%, rgba(148, 209, 201, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 75% 65%, rgba(232, 213, 163, 0.22) 0%, transparent 60%);
  animation: sheen-drift 26s ease-in-out infinite alternate;
}

@keyframes sheen-drift {
  from {
    transform: translate3d(-4%, -2%, 0) scale(1);
  }
  to {
    transform: translate3d(5%, 3%, 0) scale(1.12);
  }
}

/* The custom .mov/.mp4 wave loop. Starts transparent and fades in once it can
   actually play, so a missing file degrades to the CSS waves with no flash.
   The fade is short and the layers underneath are tuned to the same tone, so
   the swap reads as the footage arriving rather than as the hero brightening. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-video.is-playing {
  opacity: 1;
}

/* Not a readability scrim any more — the frosted panel below carries the copy
   contrast, so this only lifts the very top and bottom edges so the section
   blends into the header and the cream band beneath it. It never darkens the
   footage, and it is identical before and after the video loads. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.18) 100%);
}

/* The block behind the lettering. White at 80% so the footage's movement and
   lightness stay visible through it, blurred so busy frames never fight the
   text. The blur is progressive enhancement; where it is unsupported the panel
   leans on a little more opacity instead. */
.hero-panel {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 20px 55px -24px rgba(20, 46, 44, 0.45);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-panel {
    background: rgba(255, 255, 255, 0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .wave-a,
  .wave-b,
  .wave-c,
  .hero-sheen {
    animation: none;
  }
  .hero-video {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

.organic-bg {
  background: radial-gradient(ellipse 90% 70% at 85% 5%, rgba(167, 220, 214, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 5% 95%, rgba(232, 220, 190, 0.3) 0%, transparent 50%),
    linear-gradient(180deg, #f4f9f7 0%, #f9f7f4 50%, #faf8f5 100%);
}

.soft-card {
  background: #fffcf7;
  border: 1px solid rgba(212, 175, 119, 0.28);
  border-radius: 16px;
  box-shadow: 0 8px 30px -12px rgba(60, 90, 90, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.soft-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -14px rgba(60, 90, 90, 0.12);
  border-color: rgba(212, 175, 119, 0.45);
}

.gold-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 119, 0.45), transparent);
}

/* --------------------------------------------------------------------------
   Closing CTA band + footer
   These were both a near-black green (#294a47 / #1f3d3a) that made the bottom
   of every page read as a different, much darker site than the top. They now
   use the blue half of the cover palette instead: a mid-tone band that still
   carries white copy, sitting above a light footer.
   -------------------------------------------------------------------------- */

/* The lightest stop is the constraint here — copy on this band is white or
   azure-50/gold-100, and all three clear 4.5:1 against #316d87. Lightening the
   gradient any further breaks that, so raise the text with it if you do. */
.cta-tide {
  background: linear-gradient(135deg, #316d87 0%, #2a5f79 55%, #24556b 100%);
}

/* The footer is a light surface now, so its text is azure-800/900 rather than
   white — the two move together. The gold hairline is what separates it from
   the cream page above, since there is no longer a tonal jump doing that job. */
.site-footer {
  background: radial-gradient(ellipse 75% 100% at 10% 0%, rgba(149, 200, 221, 0.3) 0%, transparent 62%),
    radial-gradient(ellipse 60% 90% at 95% 100%, rgba(232, 213, 163, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #eef7fa 0%, #ddedf5 100%);
  border-top: 1px solid rgba(212, 175, 119, 0.4);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #e8d5a3 0%, #d4af77 100%);
  color: #3a4543;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(212, 175, 119, 0.35);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-primary {
  background: linear-gradient(135deg, #6bb5ae 0%, #4a9a93 100%);
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px -4px rgba(74, 154, 147, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #5aa59e 0%, #3d8a83 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(74, 154, 147, 0.4);
}

.btn-gold {
  background: linear-gradient(135deg, #e8d5a3 0%, #d4af77 100%);
  color: #2e5a56;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px -4px rgba(212, 175, 119, 0.45);
}

.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px -4px rgba(212, 175, 119, 0.6);
}

.btn-outline {
  border: 1.5px solid rgba(74, 154, 147, 0.45);
  color: #3d8a83;
  background: transparent;
  transition: all 0.25s ease;
}

.btn-outline:hover {
  background: rgba(107, 181, 174, 0.08);
  border-color: #4a9a93;
}

.btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  transition: all 0.25s ease;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}

/* Visible keyboard focus on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #4a9a93;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Floating companion-journal CTA
   -------------------------------------------------------------------------- */

#journal-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  width: 330px;
  max-width: calc(100vw - 48px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 44px -12px rgba(20, 46, 44, 0.28);
  border: 1px solid rgba(212, 175, 119, 0.4);
  background: #fffcf7;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

#journal-float.collapsed .journal-body {
  display: none;
}

#journal-float.is-hidden {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  #journal-float {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}