:root {
  --ink: #050505;
  --type: rgba(210, 201, 184, 0.82);
  --px: 0;
  --py: 0;
  --light-x: 0px;
  --light-y: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--ink); }
body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--type);
  font-family: "Helvetica Neue", "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.hero {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
}

.scene {
  position: absolute;
  inset: -10px;
  overflow: hidden;
  transform: translate3d(calc(var(--px) * -3px), calc(var(--py) * -2px), 0) scale(1.012);
  transform-origin: center;
  will-change: transform;
}

.scene__picture,
.scene__image {
  display: block;
  width: 100%;
  height: 100%;
}

.scene__image {
  object-fit: cover;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Light treatment follows the actual opening in the generated set. */
.scene__warmth {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.16;
  background:
    radial-gradient(
      ellipse 22% 58% at calc(82.4% + var(--light-x)) calc(47% + var(--light-y)),
      rgba(255, 205, 128, 0.34) 0%,
      rgba(255, 185, 92, 0.10) 38%,
      transparent 67%
    );
}

.scene__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.10), transparent 40%, transparent 78%, rgba(0,0,0,.08)),
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.20) 100%);
}

/* Very low-opacity texture; deliberately subtle. */
.scene__grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain .8s steps(2) infinite;
}

.identity {
  position: absolute;
  z-index: 5;
  left: clamp(48px, 7.7vw, 132px);
  top: 40.6%;
  transform: translateY(-50%);
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0,0,0,.18);
}

.identity__name,
.identity__descriptor {
  margin: 0;
  white-space: nowrap;
  font-weight: 300;
}

.identity__name {
  font-size: clamp(42px, 4.1vw, 70px);
  line-height: .96;
  letter-spacing: .205em;
}

.identity__descriptor {
  margin-top: clamp(24px, 2.3vw, 39px);
  font-size: clamp(10px, 1.05vw, 17px);
  line-height: 1;
  letter-spacing: .44em;
}

@keyframes grain {
  0%   { transform: translate3d(-2%, 1%, 0); }
  25%  { transform: translate3d(1%, -2%, 0); }
  50%  { transform: translate3d(2%, 2%, 0); }
  75%  { transform: translate3d(-1%, -1%, 0); }
  100% { transform: translate3d(-2%, 1%, 0); }
}

@media (max-width: 1100px) and (min-width: 701px) {
  .identity { left: 6vw; top: 41%; }
  .identity__name { font-size: clamp(38px, 4.2vw, 56px); }
  .identity__descriptor { font-size: clamp(9px, 1.08vw, 14px); }
}

@media (max-width: 700px) {
  .scene { inset: -6px; transform: translate3d(calc(var(--px) * -2px), calc(var(--py) * -1px), 0) scale(1.008); }
  .scene__image { object-position: center center; }

  .scene__warmth {
    opacity: .14;
    background:
      radial-gradient(
        ellipse 31% 48% at calc(76% + var(--light-x)) calc(54% + var(--light-y)),
        rgba(255, 206, 132, .28),
        rgba(255, 184, 88, .08) 42%,
        transparent 70%
      );
  }

  .identity {
    left: max(7vw, env(safe-area-inset-left));
    top: max(12svh, calc(env(safe-area-inset-top) + 38px));
    transform: none;
  }

  .identity__name {
    font-size: clamp(31px, 9.3vw, 46px);
    letter-spacing: .175em;
  }

  .identity__descriptor {
    margin-top: 19px;
    font-size: clamp(8px, 2.65vw, 11px);
    letter-spacing: .33em;
  }
}

@media (max-width: 380px) {
  .identity__name { font-size: 29px; letter-spacing: .15em; }
  .identity__descriptor { font-size: 8px; letter-spacing: .29em; }
}

@media (prefers-reduced-motion: reduce) {
  .scene { transform: scale(1.006); }
  .scene__grain { animation: none; }
}