:root {
  --paper: #e9dcc5;
  --paper-deep: #cbb895;
  --ink: #11100e;
  --night: #111720;
  --amber: #c98813;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: #11100e;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  color: inherit;
}

.gateway {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
}

.hero {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      rgba(235, 222, 198, 0.32) 0%,
      rgba(235, 222, 198, 0.08) 50%,
      rgba(17, 16, 14, 0.08) 100%
    ),
    url("/cinema-postal-hero.png") center / cover no-repeat;
  animation: reveal-background 1.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

.gateway--alternate .hero {
  background:
    linear-gradient(
      90deg,
      rgba(235, 222, 198, 0.23) 0%,
      rgba(235, 222, 198, 0.04) 54%,
      rgba(17, 16, 14, 0.06) 100%
    ),
    url("/cinema-postal-hero-sun.png") center / cover no-repeat;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.22;
  background-image: repeating-linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.08) 0,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: soft-light;
  animation: reveal-content 0.9s ease 0.8s both;
}

.masthead {
  position: absolute;
  top: clamp(22px, 4vw, 54px);
  right: clamp(22px, 4vw, 58px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(17, 16, 14, 0.76);
  animation: reveal-content 1s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both;
}

.mark {
  width: 104px;
  height: auto;
  opacity: 0.72;
}

.domain {
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(17, 16, 14, 0.35);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.identity {
  position: absolute;
  top: 50%;
  left: clamp(34px, 5vw, 92px);
  width: min(570px, calc(100vw - 68px));
  transform: translateY(-43%);
  animation: reveal-identity 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.92s both;
}

.eyebrow {
  margin: 0 0 18px;
  color: #6d5a3d;
  font-family: "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  font-size: clamp(3.5rem, 5.5vw, 6.2rem);
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.88;
  white-space: nowrap;
  text-transform: uppercase;
}

.genre {
  margin: clamp(18px, 2vw, 28px) 0 16px;
  font-family: "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  font-size: clamp(0.82rem, 1.25vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.accent-rule {
  display: block;
  width: 92px;
  height: 3px;
  background: var(--amber);
}

.intro {
  max-width: 350px;
  margin: 21px 0 26px;
  color: #493f31;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.95rem, 1.1vw, 1.06rem);
  line-height: 1.55;
}

.enter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 350px);
  min-height: 58px;
  padding: 0 20px;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, background-color 180ms ease;
}

.enter:hover {
  transform: translateY(-2px);
  background: #895c0a;
}

.enter:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.arrow {
  font-size: 1.4rem;
  line-height: 1;
}

.destination {
  width: min(100%, 350px);
  margin: 12px 0 0;
  color: #6d6456;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

footer {
  position: absolute;
  right: clamp(22px, 4vw, 58px);
  bottom: clamp(22px, 3.5vw, 48px);
  color: rgba(239, 225, 202, 0.84);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  animation: reveal-content 1s ease 1.18s both;
}

@keyframes reveal-background {
  from {
    opacity: 0;
    transform: scale(1.025);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reveal-content {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes reveal-identity {
  from {
    opacity: 0;
    transform: translateY(calc(-43% + 20px));
  }
  to {
    opacity: 1;
    transform: translateY(-43%);
  }
}

@media (max-width: 760px) {
  .gateway {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    padding-top: 52svh;
  }

  .hero {
    inset: 0 0 auto;
    height: 54svh;
    background:
      linear-gradient(180deg, rgba(235, 222, 198, 0.08), rgba(17, 16, 14, 0.22)),
      url("/cinema-postal-hero.png") 68% center / cover no-repeat;
  }

  .gateway--alternate .hero {
    background:
      linear-gradient(180deg, rgba(235, 222, 198, 0.04), rgba(17, 16, 14, 0.2)),
      url("/cinema-postal-hero-sun.png") 67% center / cover no-repeat;
  }

  .masthead {
    top: 18px;
    right: 18px;
  }

  .mark {
    width: 84px;
    filter: invert(1) sepia(0.12) saturate(0.6);
    opacity: 0.9;
  }

  .domain {
    display: none;
  }

  .identity {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    flex: 1;
    padding: 30px 24px 22px;
    transform: none;
    background: var(--paper);
    animation-name: reveal-identity-mobile;
  }

  h1 {
    font-size: clamp(2.55rem, 12.3vw, 4rem);
    letter-spacing: -0.07em;
    line-height: 0.9;
  }

  .genre {
    margin-top: 18px;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }

  .intro {
    margin: 18px 0 22px;
  }

  footer {
    position: relative;
    right: auto;
    bottom: auto;
    justify-content: center;
    padding: 15px 24px 20px;
    background: var(--paper);
    color: #655b4c;
    text-align: center;
  }
}

@keyframes reveal-identity-mobile {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .grain,
  .masthead,
  .identity,
  footer,
  .enter {
    opacity: 1;
    animation: none;
    transition: none;
  }
}