:root {
  --ink: #f6f1e9;
  --soft-ink: rgba(250, 246, 238, 0.92);
  --shadow: rgba(0, 0, 0, 0.62);
  --edge: rgba(255, 255, 255, 0.14);
  --strip-height: clamp(2.85rem, 5.2vw, 4rem);
  --strip-segment-width: clamp(11.75rem, 15vw, 18rem);
  --duration: 9.8s;
  --ease-in: cubic-bezier(0.72, 0, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/archivo-black-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html {
  block-size: 100%;
  background: #050506;
}

body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #050506;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-inline-size: 100%;
}

.page-shell {
  position: relative;
  isolation: isolate;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  overflow: hidden;
}

.media-layer,
.fallback-image,
.background-video,
.tone-map,
.texture-map,
.edge-frame {
  position: fixed;
  inset: 0;
}

.media-layer {
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, 0.08), transparent 38%),
    #050506;
}

.fallback-image,
.background-video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.fallback-image {
  background-image: url("https://assets.rthmplt.com/poster-landscape.jpg");
  background-position: center;
  background-size: cover;
  opacity: 1;
  transform: scale(1.015);
  transition: opacity 650ms ease;
}

.background-video {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.01);
  visibility: hidden;
  transition: opacity 700ms ease;
}

body.video-ready .background-video {
  opacity: 1;
  visibility: visible;
}

body.video-ready .fallback-image {
  opacity: 0;
}

body.video-fallback .fallback-image,
html[data-motion="reduced"] .fallback-image {
  opacity: 1;
}

html[data-motion="reduced"] .background-video {
  display: none;
}

.tone-map {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0.62)),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.58) 78%);
  mix-blend-mode: multiply;
}

.texture-map {
  z-index: 2;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 9px
    );
  mask-image: radial-gradient(ellipse at center, black 28%, transparent 82%);
}

.edge-frame {
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    inset 0 0 80px rgba(0, 0, 0, 0.58);
}

.coming-soon-strip {
  position: fixed;
  z-index: 6;
  inset: 0 0 auto;
  block-size: calc(var(--strip-height) + env(safe-area-inset-top));
  padding-block-start: env(safe-area-inset-top);
  overflow: hidden;
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(5, 5, 6, 0.34);
  box-shadow:
    0 1.1rem 2.8rem rgba(0, 0, 0, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.strip-mask {
  position: relative;
  overflow: hidden;
  block-size: var(--strip-height);
}

.strip-track {
  display: flex;
  align-items: center;
  inline-size: max-content;
  min-inline-size: 200vw;
  min-block-size: 100%;
  opacity: 0.82;
  transform: translate3d(-50%, 0, 0);
  animation: strip-run 20s linear infinite;
  will-change: transform;
}

.strip-lane {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-inline-size: 100vw;
}

.strip-segment {
  display: inline-flex;
  flex: 1 0 var(--strip-segment-width);
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.55rem, 1vw, 0.9rem);
  min-inline-size: var(--strip-segment-width);
  padding-inline-start: clamp(0.65rem, 1vw, 1rem);
}

.strip-item {
  color: rgba(255, 252, 246, 0.92);
  font-family:
    "Archivo Black", Impact, Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0.55rem 1.1rem rgba(0, 0, 0, 0.42);
  white-space: nowrap;
}

.strip-lane img {
  inline-size: clamp(1.35rem, 2.7vw, 1.85rem);
  block-size: auto;
  opacity: 0.9;
  filter:
    drop-shadow(0 0.3rem 0.55rem rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 0.9rem rgba(255, 255, 255, 0.11));
}

.coming-soon {
  display: grid;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
}

.brand-lockup {
  position: relative;
  display: grid;
  justify-items: center;
  inline-size: min(78vw, 26rem);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  opacity: 0;
  animation: lockup-cycle var(--duration) var(--ease-in) infinite both;
  will-change: transform, opacity;
}

.brand-lockup::before,
.brand-lockup::after {
  position: absolute;
  inset: 50% auto auto 50%;
  content: "";
  inline-size: clamp(15rem, 40vw, 34rem);
  aspect-ratio: 1;
  border: 1px solid rgba(246, 241, 233, 0.18);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.66);
  animation: signal-ring var(--duration) ease-out infinite both;
}

.brand-lockup::after {
  inline-size: clamp(19rem, 52vw, 42rem);
  animation-delay: 260ms;
  border-color: rgba(246, 241, 233, 0.1);
}

.brand-mark {
  position: relative;
  inline-size: clamp(8.4rem, 18vw, 13.5rem);
  aspect-ratio: 968 / 1148;
  display: grid;
  place-items: center;
  filter:
    drop-shadow(0 1.35rem 2.5rem var(--shadow))
    drop-shadow(0 0 2.8rem rgba(255, 255, 255, 0.1));
}

.brand-logo {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: auto;
}

