.homepage {
  --showcase-ink: #080f15;
  --showcase-text: #f6faf8;
  --showcase-muted: #cbd6d4;
  --showcase-accent: #dbfa79;
}

.storefront.homepage .site-header {
  position: fixed;
  inset-inline: 0;
}
.storefront.homepage .site-header:not(.is-scrolled):not(:has(.site-menu[data-open])) {
  color: var(--showcase-text);
  background: rgb(11 20 28 / .7);
  border-color: #d8e9e128;
}
.storefront.homepage .site-header:not(.is-scrolled):not(:has(.site-menu[data-open])) .site-menu a:is(:hover, :focus-visible) { color: var(--showcase-accent); }
.storefront.homepage .site-header:not(.is-scrolled):not(:has(.site-menu[data-open])) :focus-visible { outline-color: var(--showcase-accent); }
.storefront.homepage .site-header:not(.is-scrolled):not(:has(.site-menu[data-open])) .brand-mark { background: var(--showcase-accent); }
.storefront.homepage .site-header:not(.is-scrolled):not(:has(.site-menu[data-open])) .brand-mark::after { background: #0c171b; }
.storefront.homepage .site-header:not(.is-scrolled):not(:has(.site-menu[data-open])) .wordmark-dot { color: var(--showcase-accent); }

.film-showcase {
  isolation: isolate;
  color: var(--showcase-text);
  background: var(--showcase-ink);
}
.film-showcase :focus-visible { outline-color: var(--showcase-accent); }
.film-stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
}
.film-cover {
  display: grid;
  align-items: end;
  min-width: 0;
}
.film-cover-image, .film-screen, .film-cover::after { position: absolute; inset: 0; }
.film-cover-image { z-index: 0; }
.film-cover-image img { width: 100%; height: 100%; object-fit: contain; }
.film-cover::after {
  z-index: 1;
  content: "";
  background: linear-gradient(0deg, #080f15 0%, #080f15e0 13%, #080f1585 30%, transparent 58%);
  pointer-events: none;
}
.film-cover-overlay { position: relative; z-index: 2; display: grid; gap: .85rem; padding-block: 7rem .75rem; }
.film-cover .eyebrow { color: var(--showcase-accent); }
.film-cover :is(h1, h2) {
  max-width: 28ch;
  margin-block: .48rem .55rem;
  font-size: clamp(2.15rem, 4.25vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -.052em;
  font-weight: 860;
}
.film-showcase[data-film-enhanced] .film-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.film-cover h1 em { color: var(--showcase-accent); font-style: normal; white-space: nowrap; }
.film-cover-summary { max-width: 33rem; color: var(--showcase-muted); font-size: clamp(.85rem, 1.12vw, 1rem); }
.film-cover-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.film-cover-actions .button { min-height: 2.75rem; }
.film-cover-actions .button-lime { background: var(--showcase-accent); }
.film-cover-actions .button-lime:hover { background: #ebffa5; }
.film-showcase .button-outline { color: var(--showcase-text); border-color: #b4c5c18c; background: #0a151a98; }
.film-showcase .button-outline:hover { color: var(--showcase-text); border-color: #ecf6f1; background: #334649; }
.film-screen { z-index: 0; pointer-events: none; }
.film-screen video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
}
.film-showcase[data-film-ready] .film-screen video { opacity: 1; }
.film-rail {
  position: relative;
  z-index: 3;
  display: grid;
  gap: .5rem;
  padding-block: .45rem 1.15rem;
}
.film-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
}
.film-picker a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3.6rem;
  padding: .45rem .3rem;
  border: 1px solid #c2d2c840;
  border-radius: .3rem;
  background: #0a1318d9;
  color: var(--showcase-text);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 650;
}
.film-picker a:is(:hover, [aria-current="true"]) { border-color: var(--showcase-accent); background: #1c2d2c; }
.film-brand-logo {
  display: grid;
  place-items: center;
  flex: 0 0 3.65rem;
  height: 2.25rem;
  padding: .2rem .35rem;
  border-radius: .2rem;
  background: #f7faf7;
}
.film-brand-logo img { max-height: 1.8rem; object-fit: contain; }
.film-brand-logo-dark { background: #27383a; outline: 1px solid #ffffff22; }
.film-status { color: var(--showcase-muted); font-size: .76rem; }
.film-status:empty { display: none; }

@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
  .film-stage { display: block; }
  .film-cover {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
  }
  .film-cover::after {
    inset-block-start: auto;
    height: clamp(12rem, 42svh, 20rem);
    background: linear-gradient(transparent, #080f15a6 34%, #080f15d9 70%, #080f15ed);
  }
  .film-cover-overlay {
    gap: .65rem;
    padding-block: 4rem max(clamp(1.5rem, 3.8svh, 2.5rem), env(safe-area-inset-bottom));
  }
  .film-cover .eyebrow { font-size: .65rem; letter-spacing: .105em; }
  .film-cover :is(h1, h2) { max-width: 24ch; margin-block: .3rem .35rem; font-size: clamp(1.45rem, 5.5vw, 2.1rem); }
  .film-cover-summary { font-size: .8rem; line-height: 1.45; }
  .film-cover-actions { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 22rem); gap: .4rem; }
  .film-cover-actions .button {
    padding-inline: clamp(.48rem, 2vw, .7rem);
    min-height: 2.8rem;
    gap: .3rem;
    font-size: clamp(.7rem, 3.2vw, .78rem);
    backdrop-filter: blur(5px);
  }
  .film-cover-actions .button-lime, .film-cover-actions .button-lime:hover {
    background: rgb(232 255 153 / .5);
    color: #020804;
    border-color: #dbfa7999;
  }
  .film-showcase .film-cover-actions .button-outline, .film-showcase .film-cover-actions .button-outline:hover {
    background: rgb(10 21 26 / .5);
    border-color: #e7f4ee99;
  }
  .film-rail { padding-block: .65rem 1.15rem; }
  .film-picker { gap: .3rem; }
  .film-picker a { flex-direction: column; gap: .25rem; min-height: 3.35rem; padding: .28rem .12rem; font-size: .61rem; line-height: 1.15; text-align: center; }
  .film-brand-logo { flex-basis: 2.75rem; height: 1.8rem; }
  .film-picker .film-brand-logo { flex: none; width: 2.75rem; }
  .film-brand-logo img { max-height: 1.4rem; }
}

@media (max-width: 365px) {
  .film-picker a { font-size: .57rem; }
  .film-picker .film-brand-logo { width: 2.35rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .film-screen video { transition: opacity 340ms ease; }
  [data-motion-revealed] { animation: rakson-content-in 570ms cubic-bezier(.18, .65, .26, 1); }
  .storefront .distribution-brand span[aria-hidden="true"] { display: inline-block; transition: transform 240ms cubic-bezier(.18, .65, .26, 1); }
  .storefront .distribution-brand:is(:hover, :focus-visible) span[aria-hidden="true"] { transform: translate(2px, -2px); }
}

@keyframes rakson-content-in {
  from { opacity: .76; transform: translateY(.8rem); }
  to { opacity: 1; transform: translateY(0); }
}