.copy.is-hidden {
  display: none;
}

.film.has-ui .copy {
  width: min(610px, 39vw);
}

.ui-stage {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.ui-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition:
    opacity .72s cubic-bezier(.22,.72,.16,1),
    transform .92s cubic-bezier(.22,.72,.16,1),
    visibility 0s linear .92s;
}

.ui-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: .38s, .38s, 0s;
}

/* Category cards */
.category-deck {
  position: absolute;
  top: 9%;
  right: 4.8%;
  width: min(780px, 50vw);
  height: 78%;
}

.film-category-card {
  position: absolute;
  width: 29%;
  min-height: 43%;
  overflow: hidden;
  padding: clamp(12px, 1.25vw, 20px);
  border: 1px solid rgba(141,154,255,.38);
  border-radius: clamp(16px, 1.5vw, 25px);
  background: linear-gradient(155deg, rgba(28,55,153,.92), rgba(7,17,65,.96));
  box-shadow: 0 28px 64px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(34px) scale(.95);
  opacity: 0;
}

.ui-panel.active .film-category-card {
  animation: card-arrive .9s cubic-bezier(.2,.78,.15,1) forwards;
}

.film-category-card:nth-child(1) { left: 0; top: 9%; animation-delay: .08s !important; }
.film-category-card:nth-child(2) { left: 34%; top: 0; animation-delay: .18s !important; }
.film-category-card:nth-child(3) { left: 68%; top: 12%; animation-delay: .28s !important; }
.film-category-card:nth-child(4) { left: 38%; top: 52%; animation-delay: .38s !important; }

.film-category-card > span {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(8px, .68vw, 11px);
  font-weight: 750;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.film-category-card figure {
  position: relative;
  height: clamp(80px, 12vh, 144px);
  overflow: hidden;
  margin: 0;
  border-radius: clamp(10px, .9vw, 15px);
  background: #1633ff;
}

.film-category-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(22,51,255,.04), rgba(10,14,30,.18));
}

.film-category-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04);
  transform: scale(1.03);
}

.ui-panel.active .film-category-card img {
  animation: category-image-drift 7.5s cubic-bezier(.22,.61,.22,1) forwards;
}

.film-category-card.motor-card figure {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 12px 30px rgba(0,0,0,.28);
}

.film-category-card.motor-card img {
  object-position: center 66%;
  filter: saturate(1.03) contrast(1.05);
  transform: scale(1.08);
}

.film-category-card h3 {
  margin: clamp(13px, 1.5vh, 20px) 0 0;
  color: #fff;
  font-family: var(--paperus-serif);
  font-size: clamp(16px, 1.45vw, 25px);
  font-weight: 400;
  line-height: 1.02;
}

.film-category-card h3 em {
  display: block;
  color: #aeb8ff;
  font-weight: 400;
}

/* Complete showcase card */
.showcase-card-wrap {
  position: absolute;
  top: 8%;
  right: 7%;
  width: min(600px, 43vw);
  height: 78%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

.film-showcase-card {
  width: min(530px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: clamp(20px, 1.8vw, 30px);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 38px 95px rgba(0,0,0,.42), 0 0 0 1px rgba(22,51,255,.12);
  transform: rotateY(-7deg) translateY(32px) scale(.94);
  opacity: 0;
}

.ui-panel.active .film-showcase-card {
  animation: showcase-arrive 1.05s cubic-bezier(.2,.78,.15,1) .16s forwards;
}

.film-showcase-media {
  position: relative;
  height: clamp(185px, 34vh, 330px);
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 20%, rgba(141,154,255,.45), transparent 31%),
    #05070f;
}

.film-showcase-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
}

.film-showcase-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5,7,15,.3));
}

.film-showcase-kicker {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 20px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 100px;
  color: #fff;
  background: rgba(9,13,28,.48);
  backdrop-filter: blur(10px);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.film-showcase-body {
  padding: clamp(18px, 2vw, 28px);
}

.film-showcase-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.film-showcase-title h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--paperus-serif);
  font-size: clamp(25px, 2.1vw, 36px);
  font-weight: 400;
  line-height: 1;
}

.film-showcase-title strong {
  color: var(--blue);
  font-size: clamp(15px, 1.2vw, 20px);
  white-space: nowrap;
}

.film-showcase-meta {
  margin: 10px 0 0;
  color: #6a718b;
  font-size: clamp(9px, .76vw, 12px);
  letter-spacing: .04em;
}

.film-card-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, .7vw, 10px);
  margin-top: clamp(18px, 2vh, 24px);
}