.brand-logo-trail {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(10px);
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  animation: logo-trail-a var(--duration) ease-in-out infinite both;
  will-change: transform, opacity;
}

.brand-logo-trail-b {
  filter: blur(14px);
  animation-name: logo-trail-b;
}

.tagline {
  position: relative;
  margin: 0.95rem 0 0;
  max-inline-size: min(84vw, 28rem);
  color: rgba(255, 252, 246, 0.98);
  font-family:
    "Archivo Black", Impact, Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.42rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 0.25px rgba(255, 255, 255, 0.72);
  text-shadow:
    0 0.75rem 1.35rem rgba(0, 0, 0, 0.78),
    0 0 0.85rem rgba(255, 255, 255, 0.2);
}

.tagline::before,
.tagline::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  opacity: 0;
  color: rgba(255, 252, 246, 0.56);
  filter: blur(7px);
  pointer-events: none;
  animation: text-trail var(--duration) ease-in-out infinite both;
}

.tagline::after {
  color: rgba(255, 252, 246, 0.38);
  filter: blur(11px);
  animation-delay: 70ms;
}

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

@keyframes lockup-cycle {
  0%,
  7% {
    opacity: 0;
    transform:
      perspective(900px)
      translate3d(0, 0.9rem, 0)
      rotateY(-86deg)
      rotateZ(-7deg)
      scale(0.86);
  }

  16%,
  62% {
    opacity: 1;
    transform:
      perspective(900px)
      translate3d(0, 0, 0)
      rotateY(0deg)
      rotateZ(0deg)
      scale(1);
  }

  68% {
    opacity: 1;
    transform:
      perspective(900px)
      translate3d(0, -0.15rem, 0)
      rotateY(10deg)
      rotateZ(1deg)
      scale(1);
  }

  82%,
  100% {
    opacity: 0;
    transform:
      perspective(900px)
      translate3d(0, -0.75rem, 0)
      rotateY(88deg)
      rotateZ(6deg)
      scale(0.88);
  }
}

@keyframes logo-trail-a {
  0%,
  6%,
  22%,
  64%,
  92%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1);
  }

  10% {
    opacity: 0.24;
    transform: translate3d(-1.5rem, 0.08rem, 0) rotateZ(-5deg) scale(0.97);
  }

  13% {
    opacity: 0.12;
    transform: translate3d(-0.7rem, 0, 0) rotateZ(-2deg) scale(0.99);
  }

  74% {
    opacity: 0.16;
    transform: translate3d(1.25rem, -0.08rem, 0) rotateZ(4deg) scale(0.99);
  }

  79% {
    opacity: 0.26;
    transform: translate3d(2rem, -0.12rem, 0) rotateZ(6deg) scale(0.96);
  }
}

@keyframes logo-trail-b {
  0%,
  8%,
  24%,
  66%,
  92%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1);
  }

  11% {
    opacity: 0.18;
    transform: translate3d(1.3rem, -0.05rem, 0) rotateZ(4deg) scale(0.98);
  }

  76% {
    opacity: 0.18;
    transform: translate3d(-1.5rem, 0.08rem, 0) rotateZ(-5deg) scale(0.98);
  }
}

@keyframes text-trail {
  0%,
  8%,
  23%,
  65%,
  91%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  11% {
    opacity: 0.46;
    transform: translate3d(-0.95rem, 0, 0);
  }

  77% {
    opacity: 0.38;
    transform: translate3d(0.95rem, 0, 0);
  }
}

@keyframes signal-ring {
  0%,
  10%,
  72%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.66);
  }

  18% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0.82);
  }

  52% {
    opacity: 0.11;
    transform: translate(-50%, -50%) scale(1.06);
  }

  64% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.14);
  }
}

@keyframes strip-run {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (orientation: portrait) {
  .fallback-image {
    background-image: url("https://assets.rthmplt.com/poster-portrait.jpg");
  }

  .brand-lockup {
    inline-size: min(84vw, 22rem);
  }

  .brand-mark {
    inline-size: clamp(7.6rem, 34vw, 12.4rem);
  }
}

@media (width <= 420px) {
  :root {
    --strip-height: 2.8rem;
  }

  .strip-track {
    animation-duration: 16s;
  }

  .brand-mark {
    inline-size: clamp(7rem, 38vw, 10rem);
  }

  .tagline {
    margin-block-start: 0.86rem;
    font-size: 1.02rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .brand-lockup,
  .brand-lockup::before,
  .brand-lockup::after,
  .brand-logo-trail,
  .strip-track,
  .tagline::before,
  .tagline::after {
    animation: none !important;
  }

  .brand-lockup {
    opacity: 1;
    transform: none;
  }

  .brand-lockup::before,
  .brand-lockup::after,
  .brand-logo-trail,
  .tagline::before,
  .tagline::after {
    display: none;
  }

  .fallback-image,
  .background-video {
    transition: none;
  }
}