/* studio.agenc.ag: AgenC Studios. A cinema-black page that opens on the
   studio ident; every release is a poster with a silent loop, and every
   title links to its premiere on X. Colors come from the --studio-* tokens
   (packages/ui/tokens-v2.css), sampled from the ident itself. */

.StudioLanding_root__qdW8W {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 1280px;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--studio-black);
  color: var(--studio-bone);
  font-family: var(--font-body), system-ui, sans-serif;
}

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

.StudioLanding_root__qdW8W :focus-visible {
  outline: 2px solid var(--studio-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Wide-tracked caps, after the ident's S T U D I O S. */
.StudioLanding_label__ytpiN {
  font-family: var(--font-editorial-mono), ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--studio-bone-dim);
}

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

/* ============================== top bar ============================== */

.StudioLanding_bar__bgAMA {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gutter);
  /* Black on the black hero, so it only shows once posters scroll under it. */
  background: color-mix(in srgb, var(--studio-black) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}

.StudioLanding_brand___3kii {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* The AgenC mark, filled with the rim light (the SVG is the site's own). */
.StudioLanding_mark__KwE1w {
  display: block;
  width: 22px;
  height: 22px;
  background: var(--studio-gold);
  -webkit-mask: url("/landing-v4/agenc-logo.svg") center / contain no-repeat;
  mask: url("/landing-v4/agenc-logo.svg") center / contain no-repeat;
}

.StudioLanding_brandWord__eW2eL {
  font-family: var(--font-editorial-mono), ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--studio-bone);
}

.StudioLanding_nav__jmB0M {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 32px);
  font-size: 13px;
  color: var(--studio-bone-muted);
}

.StudioLanding_nav__jmB0M a {
  transition: color 160ms var(--ease);
}

.StudioLanding_nav__jmB0M a:hover {
  color: var(--studio-bone);
}

.StudioLanding_nav__jmB0M .StudioLanding_navOut__zZKii {
  color: var(--studio-bone);
}

@media (max-width: 760px) {
  .StudioLanding_navSection__JfBC9 {
    display: none;
  }
}

/* ================================ hero ================================ */

/* The ident fills the first screen like a cinema title card. Its height
   stops at the image's own 16:9, so on wide screens nothing is cropped. */
.StudioLanding_hero__XwB2O {
  position: relative;
  height: clamp(560px, 100svh, 56.25vw);
  overflow: hidden;
  background: var(--studio-black);
}

.StudioLanding_heroImage__sU8eo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  animation: StudioLanding_identIn__7l4Tr 2400ms var(--ease) both;
}

/* The haze behind the emblem, breathing slowly. */
.StudioLanding_heroGlow__cg7Gt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    38% 46% at 50% 40%,
    color-mix(in srgb, var(--studio-ember) 55%, transparent),
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0;
  animation: StudioLanding_breathe__G_PAW 7s ease-in-out 2400ms infinite alternate;
}

.StudioLanding_heroCue__5VoUF {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  animation: StudioLanding_fadeIn__leKBM 1200ms var(--ease) 1600ms both;
}

.StudioLanding_heroCue__5VoUF i {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--studio-gold), transparent);
  transform-origin: top;
  animation: StudioLanding_cue__CPbOu 2400ms var(--ease) 2800ms infinite;
}

/* Wider than 16:9 (ultrawide), cover would crop the emblem's top under the
   bar. The ident's edges are pure black, so letterboxing it is invisible. */
@media (min-aspect-ratio: 16/9) {
  .StudioLanding_heroImage__sU8eo {
    object-fit: contain;
  }
}

/* On a phone the cue would sit on the ident's own STUDIOS line. */
@media (max-width: 700px) {
  .StudioLanding_heroCue__5VoUF {
    display: none;
  }
}

