:root {
  --op-brass: #c8a158;
  --op-ivory: #f6efe2;
}

body.openingPrototypeActive { overflow: hidden; }

.openingPrototype {
  position: fixed;
  z-index: 10020;
  inset: 0;
  overflow: hidden;
  color: var(--op-ivory);
  background: #020303;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s cubic-bezier(.45, 0, .2, 1);
}

.openingPrototype[hidden] { display: none; }
.openingPrototype.isPlaying { visibility: visible; pointer-events: auto; }
.openingPrototype[data-phase="hero"] { opacity: 0; pointer-events: none; }

.openingPrototypeScenes,
.openingPrototypeScene,
.openingPrototypeScene img,
.openingPrototypeManagerPicture,
.openingPrototypeVignette,
.openingPrototypeStillness,
.openingPrototypeApproachShade,
.openingPrototypeDoorLight,
.openingPrototypeDoor,
.openingPrototypeDoorShade,
.openingPrototypeManagerShade,
.openingPrototypeHandGuide {
  position: absolute;
  inset: 0;
}

.openingPrototypeScenes { overflow: hidden; background: #020303; }
.openingPrototypeScene { overflow: hidden; opacity: 0; transition: opacity .72s ease; }

.openingPrototypeScene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.openingPrototypeManagerPicture { display: block; }

.openingPrototypeVignette {
  z-index: 20;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.15) 61%, rgba(0,0,0,.72) 100%);
  box-shadow: inset 0 0 11vw 1.5vw rgba(0,0,0,.72);
  pointer-events: none;
}

