/* Apple-style interaction and material pass for the homepage.
   Loaded last; each block maps to one audit item. */

/* 1. Press feedback — instant on pointer-down, released with a short ease. */
.action,
.mitra-secondary,
.mitra-header .mitra-nav-cta,
.submit,
.text-link,
summary,
.audience-options label {
  transition: transform 160ms var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease;
}
.action:active,
.mitra-secondary:active,
.mitra-header .mitra-nav-cta:active,
.submit:active,
button:active {
  transform: scale(.97);
  transition-duration: 80ms;
}
.text-link:active,
.audience-options label:active,
.mitra-header nav a:active {
  opacity: .7;
}
summary:active { opacity: .75; }

/* 3. Header stays a translucent material; a soft edge replaces the hard rule. */
.mitra-header {
  border-bottom-color: transparent;
}
.mitra-header.is-scrolled {
  background: rgba(22, 5, 9, .82);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: transparent;
  box-shadow: none;
}
.mitra-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;
  background: linear-gradient(rgba(10, 2, 4, .35), rgba(10, 2, 4, 0));
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.mitra-header.is-scrolled::before { opacity: 1; }
.mitra-header nav a { font-weight: 600; }

/* 6. FAQ — the "+" turns into "×" smoothly; answers ease open. */
summary span {
  display: inline-block;
  transition: transform .3s var(--ease-out);
}
details[open] p {
  animation: faq-open .35s var(--ease-out) both;
}
@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete;
  }
  .faq-list details[open]::details-content { block-size: auto; }
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* 7. Inline email check and a success state that arrives instead of popping in. */
.form-panel .field-hint {
  min-height: 0;
  margin: calc(-1 * var(--space-md)) 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-error);
}
.form-panel .field-hint:empty { display: none; }
.field-hint button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-panel input:not([type="radio"]):not([type="checkbox"]) {
  transition: border-color .2s ease, background-color .2s ease;
}
.form-panel input[aria-invalid="false"] {
  border-color: var(--color-success);
}
#success:not([hidden]) {
  animation: success-in .5s var(--ease-out) both;
}
@keyframes success-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* 8. Typography — lighter body, bolder emphasis, size-specific tracking. */
body:has(.mitra-opening) {
  font-weight: 400;
}
body:has(.mitra-opening) :is(.action, .mitra-secondary, .submit, .text-link, summary, label, legend, .quest-name, .form-panel h3, .price-caption, strong, .opening-photo figcaption) {
  font-weight: 600;
}
.mitra-opening .mitra-kicker {
  letter-spacing: .12em;
}
.section-label,
.step-number {
  letter-spacing: .1em;
}
.mitra-opening .opening-copy > p:not(.mitra-kicker) {
  color: var(--color-ink);
  opacity: .88;
}

/* 9. Accessibility settings beyond reduced motion. */
@media (prefers-reduced-transparency: reduce) {
  .mitra-header,
  .mitra-header.is-scrolled {
    background: rgb(22, 5, 9);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  :root {
    --color-muted: var(--color-ink);
    --color-rule: oklch(75% 0.03 45);
  }
  .mitra-header,
  .mitra-header.is-scrolled {
    background: rgb(15, 3, 6);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--color-ink);
  }
  .mitra-opening .opening-photo::after { background: rgba(15, 3, 6, .85); }
}
@media (prefers-reduced-motion: reduce) {
  .action:active,
  .mitra-secondary:active,
  .mitra-header .mitra-nav-cta:active,
  .submit:active,
  button:active { transform: none; opacity: .8; }
}

/* Keep the hero kicker on one line where it fits; let it wrap on phones. */
.mitra-opening .opening-copy > p.mitra-kicker {
  max-width: none;
  font-size: .8125rem;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .mitra-opening .opening-copy > p.mitra-kicker { font-size: .75rem; letter-spacing: .1em; }
}

/* Hero fills the first screen on every device (header floats over it). */
.mitra-opening .opening-copy {
  min-height: 100vh;
  min-height: 100svh;
}

/* Night car-door hero: fills the first screen, then the rest of the photo continues
   behind the next section, so the projected QUESTER logo lands in the empty space
   beside "A little detour." The photo fades into the page instead of ending on an edge. */
