/* ==========================================================================
   IT'S HIM — OUR STORY
   A minimal, cinematic page: one section-title lockup + one feathered film,
   floating in the shared candlelit ambient room. No copy beyond the title.
   Reuses the site DNA — Italiana caps + Parisienne cursive, dark warm base,
   the reusable ambient background (flowing smoke + amber edge lighting), and
   the same edge-feathering used on the photos elsewhere.
   ========================================================================== */

/* Page sits above the fixed ambient layer (z-index:-1). */
.story {
  position: relative;
  z-index: 5;
}

/* One centred stage that fills the viewport under the fixed nav. */
.st-stage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(22px, 4.2vh, 52px);
  padding: clamp(112px, 16vh, 176px) clamp(24px, 7vw, 120px) clamp(64px, 10vh, 120px);
}

/* ---- Title — "OUR Story" : OUR = Italiana caps · Story = Parisienne cursive.
   Same lockup faces/behaviour as .panel__name / .co-name on the other pages. --- */
.st-title {
  margin: 0;
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 104px);
  line-height: 0.94;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 6px 38px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.72);
}
.st-title .t-the,
.st-title .t-cap {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.st-title .t-script {
  font-family: var(--font-script);
  font-size: 1.5em;            /* the cursive word reads larger */
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--ink);
  padding: 0 0.06em;
}

/* ==========================================================================
   The film — feathered on every edge so it dissolves into the dark room
   (no hard rectangle), matching how the photos are treated site-wide.
   ========================================================================== */
.st-film {
  position: relative;
  margin: 0;
  width: min(88vw, 1120px);
  aspect-ratio: 16 / 9;
  line-height: 0;
}
.st-film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Warm cinematic grade + a soft dark bed so the feathered edges read as depth. */
  filter: contrast(1.02) saturate(1.04) drop-shadow(0 30px 80px rgba(0, 0, 0, 0.6));
  /* Long feather on every edge — opaque core, dissolving corners. Same technique
     (radial core intersected with soft linear edges) used on the site photos. */
  -webkit-mask-image:
    radial-gradient(82% 84% at 50% 48%, #000 42%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(82% 84% at 50% 48%, #000 42%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* ==========================================================================
   Sound invitation — warm, elegant pill inviting the visitor to turn the
   music on. Retreats once the sound is playing (body.sound-on).
   ========================================================================== */
.st-sound {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  padding: 0.72em 1.35em;

  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);

  cursor: pointer;
  border: 1px solid rgba(199, 154, 84, 0.5);
  border-radius: 999px;
  background: rgba(14, 9, 8, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);

  transition: opacity 0.5s ease, transform 0.5s ease,
              color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  animation: stSoundBreathe 3.4s ease-in-out infinite;
}
.st-sound:hover {
  color: var(--bg);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-bright);
  animation: none;
}
.st-sound__icon {
  width: 1.35em;
  height: 1.35em;
  flex: none;
}
.st-sound__label { display: inline-block; line-height: 1; }

/* Gentle amber "breathing" glow so the invitation feels alive, not a UI toggle. */
@keyframes stSoundBreathe {
  0%, 100% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 0 rgba(230, 192, 121, 0); }
  50%      { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(230, 192, 121, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .st-sound { animation: none; }
}

/* Once sound is on, the invitation fades away and stops intercepting clicks. */
.sound-on .st-sound {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}

/* ---- Narrow screens ---- */
@media (max-width: 640px) {
  .st-film { width: 92vw; }
  .st-title { font-size: clamp(38px, 13vw, 72px); }
}