/* IRMA'S — navigation, hero stage, film presentation, sticky booking */

/* ── navigation ────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: calc(var(--nav-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(16, 14, 12, 0.9) 0%, rgba(16, 14, 12, 0) 100%);
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Nothing but the film until the entrance has finished. */
html.gated .nav, html.entering .nav { opacity: 0; pointer-events: none; }

/* Solid once the visitor is past the hero, so links stay legible on photos. */
.nav.is-solid {
  background: rgba(16, 14, 12, 0.94);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav__brand {
  display: inline-flex;
  align-items: baseline;
  min-height: 2.5rem;
  gap: 0.45rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__brand-script {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--red-lit);
  line-height: 1;
}
.nav__brand-name {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  padding-block: 0.4rem;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--cream); }
.nav__link:hover::after,
.nav__link[aria-current='true']::after { transform: scaleX(1); }
.nav__link[aria-current='true'] { color: var(--gold-lit); }

.nav__book { padding: 0.6rem 1.25rem; min-height: 2.6rem; white-space: nowrap; }

/* Phones keep the brand and the one action that matters; section links live
   in the page itself and in the footer rather than behind a hamburger. */
@media (max-width: 860px) {
  .nav__links { display: none; }
}

/* On small phones the nav carries only the script mark and a compact action —
   the full CALL TO BOOK lives in the sticky bar, where there is room for it. */
@media (max-width: 560px) {
  .nav__brand-name { display: none; }
  .nav__brand-script { font-size: 1.35rem; }
  .nav__book {
    padding: 0.5rem 1rem;
    min-height: 2.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
  /* the long label is replaced by a short one that cannot wrap */
  .nav__book { font-size: 0; }
  .nav__book::after {
    content: 'Book';
    font-size: 0.8125rem;
    letter-spacing: var(--track-btn);
  }
}

/* ── hero stage ────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ink);
}

/* Film and the frames either side of it share one geometry so the hand-off
   from video to resting poster cannot shift by a single pixel. */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Default is the framed presentation: nothing cropped, nothing stretched.
     Wide viewports upgrade to full-bleed below. */
  object-fit: contain;
  object-position: 50% 50%;
  /* Deliberately no background: outside the contained band each layer must
     stay transparent so the ambient extension shows through. */
}

/* Wide enough that a cover crop stays close to the film's own 1.77 frame —
   so the storefront, the interior and the logo all stay whole. Narrow and
   tall viewports keep the framed band instead of losing the logo to a crop. */
@media (min-aspect-ratio: 3/2) {
  .hero__media { object-fit: cover; }
}

/* ── the frame opens ───────────────────────────────────────────────
   On a phone a 16:9 film shown whole is a thin strip in a tall screen. So
   the film is pushed in while it is travelling — the storefront and the
   interior fill the screen properly — and the frame then opens back out to
   the full width exactly as the gold begins to gather, so the logo lands
   complete and readable. It is one uniform scale on the visitor's own
   screen: the approved film itself is never re-cut or distorted. */
@media (max-aspect-ratio: 3/2) {
  #hero-video {
    --film-zoom: 1.9;
    transform: scale(var(--film-zoom));
    transform-origin: 50% 50%;
    transition: transform 1100ms var(--ease-inout);
  }
  .hero.is-opening #hero-video { --film-zoom: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #hero-video { transition: none; }
  /* No film is coming, so the actions are simply present rather than fading
     in — a reduced-motion visitor should not be made to wait for a reveal. */
  .hero__actions, .hero__meta, .hero__glow, .hero__ambient,
  #hero-video, #hero-rest, #hero-still { transition: none; }
}

/* ── ambient extension ────────────────────────────────────────────
   A phone screen is far taller than the film, so shown whole the band would
   float in dead black. The same frame, thrown far out of focus, fills the
   surround instead — the screen reads as a room lit by the picture rather
   than a strip stranded in a void. No new asset: it is the poster the hero
   has already loaded. */
.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.22);
  filter: blur(26px) saturate(1.25) brightness(0.78);
  opacity: 1;
  transition: opacity 900ms var(--ease-out);
}
/* Hidden only while the film is pushed in and already filling the screen. */
.hero.is-playing:not(.is-opening) .hero__ambient { opacity: 0; }
/* Wide screens cover the viewport with the film itself and never need it. */
@media (min-aspect-ratio: 3/2) { .hero__ambient { display: none; } }