.film-card-action {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 7px;
  border-radius: 100px;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 20px rgba(22,51,255,.22);
  font-size: clamp(8px, .68vw, 11px);
  font-weight: 650;
  opacity: 0;
  transform: translateY(10px);
}

.ui-panel.active .film-card-action {
  animation: action-arrive .55s ease forwards;
}

.film-card-action:nth-child(1) { animation-delay: .72s !important; }
.film-card-action:nth-child(2) { animation-delay: .82s !important; }
.film-card-action:nth-child(3) { animation-delay: .92s !important; }
.film-card-action:nth-child(4) { animation-delay: 1.02s !important; }

.film-card-action svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* Live PAPERUS artwork inside the clean outdoor billboard */
.scene-light-field,
.scene-wall-monogram,
.scene-paper-ribbon {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.scene-light-field {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 52%, rgba(141,154,255,.13), transparent 34%),
    linear-gradient(112deg, rgba(2,7,12,.18), transparent 44%);
  transition: opacity 1.1s ease .22s;
}

.scene-light-field::before {
  content: "";
  position: absolute;
  top: -26%;
  left: -18%;
  width: 76%;
  height: 150%;
  background: linear-gradient(
    110deg,
    transparent 18%,
    rgba(201,210,255,.04) 34%,
    rgba(201,210,255,.2) 44%,
    rgba(191,232,200,.08) 51%,
    transparent 67%
  );
  filter: blur(7px);
  transform: rotate(-5deg) translateX(-12%);
  transform-origin: center;
  animation: projector-light 5.8s ease-in-out infinite;
}

.scene-light-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 37%;
  bottom: 0;
  height: 36%;
  background: radial-gradient(ellipse at 36% 100%, rgba(22,51,255,.18), transparent 64%);
  filter: blur(16px);
  animation: gallery-glow 4.8s ease-in-out infinite;
}

.scene-wall-monogram {
  z-index: 0;
  top: 22%;
  left: 7%;
  color: rgba(216,223,255,.1);
  font-family: var(--paperus-serif);
  font-size: clamp(190px, 27vw, 500px);
  font-style: italic;
  line-height: .7;
  text-shadow: 0 0 60px rgba(141,154,255,.08);
  transform: translate3d(-18px, 14px, 0) rotate(-5deg);
  transition: opacity 1.15s ease .35s, transform 1.7s cubic-bezier(.2,.75,.16,1) .35s;
}

.scene-paper-ribbon {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity .9s ease .34s;
}

