/* Physics Gun boot game. Isolated from the portfolio and its existing motion. */
#cinematic-intro {--game-ready:1}
#cinematic-intro .boot-game {position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity .35s ease}
#cinematic-intro .boot-readout {
  position:absolute;top:18px;left:0;display:flex;align-items:center;gap:9px;
  border:1px solid #b8d1b633;background:#141a14de;padding:10px 13px;
  font-size:9px;letter-spacing:.07em;color:var(--muted);
}
#cinematic-intro .boot-led {width:5px;height:5px;border-radius:50%;background:var(--signal)}
#cinematic-intro .boot-score {border-left:1px solid var(--line);padding-left:12px;color:var(--signal)}
#cinematic-intro .gravity-beam {position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .15s;pointer-events:none}
#cinematic-intro .gravity-beam path {fill:none;stroke-linecap:round}
#cinematic-intro .beam-halo {stroke:#8dffd425;stroke-width:17}
#cinematic-intro .beam-core {stroke:#9af6d2;stroke-width:2}
#cinematic-intro .beam-thread {stroke:#eef7df;stroke-width:1;stroke-dasharray:7 16;animation:beam-travel .55s linear infinite}
#cinematic-intro .boot-game.is-grabbed .gravity-beam {opacity:1}
@keyframes beam-travel {to {stroke-dashoffset:-46}}
#cinematic-intro .physics-hand {
  position:absolute;left:0;bottom:2px;width:clamp(130px,20vw,245px);z-index:2;
  transform-origin:22% 64%;pointer-events:none;filter:drop-shadow(0 10px 18px #0008);
}
#cinematic-intro .physics-hand img {display:block;width:100%;height:auto}
#cinematic-intro .gun-label {position:absolute;left:3%;bottom:1%;font-size:7px;color:var(--mint);white-space:nowrap}
#cinematic-intro .energy-cell {
  position:absolute;top:0;left:0;width:78px;height:108px;padding:10px 8px 13px;
  border:0;background:transparent;pointer-events:auto;cursor:grab;z-index:5;
  touch-action:none;user-select:none;transform-origin:center;
  -webkit-user-select:none;-webkit-touch-callout:none;
}
#cinematic-intro .energy-cell:active {cursor:grabbing}
#cinematic-intro .energy-cell:focus-visible {outline:2px solid var(--signal);outline-offset:8px;border-radius:6px}
#cinematic-intro .cell-terminal {position:absolute;left:29px;right:29px;top:1px;height:14px;background:linear-gradient(90deg,#a7ae97,#f1efcb 40%,#666f58);border:1px solid #899879;border-radius:3px 3px 0 0}
#cinematic-intro .cell-shell {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  width:100%;height:100%;padding:8px 5px;background:linear-gradient(105deg,#859b6c,#cbd4a5 32%,#65754b 92%);
  border:1px solid #d3e1b6;border-radius:5px;box-shadow:7px 3px 0 #35452b,8px 4px 0 #98ab7c,0 0 35px #b8d1b628;
}
#cinematic-intro .cell-serial {font:7px var(--mono);color:#20341f;letter-spacing:.08em}
#cinematic-intro .cell-shell svg {width:19px;height:27px;fill:#1c311e;filter:drop-shadow(0 0 5px #e3ffc950)}
#cinematic-intro .cell-stripes {height:8px;width:100%;background:repeating-linear-gradient(90deg,#263a2680 0 2px,transparent 2px 5px)}
#cinematic-intro .cell-caption {position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font:8px var(--mono);letter-spacing:.08em;color:var(--mint);white-space:nowrap}
#cinematic-intro .boot-game.is-grabbed .cell-shell {box-shadow:7px 3px 0 #35452b,8px 4px 0 #9abf93,0 0 38px #87ffcc60}
#cinematic-intro .power-socket {
  position:absolute;width:96px;height:64px;transform:translate(-50%,-50%);
  padding:7px 12px;border:1px solid #ec986b88;background:#162119e8;
  border-radius:8px;z-index:3;pointer-events:auto;color:var(--signal);cursor:crosshair;
  box-shadow:0 0 0 5px #ff815c0c,0 0 30px #ff815c16;
}
#cinematic-intro .power-socket:disabled {cursor:default;color:var(--signal);opacity:1}
#cinematic-intro .socket-well {display:grid;place-items:center;height:100%;border:1px dashed #ff815c80;background:#0b130d;font:30px/1 var(--mono);border-radius:3px}
#cinematic-intro .socket-caption {position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);font:7px/1.3 var(--mono);letter-spacing:.04em;white-space:nowrap;color:var(--signal)}
#cinematic-intro .boot-game.is-grabbed .power-socket {border-color:#acf5d1;box-shadow:0 0 0 6px #b8d1b60c,0 0 34px #70ffb52b}
#cinematic-intro .boot-game.is-grabbed .socket-well {border-color:#b5fbd2;color:#b5fbd2}
#cinematic-intro .power-socket.is-near {background:#315038;box-shadow:0 0 0 7px #a3ffc526,0 0 50px #8fffb647}
#cinematic-intro .boot-game[data-game-phase=connected] .boot-led {background:#b4ffc7;box-shadow:0 0 14px #80ffa5}
#cinematic-intro .boot-game[data-game-phase=connected] .boot-score {color:#b4ffc7}
#cinematic-intro .intro-status {max-width:335px;min-height:5.1em}
#cinematic-intro .intro-game-finished .boot-game {opacity:0;pointer-events:none}
html[data-page-hidden=true] #cinematic-intro * {animation-play-state:paused!important}
@media(max-width:700px) {
  #cinematic-intro .boot-readout {top:14px;font-size:7px;gap:7px;padding:8px 9px}
  #cinematic-intro .boot-score {padding-left:8px}
  #cinematic-intro .energy-cell {width:64px;height:92px;padding:9px 7px 11px}
  #cinematic-intro .cell-terminal {left:23px;right:23px;height:12px}
  #cinematic-intro .cell-shell {padding:7px 4px}
  #cinematic-intro .cell-serial {font-size:6px}
  #cinematic-intro .cell-caption {font-size:7px;bottom:-13px}
  #cinematic-intro .power-socket {width:78px;height:58px;padding:6px 9px}
  #cinematic-intro .socket-caption {font-size:6px;bottom:-20px}
  #cinematic-intro .gun-label {font-size:5px}
  #cinematic-intro .physics-hand {bottom:2px;width:130px}
  #cinematic-intro .intro-signature {gap:14px}
  #cinematic-intro .intro-signature strong {font-size:34px}
  #cinematic-intro .intro-status {font-size:10px;min-width:0;max-width:290px}
}
@media(max-height:500px) {
  #cinematic-intro .boot-readout {top:7px;padding:5px 8px;font-size:7px}
  #cinematic-intro .physics-hand {width:135px;left:1%;bottom:0}
  #cinematic-intro .energy-cell {width:64px;height:88px}
  #cinematic-intro .cell-terminal {left:24px;right:24px}
  #cinematic-intro .power-socket {width:80px;height:54px}
  #cinematic-intro .intro-signature strong {font-size:28px}
  #cinematic-intro .intro-status {font-size:9px;min-width:0;max-width:265px}
}