/* A warm pool of salon light spreading off the band into the surround. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  background: radial-gradient(
    62% 26% at 50% 50%,
    rgba(201, 162, 39, 0.2) 0%,
    rgba(160, 110, 30, 0.08) 45%,
    transparent 78%
  );
}
.hero.is-resolved .hero__glow { opacity: 1; }
@media (min-aspect-ratio: 3/2) { .hero__glow { display: none; } }

#hero-video {
  z-index: 2;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
#hero-video.is-active { opacity: 1; }

/* The resting frame: the film's own final logo frame, revealed underneath
   before the video fades so the climax simply stops moving. */
#hero-rest {
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
#hero-rest.is-visible { opacity: 1; }

/* The static hero for reduced-motion, Save-Data and no-JS visitors. This is
   the layer that is present from the very first paint. */
#hero-still { z-index: 1; opacity: 1; }
/* Once a film is genuinely running the still steps aside. */
.hero.is-playing #hero-still { opacity: 0; transition: opacity 500ms var(--ease-out); }

/* On framed (letterboxed) presentations the surround is designed, not empty:
   a warm ground, a gold hairline and grain, so the band reads as cinema. */
.hero__frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.14);
  /* The lower band is deliberately heavier: the booking actions sit there and
     must stay legible over any frame the film happens to rest on. */
  background:
    radial-gradient(132% 78% at 50% 42%, transparent 46%, rgba(16, 14, 12, 0.42) 100%),
    linear-gradient(180deg,
      rgba(16, 14, 12, 0.6) 0%,
      transparent 18%,
      transparent 52%,
      rgba(16, 14, 12, 0.6) 76%,
      rgba(16, 14, 12, 0.94) 100%);
}

/* ── hero content ──────────────────────────────────────────────────── */

.hero__content {
  position: relative;
  z-index: 3;
  grid-row: 2;
  padding: 0 var(--gutter) calc(clamp(2.25rem, 6vh, 4rem) + var(--safe-bottom));
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.1rem;
}

/* The film carries the title. Nothing large sits over it while it plays —
   these actions only arrive once the logo has landed. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
/* Held back only when JS is actually running to release them — without it
   the actions are simply present, never permanently invisible. */
html.js .hero__actions {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out),
    visibility 0s linear 700ms;
}
.hero.is-resolved .hero__actions {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
.hero__actions .btn { min-width: 13.5rem; }

.hero__meta {
  font-size: var(--fs-small);
  color: var(--text-mute);
  letter-spacing: 0.05em;
}
html.js .hero__meta {
  opacity: 0;
  transition: opacity 700ms var(--ease-out) 160ms;
}
.hero.is-resolved .hero__meta { opacity: 1; }

/* Genuine retry — offered only when playback actually failed. A second tap
   carries fresh user activation, which is what iOS needs. */
.hero__retry {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 12rem;
}
.hero__retry[hidden] { display: none; }

/* Scroll cue, shown only while the visitor is still on the hero. */
.hero__cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(0.9rem + var(--safe-bottom));
  transform: translateX(-50%);
  font-size: 0.6875rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-mute);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.hero.is-resolved .hero__cue { opacity: 0.75; }
.hero.is-scrolled .hero__cue { opacity: 0; }

@media (max-width: 600px) {
  .hero__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; min-width: 0; }
  .hero__cue { display: none; }
  .hero__content { gap: 0.9rem; padding-bottom: clamp(2rem, 7vh, 3.5rem); }
}

/* ── sticky mobile booking ─────────────────────────────────────────── */
/* Restrained: appears only after the hero is behind the visitor, and only
   on phones, where a persistent call control genuinely helps. */
.book-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  padding: 0.7rem var(--gutter) calc(0.7rem + var(--safe-bottom));
  background: rgba(16, 14, 12, 0.96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(110%);
  transition: transform var(--dur-med) var(--ease-out);
}
.book-bar .btn { width: 100%; }
.book-bar.is-visible { transform: none; }

@media (max-width: 860px) {
  .book-bar { display: block; }
  /* the finale's own call action must never sit under the bar */
  body.has-book-bar #visit, body.has-book-bar .footer { padding-bottom: 5.5rem; }
}