/* ==========================================================
   404 PAGE - LOST REEL
========================================================== */


/* ==========================================================
   COLORS
========================================================== */

:root {

  --black:
    #050505;

  --black-soft:
    #0d0b0a;

  --panel:
    #17110f;

  --burgundy:
    #4b111a;

  --burgundy-deep:
    #21070b;

  --gold:
    #c79a47;

  --gold-light:
    #efd58f;

  --cream:
    #efe6d6;

  --muted:
    #aa9b88;

}


/* ==========================================================
   RESET
========================================================== */

* {

  box-sizing:
    border-box;

  margin:
    0;

  padding:
    0;

}


html,
body {

  min-height:
    100%;

}


body {

  margin:
    0;

  min-height:
    100vh;

  overflow-x:
    hidden;

  color:
    var(--cream);

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  background:

    radial-gradient(
      circle at 50% 20%,
      rgba(93, 19, 30, 0.25),
      transparent 35%
    ),

    linear-gradient(
      #10090b,
      #030303 70%
    );

}


/* ==========================================================
   FILM GRAIN
========================================================== */

.film-grain {

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  pointer-events:
    none;

  opacity:
    0.06;

  background-image:

    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");

  animation:
    grainShift 0.25s steps(2) infinite;

}


@keyframes grainShift {

  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1%, 1%);
  }

  50% {
    transform: translate(1%, -1%);
  }

  75% {
    transform: translate(1%, 1%);
  }

  100% {
    transform: translate(0, 0);
  }

}


/* ==========================================================
   MAIN WRAPPER
========================================================== */

.lost-screening {

  width:
    min(1100px, 94%);

  margin:
    30px auto 0;

}


/* ==========================================================
   MARQUEE
========================================================== */

.marquee {

  position:
    relative;

  overflow:
    hidden;

  padding:
    24px 20px 26px;

  text-align:
    center;

  color:
    var(--gold-light);

  background:

    radial-gradient(
      circle at center,
      rgba(103, 25, 36, 0.7),
      rgba(35, 7, 11, 0.98)
    );

  border:
    1px solid
    var(--gold);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,0.65);

}


.marquee::before {

  content:
    "";

  position:
    absolute;

  inset:
    8px;

  border:
    1px solid
    rgba(199,154,71,0.3);

}


.marquee-bulbs {

  position:
    relative;

  z-index:
    2;

  color:
    var(--gold-light);

  font-size:
    0.7rem;

  letter-spacing:
    10px;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-shadow:
    0 0 8px
    rgba(239,213,143,0.6);

  animation:
    bulbPulse 2s ease-in-out infinite;

}


.marquee-bulbs.bottom {

  margin-top:
    9px;

}


@keyframes bulbPulse {

  0%,
  100% {

    opacity:
      0.55;

  }

  50% {

    opacity:
      1;

  }

}


.marquee-small {

  position:
    relative;

  z-index:
    2;

  margin-top:
    10px;

  color:
    var(--gold);

  font-size:
    0.55rem;

  font-weight:
    600;

  letter-spacing:
    5px;

  text-transform:
    uppercase;

}


.marquee h1 {

  position:
    relative;

  z-index:
    2;

  margin:
    5px 0 -4px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(5rem, 15vw, 9rem);

  font-weight:
    600;

  line-height:
    0.85;

  letter-spacing:
    5px;

  text-shadow:

    0 5px 20px
    rgba(0,0,0,0.7),

    0 0 18px
    rgba(239,213,143,0.1);

}


.marquee-title {

  position:
    relative;

  z-index:
    2;

  color:
    var(--cream);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(1.4rem, 4vw, 2.2rem);

  font-style:
    italic;

  letter-spacing:
    2px;

}


/* ==========================================================
   SCREENING ROOM
========================================================== */