.openingPrototypeHandGuide {
  z-index: 25;
  top: 42%;
  right: 4%;
  bottom: 8%;
  left: 47%;
  background: radial-gradient(ellipse at 62% 55%, rgba(229,184,105,.2), transparent 64%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

/* 0.0–2.2: approach the workshop, open the doors once, and cross the threshold. */
.openingPrototypeSceneApproach { z-index: 1; }
.openingPrototypeSceneApproach img {
  filter: brightness(.82) contrast(1.08) saturate(.76);
  transform: scale(1.025);
  animation: none;
}
.openingPrototypeApproachShade {
  background: radial-gradient(ellipse at 50% 48%, transparent 12%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.54));
  transition: opacity .4s ease;
}
.openingPrototype[data-phase="approach"] .openingPrototypeSceneApproach { opacity: 1; }
.openingPrototype[data-phase="approach"] .openingPrototypeSceneApproach img {
  animation: prototype-approach-door .8s cubic-bezier(.22,.65,.2,1) both;
}

.openingPrototypeSceneEntry {
  z-index: 2;
  background: #040403;
  transition-duration: .48s;
}
.openingPrototypeEntryWorkshop {
  filter: brightness(.34) contrast(1.14) saturate(.7);
  transform: scale(1.09);
  transition: filter 1s ease, transform 1.15s cubic-bezier(.2,.7,.2,1);
}
.openingPrototypeSceneEntry .openingPrototypeDoorLight {
  z-index: 2;
  right: auto;
  left: 50%;
  width: 2px;
  background: linear-gradient(90deg, transparent, rgba(224,179,99,.25), rgba(255,224,165,.62), rgba(224,179,99,.25), transparent);
  box-shadow: 0 0 18px rgba(225,174,82,.2);
  opacity: .3;
  transform: translateX(-50%);
  transition: width .8s cubic-bezier(.2,.7,.2,1), opacity .3s ease, box-shadow .8s ease;
}
.openingPrototypeSceneEntry .openingPrototypeDoor {
  z-index: 3;
  width: 50.35%;
  background: #080604 url("/images/opening-doors-local-v2.png") left center / 200% 100% no-repeat;
  box-shadow: inset -1px 0 rgba(200,161,88,.12), 14px 0 42px rgba(0,0,0,.55);
  transition: transform 1.45s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.openingPrototypeDoorLeft { right: auto; }
.openingPrototypeDoorRight {
  left: auto;
  background-position: right center !important;
  box-shadow: inset 1px 0 rgba(200,161,88,.12), -14px 0 42px rgba(0,0,0,.55) !important;
}
.openingPrototypeSceneEntry .openingPrototypeDoorShade {
  z-index: 4;
  background: radial-gradient(ellipse at 50% 47%, transparent 0 8%, rgba(0,0,0,.28) 48%, rgba(0,0,0,.72) 100%);
  transition: opacity .8s ease;
}
.openingPrototype[data-phase="entry-near"] .openingPrototypeSceneEntry,
.openingPrototype[data-phase="entry-open"] .openingPrototypeSceneEntry,
.openingPrototype[data-phase="enter"] .openingPrototypeSceneEntry { opacity: 1; }
.openingPrototype[data-phase="entry-open"] .openingPrototypeDoorLeft { transform: translateX(-58%); }
.openingPrototype[data-phase="entry-open"] .openingPrototypeDoorRight { transform: translateX(58%); }
.openingPrototype[data-phase="enter"] .openingPrototypeDoorLeft { transform: translateX(-82%); opacity: 0; }
.openingPrototype[data-phase="enter"] .openingPrototypeDoorRight { transform: translateX(82%); opacity: 0; }
.openingPrototype[data-phase="entry-open"] .openingPrototypeDoorLight { width: 34%; opacity: .35; }
.openingPrototype[data-phase="enter"] .openingPrototypeDoorLight { width: 62%; opacity: .12; }
.openingPrototype[data-phase="entry-open"] .openingPrototypeEntryWorkshop { filter: brightness(.58) contrast(1.08) saturate(.82); transform: scale(1.045); }
.openingPrototype[data-phase="enter"] .openingPrototypeEntryWorkshop { filter: brightness(.7) contrast(1.05) saturate(.86); transform: scale(1.015); }
.openingPrototype[data-phase="entry-open"] .openingPrototypeDoorShade,
.openingPrototype[data-phase="enter"] .openingPrototypeDoorShade { opacity: .35; }

.openingPrototypeSceneHammer {
  z-index: 2;
  background: #070503;
  transition-duration: .55s;
}
.openingPrototypeSceneHammer img {
  filter: brightness(.22) contrast(1.2) saturate(.72);
  object-position: 55% 48%;
  transform: scale(1.1);
  transition: filter .7s ease, transform 1.25s cubic-bezier(.18,.7,.2,1);
}
.openingPrototypeStrike {
  position: absolute;
  z-index: 2;
  top: 37%;
  left: 42%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe6a7;
  box-shadow: 0 0 14px 5px rgba(244,167,56,.9), -22px 9px 1px -1px #e7a33a, 25px -13px 1px -1px #ffd880, 38px 10px 1px -1px #bf6b21;
  opacity: 0;
}
.openingPrototypeTravelSpark {
  --spark-x: 35vw;
  --spark-y: -34vh;
  position: absolute;
  z-index: 3;
  top: 38%;
  left: 43%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f4bd62;
  box-shadow: 0 0 10px 3px rgba(227,157,53,.72);
  opacity: 0;
}

.openingPrototype[data-phase="hammer"] .openingPrototypeSceneHammer { opacity: 1; }
.openingPrototype[data-phase="hammer"] .openingPrototypeSceneHammer img { filter: brightness(.62) contrast(1.1) saturate(.85); transform: scale(1.04); }
.openingPrototype[data-phase="hammer"] .openingPrototypeStrike { animation: prototype-strike .42s ease-out both; }
.openingPrototype[data-phase="hammer"] .openingPrototypeTravelSpark { animation: prototype-carry-light .92s .08s cubic-bezier(.2,.6,.28,1) both; }

/* 1.8–9.5: one object gradually resolves into a brass-and-walnut table lamp. */
.openingPrototypeSceneCraft { z-index: 3; }
.openingPrototypeSceneCraft .openingPrototypeCraftImage {
  filter: brightness(.4) contrast(1.12) saturate(.78);
  opacity: 0;
  transform: scale(1.075);
  clip-path: inset(0);
  transition: filter .55s ease, transform .95s cubic-bezier(.3,.65,.2,1), opacity .38s ease;
}
.openingPrototypeCraftReady,
.openingPrototypeCraftLit { transition-duration: .65s !important; }
.openingPrototypeLampGlow {
  position: absolute;
  top: 0;
  right: 2%;
  width: 30%;
  height: 50%;
  background: radial-gradient(ellipse at 70% 12%, rgba(225,164,71,.28), transparent 62%);
  opacity: 0;
  transition: opacity 1s ease;
}
.openingPrototypeCraftFocus {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.32), transparent 28% 73%, rgba(0,0,0,.28));
  pointer-events: none;
}
.openingPrototypePolishGlint,
.openingPrototypeRevealGlow {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
}
.openingPrototypePolishGlint {
  top: -12%;
  bottom: -12%;
  left: -16%;
  width: 8%;
  background: linear-gradient(90deg, transparent, rgba(255,229,174,.5), transparent);
  filter: blur(3px);
  transform: skewX(-13deg);
}
.openingPrototypeRevealGlow {
  inset: 0;
  background: radial-gradient(ellipse at 50% 36%, rgba(239,185,92,.2), transparent 43%);
  mix-blend-mode: screen;
  transition: opacity .75s ease;
}

