/* ==========================================================================
   Movie Landing Page — Styles
   Cinematic, responsive, accessible design system
   ========================================================================== */

:root {
  /* Color scheme sampled from the "Walking On Water" poster: a cool teal
     lake and sky, misty mountains, and a white robe lit by soft daylight. */
  --bg-dark: #060b0c;
  --bg-card: #0d1a1c;
  --bg-elevated: #14262a;
  --text-primary: #eef5f4;
  --text-secondary: #a9c4c3;
  --text-muted: #6c8988;
  --accent: #146b7a;
  --accent-hover: #1c8598;
  --on-accent: #f2faf9;
  --border: rgba(255, 255, 255, 0.08);
  --overlay: rgba(6, 11, 12, 0.75);
  --shadow-poster: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --radius: 8px;
  --radius-lg: 12px;
  --transition: 0.25s ease;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --header-height: 72px;
  --container-max: 1140px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Without this, elements whose class sets `display` (e.g. .btn) stay
   visually shown even when their `hidden` attribute is set — author
   styles always outrank the browser's built-in [hidden] rule. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-dark);
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header & Navigation */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  transition: background var(--transition), box-shadow var(--transition);
}

.site-header--scrolled {
  background: rgba(6, 11, 12, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.nav__logo {
  display: flex;
  align-items: center;
  transition: opacity var(--transition);
}

.nav__logo img {
  height: 44px;
  width: auto;
}

.nav__logo:hover {
  opacity: 0.85;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  transition: transform var(--transition), opacity var(--transition);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--transition);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--text-primary);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  width: 100%;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 107, 122, 0.35);
}

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.btn--large {
  padding: 1rem 2.5rem;
  font-size: 0.9375rem;
}

.btn--full {
  width: 100%;
}

.btn--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(1.02);
  animation: heroZoom 20s ease-in-out infinite alternate;
}

@keyframes heroZoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.08); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(6, 11, 12, 0.95) 0%, rgba(6, 11, 12, 0.7) 45%, rgba(6, 11, 12, 0.4) 100%),
    linear-gradient(to top, var(--bg-dark) 0%, transparent 40%);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.hero__text {
  /* Query container so .hero__title (below) can size itself off the text
     column's own resolved width instead of the raw viewport. */
  container-type: inline-size;
}

.hero__tagline {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.hero__title {
  font-family: var(--font-display);
  /* Sized off the text column's own width (cqw, from the container-type on
     .hero__text) rather than the viewport (vw), so it tracks the real
     available space at every size, including the stacked mobile layout.
     14.5cqw is calibrated (via canvas measureText against the actual title
     copy/font) to land near the 4.5rem cap whenever the column has room,
     while still shrinking to fit a narrower column instead of wrapping. */
  font-size: clamp(2rem, 14.5cqw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.hero__description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__poster {
  flex-shrink: 0;
}

.hero__poster img {
  width: clamp(340px, 42vw, 640px);
  aspect-ratio: 37 / 20;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-poster);
}

/* Sections */

.section {
  padding: 5rem 0;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
}

.section__title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--accent);
}

/* Trailer */

.trailer {
  background: var(--bg-card);
}

.trailer__wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-poster);
  background: var(--bg-elevated);
}

.trailer__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.trailer__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* About */

.about__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: start;
}

.about__text p {
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.about__text p:last-child {
  margin-bottom: 0;
}

.about__poster img {
  width: 520px;
  max-width: 100%;
  aspect-ratio: 37 / 20;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-poster);
}

/* Details */

.details {
  background: var(--bg-card);
}

.details__intro {
  color: var(--text-secondary);
  margin-top: -1rem;
  margin-bottom: 2rem;
  max-width: 480px;
}

.details__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.details__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--accent);
}

.details__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.details__value {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

/* CTA */

.cta {
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20, 107, 122, 0.14) 0%, transparent 70%);
  pointer-events: none;
}

.cta__inner {
  text-align: center;
  position: relative;
}

.cta__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.cta__text {
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-size: 1.125rem;
}

/* Email Subscription (Kit embed) */

.updates__inner {
  max-width: 520px;
  margin: 0 auto;
}

.updates__intro {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.email-subscription {
  background: var(--bg-card);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.email-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.email-form__input {
  flex: 1 1 220px;
  /* Flex items default to `min-width: auto`, which floors shrinking at the
     input's own content size instead of the flex-basis above — on a narrow
     screen that floor can exceed the space left beside the button, pushing
     the input past the card's padding and overlapping its border instead of
     wrapping cleanly. Overriding to 0 lets it shrink (or wrap) freely. */
  min-width: 0;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.email-form__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.email-form__submit {
  flex: 0 0 auto;
}

.email-form__message {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.email-form__message--error {
  color: #e05a5a;
}

.email-form__frame {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer */

.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer__copy {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.footer__nav {
  display: flex;
  gap: 1.5rem;
}

.footer__nav a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.footer__nav a:hover {
  color: var(--accent);
}

/* Responsive */

@media (max-width: 900px) {
  .details__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__poster {
    order: -1;
  }

  .hero__poster img {
    margin: 0 auto;
    width: min(100%, 440px);
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__poster {
    order: -1;
    text-align: center;
  }

  .about__poster img {
    margin: 0 auto;
    width: min(100%, 440px);
  }
}

@media (max-width: 768px) {
  .nav__toggle {
    display: flex;
  }

  .nav__menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(300px, 85vw);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
    background: rgba(6, 11, 12, 0.98);
    backdrop-filter: blur(16px);
    transform: translateX(100%);
    transition: transform var(--transition);
    border-left: 1px solid var(--border);
  }

  .nav__menu--open {
    transform: translateX(0);
  }

  .nav__link {
    font-size: 1.125rem;
  }

  .section {
    padding: 3.5rem 0;
  }

  .hero__overlay {
    background:
      linear-gradient(to bottom, rgba(6, 11, 12, 0.7) 0%, rgba(6, 11, 12, 0.9) 60%, var(--bg-dark) 100%);
  }
}

@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .details__grid {
    grid-template-columns: 1fr;
  }

  .email-subscription {
    padding: 1.5rem;
  }

  /* Stack the form and center the button — only at this narrow, mobile-scale
     width. Above it the original side-by-side, left-aligned layout is left
     untouched. */
  .email-form {
    flex-direction: column;
    align-items: center;
  }

  .email-form__input {
    /* Reset the row-layout flex-basis, which would otherwise be read as a
       height (220px) once flex-direction switches to column. */
    flex: 0 0 auto;
    width: 100%;
  }

  .email-form__message {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero__bg {
    animation: none;
  }

  .btn:hover {
    transform: none;
  }
}