@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --bg-light: #fdfbf7;
  --bg-dark: #1c1c1e;
  --bg-term: #0a0a0a;
  --text-dark: #1c1c1e;
  --text-light: #ffffff;
  --text-dim: #666666;
  --acc: #007aff;
  --term-green: #00ff41;
  --brutal-border: 3px solid #1c1c1e;
  --brutal-shadow: 6px 6px 0px #1c1c1e;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background-color: var(--bg-light);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- ENGINE: PINS & STAGES --- */
.pin { position: relative; }
.pin .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.pin.collapsed { height: auto !important; }
.pin.collapsed .stage { position: static; height: auto; }

/* --- ENGINE: SCENE TRANSITIONS --- */
.scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease; 
  display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.scene.active { opacity: 1; pointer-events: auto; }
.scene.dark { background-color: var(--bg-dark); color: var(--text-light); }
.scene.light { background-color: var(--bg-light); color: var(--text-dark); }
.scene.term { background-color: var(--bg-term); color: var(--text-light); }

/* --- ENGINE: TRANSPORT & CHROME (Blend mode for dual-tone legibility) --- */
.film-chrome { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 24px; font-family: var(--mono); font-size: 12px; color: #888; z-index: 10; mix-blend-mode: difference; }
.film-transport { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 20px 24px; font-family: var(--mono); font-size: 12px; color: #fff; z-index: 10; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); }
.ft-play, .ft-speed, .ft-sound { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer; font: 12px/1 var(--mono); display: grid; place-items: center; }
.ft-speed, .ft-sound { width: auto; border-radius: 18px; padding: 0 14px; }
.ft-play:hover, .ft-speed:hover, .ft-sound:hover { background: rgba(255,255,255,0.1); }
.ft-play.on { background: var(--acc); border-color: var(--acc); }
.ft-track { flex: 1; position: relative; height: 26px; cursor: pointer; touch-action: none; }
.ft-rail { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.2); }
.ft-fill { position: absolute; left: 0; top: 11px; height: 4px; border-radius: 4px; background: #fff; width: 0; }
.ft-handle { position: absolute; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translateX(-6px); left: 0; }
.ft-tick { position: absolute; top: 9px; width: 2px; height: 8px; background: rgba(255,255,255,0.4); }

/* --- ENGINE: RAIL & SKIP --- */
.film-rail { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 40; mix-blend-mode: difference; }
.fr-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; background: transparent; cursor: pointer; padding: 0; }
.fr-dot.on { background: #fff; }
.skip-pill { position: fixed; right: 18px; bottom: 18px; z-index: 60; border: 2px solid var(--text-dark); background: var(--bg-light); color: var(--text-dark); font: 600 12px/1 var(--sans); padding: 10px 16px; border-radius: 999px; cursor: pointer; box-shadow: 4px 4px 0px var(--text-dark); transition: all 0.1s ease; }
.skip-pill:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px var(--text-dark); }

/* --- CONCEPT DESIGN SYSTEM --- */
.ui-btn { padding: 16px 48px; background: var(--text-dark); color: white; border: none; border-radius: 12px; font-size: 20px; font-weight: 600; cursor: pointer; transition: transform 0.1s ease; font-family: var(--sans); }
.ui-btn:active { transform: scale(0.95); }
.ui-btn.loading { background: #e0e0e0; color: transparent; position: relative; }
.ui-btn.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 3px solid var(--text-dark); border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scene-text { margin-top: 40px; font-size: 2rem; font-weight: 600; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
.scene-text.show { opacity: 1; transform: translateY(0); }

.kinetic-text { font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; text-align: center; line-height: 1.1; opacity: 0; transform: scale(0.9); transition: all 0.2s ease; }
.kinetic-text.show { opacity: 1; transform: scale(1); }
.highlight { color: var(--acc); }
.mono { font-family: var(--mono); color: var(--acc); }

.terminal-mask { height: 100vh; width: 100%; max-width: 800px; mask-image: linear-gradient(to bottom, transparent 5%, black 20%, black 80%, transparent 95%); -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 20%, black 80%, transparent 95%); display: flex; justify-content: center; align-items: center; overflow: hidden; }
.terminal-track { font-family: var(--mono); font-size: clamp(1rem, 2vw, 1.5rem); color: #333; display: flex; flex-direction: column; gap: 15px; }
.terminal-track span { display: block; white-space: nowrap; transition: color 0.2s; }
.terminal-track span.active { color: var(--term-green); font-weight: 700; }
.terminal-track span.error { color: #ff3b30; }

.arch-container { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.arch-block { padding: 20px 30px; background: white; border: var(--brutal-border); border-radius: 12px; font-weight: 700; font-size: 1.2rem; opacity: 0; transform: translateY(30px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: var(--brutal-shadow); }
.arch-block.show { opacity: 1; transform: translateY(0); }
.arch-arrow { font-size: 2rem; font-weight: bold; opacity: 0; transform: translateX(-20px); transition: all 0.3s ease; }
.arch-arrow.show { opacity: 1; transform: translateX(0); }

.outro-text { font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 700; text-align: center; line-height: 1.1; max-width: 900px; }
.outro-text > span { display: block; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; }
.outro-text > span.show { opacity: 1; transform: translateY(0); }
.handle { margin-top: 40px; font-family: var(--mono); font-size: 1.2rem; color: var(--text-dim); opacity: 0; transition: opacity 0.5s ease; }

/* Quality & RM */
body.lo .scene { transition: none !important; }
body.rm .pin { height: auto !important; }
body.rm .stage { position: static; height: auto; }
body.rm .film-transport, body.rm .skip-pill, body.rm .film-rail { display: none; }
body.rm .scene { position: static; opacity: 1; pointer-events: auto; height: auto; min-height: 100vh; }
body.rm .kinetic-text, body.rm .scene-text, body.rm .arch-block, body.rm .arch-arrow, body.rm .outro-text span, body.rm .handle { opacity: 1 !important; transform: none !important; }
.ft-hint { flex: none; font-family: var(--mono); font-size: 11px; color: #9a9a9a; max-width: 34vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 720px) { .ft-hint { display: none; } }
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(max-width:640px){
  .scene{padding:0 20px}
  .kinetic-text{font-size:clamp(2rem,9vw,3.4rem)}
  .outro-text{font-size:clamp(2rem,8.5vw,3.2rem)}
  .arch-container{flex-direction:column;gap:12px}
  .arch-arrow{transform:rotate(90deg)}
  .arch-arrow.show{transform:rotate(90deg)}
  .terminal-track{font-size:.95rem;gap:10px}
  .scene-text{font-size:1.4rem}
  .handle{font-size:1rem}
  .cta-row{gap:12px;margin-top:32px}
}
@media(max-height:520px){
  .kinetic-text{font-size:clamp(1.8rem,6vh,3rem)}
  .outro-text{font-size:clamp(1.8rem,6vh,3rem)}
  .gate-h{font-size:clamp(2rem,7vh,3.4rem)}
  .gate-note{margin-top:10px}
  .cta-row{margin-top:20px}
}
@media(max-width:640px){
  #scene0{padding:70px 20px 24px}
  #scene0 .mono-eyebrow{font-size:11px}
}
@media(max-width:480px){
  #scene0 .gate-sub{font-size:1.05rem;line-height:1.5;margin-top:10px}
  #scene0 .gate-note{font-size:11px;margin-top:14px}
  #scene0 .cta-row{margin-top:26px;gap:14px}
  #scene0 .gate-quiet{font-size:12px}
  body .cta-btn{font-size:1rem;padding:14px 22px;white-space:nowrap}
  body #sndBtn{padding:8px 12px;font-size:10px;top:14px;right:14px}
  body #skipHint{left:14px;bottom:14px;font-size:10px;padding:8px 12px}
}

@media(max-width:640px){
  #scene7{padding:64px 20px 56px}
  #scene7 .handle{margin-top:20px}
  #scene7 .cta-row{margin-top:26px}
}
@media(max-width:480px){
  #scene7 .outro-text{font-size:clamp(1.5rem,7.5vw,2.4rem)}
}