.openingPrototype[data-phase="craft-lit"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="measure"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="measure-done"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="assemble"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="assemble-done"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="stem"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="stem-done"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="polish"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="polish-done"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="shade"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="lamp-ready"] .openingPrototypeSceneCraft,
.openingPrototype[data-phase="lamp-lit"] .openingPrototypeSceneCraft { opacity: 1; }
.openingPrototype[data-phase="craft-lit"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="measure"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="measure-done"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="assemble"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="assemble-done"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="stem"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="stem-done"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="polish"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="polish-done"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="shade"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="lamp-ready"] .openingPrototypeLampGlow,
.openingPrototype[data-phase="lamp-lit"] .openingPrototypeLampGlow { opacity: 1; }
.openingPrototype[data-phase="craft-lit"] .openingPrototypeCraftMeasure,
.openingPrototype[data-phase="measure"] .openingPrototypeCraftMeasure,
.openingPrototype[data-phase="measure-done"] .openingPrototypeCraftMeasure {
  filter: brightness(.7) contrast(1.08) saturate(.88);
  opacity: 1;
  transform: scale(1.025) translateX(-1.5%);
  clip-path: inset(0);
}
.openingPrototype[data-phase="assemble"] .openingPrototypeCraftAssemble,
.openingPrototype[data-phase="assemble-done"] .openingPrototypeCraftAssemble {
  filter: brightness(.72) contrast(1.07) saturate(.9);
  opacity: 1;
  transform: scale(1.025);
  clip-path: inset(0);
}
.openingPrototype[data-phase="stem"] .openingPrototypeCraftStem,
.openingPrototype[data-phase="stem-done"] .openingPrototypeCraftStem {
  filter: brightness(.72) contrast(1.07) saturate(.9);
  opacity: 1;
  transform: scale(1.025) translateY(1%);
  clip-path: inset(0);
}
.openingPrototype[data-phase="polish"] .openingPrototypeCraftPolish,
.openingPrototype[data-phase="polish-done"] .openingPrototypeCraftPolish {
  filter: brightness(.74) contrast(1.06) saturate(.93);
  opacity: 1;
  transform: scale(1.025) translateX(1.5%);
  clip-path: inset(0);
}
.openingPrototype[data-phase="shade"] .openingPrototypeCraftShade {
  filter: brightness(.72) contrast(1.07) saturate(.88);
  opacity: 1;
  transform: scale(1.025) translateY(.5%);
  clip-path: inset(0);
}
.openingPrototype[data-phase="lamp-ready"] .openingPrototypeCraftReady,
.openingPrototype[data-phase="lamp-lit"] .openingPrototypeCraftReady {
  filter: brightness(.76) contrast(1.06) saturate(.88);
  opacity: 1;
  transform: scale(1.01);
  clip-path: inset(0);
}
.openingPrototype[data-phase="lamp-lit"] .openingPrototypeCraftLit {
  filter: brightness(.82) contrast(1.04) saturate(.94);
  opacity: 1;
  transform: scale(1.005);
  clip-path: inset(0);
}
.openingPrototype[data-phase="lamp-lit"] .openingPrototypeRevealGlow,
.openingPrototype[data-phase="wide-reveal"] .openingPrototypeRevealGlow { opacity: 1; }
.openingPrototype[data-phase="polish-done"] .openingPrototypePolishGlint { opacity: 1; animation: prototype-polish-glint .38s ease-out both; }

.openingPrototypeProcessCaptions {
  position: absolute;
  z-index: 27;
  right: clamp(22px, 5vw, 76px);
  bottom: clamp(58px, 8vh, 92px);
  left: clamp(22px, 5vw, 76px);
  pointer-events: none;
}
.openingPrototypeProcessCaption {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  color: rgba(246,239,226,.88);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .16em;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease, transform .45s ease;
}
.openingPrototype[data-phase="measure"] .openingPrototypeCaptionMeasure,
.openingPrototype[data-phase="measure-done"] .openingPrototypeCaptionMeasure,
.openingPrototype[data-phase="assemble"] .openingPrototypeCaptionAssemble,
.openingPrototype[data-phase="assemble-done"] .openingPrototypeCaptionAssemble,
.openingPrototype[data-phase="stem"] .openingPrototypeCaptionAssemble,
.openingPrototype[data-phase="stem-done"] .openingPrototypeCaptionAssemble,
.openingPrototype[data-phase="polish"] .openingPrototypeCaptionPolish,
.openingPrototype[data-phase="polish-done"] .openingPrototypeCaptionPolish,
.openingPrototype[data-phase="lamp-lit"] .openingPrototypeCaptionLight {
  opacity: 1;
  transform: none;
}
.openingPrototype[data-phase="lamp-lit"] .openingPrototypeCaptionLight { transition-delay: .15s; }