@keyframes StudioLanding_identIn__7l4Tr {
  from {
    opacity: 0;
    transform: scale(1.045);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes StudioLanding_breathe__G_PAW {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}

@keyframes StudioLanding_fadeIn__leKBM {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes StudioLanding_cue__CPbOu {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* ============================== statement ============================== */

.StudioLanding_intro__aREkC {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 136px) var(--gutter) clamp(48px, 7vw, 88px);
  text-align: center;
}

.StudioLanding_statement___OPOY {
  margin: 18px 0 0;
  font-size: clamp(32px, 4.8vw, 60px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.StudioLanding_statement___OPOY span {
  color: var(--studio-gold);
}

.StudioLanding_lede__k9658 {
  max-width: 640px;
  margin: 22px auto 0;
  color: var(--studio-bone-muted);
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.6;
  text-wrap: pretty;
}

.StudioLanding_stats__HIilW {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px clamp(28px, 6vw, 72px);
  margin: clamp(36px, 5vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}

.StudioLanding_stats__HIilW strong {
  display: block;
  color: var(--studio-bone);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.StudioLanding_stats__HIilW .StudioLanding_label__ytpiN {
  display: block;
  margin-top: 8px;
}

/* ============================== featured ============================== */

.StudioLanding_featured__Y_Svz {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.StudioLanding_featuredCard__Rp64m {
  position: relative;
}

.StudioLanding_featuredFrame__oDt_s {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--studio-panel);
  box-shadow: 0 48px 140px -48px
    color-mix(in srgb, var(--studio-ember) 85%, transparent);
}

.StudioLanding_featuredShade__E8V6v {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--studio-black) 92%, transparent) 0%,
      color-mix(in srgb, var(--studio-black) 55%, transparent) 34%,
      transparent 62%
    ),
    linear-gradient(
      to right,
      color-mix(in srgb, var(--studio-black) 55%, transparent) 0%,
      transparent 55%
    );
}

.StudioLanding_featuredBody__GXKBn {
  position: absolute;
  left: clamp(20px, 4vw, 52px);
  right: clamp(20px, 4vw, 52px);
  bottom: clamp(20px, 4vw, 48px);
  max-width: 600px;
}

.StudioLanding_featuredTitle__zhzpy {
  margin: 12px 0 0;
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.StudioLanding_featuredLogline__mfuav {
  margin: 14px 0 0;
  color: var(--studio-bone);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  text-wrap: pretty;
}

.StudioLanding_featuredNote__gRdG1 {
  margin: 10px 0 0;
  color: var(--studio-bone-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.StudioLanding_actions__2cJUM {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.StudioLanding_cta__J1wvy,
.StudioLanding_ctaGhost__uREOx {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 9999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    transform 160ms var(--ease);
}

.StudioLanding_root__qdW8W .StudioLanding_cta__J1wvy {
  background: var(--studio-gold);
  color: var(--studio-on-gold);
}

.StudioLanding_cta__J1wvy:hover {
  transform: translateY(-1px);
}

.StudioLanding_root__qdW8W .StudioLanding_ctaGhost__uREOx {
  border: 1px solid var(--studio-line-2);
  color: var(--studio-bone);
  background: color-mix(in srgb, var(--studio-black) 40%, transparent);
  backdrop-filter: blur(8px);
}

.StudioLanding_ctaGhost__uREOx:hover {
  border-color: var(--studio-gold-dim);
}

.StudioLanding_ctaNote__PSAMs {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 6px;
  color: var(--studio-bone-muted);
  font-size: 14px;
}

@media (max-width: 760px) {
  .StudioLanding_featuredShade__E8V6v {
    display: none;
  }

  .StudioLanding_featuredBody__GXKBn {
    position: static;
    max-width: none;
    margin-top: 20px;
  }
}

/* ============================== sections ============================== */

.StudioLanding_section__HtVYF {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 136px) var(--gutter) 0;
  scroll-margin-top: 48px;
}

.StudioLanding_sectionHead__7l7nP {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-top: 20px;
  border-top: 1px solid var(--studio-line);
}

.StudioLanding_sectionHead__7l7nP h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.StudioLanding_sectionHead__7l7nP p {
  max-width: 520px;
  margin: 0;
  color: var(--studio-bone-muted);
  font-size: 15px;
  line-height: 1.55;
}

.StudioLanding_grid__yQK1i {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 52px) clamp(16px, 2.2vw, 28px);
}

.StudioLanding_gridFour__x2QF5 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .StudioLanding_gridFour__x2QF5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .StudioLanding_grid__yQK1i {
    grid-template-columns: minmax(0, 1fr);
  }

  .StudioLanding_gridFour__x2QF5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ================================ cards ================================ */

.StudioLanding_card__q7Vi6 {
  position: relative;
  display: flex;
  flex-direction: column;
}

.StudioLanding_frame__23O_e {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--studio-panel);
}

.StudioLanding_poster__TK8KV,
.StudioLanding_loop__NyKAd {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.StudioLanding_poster__TK8KV {
  transition: transform 700ms var(--ease);
}

/* The loop sits on the poster and fades in once frames are actually moving. */
.StudioLanding_loop__NyKAd {
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

.StudioLanding_loop__NyKAd[data-playing] {
  opacity: 1;
}

.StudioLanding_card__q7Vi6:hover .StudioLanding_poster__TK8KV,
.StudioLanding_card__q7Vi6:hover .StudioLanding_loop__NyKAd {
  transform: scale(1.015);
}

.StudioLanding_card__q7Vi6:has(a:focus-visible) .StudioLanding_frame__23O_e {
  outline: 2px solid var(--studio-gold);
  outline-offset: 3px;
}

.StudioLanding_meta__eYpjA {
  margin: 16px 0 0;
}

.StudioLanding_cardTitle__zlp_L {
  margin: 8px 0 0;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.StudioLanding_cardTitleSmall__kXkcT {
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* One link per card: the title, stretched over the whole card. */
.StudioLanding_cardTitle__zlp_L a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.StudioLanding_cardTitle__zlp_L a:focus-visible {
  outline: none;
}

.StudioLanding_logline__Rv1gG {
  margin: 8px 0 0;
  color: var(--studio-bone-muted);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.StudioLanding_loglineSmall__SmtUA {
  font-size: 13.5px;
}

.StudioLanding_credit__J7LMJ {
  margin: 8px 0 0;
  color: var(--studio-bone-dim);
  font-size: 13px;
  line-height: 1.5;
}

.StudioLanding_foot__jbnUF {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 14px;
  color: var(--studio-bone-dim);
  font-size: 13px;
}

.StudioLanding_watch__RIQbM {
  color: var(--studio-bone);
  transition: color 160ms var(--ease);
}

/* Sits above the card's stretched title link, so it stays clickable. */
.StudioLanding_play__rSFLL {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--studio-gold-dim);
  border-radius: 9999px;
  background: transparent;
  color: var(--studio-gold);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    color 160ms var(--ease);
}

.StudioLanding_play__rSFLL:hover {
  background: var(--studio-gold);
  color: var(--studio-on-gold);
}

.StudioLanding_play__rSFLL span,
.StudioLanding_cta__J1wvy span[aria-hidden] {
  font-size: 0.8em;
}

.StudioLanding_card__q7Vi6:hover .StudioLanding_watch__RIQbM {
  color: var(--studio-gold);
}

/* ============================== theater ============================== */

.StudioLanding_theater__WSoQz {
  width: min(1200px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--studio-bone);
}

.StudioLanding_theater__WSoQz::backdrop {
  background: color-mix(in srgb, var(--studio-black) 90%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.StudioLanding_theaterBar__35lsd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.StudioLanding_theaterClose__RFoxF {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--studio-line-2);
  border-radius: 9999px;
  background: transparent;
  color: var(--studio-bone);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.StudioLanding_theaterClose__RFoxF:hover {
  border-color: var(--studio-gold-dim);
}

.StudioLanding_theaterFrame__BdSnc {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--studio-black);
  box-shadow: 0 40px 120px -40px
    color-mix(in srgb, var(--studio-ember) 80%, transparent);
}

.StudioLanding_theaterFrame__BdSnc iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================ coming soon ============================ */

.StudioLanding_upcoming__5aSaC {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.StudioLanding_upcoming__5aSaC .StudioLanding_card__q7Vi6 {
  display: contents;
}

.StudioLanding_upcomingTitle__EpFP7 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .StudioLanding_upcoming__5aSaC {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================== process ============================== */

.StudioLanding_stepsLabel__LPxxo {
  margin: clamp(48px, 6vw, 72px) 0 16px;
}

.StudioLanding_steps__x8ll4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--studio-line);
  border-left: 1px solid var(--studio-line);
}

.StudioLanding_steps__x8ll4 li {
  padding: clamp(20px, 2.4vw, 28px);
  border-right: 1px solid var(--studio-line);
  border-bottom: 1px solid var(--studio-line);
}

.StudioLanding_steps__x8ll4 h3 {
  margin: 14px 0 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.StudioLanding_steps__x8ll4 p {
  margin: 8px 0 0;
  color: var(--studio-bone-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.StudioLanding_stepNumber__G5dZT {
  color: var(--studio-gold);
}

.StudioLanding_subhead__hTvcq {
  margin: clamp(48px, 6vw, 72px) 0 clamp(20px, 2.4vw, 28px);
  color: var(--studio-bone);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

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

@media (max-width: 560px) {
  .StudioLanding_steps__x8ll4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.StudioLanding_ledger__hVSkv {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 28px 0 0;
  color: var(--studio-bone-muted);
  font-size: 14px;
}

.StudioLanding_ledger__hVSkv strong {
  color: var(--studio-bone);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.StudioLanding_tools__cdhj4 {
  margin: 14px 0 0;
  color: var(--studio-bone-dim);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ================================ footer ================================ */

.StudioLanding_footer__dhW4c {
  max-width: var(--measure);
  margin: clamp(96px, 12vw, 160px) auto 0;
  padding: 0 var(--gutter) 48px;
}

.StudioLanding_footerInner__onyba {
  padding-top: 40px;
  border-top: 1px solid var(--studio-line);
}

.StudioLanding_footerTop__6mhpC {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.StudioLanding_footerTag__GCJAF {
  max-width: 420px;
  margin: 14px 0 0;
  color: var(--studio-bone-muted);
  font-size: 14px;
  line-height: 1.6;
}

.StudioLanding_footerLinks__zBPlY {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--studio-bone-muted);
}

.StudioLanding_footerLinks__zBPlY a:hover {
  color: var(--studio-bone);
}

.StudioLanding_fine__XzL74 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 36px;
  color: var(--studio-bone-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

.StudioLanding_fine__XzL74 a:hover {
  color: var(--studio-bone-muted);
}

/* ============================ reduced motion ============================ */

@media (prefers-reduced-motion: reduce) {
  .StudioLanding_heroImage__sU8eo,
  .StudioLanding_heroGlow__cg7Gt,
  .StudioLanding_heroCue__5VoUF,
  .StudioLanding_heroCue__5VoUF i {
    animation: none;
  }

  .StudioLanding_heroGlow__cg7Gt {
    opacity: 0.6;
  }

  .StudioLanding_poster__TK8KV,
  .StudioLanding_loop__NyKAd,
  .StudioLanding_cta__J1wvy,
  .StudioLanding_ctaGhost__uREOx {
    transition: none;
  }

  .StudioLanding_card__q7Vi6:hover .StudioLanding_poster__TK8KV {
    transform: none;
  }
}

/* studio.agenc.ag/experience: the overlay over the three.js scene. The canvas
   is fixed full-screen and the page never scrolls (the journey is virtual and
   loops); every readable or pressable thing floats above in this layer.
   Colours come from the --studio-* tokens (packages/ui/tokens-v2.css). */

.StudioExperience_root__SP8jq {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 44px);
  --foot: clamp(18px, 3.4vh, 30px);
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--studio-black);
  color: var(--studio-bone);
  font-family: var(--font-body), system-ui, sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

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

.StudioExperience_root__SP8jq :focus-visible {
  outline: 2px solid var(--studio-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.StudioExperience_stage__B_6iR {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.StudioExperience_srOnly__UJcYQ {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.StudioExperience_label__Yhg3b {
  font-family: var(--font-editorial-mono), ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--studio-bone-dim);
}

/* ============================== loading ============================== */

.StudioExperience_veil__eg2Q5 {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: var(--studio-black);
  transition:
    opacity 1100ms var(--ease),
    visibility 0s linear 1100ms;
}

.StudioExperience_veil__eg2Q5[data-state="ready"],
.StudioExperience_veil__eg2Q5[data-state="fallback"] {
  opacity: 0;
  visibility: hidden;
}

/* The amber mark warming up while the scene loads. */
.StudioExperience_veilMark__3S7xN {
  width: 46px;
  height: 46px;
  background: var(--studio-gold);
  -webkit-mask: url("/landing-v4/agenc-logo.svg") center / contain no-repeat;
  mask: url("/landing-v4/agenc-logo.svg") center / contain no-repeat;
  animation: StudioExperience_warm__hyZP8 1600ms ease-in-out infinite alternate;
}

@keyframes StudioExperience_warm__hyZP8 {
  from {
    opacity: 0.25;
    filter: blur(1.5px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ============================== top bar ============================== */

.StudioExperience_bar__RH4lU {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--studio-black) 70%, transparent),
    transparent
  );
}

.StudioExperience_brand__FOaL0 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.StudioExperience_mark__iZnZb {
  display: block;
  width: 22px;
  height: 22px;
  background: var(--studio-gold);
  -webkit-mask: url("/landing-v4/agenc-logo.svg") center / contain no-repeat;
  mask: url("/landing-v4/agenc-logo.svg") center / contain no-repeat;
}

.StudioExperience_brandWord__sAUKf {
  font-family: var(--font-editorial-mono), ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.StudioExperience_nav__AYhPq {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 32px);
  font-size: 13px;
  color: var(--studio-bone-muted);
}

.StudioExperience_nav__AYhPq a {
  transition: color 160ms var(--ease);
}

.StudioExperience_nav__AYhPq a:hover {
  color: var(--studio-bone);
}

.StudioExperience_nav__AYhPq .StudioExperience_navOut__L_Bla {
  color: var(--studio-bone);
}

/* ======================== the sound switch ======================== */

/* Bottom-left, quiet: on unless the visitor turns it off. */
.StudioExperience_sound__GmSMy {
  position: fixed;
  left: var(--gutter);
  bottom: var(--foot);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--studio-bone-muted);
  font-family: var(--font-editorial-mono), ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 160ms var(--ease);
}

.StudioExperience_sound__GmSMy:hover {
  color: var(--studio-bone);
}

.StudioExperience_sound__GmSMy svg {
  width: 14px;
  height: 14px;
}

/* Only while the browser holds the sound: "Click for sound". */
.StudioExperience_sound__GmSMy[data-held] {
  color: var(--studio-gold);
  animation: StudioExperience_hint__dGGZz 2400ms ease-in-out infinite;
}

@keyframes StudioExperience_hint__dGGZz {
  50% {
    opacity: 0.45;
  }
}

/* ================================ cue ================================ */

.StudioExperience_cue__4pK7m {
  position: fixed;
  left: 50%;
  bottom: var(--foot);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
  pointer-events: none;
}

.StudioExperience_cue__4pK7m[data-visible] {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 1400ms;
}

.StudioExperience_cue__4pK7m i {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--studio-gold), transparent);
  transform-origin: top;
  animation: StudioExperience_cue__4pK7m 2400ms var(--ease) infinite;
}

@keyframes StudioExperience_cue__4pK7m {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* ======================= the focused film's card ======================= */

.StudioExperience_card__0NeoQ {
  position: fixed;
  left: var(--gutter);
  bottom: calc(var(--foot) + 52px);
  z-index: 10;
  width: min(480px, calc(100vw - 2 * var(--gutter)));
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease);
  pointer-events: none;
}

/* A soft pool of shadow behind the text, never a box. */
.StudioExperience_card__0NeoQ::before {
  content: "";
  position: absolute;
  inset: -90px -140px -70px -120px;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--studio-black) 82%, transparent),
    transparent
  );
  pointer-events: none;
}

.StudioExperience_card__0NeoQ[data-visible] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Each new film's title rises into place. */
.StudioExperience_title__JJPMV {
  margin: 12px 0 0;
  overflow: hidden;
  padding-bottom: 0.08em;
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.StudioExperience_title__JJPMV span {
  display: inline-block;
  animation: StudioExperience_titleRise__k_lLL 820ms var(--ease) both;
}

@keyframes StudioExperience_titleRise__k_lLL {
  from {
    transform: translateY(105%);
  }
  to {
    transform: none;
  }
}

.StudioExperience_logline__FCKJ5 {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.5;
  text-wrap: pretty;
  animation: StudioExperience_fade__itxR7 700ms var(--ease) 120ms both;
}

@keyframes StudioExperience_fade__itxR7 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.StudioExperience_credit__BZHdO {
  margin: 10px 0 0;
  color: var(--studio-bone-muted);
  font-size: 13px;
  line-height: 1.5;
}

.StudioExperience_actions__B8bDj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.StudioExperience_cta___pCtu,
.StudioExperience_ghost__F__Hb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 9999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 160ms var(--ease),
    border-color 160ms var(--ease);
}

.StudioExperience_root__SP8jq .StudioExperience_cta___pCtu {
  background: var(--studio-gold);
  color: var(--studio-on-gold);
}

.StudioExperience_cta___pCtu:hover {
  transform: translateY(-1px);
}

.StudioExperience_cta___pCtu span,
.StudioExperience_ghost__F__Hb span {
  font-size: 0.8em;
}

.StudioExperience_root__SP8jq .StudioExperience_ghost__F__Hb {
  border: 1px solid var(--studio-line-2);
  background: color-mix(in srgb, var(--studio-black) 45%, transparent);
  color: var(--studio-bone);
}

.StudioExperience_ghost__F__Hb:hover {
  border-color: var(--studio-gold-dim);
}

.StudioExperience_views__XYRuH {
  padding: 0 6px;
  color: var(--studio-bone-muted);
  font-size: 14px;
}

/* ============================ reel controls ============================ */

.StudioExperience_reel__sfKzT {
  position: fixed;
  right: var(--gutter);
  bottom: var(--foot);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 600ms var(--ease);
  pointer-events: none;
}

.StudioExperience_reel__sfKzT[data-visible] {
  opacity: 1;
  pointer-events: auto;
}

.StudioExperience_reel__sfKzT button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--studio-line-2);
  border-radius: 9999px;
  background: transparent;
  color: var(--studio-bone);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 160ms var(--ease);
}

.StudioExperience_reel__sfKzT button:hover {
  border-color: var(--studio-gold-dim);
}

.StudioExperience_counter__uAg9X {
  min-width: 64px;
  font-family: var(--font-editorial-mono), ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.StudioExperience_counter__uAg9X span {
  color: var(--studio-bone-dim);
}

/* ============================== fallback ============================== */

.StudioExperience_fallback__YULAz {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: var(--gutter);
  background: var(--studio-black);
  text-align: center;
}

.StudioExperience_fallback__YULAz p {
  max-width: 420px;
  margin: 0;
  color: var(--studio-bone-muted);
  line-height: 1.6;
}

/* ============================== phones ============================== */

@media (max-width: 720px) {
  .StudioExperience_navClassic__ejKeb {
    display: none;
  }

  .StudioExperience_card__0NeoQ {
    bottom: calc(var(--foot) + 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .StudioExperience_veilMark__3S7xN,
  .StudioExperience_cue__4pK7m i,
  .StudioExperience_title__JJPMV span,
  .StudioExperience_logline__FCKJ5,
  .StudioExperience_sound__GmSMy[data-held] {
    animation: none;
  }

  .StudioExperience_veil__eg2Q5,
  .StudioExperience_cue__4pK7m,
  .StudioExperience_card__0NeoQ,
  .StudioExperience_reel__sfKzT {
    transition: none;
  }
}