@font-face {
  font-family: "Galmuri11";
  src: url("../identity-concept-v3-retro-motion/fonts/Galmuri11.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #000;
  --ink: #f3f1e9;
  --lime: #d5ed92;
  --blue: #102d91;
  --pixel: "Galmuri11", "SFMono-Regular", Consolas, monospace;
  --sans: Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--black);
}

body { color: var(--ink); }
button, iframe { font: inherit; }

button:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

.transition-demo {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100dvh;
  min-height: 500px;
  overflow: hidden;
  background: var(--black);
}

.destination-screen,
.source-screen,
.pixel-canvas,
.starfield-canvas,
.crt-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.destination-screen {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(7% 50% 92.35% 50%);
  background: #050705;
  pointer-events: none;
}

.destination-screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050705;
}

.starfield-canvas {
  z-index: 2;
  display: block;
  opacity: 0;
  background: #000;
  image-rendering: pixelated;
  pointer-events: none;
}

.boot-signal {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(9px, 1.25vw, 18px);
  width: min(92vw, 1180px);
  color: var(--lime);
  font-family: var(--pixel);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%);
  text-shadow: clamp(2px, .24vw, 4px) 0 #102d91;
}

.boot-signal strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 16px);
  font-size: clamp(18px, 3.4vw, 58px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .035em;
}

.boot-signal strong i {
  display: block;
  width: .6em;
  height: 1em;
  flex: 0 0 auto;
  background: var(--lime);
}

.boot-kicker {
  color: var(--ink);
  font-size: clamp(7px, .72vw, 11px);
  letter-spacing: .22em;
  text-shadow: none;
}

.boot-signal small {
  color: rgba(243, 241, 233, .82);
  font: clamp(9px, 1.05vw, 15px)/1.45 var(--pixel);
  letter-spacing: .08em;
  text-shadow: none;
}

.arrival-titlebar {
  position: absolute;
  z-index: 7;
  top: 7%;
  left: 50%;
  width: 0;
  height: clamp(5px, .7vw, 10px);
  background: linear-gradient(90deg, #050f4d, #123da9 58%, #6f83c7);
  box-shadow: 0 0 0 1px #c4c7c5, 0 0 0 2px #050705;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.source-screen {
  z-index: 4;
  display: block;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  background: #080a09;
}

.pixel-canvas {
  z-index: 6;
  display: block;
  opacity: 0;
  image-rendering: pixelated;
  pointer-events: none;
}

.crt-overlay {
  z-index: 8;
  pointer-events: none;
  opacity: .2;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(243, 241, 233, .045) 3px 4px);
  mix-blend-mode: screen;
}

.study-label {
  position: absolute;
  z-index: 12;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(213, 237, 146, .58);
  background: rgba(5, 7, 5, .88);
  color: var(--lime);
  font: 9px/1 var(--pixel);
  letter-spacing: .08em;
}

.study-label b {
  padding-left: 9px;
  border-left: 1px solid rgba(243, 241, 233, .32);
  color: rgba(243, 241, 233, .68);
  font-weight: 400;
}

.transition-demo.is-autoplay .study-label,
.transition-demo.is-autoplay .transition-trigger,
.transition-demo.is-autoplay .replay-button {
  display: none;
}

.transition-trigger,
.replay-button {
  position: absolute;
  z-index: 13;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  border: 1px solid var(--lime);
  border-radius: 0;
  background: rgba(5, 7, 5, .92);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--pixel);
  box-shadow: 5px 5px 0 rgba(213, 237, 146, .28);
}

.transition-trigger {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "eyebrow arrow" "title arrow";
  gap: 5px 24px;
  align-items: center;
  min-width: min(360px, calc(100vw - 36px));
  padding: 15px 18px;
  text-align: left;
}

.transition-trigger span {
  grid-area: eyebrow;
  color: var(--lime);
  font-size: 9px;
  letter-spacing: .16em;
}

.transition-trigger strong {
  grid-area: title;
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 400;
  letter-spacing: .04em;
}

.transition-trigger i {
  grid-area: arrow;
  font: normal clamp(25px, 3vw, 42px)/1 var(--sans);
}

.transition-trigger:hover,
.replay-button:hover {
  background: var(--lime);
  color: var(--black);
  box-shadow: 7px 7px 0 rgba(16, 45, 145, .68);
}