.mitra-opening {
  background: transparent;
  /* Lift the photo just enough that the projection lands ~13rem into the next section.
     Never pushed down, so tall screens keep the top of the photo. */
  --hero-shift: min(0px, calc(100svh + 13rem - 78.7vw));
}
.mitra-opening .opening-photo {
  inset: auto;
  top: var(--hero-shift);
  left: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(#000 0 62%, transparent 80%);
  mask-image: linear-gradient(#000 0 62%, transparent 80%);
  pointer-events: none;
}
.mitra-opening .opening-photo img {
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: fill;
}
.mitra-opening .opening-photo::after { background: rgba(10, 2, 4, .55); }
.mitra-opening .opening-photo figcaption {
  bottom: auto;
  top: calc(100svh - var(--hero-shift) - 3.5rem);
  pointer-events: auto;
}
.play-loop {
  position: relative;
  z-index: 1;
}
@media (max-width: 640px), (orientation: portrait) {
  /* Narrow screens: fill the screen with the photo (sides trimmed), projection below the
     buttons, and the remainder fading into the next section. */
  .mitra-opening { --hero-shift: 0px; }
  .mitra-opening .opening-photo {
    -webkit-mask-image: linear-gradient(#000 0 75%, transparent 100%);
    mask-image: linear-gradient(#000 0 75%, transparent 100%);
  }
  .mitra-opening .opening-photo img { height: 124svh; object-fit: cover; object-position: 87% 0; }
  .mitra-opening .opening-copy {
    justify-content: flex-start;
    padding-top: max(100px, 13svh);
  }
}
@media (max-width: 640px) and (max-height: 780px) {
  .mitra-opening .opening-photo img { height: 145svh; object-position: 86% 0; }
}
.form-panel .name-note { margin: calc(-1 * var(--space-md)) 0 var(--space-lg); font-size: .8125rem; color: var(--color-muted); opacity: .8; }

/* Calmer type: smaller headings, natural spacing in the display face, lighter copy. */
:root {
  --text-heading: clamp(2rem, 3.6vw, 3.25rem);
  --text-display: clamp(2.25rem, 4.2vw, 3.75rem);
  --text-lead: clamp(1.125rem, 1.5vw, 1.375rem);
}
h1, h2, h3,
.mitra-opening h1,
.price {
  letter-spacing: 0;
  word-spacing: .06em;
}
.mitra-opening h1 { font-size: clamp(2.75rem, 5.4vw, 5rem); line-height: 1.06; }
h2 { line-height: 1.12; }
.play-steps h3,
.quest-entry h3 { font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.15; }
.play-steps { margin-block: var(--space-xl) 0; }
.play-steps p,
.quest-entry p:not(.quest-name),
.venue-copy p,
.venue-copy li { font-size: 1.0625rem; line-height: 1.6; }
.quest-name { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.venue-copy .large-copy { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink); }
.venue-copy ul { margin: var(--space-lg) 0 0; padding-left: 1.1em; }
.venue-copy li { margin-bottom: var(--space-xs); color: var(--color-muted); }

/* Section rhythm: fewer sections, a little less height each. */
.play-loop, .quest-list, .venue-story, .faq, .waitlist { padding-block: clamp(4rem, 9vw, 7rem); }

/* Pricing as a single slim strip. */
.pricing.pricing-slim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.pricing-slim h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0; }
.pricing-slim p { margin: 0; color: var(--color-muted); max-width: 46ch; flex: 1 1 280px; }
.pricing-slim .action { flex: none; }

/* App previews beside each kind of quest. */
.quest-phone { margin: 0; justify-self: center; width: min(240px, 62vw); }
.quest-phone img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 28px 50px rgba(0, 0, 0, .55)) drop-shadow(0 0 60px rgba(219, 13, 38, .14));
}
@media (min-width: 40rem) {
  .quest-entry {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 8vw, 8rem);
    row-gap: var(--space-md);
    align-content: center;
    max-width: 900px;
    margin-inline: auto;
  }
  .quest-entry > h3 { grid-column: 1; grid-row: 1; align-self: end; }
  .quest-entry > div { grid-column: 1; grid-row: 2; align-self: start; }
  .quest-phone { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
  /* Mirror the second quest so the section reads as a zig-zag. */
  .quest-entry:nth-of-type(2) { grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); }
  .quest-entry:nth-of-type(2) > h3,
  .quest-entry:nth-of-type(2) > div { grid-column: 2; }
  .quest-entry:nth-of-type(2) .quest-phone { grid-column: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .quest-entry .quest-phone { transition: transform .8s var(--ease-out) .1s; }
  .motion-ready .quest-entry:not(.is-visible) .quest-phone { transform: translateY(24px); }
}