/* 9.5–11.5: the workshop opens up, then settles into a held breath. */
.openingPrototypeSceneWide { z-index: 4; }
.openingPrototypeSceneWide img {
  filter: brightness(.7) contrast(1.07) saturate(.84);
  transform: scale(1.075);
  transition: filter .9s ease, transform 2.8s cubic-bezier(.18,.7,.2,1);
}
.openingPrototypeWideGlow,
.openingPrototypeAttention {
  position: absolute;
  pointer-events: none;
}
.openingPrototypeWideGlow {
  inset: 0;
  background: radial-gradient(ellipse at 54% 40%, rgba(211,151,67,.14), transparent 55%);
  animation: prototype-workshop-breathe 2.2s ease-in-out infinite alternate;
}
.openingPrototypeStillness {
  z-index: 2;
  background: linear-gradient(90deg, rgba(2,3,3,.3) 0 55%, rgba(2,3,3,.08) 82%, rgba(2,3,3,.18));
  opacity: 0;
  transition: opacity .18s ease;
}
.openingPrototypeAttention {
  z-index: 3;
  top: 20%;
  right: 2%;
  bottom: 8%;
  left: 64%;
  background: radial-gradient(ellipse at 62% 44%, rgba(216,166,83,.15), transparent 61%);
  opacity: 0;
  transition: opacity .3s ease;
}
.openingPrototype[data-phase="wide-reveal"] .openingPrototypeSceneWide,
.openingPrototype[data-phase="wide"] .openingPrototypeSceneWide,
.openingPrototype[data-phase="still"] .openingPrototypeSceneWide,
.openingPrototype[data-phase="notice"] .openingPrototypeSceneWide { opacity: 1; }
.openingPrototype[data-phase="wide-reveal"] .openingPrototypeSceneWide { transition-duration: .52s; }
.openingPrototype[data-phase="wide"] .openingPrototypeSceneWide img { transform: scale(1.01); }
.openingPrototype[data-phase="still"] .openingPrototypeSceneWide img,
.openingPrototype[data-phase="notice"] .openingPrototypeSceneWide img { filter: brightness(.57) contrast(1.1) saturate(.72); transform: scale(1.01); transition-duration: .12s; }
.openingPrototype[data-phase="still"] .openingPrototypeWideGlow,
.openingPrototype[data-phase="notice"] .openingPrototypeWideGlow { animation-play-state: paused; }
.openingPrototype[data-phase="still"] .openingPrototypeStillness,
.openingPrototype[data-phase="notice"] .openingPrototypeStillness,
.openingPrototype[data-phase="still"] .openingPrototypeAttention,
.openingPrototype[data-phase="notice"] .openingPrototypeAttention { opacity: 1; }
.openingPrototype[data-phase="notice"] .openingPrototypeAttention { opacity: 1; }

