/* Movie Buddy website — styles transcribed from the approved design (MovieBuddy Website.dc.html). */

:root {
  --bg: #181920;
  --card: #1F2029;
  --red: #A21D21;
  /* Deeper tone for large flat blocks (Contact card): a full-width panel of
     --red reads warmer than the same hex as a small mark, so it drifts away
     from the logo. Same hue, lower lightness. */
  --red-deep: #8E191D;
  --red-light: #d4555c;
  --ease-out-back: cubic-bezier(0.16, 0.84, 0.28, 1);
  --text: #fff;
  --muted: #B4B4B4;
  --nav: #C9C9C9;
  --quote: #D2D2D2;
  --dim: #777777;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.1);
  --font-body: 'Jost', 'Segoe UI', sans-serif;
  --font-display: 'Abril Fatface', serif;
  --font-quote: 'Playfair Display', serif;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--red-light); }
::selection { background: var(--red); color: var(--text); }
img { max-width: 100%; }

.page { background: var(--bg); min-height: 100vh; overflow-x: clip; }
.container { max-width: 1200px; margin: 0 auto; }
.container--narrow { max-width: 760px; }
.container--rel { position: relative; }

/* Header */
/* Alignment contract: every band (header, sections, footer) puts 24px side padding on
   the OUTER element and a 1200px max-width on the INNER one, so all content shares
   one left edge at every viewport width. */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 0 24px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s;
}
.header.is-scrolled {
  background: rgba(24, 25, 32, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-soft);
}
.header__inner {
  max-width: 1200px; margin: 0 auto; padding: 16px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__logo { height: 36px; width: auto; display: block; }
.brand__logo--sm { height: 32px; }
.header__nav {
  display: flex; gap: 26px; flex-wrap: wrap;
  font-size: 14px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
}
.header__nav a { color: var(--nav); }
.header__nav a:hover { color: var(--text); }

/* Type */
.eyebrow {
  margin: 0 0 14px; color: var(--red); font-weight: 600; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase; filter: brightness(1.5);
}
.eyebrow--lg { margin-bottom: 16px; font-size: 14px; }
.eyebrow--sm { margin-bottom: 10px; font-size: 12px; letter-spacing: 2.5px; }
.display {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4vw, 50px); line-height: 1.1;
}
.section-heading { text-align: center; max-width: 620px; margin: 0 auto 64px; }
.section-heading--screens { margin-bottom: 70px; }
.section-heading--faq { max-width: none; margin-bottom: 48px; }

/* Sections */
.section { padding: 110px 24px; scroll-margin-top: 70px; }
.section--features { position: relative; padding-bottom: 40px; }
.section--safety { padding: 40px 24px 110px; }
.section--screens { position: relative; padding-bottom: 0; overflow: hidden; }
.section--contact { padding-top: 0; }
.section--legal { padding-top: 150px; }
.section__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }

/* Glows */
.glow { position: absolute; pointer-events: none; }
.glow--hero-tr {
  top: -200px; right: -150px; width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(162, 29, 33, 0.35) 0%, rgba(162, 29, 33, 0) 65%);
  animation: glowPulse 9s ease-in-out infinite;
}
.glow--screens {
  top: 28%; left: 50%; transform: translateX(-50%); width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(162, 29, 33, 0.22) 0%, rgba(162, 29, 33, 0) 58%);
}

/* Hero */
.hero { position: relative; padding: 150px 24px 0; overflow: hidden; }
.hero__inner {
  position: relative; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center;
}
.hero__copy { max-width: 560px; }
.hero__title {
  margin: 0 0 24px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5.2vw, 68px); line-height: 1.08; text-wrap: pretty;
}
/* Each title line is masked by its own overflow box so the inner span can
   slide up from below it. The padding/negative-margin pair keeps descenders
   from being clipped by that mask. */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__line > span { display: block; animation: lineUp 0.95s var(--ease-out-back) backwards; }
