/* TERMINATOR — PHAS2 hero prototype. Local only. */

@font-face {
  font-family: "PHAS2 Hero Space";
  src: url("/phas2/human-droid-hero-v1/assets/space-grotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

.p2-human-droid {
  --orange: #FF6500;
  --ivory: #FFFAF0;
  --charcoal: #242321;
  --muted: #625C54;
  --stone: #D4CBBD;
  --field: #F6F2EA;
  --ink: var(--charcoal);
  --ink-soft: var(--muted);
  --gutter: clamp(16px, 3.2vw, 44px);
  --track: 280svh;
  color-scheme: light;
}

.p2-human-droid * { box-sizing: border-box; }

.p2-human-droid {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: "PHAS2 Hero Space", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.p2-human-droid .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.p2-human-droid .hero-track { position: relative; height: var(--track); }.p2-human-droid .hero-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--field);
  touch-action: pan-y;
}.p2-human-droid .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }.p2-human-droid .hero-stage[data-render="webgl"] .head-svg { visibility: hidden; }.p2-human-droid .hero-stage:not([data-render="webgl"]) .hero-canvas { display: none; }.p2-human-droid .head-svg {
  
  position: absolute; display: block;
  height: calc(1250 * 70svh / 769.4); aspect-ratio: 1000 / 1250;
  top: calc(17svh - 190 * 70svh / 769.4); left: 50%;
  transform: translateX(-50%);
}
@media (max-aspect-ratio: 4/5) {.p2-human-droid .head-svg {
    height: auto;
    width: min(250vw, calc(1000 * 75svh / 769.4));
    top: calc(100svh - 0.9594 * min(250vw, calc(1000 * 75svh / 769.4)));
  }
}.p2-human-droid .placeholder-badge {
  position: absolute; left: 50%; bottom: clamp(12px, 3svh, 28px); transform: translateX(-50%);
  z-index: 3; max-width: calc(100% - 2 * var(--gutter));
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  color: var(--ivory); background: var(--charcoal); padding: 6px 10px; border-left: 3px solid var(--orange);
}.p2-human-droid .side-copy {
  position: absolute; z-index: 2; margin: 0; top: 38svh;
  font-weight: 700; text-transform: uppercase; line-height: .95; letter-spacing: -.01em;
  font-size: clamp(30px, 4.6vw, 76px);
  opacity: 0; transition: opacity .5s ease, transform .5s ease, color .35s ease;
  pointer-events: none;
}.p2-human-droid .side-copy.human { left: var(--gutter); transform: translateX(-12px); }.p2-human-droid .side-copy.machine { right: var(--gutter); text-align: right; transform: translateX(12px); }.p2-human-droid .side-copy.is-on { opacity: 1; transform: none; }.p2-human-droid[data-tone="dark"] .side-copy { color: var(--ivory); }.p2-human-droid .scene-desc, .p2-human-droid .hero-controls {
  position: absolute; z-index: 3; bottom: var(--gutter);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); transition: color .35s ease;
}.p2-human-droid .scene-desc { left: var(--gutter); }.p2-human-droid .scene-desc p { margin: 0 0 4px; }.p2-human-droid .readout { font-variant-numeric: tabular-nums; }.p2-human-droid .hero-controls { right: var(--gutter); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }.p2-human-droid .hero-controls .cue { margin: 0; text-align: right; line-height: 1.6; }.p2-human-droid .hero-controls .cue span { display: block; }.p2-human-droid[data-tone="dark"] .scene-desc, .p2-human-droid[data-tone="dark"] .hero-controls { color: var(--stone); }.p2-human-droid .switch { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; padding: 3px; background: color-mix(in srgb, var(--field) 70%, transparent); }.p2-human-droid[data-tone="dark"] .switch { background: color-mix(in srgb, var(--charcoal) 70%, transparent); }.p2-human-droid .switch button {
  font: inherit; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: inherit; background: none; border: 0; border-radius: 999px;
  min-height: 36px; min-width: 76px; padding: 0 14px; cursor: pointer;
}.p2-human-droid .switch button[aria-pressed="true"] { background: var(--charcoal); color: var(--ivory); }.p2-human-droid[data-tone="dark"] .switch button[aria-pressed="true"] { background: var(--ivory); color: var(--charcoal); }.p2-human-droid .cue-touch, .p2-human-droid .cue-reduced { display: none !important; }
@media (hover: none), (pointer: coarse) {.p2-human-droid .cue-fine { display: none !important; }.p2-human-droid .cue-touch { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {.p2-human-droid .cue-fine, .p2-human-droid .cue-touch { display: none !important; }.p2-human-droid .cue-reduced { display: block !important; }.p2-human-droid { --track: 100svh; }.p2-human-droid .side-copy, .p2-human-droid .brand img, .p2-human-droid .site-nav a { transition: none; }
}

@media (max-width: 560px) {.p2-human-droid .side-copy { top: 15svh; font-size: clamp(22px, 7.4vw, 34px); }.p2-human-droid .side-copy.machine { top: calc(15svh + 2.2em); }.p2-human-droid .scene-desc { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }.p2-human-droid .hero-controls { right: 50%; transform: translateX(50%); align-items: center; font-size: 10px; letter-spacing: .1em; }.p2-human-droid .hero-controls .cue { text-align: center; }.p2-human-droid .cue-scroll { display: none !important; }.p2-human-droid .placeholder-badge { font-size: 9.5px; letter-spacing: .1em; bottom: auto; top: calc(var(--gutter) + 46px); }.p2-human-droid .switch button { min-width: 64px; padding: 0 10px; min-height: 40px; }
}



.p2-human-droid { position: relative; isolation: isolate; --track: 280svh; }
.p2-human-droid .hero-controls .switch button { min-height: 44px; }
.p2-human-droid .hero-controls a { color: inherit; text-decoration: underline; text-underline-offset: .25em; min-height: 44px; display: inline-flex; align-items: center; }
.p2-human-droid .portrait-credit { position: absolute; z-index: 3; top: clamp(16px, 3.2vw, 44px); left: var(--gutter); margin: 0; max-width: calc(100% - 2 * var(--gutter)); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.p2-human-droid .scene-desc .readout { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.p2-human-droid .switch { visibility: hidden; }
.p2-human-droid[data-interactive="true"] .switch { visibility: visible; }
.p2-human-droid:not([data-interactive="true"]) .cue-fine, .p2-human-droid:not([data-interactive="true"]) .cue-touch, .p2-human-droid:not([data-interactive="true"]) .cue-reduced { display: none !important; }
.p2-human-droid:not([data-interactive="true"]) .hero-track { height: 100svh; }
.p2-human-droid[data-tone="dark"] .portrait-credit { color: var(--stone); }
.p2-human-droid :focus-visible { outline: 3px solid #a43f00; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .p2-human-droid { --track: 100svh; } .p2-human-droid .hero-controls, .p2-human-droid .switch, .p2-human-droid .side-copy { transition: none; } }

/* Account for the retained PHAS2 header without altering its layout or files. */
.p2-human-droid { --p2-hero-chrome: 116px; --hero-height: calc(100svh - var(--p2-hero-chrome)); }
.p2-human-droid .hero-stage { height: var(--hero-height); }
.p2-human-droid .head-svg { height: calc(1250 * .70 * var(--hero-height) / 769.4); top: calc(.17 * var(--hero-height) - 190 * .70 * var(--hero-height) / 769.4); }
.p2-human-droid:not([data-interactive="true"]) .hero-track { height: var(--hero-height); }
@media (max-aspect-ratio: 4/5) { .p2-human-droid .head-svg { height: auto; width: min(250vw, calc(1000 * .75 * var(--hero-height) / 769.4)); top: calc(var(--hero-height) - .9594 * min(250vw, calc(1000 * .75 * var(--hero-height) / 769.4))); } }
@media (max-width: 560px) { .p2-human-droid { --p2-hero-chrome: 122px; } }
@media (prefers-reduced-motion: reduce) { .p2-human-droid { --track: var(--hero-height); } }

/* Keep cue and continuation readable over either portrait material. */
.p2-human-droid .hero-controls { background: rgba(255,250,240,.96); padding: 10px 12px; border: 1px solid rgba(36,35,33,.25); border-radius: 16px; color: #48423b; gap: 3px; }
.p2-human-droid[data-tone="dark"] .hero-controls { background: rgba(36,35,33,.96); color: #fffaf0; border-color: rgba(255,250,240,.4); }
.p2-human-droid .hero-controls .cue { color: inherit; }