/* 11.5–13.5: already inside, the manager notices and welcomes the visitor. */
.openingPrototypeSceneManager {
  z-index: 6;
  background: #050504;
  transition-duration: .22s;
}
.openingPrototypeManager {
  filter: brightness(.58) contrast(1.09) saturate(.72);
  transform: scale(1.045);
  transform-origin: 61% 42%;
  transition: filter .9s ease, transform 2.2s ease-out;
}
.openingPrototypeManagerShade {
  z-index: 2;
  background: radial-gradient(ellipse at 50% 46%, transparent 0 15%, rgba(0,0,0,.24) 50%, rgba(0,0,0,.75) 100%), linear-gradient(0deg, rgba(0,0,0,.52), transparent 48%);
  opacity: .58;
  transition: opacity .7s ease;
}
.openingPrototype[data-phase="manager"] .openingPrototypeSceneManager,
.openingPrototype[data-phase="welcome"] .openingPrototypeSceneManager,
.openingPrototype[data-phase="guide"] .openingPrototypeSceneManager,
.openingPrototype[data-phase="hero-background"] .openingPrototypeSceneManager { opacity: 1; }
.openingPrototype[data-phase="manager"] .openingPrototypeManager,
.openingPrototype[data-phase="welcome"] .openingPrototypeManager,
.openingPrototype[data-phase="guide"] .openingPrototypeManager,
.openingPrototype[data-phase="hero-background"] .openingPrototypeManager { filter: brightness(.72) contrast(1.06) saturate(.8); transform: scale(1.02); }
.openingPrototype[data-phase="welcome"] .openingPrototypeManager,
.openingPrototype[data-phase="guide"] .openingPrototypeManager,
.openingPrototype[data-phase="hero-background"] .openingPrototypeManager {
  filter: brightness(.82) contrast(1.03) saturate(.88) sepia(.05);
  transform: scale(1.035);
}
.openingPrototype[data-phase="hero-background"] .openingPrototypeManager {
  filter: brightness(.66) contrast(1.04) saturate(.78) sepia(.04);
  transform: scale(1.04);
}
.openingPrototype[data-phase="welcome"] .openingPrototypeManagerShade,
.openingPrototype[data-phase="guide"] .openingPrototypeManagerShade { opacity: .46; }
.openingPrototype[data-phase="hero-background"] .openingPrototypeManagerShade { opacity: .66; }
.openingPrototype[data-phase="guide"] .openingPrototypeHandGuide { opacity: 1; }

