/* STEARL / Eye of the storm. The original artwork is the scene. */
.hero--cinema {
  height:144svh;
  min-height:790px;
  max-height:none;
  overflow:clip;
  isolation:isolate;
  background:#080807;
}
.hero--cinema .hero-stage {
  position:sticky;
  top:0;
  height:100svh;
  min-height:790px;
  isolation:isolate;
  overflow:hidden;
  background:#080807;
}
.hero--cinema .hero-cgi {
  inset:0;
  z-index:0;
  transform-origin:65% 45%;
}
.hero--cinema .hero-cgi-poster {
  inset:0;
  transition:opacity 1.2s ease;
}
.hero--cinema .hero-cgi-poster img {
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--poster-x,50%) 50%;
  transform:translateY(var(--poster-y,0%));
  opacity:1;
}
.hero--cinema .hero-cgi-canvas {
  inset:0;
  height:100%;width:100%;
  transition:opacity 1.2s ease;
}
.hero--cinema .hero-scrim {
  z-index:1;
  background:linear-gradient(0deg,#080807 0%,#080807f2 8%,#08080760 25%,transparent 53%,#08080730 80%,#080807b3 100%),linear-gradient(90deg,#0808079c 0%,transparent 54%,transparent 85%,#08080728 100%);
}
.hero--cinema .hero-atmosphere {
  z-index:1;
  opacity:.18;
}
.hero--cinema .hero-topline {
  z-index:4;
  top:124px;
  color:#c1b49c;
  font-size:8px;
  letter-spacing:.18em;
}
.hero--cinema .hero-identity {
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;max-width:none;
  transform:none;
  pointer-events:none;
}
.hero--cinema .hero-kicker {
  position:absolute;
  left:var(--gutter);top:27%;
  font-size:8px;
  letter-spacing:.19em;
  margin:0;
  color:#ac9878;
}
.hero--cinema .hero-kicker .tiny-rule {
  width:22px;
}
.hero--cinema .hero-statement {
  position:absolute;
  left:var(--gutter);top:33%;
  margin:0;
  font:500 clamp(18px,1.9vw,31px)/1.32 var(--body);
  letter-spacing:-.04em;
  color:#e5dccb;
}
.hero--cinema .hero-statement>* {
  display:block;
  font-style:normal;
}
.hero--cinema .hero-statement em {
  color:#e5dccb;
}
.hero--cinema .hero-statement>*:last-child {
  color:#ac9878;
}
.hero--cinema .hero-description {
  display:none;
}
.hero--cinema .hero-wordmark {
  position:absolute;
  width:min(79vw,1420px);
  left:50%;top:auto;bottom:97px;
  margin:0;
  translate:-50% 0;
  filter:drop-shadow(0 15px 35px #000b);
}
.hero--cinema .hero-wordmark img {
  width:100%;
  filter:brightness(1.04);
}
.hero--cinema .wordmark-light {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 20%,#efdbc130 42%,#f6e5ba 50%,#efdbc130 58%,transparent 80%);
  background-size:280% 100%;
  background-position:150% 0%;
  -webkit-mask:url('./img/stearl-wordmark-transparent.webp') center/100% 100% no-repeat;
  mask:url('./img/stearl-wordmark-transparent.webp') center/100% 100% no-repeat;
  mix-blend-mode:screen;
}
.hero--cinema .hero-actions {
  position:absolute;
  left:var(--gutter);top:49%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:0;
  gap:6px;
  pointer-events:auto;
}
.hero--cinema .hero-actions .solid-cta {
  min-height:44px;
  padding:12px 0;
  color:#e8decb;
  background:none;
  border:0;
  border-bottom:1px solid #b99a6866;
  font-size:10px;
  letter-spacing:.025em;
  gap:36px;
}
.hero--cinema .hero-actions .solid-cta:hover {
  color:#d4b584;
  transform:none;
  border-color:#d4b584;
}
.hero--cinema .hero-actions .solid-cta span {
  color:#b99867;
  font-size:22px;
}
.hero--cinema .hero-actions .text-cta {
  font-size:8px;
  color:#b5aa95;
  padding-block:12px;
}
.hero--cinema .scene-caption {
  z-index:4;
  left:auto;right:var(--gutter);
  bottom:44%;
  text-align:right;
  opacity:.65;
}
.hero--cinema .scene-caption .tiny-rule {
  display:none;
}
.hero--cinema .scene-caption p {
  font-size:7px;
  color:#d2ba91;
}
.hero--cinema .scene-caption small {
  font-size:8px;
  color:#baaf9d;
  letter-spacing:.02em;
}
.hero--cinema .scene-control {
  z-index:2;
  left:40%;right:4%;top:19%;bottom:43%;
  border-radius:50%;
  touch-action:pan-y;
}
.hero--cinema .scene-control:focus-visible {
  outline:1px solid #d7b78070;
  outline-offset:-15px;
}
.hero--cinema .hero-foot {
  z-index:7;
  left:var(--gutter);right:var(--gutter);bottom:25px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
}
.hero--cinema .hero-release {
  min-width:230px;
  padding:0;
  border:0;
  justify-self:center;
}
.hero--cinema .hero-release img {
  width:35px;height:35px;
  filter:none;
}
.hero--cinema .hero-release small {
  font-size:7px;
  color:#9b917f;
}
.hero--cinema .hero-release strong {
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em;
}
.hero--cinema .hero-release b {
  margin-left:28px;
}
.hero--cinema .scroll-cue {
  font-size:7px;
  color:#aaa18f;
}
.hero--cinema .scroll-line {
  height:28px;
}
.hero--cinema .experience-controls {
  position:static;
  align-self:center;
}
.hero--cinema .experience-controls button {
  font-size:8px;
  color:#b3a792;
  min-height:36px;
}
.hero--cinema .intro-shutter {
  display:none;
  z-index:5;
  background:none;
}
.hero--cinema.intro-running .intro-shutter {
  display:block;
}
.hero--cinema .intro-shutter i {
  display:none;
}
.hero--cinema .intro-shutter>span {
  top:44%;left:50%;
  font:500 8px/1.4 var(--body);
  color:#c0a174;
  white-space:nowrap;
  letter-spacing:.2em;
}
.hero--cinema.intro-running .intro-skip {
  position:fixed;
  top:155px;right:var(--gutter);bottom:auto;
  z-index:10;
  padding:7px 0;
}
.film-grain {
  opacity:.019;
}
.no-js .hero--cinema,
.motion-paused .hero--cinema {
  height:100svh;
  min-height:790px;
}
.no-js .hero--cinema .hero-stage,
.motion-paused .hero--cinema .hero-stage {
  position:relative;
}
@media(max-width:1100px) {
  .hero--cinema .hero-wordmark { width:86vw;bottom:105px; }
  .hero--cinema .hero-statement {font-size:24px;top:31%;}
  .hero--cinema .hero-actions {top:46%;}
  .hero--cinema .scene-caption {bottom:43%;}
}
@media(max-width:760px) {
  .hero--cinema {height:132svh;min-height:780px;}
  .hero--cinema .hero-stage {height:100svh;min-height:780px;}
  .hero--cinema .hero-cgi {inset:0;}
  .hero--cinema .hero-cgi-poster img {object-position:var(--poster-x,82%) 50%;}
  .hero--cinema .hero-topline {top:105px;font-size:7px;letter-spacing:.10em;}
  .hero--cinema .hero-topline>span:last-child {font-size:6px;}
  .hero--cinema .hero-scrim {background:linear-gradient(0deg,#080807 0%,#080807ed 8%,#08080755 28%,transparent 53%,#08080724 72%,#080807d0 100%);}
  .hero--cinema .hero-kicker {top:155px;font-size:7px;letter-spacing:.12em;}
  .hero--cinema .hero-kicker .tiny-rule {width:15px;}
  .hero--cinema .hero-statement {top:195px;font-size:18px;line-height:1.35;text-shadow:0 2px 25px #000;}
  .hero--cinema .hero-statement>* {display:inline;}
  .hero--cinema .hero-statement em::after {content:'\A';white-space:pre;}
  .hero--cinema .hero-statement>span:first-child::after {content:' / ';color:#9c825a;font-size:14px;}
  .hero--cinema .hero-wordmark {width:94vw;bottom:167px;}
  .hero--cinema .hero-actions {top:auto;bottom:97px;left:var(--gutter);right:var(--gutter);flex-direction:row;align-items:center;justify-content:space-between;gap:12px;}
  .hero--cinema .hero-actions .solid-cta {gap:25px;font-size:10px;}
  .hero--cinema .hero-actions .text-cta {font-size:8px;}
  .hero--cinema .scene-caption {right:var(--gutter);left:auto;bottom:34%;max-width:none;opacity:.55;}
  .hero--cinema .scene-caption p {font-size:6px;letter-spacing:.10em;}
  .hero--cinema .scene-caption small {font-size:7px;}
  .hero--cinema .scene-control {left:7%;right:7%;top:29%;bottom:34%;}
  .hero--cinema .hero-foot {display:grid;grid-template-columns:1fr 1fr;gap:10px;bottom:21px;align-items:center;}
  .hero--cinema .scroll-cue {grid-column:1;grid-row:1;font-size:7px;}
  .hero--cinema .hero-release {grid-column:2;grid-row:1;justify-self:end;min-width:0;gap:9px;}
  .hero--cinema .hero-release img {width:30px;height:30px;}
  .hero--cinema .hero-release small {font-size:6px;}
  .hero--cinema .hero-release strong {font-size:10px;}
  .hero--cinema .hero-release b {margin-left:8px;font-size:17px;}
  .hero--cinema .experience-controls {grid-column:1/-1;grid-row:2;justify-self:end;margin-top:0;}
  .hero--cinema .experience-controls button {font-size:7px;min-height:24px;}
  .hero--cinema.intro-running .intro-skip {top:131px;right:24px;bottom:auto;font-size:9px;}
  .no-js .hero--cinema,.motion-paused .hero--cinema {height:100svh;min-height:780px;}
}
@media(prefers-reduced-motion:reduce) {
  .hero--cinema {height:100svh;min-height:790px;}
  .hero--cinema .hero-stage {position:relative;}
}

.site-nav:not(.is-scrolled) {
  background:linear-gradient(180deg,#080807c9,#08080754);
}
@media(max-width:760px) and (prefers-reduced-motion:reduce) {
  .hero--cinema {min-height:780px;}
}