.screening-room {

  position:
    relative;

  min-height:
    680px;

  overflow:
    hidden;

  padding:
    55px 35px 180px;

  background:

    linear-gradient(
      to bottom,
      #050505,
      #090606 55%,
      #12090b 100%
    );

  border-left:
    1px solid
    rgba(199,154,71,0.45);

  border-right:
    1px solid
    rgba(199,154,71,0.45);

  border-bottom:
    1px solid
    var(--gold);

}


/* ==========================================================
   PROJECTOR BEAM
========================================================== */

.projector-beam {

  position:
    absolute;

  top:
    -100px;

  left:
    50%;

  width:
    780px;

  height:
    600px;

  transform:
    translateX(-50%);

  clip-path:
    polygon(
      43% 0,
      57% 0,
      100% 100%,
      0 100%
    );

  background:

    linear-gradient(
      rgba(238,220,180,0.08),
      rgba(238,220,180,0.015)
    );

  filter:
    blur(10px);

  pointer-events:
    none;

}


/* ==========================================================
   MOVIE SCREEN
========================================================== */

.movie-screen {

  position:
    relative;

  z-index:
    3;

  width:
    min(760px, 100%);

  min-height:
    410px;

  margin:
    0 auto;

  padding:
    12px;

  background:
    #211813;

  border:
    1px solid
    rgba(199,154,71,0.35);

  box-shadow:

    0 25px 70px
    rgba(0,0,0,0.75),

    0 0 45px
    rgba(239,213,143,0.03);

}


.movie-screen::before {

  content:
    "";

  position:
    absolute;

  inset:
    6px;

  border:
    1px solid
    rgba(199,154,71,0.16);

  pointer-events:
    none;

}


.error-card {

  position:
    relative;

  z-index:
    4;

  min-height:
    385px;

  padding:
    55px
    55px
    45px;

  text-align:
    center;

  background:

    radial-gradient(
      circle at center,
      rgba(68, 54, 43, 0.23),
      transparent 50%
    ),

    #d8cdb8;

  color:
    #2a211b;

  overflow:
    hidden;

}


/* old movie flicker */

.screen-flicker {

  position:
    absolute;

  inset:
    12px;

  z-index:
    5;

  pointer-events:
    none;

  background:
    rgba(255,255,255,0.02);

  animation:
    flicker 0.18s infinite alternate;

}


@keyframes flicker {

  from {

    opacity:
      0.05;

  }

  to {

    opacity:
      0.16;

  }

}


/* vertical scratch */

.error-card::after {

  content:
    "";

  position:
    absolute;

  top:
    -20%;

  left:
    27%;

  width:
    1px;

  height:
    140%;

  background:
    rgba(40,32,25,0.12);

  animation:
    scratchMove 2.7s linear infinite;

}


@keyframes scratchMove {

  0% {

    left:
      20%;

    opacity:
      0;

  }

  10% {

    opacity:
      0.4;

  }

  50% {

    left:
      76%;

  }

  100% {

    left:
      83%;

    opacity:
      0;

  }

}


/* ==========================================================
   ERROR TEXT
========================================================== */

.error-kicker {

  color:
    #7f5523;

  font-size:
    0.58rem;

  font-weight:
    600;

  letter-spacing:
    4px;

  text-transform:
    uppercase;

}


.error-card h2 {

  margin:
    9px 0 5px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(2.7rem, 6vw, 4.5rem);

  font-weight:
    700;

  line-height:
    0.95;

}


.error-divider {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  width:
    min(350px, 80%);

  margin:
    18px auto;

  color:
    #9d6b2d;

}


.error-divider::before,
.error-divider::after {

  content:
    "";

  flex:
    1;

  height:
    1px;

  background:
    linear-gradient(
      to right,
      transparent,
      #9d6b2d
    );

}


.error-divider::after {

  background:
    linear-gradient(
      to left,
      transparent,
      #9d6b2d
    );

}


.error-card p {

  max-width:
    560px;

  margin:
    0 auto 10px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    1.2rem;

  line-height:
    1.4;

}


/* ==========================================================
   BUTTONS
========================================================== */