.paper-ribbon-glow,
.paper-ribbon-main,
.paper-ribbon-edge {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.paper-ribbon-glow {
  stroke: rgba(141,154,255,.2);
  stroke-width: 96;
  filter: blur(20px);
}

.paper-ribbon-main {
  stroke: url(#paperRibbonGradient);
  stroke-width: 56;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: ribbon-draw 1.7s cubic-bezier(.18,.78,.17,1) .45s forwards,
    ribbon-float 5.4s ease-in-out 2.15s infinite;
}

.paper-ribbon-edge {
  stroke: rgba(255,255,255,.46);
  stroke-width: 1.5;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: ribbon-draw 1.9s cubic-bezier(.18,.78,.17,1) .62s forwards,
    ribbon-float 5.4s ease-in-out 2.3s infinite;
}

.ui-panel.active .scene-light-field { opacity: .9; }
.ui-panel.active .scene-wall-monogram {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(-2deg);
}
.ui-panel.active .scene-paper-ribbon { opacity: .88; }

.brandboard-content {
  position: absolute;
  z-index: 1;
  top: 26.5%;
  right: 5.3%;
  width: 48.1%;
  height: 40.2%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20px, 2.2vw, 42px) clamp(24px, 2.8vw, 52px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 8%, rgba(174,235,192,.16), transparent 33%),
    linear-gradient(135deg, #083f35 0%, #0b654c 58%, #0d7455 100%);
  color: #f6f3e9;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  text-shadow: none;
  opacity: 0;
  transform: translateY(18px) scale(.985);
}

.brandboard-content::before {
  content: "";
  position: absolute;
  inset: -8% -24%;
  background:
    radial-gradient(circle at 82% 46%, rgba(210,242,220,.18), transparent 22%),
    linear-gradient(108deg, transparent 35%, rgba(236,249,240,.19) 47%, transparent 58%);
  opacity: .68;
  transform: translateX(-28%);
  -webkit-mask-image: linear-gradient(90deg, transparent 36%, #000 66%);
  mask-image: linear-gradient(90deg, transparent 36%, #000 66%);
  animation: board-light-travel 4.9s ease-in-out infinite;
  pointer-events: none;
}

.brandboard-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 5%, rgba(255,255,255,.08) 44%, transparent 64%);
  pointer-events: none;
}

.brandboard-copy {
  position: relative;
  z-index: 3;
  width: 57%;
}

.brandboard-imprint {
  position: absolute;
  z-index: 1;
  top: 48%;
  right: 8%;
  color: rgba(218,244,225,.12);
  font-family: var(--paperus-serif);
  font-size: clamp(92px, 12vw, 220px);
  font-style: italic;
  line-height: .72;
  transform: translateY(-50%);
  text-shadow: 0 0 38px rgba(190,235,206,.07);
}

.brandboard-values {
  position: absolute;
  z-index: 3;
  right: 5%;
  bottom: 8%;
  display: flex;
  gap: clamp(7px, .75vw, 14px);
  margin: 0;
  color: rgba(238,249,241,.58);
  font-size: clamp(5px, .48vw, 8px);
  font-weight: 720;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.brandboard-values span + span::before {
  content: "/";
  margin-right: clamp(7px, .75vw, 14px);
  color: rgba(191,232,200,.32);
}

.ui-panel.active .brandboard-content {
  animation: brandboard-arrive .9s cubic-bezier(.2,.78,.15,1) .55s forwards;
}

.brandboard-content .brandboard-eyebrow {
  margin: 0 0 clamp(10px, 1.3vh, 16px);
  color: #bfe8c8;
  font-size: clamp(7px, .66vw, 11px);
  font-weight: 760;
  letter-spacing: .24em;
  line-height: 1;
}

.brandboard-content h2 {
  max-width: 13ch;
  margin: 0;
  color: #fffdf6;
  font-family: var(--paperus-serif);
  font-size: clamp(27px, 3.25vw, 58px);
  font-weight: 400;
  line-height: .91;
  letter-spacing: -.025em;
}

.brandboard-content h2 em {
  color: #bfe8c8;
  font-weight: 400;
}

.brandboard-content h3 {
  max-width: 30ch;
  margin: clamp(13px, 1.8vh, 20px) 0 0;
  color: #fffdf6;
  font-size: clamp(10px, .98vw, 16px);
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.28;
}

.brandboard-content .brandboard-body {
  max-width: 54ch;
  margin: clamp(7px, 1vh, 12px) 0 0;
  color: rgba(246,243,233,.72);
  font-size: clamp(7px, .68vw, 11px);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.48;
}

/* Discovery search */
.search-experience {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 8vw 11vh;
  text-align: center;
}

.search-experience .search-eyebrow {
  margin: 0 0 19px;
  color: var(--blue-soft);
  font-size: clamp(9px, .75vw, 12px);
  font-weight: 750;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.search-experience h2 {
  margin: 0;
  color: #fff;
  font-family: var(--paperus-serif);
  font-size: clamp(45px, 6vw, 106px);
  font-weight: 400;
  line-height: .91;
  letter-spacing: -.045em;
}

.search-experience h2 em {
  display: block;
  color: var(--blue-soft);
  font-weight: 400;
}

.film-search-box {
  width: min(990px, 70vw);
  min-height: clamp(74px, 10vh, 112px);
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: clamp(36px, 6vh, 70px);
  padding: 10px 11px 10px clamp(17px, 2vw, 28px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: clamp(16px, 1.5vw, 25px);
  background: #fff;
  box-shadow: 0 34px 80px rgba(0,0,0,.32), 0 0 60px rgba(22,51,255,.12);
  transform: translateY(24px) scale(.97);
  opacity: 0;
}

.ui-panel.active .film-search-box {
  animation: search-arrive .8s cubic-bezier(.2,.78,.15,1) .55s forwards;
}

.film-search-box svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.9;
}

.typed-query {
  width: 0;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(20px, 2.1vw, 36px);
  text-align: left;
  white-space: nowrap;
}

.ui-panel.active .typed-query {
  animation: type-query 2.1s steps(21, end) .95s forwards;
}

.typed-query::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.08em;
  margin-left: 3px;
  vertical-align: -.12em;
  background: var(--blue);
  animation: caret-blink .8s steps(1) infinite;
}

.film-discover-button {
  min-width: clamp(150px, 16vw, 250px);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: clamp(12px, 1.1vw, 18px);
  color: #fff;
  background: var(--blue);
  font-size: clamp(9px, .8vw, 13px);
  font-weight: 750;
  letter-spacing: .25em;
  text-transform: uppercase;
  transition: box-shadow .35s ease, transform .35s ease;
}

.ui-panel.active .film-discover-button {
  animation: discover-ready .48s ease 3.15s forwards;
}

@keyframes card-arrive {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes showcase-arrive {
  to { opacity: 1; transform: rotateY(0) translateY(0) scale(1); }
}

@keyframes action-arrive {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes search-arrive {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes brandboard-arrive {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes category-image-drift {
  from { transform: scale(1.06) translate3d(0, 1%, 0); }
  to { transform: scale(1.14) translate3d(-1.25%, -1.4%, 0); }
}

@keyframes projector-light {
  0%, 100% { opacity: .38; transform: rotate(-5deg) translateX(-12%); }
  48% { opacity: .82; transform: rotate(-2deg) translateX(23%); }
}

@keyframes gallery-glow {
  0%, 100% { opacity: .34; transform: translateX(-2%) scale(.98); }
  50% { opacity: .72; transform: translateX(3%) scale(1.04); }
}

@keyframes ribbon-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes ribbon-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes board-light-travel {
  0%, 14% { opacity: .2; transform: translateX(-32%); }
  52% { opacity: .78; transform: translateX(8%); }
  82%, 100% { opacity: .2; transform: translateX(28%); }
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

@keyframes type-query {
  from { width: 0; }
  to { width: 21ch; }
}

@keyframes discover-ready {
  to {
    box-shadow: 0 14px 35px rgba(22,51,255,.36);
    transform: scale(1.015);
  }
}

.paused .film-category-card,
.paused .film-category-card img,
.paused .film-showcase-card,
.paused .film-card-action,
.paused .film-search-box,
.paused .brandboard-content,
.paused .brandboard-content::before,
.paused .scene-light-field::before,
.paused .scene-light-field::after,
.paused .scene-paper-ribbon path,
.paused .typed-query,
.paused .film-discover-button {
  animation-play-state: paused !important;
}

@media (max-width: 760px) {
  .film.has-ui .copy {
    top: 10%;
    width: 86vw;
    min-height: 35%;
  }

  .ui-panel.ui-categories,
  .ui-panel.ui-showcase {
    display: flex;
    align-items: flex-end;
  }

  .category-deck {
    top: auto;
    right: 5vw;
    bottom: 10%;
    width: 90vw;
    height: 36%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
  }

  .film-category-card,
  .film-category-card:nth-child(n) {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-height: 0;
    padding: 8px;
    border-radius: 12px;
  }

  .film-category-card figure { height: 62px; }
  .film-category-card h3 { font-size: 13px; }
  .film-category-card > span { font-size: 6px; }

  .showcase-card-wrap {
    top: auto;
    right: 7vw;
    bottom: 8%;
    width: 86vw;
    height: 45%;
  }

  .film-showcase-card { width: min(440px, 100%); }
  .film-showcase-media { height: 145px; }
  .film-showcase-body { padding: 14px; }
  .film-card-actions { margin-top: 12px; }
  .film-card-action { padding: 8px 4px; }

  .brandboard-content {
    top: 27%;
    right: 5.5%;
    width: 48%;
    height: 39.5%;
    padding: 12px 14px;
  }

  .brandboard-copy { width: 62%; }
  .brandboard-imprint { right: 7%; font-size: clamp(58px, 17vw, 100px); }
  .brandboard-values { display: none; }

  .brandboard-content .brandboard-eyebrow { margin-bottom: 6px; font-size: 5px; }
  .brandboard-content h2 { font-size: clamp(19px, 5.5vw, 34px); }
  .brandboard-content h3 { margin-top: 7px; font-size: clamp(7px, 2vw, 11px); }
  .brandboard-content .brandboard-body { margin-top: 5px; font-size: clamp(5px, 1.45vw, 8px); line-height: 1.35; }

  .search-experience { padding-inline: 6vw; }
  .search-experience h2 { font-size: clamp(37px, 10vw, 58px); }
  .film-search-box {
    width: 88vw;
    min-height: 68px;
    grid-template-columns: 34px 1fr auto;
    margin-top: 34px;
    padding-left: 14px;
  }
  .film-discover-button { min-width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-panel,
  .film-category-card,
  .film-showcase-card,
  .film-card-action,
  .brandboard-content,
  .film-search-box,
  .scene-light-field,
  .scene-wall-monogram,
  .scene-paper-ribbon,
  .scene-light-field::before,
  .scene-light-field::after,
  .scene-paper-ribbon path,
  .brandboard-content::before {
    animation: none !important;
    transition: none !important;
  }

  .scene-paper-ribbon path { stroke-dashoffset: 0; }

  .ui-panel.active,
  .ui-panel.active .film-category-card,
  .ui-panel.active .film-showcase-card,
  .ui-panel.active .film-card-action,
  .ui-panel.active .brandboard-content,
  .ui-panel.active .film-search-box {
    opacity: 1;
    transform: none;
  }
}