.hero__line:nth-child(1) > span { animation-delay: 0.15s; }
.hero__line:nth-child(2) > span { animation-delay: 0.32s; }
.hero__text { margin: 0 0 36px; color: var(--muted); font-size: 17px; line-height: 1.7; text-wrap: pretty; }

/* Hero entrance — time-based, so it runs in every browser (unlike the
   scroll-driven section reveals further down). */
.hero__copy .eyebrow--lg { animation: popIn 0.7s var(--ease-out-back) 0.05s backwards; }
.hero__text { animation: blurIn 1s 0.5s backwards; }
.store-btn--solid { animation: popIn 0.7s var(--ease-out-back) 0.65s backwards; }
.store-btn--outline { animation: popIn 0.7s var(--ease-out-back) 0.78s backwards; }
.store-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.store-btn {
  display: flex; align-items: center; gap: 12px;
  border-radius: 12px; padding: 10px 22px; min-width: 170px;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.store-btn:hover { transform: translateY(-3px) scale(1.03); }
.store-btn__text { display: flex; flex-direction: column; }
.store-btn--solid { background: #fff; color: var(--bg); }
.store-btn--solid:hover { background: #e8e8e8; color: var(--bg); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.store-btn--outline { border: 1px solid rgba(255, 255, 255, 0.35); }
.store-btn--outline:hover { border-color: #fff; color: #fff; }
.store-btn__label { font-size: 11px; letter-spacing: 0.5px; opacity: 0.75; }
.store-btn__name { font-size: 19px; font-weight: 600; line-height: 1.15; }
.hero__visual { display: flex; justify-content: center; align-items: flex-end; min-height: 420px; perspective: 1100px; }
/* The pointer tilt lives on this wrapper and the float animation on the image
   inside it — both on one element and the two transforms would overwrite
   each other. */
.hero__tilt { transition: transform 0.35s ease-out; transform-style: preserve-3d; }
/* ── Phone chrome ───────────────────────────────────────────────────────────
   Screenshots are presented inside a rendered phone body: bezel, notch, and on
   the hero a home indicator. Shared by the hero and the five App Screens.
   `aspect-ratio` on the image is a no-op with today's 375x812 assets; it is
   kept so a future oversized export cannot stretch a row. */
.phone {
  position: relative;
  background: #0b0b0f;
  box-sizing: border-box;
}
.phone__notch {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: #000; border-radius: 999px; z-index: 2;
}
.phone__img {
  width: 100%; display: block;
  aspect-ratio: 375 / 812; object-fit: cover; object-position: top center;
}

/* Hero — a complete phone, so it carries a full radius and a home indicator.
   The design's infinite `float` is deliberately omitted here: the bezel already
   renders this screenshot below its native width, and a continuously
   transformed layer resamples at fractional pixels, compounding the softness on
   the page's largest detail-heavy image. The Screens phones keep their float. */
.phone--hero {
  width: min(340px, 78vw);
  border-radius: 52px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #000;
  animation: phoneIn 1.1s var(--ease-out-back) 0.45s backwards;
}
.phone--hero .phone__notch { top: 24px; width: 96px; height: 28px; }
.phone__screen { border-radius: 40px; overflow: hidden; position: relative; }
.phone__home {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 38%; height: 5px; background: rgba(255, 255, 255, 0.85); border-radius: 999px;
}

/* Feature cards */
/* Explicit column counts rather than auto-fit: with three items, auto-fit
   passes through a two-column state at tablet widths and orphans the third
   item on a half-width row. See also .steps, which shares the breakpoint. */
.cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
.card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 20px; padding: 36px 32px;
  transition: transform 0.35s var(--ease-out-back), border-color 0.35s;
}
.card:hover { transform: translateY(-8px); border-color: rgba(162, 29, 33, 0.45); }
.card__title { margin: 0 0 12px; font-size: 24px; font-weight: 600; }
.card__text { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }

/* Steps */
.steps { display: grid; grid-template-columns: 1fr; gap: 40px; }

/* Three across once there is room for it; one column below, never two. */
@media (min-width: 900px) {
  .cards,
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.step { text-align: center; padding: 0 12px; }
.step__num {
  width: 64px; height: 64px; margin: 0 auto 22px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 24px; color: var(--red-light);
}
.step__title { margin: 0 0 12px; font-size: 22px; font-weight: 600; }
.step__text { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; text-wrap: pretty; }

/* Safety note */
.safety { max-width: 760px; margin: 0 auto; text-align: center; }
.safety__mark { height: 52px; width: auto; display: block; margin: 0 auto 26px; }
.safety__quote {
  margin: 0; font-family: var(--font-quote); font-style: italic;
  font-size: clamp(21px, 2.6vw, 28px); line-height: 1.55; color: var(--quote); text-wrap: pretty;
}
.safety__caption { margin: 22px 0 0; color: var(--dim); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }

/* Screens */
.screens { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 2.2vw, 32px); }
/* These phones are cut off by the section's bottom edge, so they take a
   top-only radius, no bottom border, and no home indicator. */
.screens .phone {
  flex: none;
  border-radius: clamp(14px, 2.2vw, 30px) clamp(14px, 2.2vw, 30px) 0 0;
  padding: clamp(4px, 0.6vw, 9px) clamp(4px, 0.6vw, 9px) 0;
  border: 1px solid rgba(255, 255, 255, 0.14); border-bottom: none;
  box-shadow: inset 0 0 0 1px #000;
}
.screens .phone__notch { top: clamp(8px, 1.2vw, 16px); width: 28%; height: clamp(5px, 0.8vw, 11px); }
.screens .phone__img { border-radius: clamp(10px, 1.7vw, 23px) clamp(10px, 1.7vw, 23px) 0 0; }
/* Three size tiers, stepping down and back from the centre phone. The static
   translateY is the reduced-motion resting position; each float keyframe
   encodes the same offset so the animation picks up where it leaves off. */
.phone--outer {
  width: clamp(78px, 13vw, 196px); transform: translateY(60px);
  animation: floatDeep 9s ease-in-out infinite;
}
.phone--inner {
  width: clamp(92px, 16vw, 232px); transform: translateY(36px);
  animation: floatDown 8s ease-in-out infinite;
}
.phone--main {
  width: clamp(116px, 19.5vw, 286px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 -24px 90px rgba(162, 29, 33, 0.3), inset 0 0 0 1px #000;
  animation: float 8s ease-in-out infinite;
}
.screens .phone:nth-child(1) { animation-delay: 1.8s; }
.screens .phone:nth-child(2) { animation-delay: 0.5s; }
.screens .phone:nth-child(4) { animation-delay: 1.2s; }
.screens .phone:nth-child(5) { animation-delay: 0.9s; }
/* Even at the narrower tiers the five-phone row needs ~504px against 327px of
   space at 375px wide, so the outer pair still drops out. The design has no
   mobile artboard. */
@media (max-width: 700px) {
  .phone--outer { display: none; }
}

/* The design's narrower tiers drop the row from ~96.8vw to ~86.3vw, which fits
   inside 100vw minus the 48px of section padding from about 350px upward — so
   the old blanket shrink rule is no longer needed.
   Below that the tier clamps bottom out at their minimums and the row becomes a
   fixed 324px against 272px of space, which `overflow: hidden` would slice. Let
   it shrink there only; `flex: none` keeps the design's sizes everywhere else. */
@media (max-width: 360px) {
  .screens .phone { flex: 0 1 auto; min-width: 0; }
}

/* FAQ */
.faq__item { border-top: 1px solid var(--line-strong); }
.faq__item:last-child { border-bottom: 1px solid var(--line-strong); }
.faq__item summary {
  cursor: pointer; padding: 24px 8px; font-size: 19px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: var(--red-light); font-size: 26px; font-weight: 400; }
/* Answers only render once the <details> is open, so this plays on expand. */
.faq__item p {
  margin: 0; padding: 0 8px 26px; color: var(--muted); font-size: 16px; line-height: 1.7;
  animation: rise 0.45s var(--ease-out-back) backwards;
}
.link-red { color: var(--red-light); text-decoration: underline; }

/* Contact */
.contact {
  background: var(--red-deep); border-radius: 24px; padding: clamp(40px, 6vw, 72px); text-align: center;
}
.contact__title {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1;
}
.contact__text { margin: 0 0 32px; color: rgba(255, 255, 255, 0.85); font-size: 17px; }
.btn-white {
  display: inline-block; background: #fff; color: var(--bg); font-weight: 600; font-size: 17px;
  padding: 15px 34px; border-radius: 12px;
}
.btn-white:hover { background: #e8e8e8; color: var(--bg); }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 48px 24px 36px; }
.footer__inner { max-width: 1200px; margin: 0 auto; }
.footer__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__nav { display: flex; gap: 28px; flex-wrap: wrap; font-size: 15px; }
.footer__nav--social { gap: 20px; }
.footer__nav a { color: var(--muted); }
.footer__nav a:hover { color: var(--text); }
.footer__rule { border: none; border-top: 1px solid var(--line); margin: 32px 0 24px; }
.footer__copy { margin: 0; text-align: center; color: var(--dim); font-size: 14px; }

/* Legal + error pages (not in the design; reuse its tokens) */
.legal__title { text-align: center; margin-bottom: 14px; }
.legal__updated { text-align: center; margin: 0 0 48px; color: var(--dim); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.legal__body { color: var(--muted); font-size: 16px; line-height: 1.7; }
.legal__body p { margin: 0 0 16px; }
.legal__section { border-top: 1px solid var(--line-strong); padding: 28px 0 12px; }
.legal__section:last-child { border-bottom: 1px solid var(--line-strong); padding-bottom: 28px; }
.legal__heading { margin: 0 0 12px; font-size: 22px; font-weight: 600; color: var(--text); }
.legal__unavailable { text-align: center; color: var(--muted); font-size: 17px; margin: 24px 0 0; }
.error { text-align: center; }
.error__code { margin: 0 0 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 10vw, 120px); line-height: 1; color: var(--red-light); }
.error__title { margin: 0 0 12px; font-size: 24px; font-weight: 600; }
.error__text { margin: 0 0 32px; color: var(--muted); font-size: 16px; line-height: 1.7; }

/* ── Hero intro showreel ────────────────────────────────────────────────────
   The reel is authored at 1920×1080 and scaled to cover the hero by intro.js.
   It stays display:none until the script opts in, so a JS failure (or a
   reduced-motion / already-seen visitor) can never leave the hero covered. */
.intro {
  display: none;
  /* Not `inset: 0`: the hero is ~1516px tall at 375px wide, so a full-height
     overlay would put most of the reel below the fold. One viewport tall,
     never taller than the hero itself. */
  position: absolute; top: 0; left: 0; right: 0; bottom: auto;
  height: 100vh; max-height: 100%;
  z-index: 5;
  background: var(--bg); overflow: hidden;
  transition: opacity 0.85s ease;
}
.intro.is-on { display: block; }
/* The reel is authored in fixed design units. The site-wide `img { max-width:
   100% }` reset would collapse its filmstrip frames (a percentage max-width
   zeroes an image's intrinsic contribution, letting the flex cells shrink). */
.intro img { max-width: none; }
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro__stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%); transform-origin: 50% 50%;
  overflow: hidden;
}
.intro__skip {
  position: absolute; right: 20px; bottom: 20px; z-index: 10;
  background: rgba(24, 25, 32, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; border-radius: 999px; padding: 10px 24px;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: 1px; cursor: pointer;
}
.intro__skip:hover { border-color: #fff; background: rgba(24, 25, 32, 0.9); }
.intro__replay {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 28px;
  background: none; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--nav);
  border-radius: 999px; padding: 8px 18px;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 1px; cursor: pointer;
}
.intro__replay:hover { border-color: #fff; color: #fff; }
/* Hero content crossfades in from under the reel. */
.hero__inner { transition: opacity 0.85s ease; }
.intro-active .hero__inner { opacity: 0; }

/* ── Touch targets ──────────────────────────────────────────────────────────
   Nav, footer and brand links are 20–22px tall, and the "X" social link is
   only 8px wide — well under the 44x44 minimum (WCAG 2.5.5, Apple HIG).
   An invisible centred overlay grows the hit area without moving anything or
   resizing any text or icon. Padding alone could not fix "X" without visibly
   spreading the footer apart.
   Deliberately excluded: the support email inside a FAQ answer. It is an
   inline target in a block of text, which 2.5.5 exempts, and a 44px box there
   would overlap the lines above and below. */
/* .intro__skip is deliberately absent here — it is already `position:
   absolute`, which is just as valid a containing block for the overlay, and
   this rule would otherwise override it and yank the button to the top-left. */
.header__nav a,
.footer__nav a,
.brand,
.intro__replay { position: relative; }

.header__nav a::after,
.footer__nav a::after,
.brand::after,
.intro__replay::after,
.intro__skip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  min-width: 44px;
  height: 44px;
}

/* ── Motion ─────────────────────────────────────────────────────────────────
   Two kinds of animation live here and the distinction matters:

   1. Time-based (hero entrance, floats, glow pulse) — these run on load in
      every browser, so they sit OUTSIDE the @supports guard.
   2. Scroll-driven (section reveals) — these start at opacity 0 and only
      ever reach opacity 1 if the browser drives them. They MUST stay INSIDE
      the guard; outside it, Safari and Firefox would render blank sections.

   Every animation uses fill-mode `backwards`, never `forwards`/`both`: the
   from-state applies before the animation, and afterwards the element falls
   back to its own styles. That end state is identical to the last keyframe,
   and it leaves :hover transforms and their transitions free to work — a
   forwards fill would pin the transform and kill both.
   ───────────────────────────────────────────────────────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}
@keyframes blurIn {
  from { opacity: 0; filter: blur(14px); transform: scale(1.04); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(26px) scale(0.88); }
  to { opacity: 1; transform: none; }
}
@keyframes flipIn {
  from { opacity: 0; transform: perspective(1000px) rotateX(24deg) translateY(50px); }
  to { opacity: 1; transform: perspective(1000px) rotateX(0deg) translateY(0); }
}
@keyframes lineUp {
  from { transform: translateY(115%); }
  to { transform: none; }
}
@keyframes phoneIn {
  from { opacity: 0; transform: translateY(120px) rotate(5deg) scale(0.92); }
  to { opacity: 1; transform: none; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes floatDown {
  0%, 100% { transform: translateY(36px); }
  50% { transform: translateY(24px); }
}
@keyframes floatDeep {
  0%, 100% { transform: translateY(60px); }
  50% { transform: translateY(48px); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Scroll-driven reveals — guarded, see note above. */
@supports (animation-timeline: view()) {
  .rise, .blur-in, .flip-in, .pop-in {
    animation-fill-mode: backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  .rise { animation-name: rise; animation-duration: 0.9s; }
  .blur-in { animation-name: blurIn; animation-duration: 1s; }
  .blur-in--slow { animation-duration: 1.1s; }
  .flip-in { animation-name: flipIn; animation-duration: 1s; animation-timing-function: var(--ease-out-back); }
  .pop-in { animation-name: popIn; animation-duration: 0.9s; animation-timing-function: var(--ease-out-back); }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .blur-in, .flip-in, .pop-in,
  .hero__copy .eyebrow--lg, .hero__line > span, .hero__text,
  .store-btn--solid, .store-btn--outline,
  .phone, .glow--hero-tr, .faq__item p {
    animation: none;
  }
  .hero__tilt, .card, .store-btn { transition: none; }
  html { scroll-behavior: auto; }
}