:root {
  color-scheme: normal;
  --brand-orange: #f7941d;
  --brand-red: #d83523;
  --brand-deep: #5b1f18;
  --text-main: #fffaf4;
}

@font-face {
  font-family: "Humant";
  src: url("/fonts/Humant-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent !important;
}

.stage {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform-origin: top left;
  pointer-events: none;
}

.anchor {
  --pos-x: 960px;
  --pos-y: 660px;
  --size: 1.12;
  --delay: 0ms;
  --bottom-open: 126px;
  --top-open: 52px;
  position: absolute;
  left: var(--pos-x);
  top: var(--pos-y);
  width: 0;
  height: 0;
  opacity: 0;
  transform: scale(var(--size));
  transform-origin: center center;
}

.anchor.is-playing { opacity: 1; }
.anchor.is-hidden { opacity: 0; transition: opacity 220ms ease-out; }

.travel {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transform: translate3d(0, 760px, 0) scale(.94);
  transform-origin: center center;
  will-change: transform, opacity;
}

.artboard {
  position: absolute;
  left: -640px;
  top: -199px;
  width: 1280px;
  height: 397px;
  isolation: isolate;
}

.logo-piece {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 1280px;
  height: 397px;
  max-width: none;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  filter: drop-shadow(0 2px 1px rgba(46, 21, 9, .12));
}

.identity-band,
.reveal {
  position: absolute;
  left: 66px;
  top: calc(130px - var(--top-open));
  width: 1148px;
  height: calc(var(--top-open) + var(--bottom-open));
}

.identity-band {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  clip-path: polygon(3.2% 0, 96.8% 0, 100% 20%, 98.5% 80%, 95.4% 100%, 4.6% 100%, 1.5% 80%, 0 20%);
  background:
    linear-gradient(90deg, rgba(77, 19, 17, .42), transparent 14%, transparent 86%, rgba(77, 19, 17, .42)),
    linear-gradient(112deg, #7d211d 0%, #a82c20 20%, #e85c1f 47%, #f47f20 54%, #bb3520 78%, #761f1c 100%);
  box-shadow:
    0 7px 14px rgba(59, 18, 12, .22),
    inset 0 1px 0 rgba(255, 241, 215, .26),
    inset 0 -1px 0 rgba(73, 18, 13, .36);
  transform: scaleY(.025);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

.band-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 216, 148, .26), transparent 38%),
    repeating-linear-gradient(116deg, transparent 0 104px, rgba(255, 198, 105, .075) 106px, transparent 109px),
    linear-gradient(180deg, rgba(255, 255, 255, .13), transparent 34%, rgba(66, 13, 12, .18));
}

.identity-band::before,
.identity-band::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 4.8%;
  right: 4.8%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 178, 57, .62) 17%, rgba(255, 224, 171, .72) 50%, rgba(255, 178, 57, .62) 83%, transparent);
}

.identity-band::before { top: 0; }
.identity-band::after { bottom: 0; opacity: .58; }

.band-sheen {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -24%;
  width: 13%;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 244, 219, .32), transparent);
  filter: blur(2px);
  will-change: left, opacity;
}

.reveal {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  overflow: hidden;
  padding: 0 72px;
  color: var(--text-main);
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transform: translate3d(0, 7px, 0);
  text-align: center;
  text-shadow: 0 2px 5px rgba(62, 17, 11, .58);
  will-change: clip-path, opacity, transform;
}

.words {
  min-width: 0;
  max-width: 1000px;
  overflow: hidden;
  font-family: "Humant", "Segoe UI", Arial, sans-serif;
  white-space: nowrap;
}

.person,
.subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
}

.person {
  font-size: var(--person-size, 96px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: 0;
}

.subtitle {
  margin-top: 10px;
  font-size: var(--subtitle-size, 39px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .01em;
  color: rgba(255, 250, 244, .92);
}

.portrait {
  display: none;
  width: 94px;
  height: 94px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 4px solid rgba(255, 251, 245, .96);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(74, 20, 12, .42);
}

.anchor.has-photo .portrait { display: block; }
.anchor.has-photo .words { max-width: 820px; text-align: left; }
.anchor.has-photo .person { font-size: var(--person-photo-size, 75px); }
.anchor.has-photo .subtitle { font-size: var(--subtitle-photo-size, 34px); }

.anchor.mode-once.is-playing .travel { animation: travel-once 14s linear var(--delay) both; }
.anchor.mode-once.is-playing .logo-upper { animation: upper-once 14s linear var(--delay) both; }
.anchor.mode-once.is-playing .logo-lower { animation: lower-once 14s linear var(--delay) both; }
.anchor.mode-once.is-playing .identity-band { animation: band-once 14s linear var(--delay) both; }
.anchor.mode-once.is-playing .reveal { animation: reveal-once 14s linear var(--delay) both; }
.anchor.mode-once.is-playing .band-sheen { animation: sheen-once 14s linear var(--delay) both; }

@keyframes travel-once {
  0% { opacity: 0; transform: translate3d(0, 760px, 0) scale(.94); animation-timing-function: cubic-bezier(.16, .82, .28, 1); }
  3% { opacity: 1; }
  8% { opacity: 1; transform: translate3d(0, -13px, 0) scale(1.006); animation-timing-function: cubic-bezier(.2, .72, .24, 1); }
  11%, 86% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  90% { opacity: 1; transform: translate3d(0, 8px, 0) scale(1); animation-timing-function: cubic-bezier(.68, 0, .86, .3); }
  100% { opacity: 0; transform: translate3d(0, 760px, 0) scale(.94); }
}

@keyframes upper-once {
  0%, 10% { transform: translate3d(0, 0, 0); }
  17%, 80% { transform: translate3d(0, calc(-1 * var(--top-open)), 0); }
  87%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes lower-once {
  0%, 10% { transform: translate3d(0, 0, 0); }
  17%, 80% { transform: translate3d(0, var(--bottom-open), 0); }
  87%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes band-once {
  0%, 10.5% { opacity: 0; transform: scaleY(.025); }
  13% { opacity: 1; transform: scaleY(.18); }
  17%, 80% { opacity: 1; transform: scaleY(1); }
  85% { opacity: 1; transform: scaleY(.12); }
  87%, 100% { opacity: 0; transform: scaleY(.025); }
}

@keyframes reveal-once {
  0%, 14% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translate3d(0, 7px, 0); }
  18%, 76% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); }
  81% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translate3d(0, -4px, 0); }
  100% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translate3d(0, 0, 0); }
}

