/* =========================================================
   112 Studio · DIRECTOR CUT (Hero only)
   Only the hero changes. Everything below uses style.css as in site/.
   Active only when the inline head script sets html.dr-on.
   ========================================================= */

:root {
  --dr-ease: cubic-bezier(0.77, 0, 0.18, 1);
  --dr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Hero headline split ---------- */

html.dr-on .hero__headline {
  visibility: hidden;
}

html.dr-on .hero__headline.is-split {
  visibility: visible;
}

.dr-line {
  display: block;
  overflow: hidden;
  padding: 0.14em 0 0.08em;
  margin: -0.14em 0 -0.08em;
}

.dr-word {
  display: inline-block;
  white-space: nowrap;
}

.dr-char {
  display: inline-block;
  will-change: transform;
}

html.dr-on .dr-char {
  transform: translate3d(0, 110%, 0) rotate(7deg);
  transform-origin: 0 100%;
  transition: transform 1.15s var(--dr-ease) calc(var(--i) * 0.022s + var(--d, 0s));
}

html.dr-on .is-in .dr-char {
  transform: none;
}

/* ---------- Generic fade reveal ---------- */

html.dr-on .dr-fade {
  opacity: 0;
  translate: 0 36px;
  transition: opacity 1s ease var(--d, 0s), translate 1.3s var(--dr-ease-out) var(--d, 0s);
}

html.dr-on .dr-fade.is-in {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Hero ---------- */

html.dr-on .hero {
  position: relative;
  min-height: calc(100svh - 92px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc(var(--spacing-78) + 20px);
}

.dr-stage {
  position: relative;
  width: calc(100% - var(--spacing-27));
  height: 46svh;
  margin-bottom: var(--spacing-43);
  opacity: 1;
  pointer-events: none;
}

.dr-stage.is-on {
  opacity: 1;
}

/* Desktop: Figma-style row. Text left, stage centre, intro right. Nothing overlaps. */
@media (min-width: 1200px) {
  html.dr-on .hero.has-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) min(36vw, 660px) minmax(0, 0.8fr);
    align-items: center;
    column-gap: var(--spacing-43);
    padding: var(--spacing-43) var(--spacing-43) calc(var(--spacing-78) + 20px);
  }

  html.dr-on .hero.has-stage .hero__headline {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(52px, 4.6vw, 104px);
  }

  html.dr-on .hero.has-stage .dr-stage {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: min(72svh, 760px);
    margin: 0;
  }

  html.dr-on .hero.has-stage .hero__intro {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    max-width: 300px;
  }
}

.dr-card {
  position: absolute;
  overflow: hidden;
  background: #111;
  translate: calc(var(--mx, 0) * var(--depth, 1) * -26px) calc(var(--my, 0) * var(--depth, 1) * -18px);
  animation: dr-card-in 0.55s var(--dr-ease) both;
}

.dr-card.is-fast {
  animation-duration: 0.36s;
}

.dr-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: dr-card-img 1.2s var(--dr-ease-out) both;
}

.dr-card.is-fast img {
  animation: none;
}

@keyframes dr-card-in {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes dr-card-img {
  from { scale: 1.25; }
  to { scale: 1; }
}

.dr-stage__label {
  position: absolute;
  right: 0;
  bottom: -26px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ash-gray);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Hero footer line ---------- */

.dr-hud {
  position: absolute;
  left: var(--spacing-27);
  right: var(--spacing-27);
  bottom: var(--spacing-18);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ash-gray);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .dr-hud { left: var(--spacing-43); right: var(--spacing-43); }
}

html.dr-on .hero__intro.dr-fade {
  --d: 0.75s;
}

.dr-card.is-static,
.dr-card.is-static img {
  animation: none;
}