.ticket-row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    18px;

  margin-top:
    28px;

}


/* ticket button */

.return-ticket {

  position:
    relative;

  display:
    block;

  width:
    165px;

  padding:
    10px 15px;

  color:
    #26190d;

  text-decoration:
    none;

  text-transform:
    uppercase;

  background:

    linear-gradient(
      135deg,
      #ecd28d,
      #be8a35
    );

  border:
    1px solid
    #f2da9a;

  box-shadow:
    0 7px 18px
    rgba(0,0,0,0.25);

  transform:
    rotate(-1deg);

  transition:
    transform 0.25s ease,
    filter 0.25s ease;

}


.return-ticket::before,
.return-ticket::after {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  width:
    14px;

  height:
    14px;

  border-radius:
    50%;

  background:
    #d8cdb8;

  transform:
    translateY(-50%);

}


.return-ticket::before {

  left:
    -7px;

}


.return-ticket::after {

  right:
    -7px;

}


.ticket-small {

  display:
    block;

  font-size:
    0.45rem;

  font-weight:
    600;

  letter-spacing:
    2px;

}


.ticket-main {

  display:
    block;

  margin:
    5px 0;

  padding:
    5px 0;

  border-top:
    1px dashed
    rgba(50,30,12,0.5);

  border-bottom:
    1px dashed
    rgba(50,30,12,0.5);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    1.2rem;

  font-weight:
    700;

}


.ticket-bottom {

  display:
    block;

  font-size:
    0.45rem;

  letter-spacing:
    2px;

}


.return-ticket:hover {

  transform:
    rotate(0deg)
    translateY(-3px)
    scale(1.03);

  filter:
    brightness(1.08);

}


.secondary-link {

  color:
    #5e4328;

  font-size:
    0.58rem;

  font-weight:
    600;

  letter-spacing:
    2px;

  text-decoration:
    none;

  text-transform:
    uppercase;

  border-bottom:
    1px solid
    rgba(94,67,40,0.4);

}


.secondary-link:hover {

  color:
    #2a211b;

  border-color:
    #2a211b;

}


.final-line {

  margin-top:
    28px;

  color:
    rgba(42,33,27,0.55);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    0.95rem;

  font-style:
    italic;

}


/* ==========================================================
   THEATER SEATS
========================================================== */

.seats {

  position:
    absolute;

  left:
    50%;

  bottom:
    -5px;

  z-index:
    2;

  width:
    min(950px, 105%);

  transform:
    translateX(-50%);

}


.seat-row {

  display:
    flex;

  justify-content:
    center;

  gap:
    14px;

  margin-bottom:
    5px;

  transform:
    perspective(600px)
    rotateX(15deg);

}


.seat-row span {

  width:
    82px;

  height:
    56px;

  border-radius:
    10px 10px 4px 4px;

  background:

    linear-gradient(
      #5e1721,
      #2a0a0e
    );

  border:
    1px solid
    rgba(139,55,63,0.35);

  box-shadow:
    inset 0 -12px 20px
    rgba(0,0,0,0.35);

}


.seat-row.second {

  transform:
    scale(1.04);

  opacity:
    0.9;

}


.seat-row.third {

  transform:
    scale(1.08);

  opacity:
    0.78;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

  .lost-screening {

    width:
      95%;

    margin-top:
      16px;

  }


  .marquee {

    padding:
      20px 10px 24px;

  }


  .marquee h1 {

    font-size:
      5rem;

  }


  .marquee-bulbs {

    letter-spacing:
      6px;

  }


  .screening-room {

    padding:
      35px 15px 140px;

  }


  .error-card {

    padding:
      40px
      25px
      36px;

  }


  .error-card p {

    font-size:
      1.08rem;

  }


  .ticket-row {

    flex-direction:
      column;

  }


  .seat-row {

    gap:
      6px;

  }


  .seat-row span {

    width:
      45px;

    height:
      37px;

  }

}