@keyframes sheen-once {
  0%, 20% { left: -24%; opacity: 0; }
  23% { opacity: .62; }
  34% { left: 112%; opacity: 0; }
  100% { left: 112%; opacity: 0; }
}

.anchor.mode-stay.is-playing .travel { animation: travel-stay 3.1s cubic-bezier(.16, .78, .28, 1) var(--delay) both; }
.anchor.mode-stay.is-playing .logo-upper { animation: upper-stay 3.1s ease-out var(--delay) both; }
.anchor.mode-stay.is-playing .logo-lower { animation: lower-stay 3.1s ease-out var(--delay) both; }
.anchor.mode-stay.is-playing .identity-band { animation: band-stay 3.1s ease-out var(--delay) both; }
.anchor.mode-stay.is-playing .reveal { animation: reveal-stay 3.1s ease-out var(--delay) both; }
.anchor.mode-stay.is-playing .band-sheen { animation: sheen-stay 3.1s ease-out var(--delay) both; }

@keyframes travel-stay {
  0% { opacity: 0; transform: translate3d(0, 760px, 0) scale(.94); }
  13% { opacity: 1; }
  42% { opacity: 1; transform: translate3d(0, -13px, 0) scale(1.006); }
  56%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes upper-stay {
  0%, 38% { transform: translate3d(0, 0, 0); }
  68%, 100% { transform: translate3d(0, calc(-1 * var(--top-open)), 0); }
}

@keyframes lower-stay {
  0%, 38% { transform: translate3d(0, 0, 0); }
  68%, 100% { transform: translate3d(0, var(--bottom-open), 0); }
}

@keyframes band-stay {
  0%, 39% { opacity: 0; transform: scaleY(.025); }
  50% { opacity: 1; transform: scaleY(.18); }
  68%, 100% { opacity: 1; transform: scaleY(1); }
}

@keyframes reveal-stay {
  0%, 61% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translate3d(0, 7px, 0); }
  82%, 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); }
}

@keyframes sheen-stay {
  0%, 78% { left: -24%; opacity: 0; }
  86% { opacity: .62; }
  100% { left: 112%; opacity: 0; }
}

.anchor[data-band-theme="ember"] .identity-band {
  background:
    linear-gradient(90deg, rgba(72, 14, 15, .38), transparent 14%, transparent 86%, rgba(72, 14, 15, .38)),
    linear-gradient(112deg, #71171a 0%, #bd251e 24%, #f05a1d 50%, #d8321e 76%, #671519 100%);
}

.anchor[data-band-theme="dark"] .identity-band {
  background:
    linear-gradient(90deg, rgba(8, 5, 5, .42), transparent 15%, transparent 85%, rgba(8, 5, 5, .42)),
    linear-gradient(112deg, #1e1414 0%, #47201b 28%, #9c3c20 52%, #4c211b 75%, #1c1213 100%);
}

@media (prefers-reduced-motion: reduce) {
  .anchor.mode-stay.is-playing .travel,
  .anchor.mode-once.is-playing .travel { animation-duration: 1ms; opacity: 1; transform: translate3d(0, 0, 0); }
  .anchor.mode-stay.is-playing .logo-upper,
  .anchor.mode-once.is-playing .logo-upper { animation-duration: 1ms; transform: translate3d(0, calc(-1 * var(--top-open)), 0); }
  .anchor.mode-stay.is-playing .logo-lower,
  .anchor.mode-once.is-playing .logo-lower { animation-duration: 1ms; transform: translate3d(0, var(--bottom-open), 0); }
  .anchor.mode-stay.is-playing .identity-band,
  .anchor.mode-once.is-playing .identity-band { animation-duration: 1ms; opacity: 1; transform: scaleY(1); }
  .anchor.mode-stay.is-playing .reveal,
  .anchor.mode-once.is-playing .reveal { animation-duration: 1ms; opacity: 1; clip-path: inset(0); transform: none; }
  .band-sheen { display: none; }
}