.openingPrototypeWelcome {
  position: absolute;
  z-index: 28;
  right: 0;
  bottom: clamp(76px, 11vh, 120px);
  left: 0;
  margin: 0 auto;
  padding: 0 24px;
  color: #fff2d3;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "IPAGothic", sans-serif;
  font-size: clamp(38px, 5.45vw, 82px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: .025em;
  text-align: center;
  -webkit-text-stroke: .35px rgba(187,143,70,.55);
  paint-order: stroke fill;
  text-shadow: 0 4px 18px #000, 0 0 24px rgba(200,151,69,.3);
  opacity: 0;
  transform: translateY(6px) scale(.97);
  transition: opacity .36s ease, transform .58s cubic-bezier(.2,.7,.2,1);
}
.openingPrototype[data-phase="welcome"] .openingPrototypeWelcome,
.openingPrototype[data-phase="guide"] .openingPrototypeWelcome { opacity: 1; transform: none; }
.openingPrototypeWelcomeTail {
  display: inline-block;
  color: inherit;
  opacity: 1;
  transform: none;
}

.openingPrototypeSkip {
  position: absolute;
  z-index: 40;
  top: max(18px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  min-height: 44px;
  min-width: 78px;
  padding: 10px 14px;
  border: 1px solid rgba(200,161,88,.6);
  color: #e9d7ac;
  background: rgba(3,7,9,.82);
  cursor: pointer;
  font: 600 11px/1.3 "Yu Gothic", sans-serif;
  letter-spacing: .16em;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.openingPrototypeSkip:hover,
.openingPrototypeSkip:focus-visible {
  border-color: var(--op-brass);
  color: #fff4d8;
  background: rgba(3,7,9,.94);
  outline: 1px solid rgba(255,232,177,.5);
  outline-offset: 2px;
}

@keyframes prototype-ember { from { opacity: .3; transform: scale(.9); } to { opacity: .7; transform: scale(1.08); } }
@keyframes prototype-strike { 0% { opacity: 0; transform: scale(.35); } 15% { opacity: 1; transform: scale(1.3); } 55% { opacity: .8; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes prototype-carry-light {
  0%, 12% { opacity: 0; transform: translate(0, 0) scale(.6); }
  24% { opacity: 1; }
  78% { opacity: .82; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(1.25); }
}
@keyframes prototype-polish-glint {
  0% { opacity: 0; transform: translateX(0) skewX(-13deg); }
  22% { opacity: .72; }
  100% { opacity: 0; transform: translateX(1320%) skewX(-13deg); }
}
@keyframes prototype-workshop-breathe {
  from { opacity: .52; }
  to { opacity: 1; }
}
@keyframes prototype-approach-door {
  from { transform: scale(1.025); }
  to { transform: scale(1.16); }
}

@media (max-width: 560px) {
  .openingPrototypeSceneApproach img,
  .openingPrototypeEntryWorkshop,
  .openingPrototypeSceneWide img { object-position: 48% center; }
  .openingPrototypeSceneHammer img { object-position: 42% center; }
  .openingPrototypeSceneCraft .openingPrototypeCraftMeasure { object-position: 34% center; }
  .openingPrototypeSceneCraft .openingPrototypeCraftAssemble,
  .openingPrototypeSceneCraft .openingPrototypeCraftStem,
  .openingPrototypeSceneCraft .openingPrototypeCraftPolish,
  .openingPrototypeSceneCraft .openingPrototypeCraftShade,
  .openingPrototypeSceneCraft .openingPrototypeCraftReady,
  .openingPrototypeSceneCraft .openingPrototypeCraftLit { object-position: 50% center; }
  .openingPrototypeManager { object-position: center; }
  .openingPrototypeTravelSpark { --spark-x: 30vw; --spark-y: -34vh; }
  .openingPrototypeHandGuide { top: 50%; right: -4%; bottom: 10%; left: 40%; }
  .openingPrototype[data-phase="craft-lit"] .openingPrototypeCraftMeasure,
  .openingPrototype[data-phase="measure"] .openingPrototypeCraftMeasure,
  .openingPrototype[data-phase="measure-done"] .openingPrototypeCraftMeasure,
  .openingPrototype[data-phase="assemble"] .openingPrototypeCraftAssemble,
  .openingPrototype[data-phase="assemble-done"] .openingPrototypeCraftAssemble,
  .openingPrototype[data-phase="stem"] .openingPrototypeCraftStem,
  .openingPrototype[data-phase="stem-done"] .openingPrototypeCraftStem,
  .openingPrototype[data-phase="polish"] .openingPrototypeCraftPolish,
  .openingPrototype[data-phase="polish-done"] .openingPrototypeCraftPolish,
  .openingPrototype[data-phase="shade"] .openingPrototypeCraftShade,
  .openingPrototype[data-phase="lamp-ready"] .openingPrototypeCraftReady,
  .openingPrototype[data-phase="lamp-lit"] .openingPrototypeCraftReady,
  .openingPrototype[data-phase="lamp-lit"] .openingPrototypeCraftLit { transform: scale(1.42); }
  .openingPrototype[data-phase="shade"] .openingPrototypeCraftShade { transform: scale(1.2); }
  .openingPrototype[data-phase="lamp-ready"] .openingPrototypeCraftReady,
  .openingPrototype[data-phase="lamp-lit"] .openingPrototypeCraftReady,
  .openingPrototype[data-phase="lamp-lit"] .openingPrototypeCraftLit { transform: scale(1.14); }
  .openingPrototypeProcessCaptions { right: 20px; bottom: 92px; left: 20px; }
  .openingPrototypeProcessCaption { font-size: 18px; }
  .openingPrototype[data-phase="entry-open"] .openingPrototypeDoorLeft { transform: translateX(-65%); }
  .openingPrototype[data-phase="entry-open"] .openingPrototypeDoorRight { transform: translateX(65%); }
  .openingPrototype[data-phase="enter"] .openingPrototypeDoorLeft { transform: translateX(-88%); opacity: 0; }
  .openingPrototype[data-phase="enter"] .openingPrototypeDoorRight { transform: translateX(88%); opacity: 0; }
  .openingPrototype[data-phase="entry-open"] .openingPrototypeDoorLight { width: 44%; }
  .openingPrototypeManager { object-position: center; }
  .openingPrototypeWelcome { bottom: 112px; padding: 0 14px; font-size: clamp(33px, 10vw, 46px); letter-spacing: .015em; }
  .openingPrototypeSkip { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
  .openingPrototypeScene,
  .openingPrototypeScene img,
  .openingPrototypeWelcome,
  .openingPrototype,
  .openingPrototypeDoor,
  .openingPrototypeDoorLight,
  .openingPrototypeHandGuide { transition-duration: .22s !important; transform: none !important; }
  .openingPrototypeWideGlow,
  .openingPrototypeTravelSpark,
  .openingPrototypePolishGlint { animation: none !important; }
  .openingPrototypeSceneApproach img { animation: none !important; }
  .openingPrototypeDoor { display: none; }
  .openingPrototype[data-phase="wide"] .openingPrototypeSceneWide,
  .openingPrototype[data-phase="manager"] .openingPrototypeSceneManager,
  .openingPrototype[data-phase="welcome"] .openingPrototypeSceneManager,
  .openingPrototype[data-phase="guide"] .openingPrototypeSceneManager,
  .openingPrototype[data-phase="hero-background"] .openingPrototypeSceneManager { opacity: 1; }
}