.transition-trigger:hover span { color: var(--black); }

.replay-button {
  padding: 13px 16px;
  color: var(--lime);
  font-size: 10px;
  letter-spacing: .08em;
}

.sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.transition-demo.is-transitioning .source-screen { opacity: 0; }

.transition-demo.is-transitioning .pixel-canvas {
  opacity: 1;
  animation: pixel-layer .94s steps(14, end) both;
}

.transition-demo.is-transitioning .starfield-canvas {
  animation: starfield-window .94s steps(12, end) both;
}

.transition-demo.is-transitioning .boot-signal {
  animation: boot-copy .94s steps(1, end) both;
}

.transition-demo.is-transitioning .boot-signal strong i {
  animation: cursor-blink .11s steps(1, end) infinite alternate;
}

.transition-demo.is-transitioning .arrival-titlebar {
  animation: titlebar-boot .94s steps(9, end) both;
}

.transition-demo.is-transitioning .destination-screen {
  animation: destination-boot .94s steps(10, end) both;
}

.transition-demo.is-transitioning .transition-trigger,
.transition-demo.is-complete .transition-trigger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.transition-demo.is-transitioning .study-label { opacity: .42; }

.transition-demo.is-complete .source-screen,
.transition-demo.is-complete .pixel-canvas,
.transition-demo.is-complete .starfield-canvas,
.transition-demo.is-complete .boot-signal,
.transition-demo.is-complete .arrival-titlebar { display: none; }

.transition-demo.is-complete .destination-screen {
  opacity: 1;
  clip-path: inset(0);
  pointer-events: auto;
}

@keyframes pixel-layer {
  0%, 78% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@keyframes starfield-window {
  0%, 38% { opacity: 0; }
  46%, 72% { opacity: 1; }
  84% { opacity: .58; }
  100% { opacity: 0; }
}

@keyframes boot-copy {
  0%, 42% { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  50%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes cursor-blink { to { opacity: 0; } }

@keyframes titlebar-boot {
  0%, 53% { width: 0; opacity: 0; }
  57% { width: 12%; opacity: 1; }
  69% { width: 86%; opacity: 1; height: clamp(5px, .7vw, 10px); }
  76% { width: 94%; height: clamp(11px, 2.7vw, 40px); opacity: 1; }
  88%, 100% { width: 100%; height: clamp(11px, 2.7vw, 40px); opacity: 0; }
}

@keyframes destination-boot {
  0%, 59% { opacity: 0; clip-path: inset(7% 50% 92.35% 50%); }
  62% { opacity: 1; clip-path: inset(7% 43% 92.35% 43%); }
  72% { opacity: 1; clip-path: inset(4% 5% 91.5% 5%); }
  83% { opacity: 1; clip-path: inset(4% 5% 47% 5%); }
  94% { opacity: 1; clip-path: inset(1.5% 1.5% 8% 1.5%); }
  100% { opacity: 1; clip-path: inset(0); }
}

@media (max-width: 720px) {
  .transition-demo { min-height: 420px; }

  .source-screen { object-position: 0 0; }

  .study-label {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    padding: 7px 8px;
    font-size: 7px;
  }

  .study-label b { display: none; }

  .transition-trigger,
  .replay-button {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .transition-trigger {
    min-width: min(310px, calc(100vw - 24px));
    padding: 13px 14px;
  }

  .boot-signal {
    width: calc(100vw - 28px);
    gap: 9px;
  }

  .boot-signal strong {
    gap: 7px;
    font-size: clamp(15px, 5.1vw, 28px);
    letter-spacing: 0;
  }

  .boot-kicker { font-size: 6px; }

  .boot-signal small {
    max-width: 88vw;
    font-size: 8px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transition-demo.is-transitioning .pixel-canvas,
  .transition-demo.is-transitioning .starfield-canvas,
  .transition-demo.is-transitioning .boot-signal,
  .transition-demo.is-transitioning .arrival-titlebar {
    animation: none !important;
  }

  .transition-demo.is-transitioning .destination-screen {
    animation: destination-reduced .24s linear both;
  }

  @keyframes destination-reduced {
    from { opacity: 0; clip-path: inset(0); }
    to { opacity: 1; clip-path: inset(0); }
  }
}