.gaia-opening {
  --opening-cyan: 83, 219, 229;
  --opening-blue: 91, 151, 239;
  --opening-pink: 213, 117, 185;
  position: fixed;
  z-index: 400;
  inset: 0;
  overflow: hidden;
  color: #f7ffff;
  background: #061425;
  isolation: isolate;
}

body.gaia-opening-active {
  overflow: hidden;
}

.gaia-opening[hidden] {
  display: none;
}

.gaia-opening::before {
  position: absolute;
  z-index: 22;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: #fff;
}

.gaia-vn-track,
.gaia-vn-panel,
.gaia-vn-character-grid,
.gaia-vn-character-echoes,
.gaia-vn-montage-dots,
.gaia-vn-final-photo,
.gaia-vn-final-shade,
.gaia-opening-wipe {
  position: absolute;
  inset: 0;
}

.gaia-vn-panel {
  overflow: hidden;
  opacity: 0;
  isolation: isolate;
  will-change: opacity, clip-path, filter, transform;
}

.gaia-vn-panel-prologue { z-index: 1; }
.gaia-vn-panel-minamo { z-index: 2; }
.gaia-vn-panel-sora { z-index: 3; }
.gaia-vn-panel-montage { z-index: 4; }
.gaia-vn-panel-final { z-index: 5; }

/* 00 / prologue */
.gaia-vn-panel-prologue {
  color: #fff;
  background:
    radial-gradient(circle at 73% 43%, rgba(var(--opening-cyan), 0.2), transparent 25%),
    linear-gradient(112deg, #06182b 0 59%, #0d2d4d 59% 78%, #173552 78%);
}

.gaia-vn-panel-prologue::before {
  position: absolute;
  top: -20%;
  right: 14%;
  width: 1px;
  height: 142%;
  content: "";
  color: rgba(var(--opening-cyan), 0.4);
  background: currentColor;
  box-shadow: 58px 0 currentColor, 116px 0 currentColor, 174px 0 currentColor;
  transform: rotate(17deg);
}

.gaia-vn-panel-prologue::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38%;
  height: 8px;
  content: "";
  background: #ecd36d;
  box-shadow: -42vw 0 rgb(var(--opening-cyan)), -21vw 0 rgb(var(--opening-pink));
}

.gaia-vn-prologue-lines {
  position: absolute;
  inset: 22% 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 48vh rgba(255, 255, 255, 0.18);
  transform: scaleX(0);
  transform-origin: left;
}

.gaia-vn-project,
.gaia-vn-season {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

.gaia-vn-project {
  top: 8%;
  left: 6%;
  color: rgb(var(--opening-cyan));
  font-size: 9px;
  letter-spacing: 0.16em;
}

.gaia-vn-season {
  right: 6%;
  bottom: 9%;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, 1.45vw, 24px);
  font-weight: 500;
  text-transform: none;
}

.gaia-vn-prologue-lockup {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(86vw, 1100px);
  text-align: center;
  transform: translate(-50%, -50%);
}

.gaia-vn-prologue-lockup small {
  color: rgba(230, 251, 255, 0.62);
  font: 800 9px/1.4 Consolas, "Courier New", monospace;
  letter-spacing: 0.3em;
}

.gaia-vn-prologue-lockup h2 {
  margin: 17px 0 0;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(52px, 9.2vw, 148px);
  font-weight: 300;
  letter-spacing: -0.075em;
  line-height: 0.82;
}

.gaia-vn-prologue-lockup p {
  margin: clamp(20px, 2.5vw, 34px) 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, 2vw, 29px);
  letter-spacing: 0.2em;
}

/* 01-02 / character files */
.gaia-vn-panel-character {
  color: #10334d;
  background: #f7feff;
}

.gaia-vn-panel-character::before {
  position: absolute;
  top: -18%;
  width: 58%;
  height: 138%;
  content: "";
}

.gaia-vn-panel-minamo::before {
  right: -8%;
  background: linear-gradient(145deg, #bceff2, #6ed7e4 72%);
  transform: skewX(-10deg);
}

.gaia-vn-panel-sora::before {
  left: -8%;
  background: linear-gradient(145deg, #d8efff, #8dc9f4 72%);
  transform: skewX(10deg);
}

.gaia-vn-panel-character::after {
  position: absolute;
  right: 0;
  bottom: 11%;
  left: 0;
  height: 7px;
  content: "";
  background: rgb(var(--opening-cyan));
  box-shadow: 0 12px 0 rgb(var(--opening-pink));
}

.gaia-vn-panel-sora::after {
  background: rgb(var(--opening-blue));
  box-shadow: 0 12px 0 #ecd36d;
}

.gaia-vn-character-grid {
  z-index: -1;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(20, 72, 101, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 72, 101, 0.12) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, #000, transparent 58%);
}

.gaia-vn-panel-sora .gaia-vn-character-grid {
  mask-image: linear-gradient(90deg, transparent 42%, #000);
}

.gaia-vn-character-focus {
  position: absolute;
  top: 50%;
  right: 5%;
  z-index: 4;
  width: min(58vw, 84vh, 760px);
  aspect-ratio: 1;
  margin: 0;
  transform: translateY(-50%);
}

.gaia-vn-panel-sora .gaia-vn-character-focus {
  right: auto;
  left: 5%;
}

.gaia-vn-character-image,
.gaia-vn-character-echoes i,
.gaia-vn-duo i {
  display: block;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: left top;
}

.gaia-vn-character-image {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 28px 30px rgba(14, 56, 82, 0.22));
}

.gaia-vn-panel-minamo .gaia-vn-character-image,
.gaia-vn-panel-minamo .gaia-vn-character-echoes i,
.gaia-vn-duo-minamo {
  background-image: url("./assets/characters/minamo-expression-sheet-alpha-v1.png");
}

.gaia-vn-panel-sora .gaia-vn-character-image,
.gaia-vn-panel-sora .gaia-vn-character-echoes i,
.gaia-vn-duo-sora {
  background-image: url("./assets/characters/sora-expression-sheet-alpha-v1.png");
}

.gaia-vn-character-echoes {
  z-index: 1;
  pointer-events: none;
}

.gaia-vn-character-echoes i {
  position: absolute;
  width: min(25vw, 320px);
  aspect-ratio: 1;
  opacity: 0.08;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}

.gaia-vn-character-echoes i:nth-child(1) { top: -8%; left: 31%; }
.gaia-vn-character-echoes i:nth-child(2) { top: 34%; left: 25%; transform: scale(0.78); }
.gaia-vn-character-echoes i:nth-child(3) { right: 34%; bottom: -14%; transform: scale(1.18); }
.gaia-vn-panel-sora .gaia-vn-character-echoes i:nth-child(1) { right: 31%; left: auto; }
.gaia-vn-panel-sora .gaia-vn-character-echoes i:nth-child(2) { right: 25%; left: auto; }
.gaia-vn-panel-sora .gaia-vn-character-echoes i:nth-child(3) { right: auto; left: 34%; }

.gaia-vn-character-copy {
  position: absolute;
  top: 50%;
  left: 7%;
  z-index: 5;
  width: min(39vw, 520px);
  transform: translateY(-50%);
}

.gaia-vn-panel-sora .gaia-vn-character-copy {
  right: 7%;
  left: auto;
  text-align: right;
}

.gaia-vn-character-copy p {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 17px;
  color: #157f98;
  font: 900 9px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0.12em;
}

.gaia-vn-panel-sora .gaia-vn-character-copy p {
  justify-content: flex-end;
  color: #5572b7;
}

.gaia-vn-character-copy p span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #10334d;
}

.gaia-vn-character-copy h2 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(64px, 7.2vw, 112px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.86;
}

.gaia-vn-character-copy strong {
  display: block;
  margin: 25px 0 10px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, 1.55vw, 22px);
  line-height: 1.7;
}

.gaia-vn-character-copy small {
  color: #6a8798;
  font: 800 8px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.14em;
}

.gaia-vn-character-band {
  position: absolute;
  right: -4%;
  bottom: 15%;
  left: -4%;
  z-index: 0;
  overflow: hidden;
  color: #10334d;
  font: 900 clamp(36px, 5vw, 72px)/1 Arial, Helvetica, sans-serif;
  opacity: 0.075;
  white-space: nowrap;
}

/* 03 / thematic montage */
.gaia-vn-panel-montage {
  color: #fff;
  background: #092943;
}

.gaia-vn-panel-montage::before {
  position: absolute;
  top: -18%;
  right: -7%;
  width: 48%;
  height: 138%;
  content: "";
  background: #bfeff3;
  transform: skewX(-9deg);
}

.gaia-vn-panel-montage::after {
  position: absolute;
  top: 0;
  right: 39%;
  width: 8px;
  height: 100%;
  content: "";
  background: rgb(var(--opening-cyan));
  box-shadow: 15px 0 0 rgb(var(--opening-pink));
  transform: skewX(-9deg);
}

.gaia-vn-montage-dots {
  opacity: 0.3;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.4px);
  background-size: 8px 8px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.gaia-vn-montage-label {
  position: absolute;
  top: 7%;
  left: 6%;
  z-index: 4;
  margin: 0;
  color: rgb(var(--opening-cyan));
  font: 900 9px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.14em;
}

.gaia-vn-word-rails {
  position: absolute;
  top: 17%;
  left: 6%;
  z-index: 4;
  width: min(53vw, 690px);
}

.gaia-vn-word-rails p {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  margin: 0 0 12px;
  padding: 0 20px 0 0;
  color: #10334d;
  background: #fff;
  box-shadow: 8px 8px 0 rgba(var(--opening-cyan), 0.7);
}

.gaia-vn-word-rails p:nth-child(2) { margin-left: 7%; background: #c9effc; box-shadow-color: rgba(var(--opening-pink), 0.72); }
.gaia-vn-word-rails p:nth-child(3) { margin-left: 2%; color: #fff; background: #4177bc; box-shadow-color: rgba(255, 255, 255, 0.72); }
.gaia-vn-word-rails p:nth-child(4) { margin-left: 10%; background: #e4c6e6; box-shadow-color: rgba(var(--opening-cyan), 0.75); }

.gaia-vn-word-rails span {
  display: grid;
  align-self: stretch;
  place-items: center;
  color: #fff;
  background: #10334d;
  font: 900 9px/1 Arial, Helvetica, sans-serif;
}

.gaia-vn-word-rails strong {
  overflow: hidden;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1;
  white-space: nowrap;
}

.gaia-vn-word-rails small {
  font: 900 8px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.1em;
}

.gaia-vn-duo {
  position: absolute;
  top: 50%;
  right: 4%;
  z-index: 3;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}

.gaia-vn-duo i {
  width: min(27vw, 360px);
  aspect-ratio: 1;
  border: 7px solid #fff;
  border-radius: 50%;
  background-color: #dff5fb;
  box-shadow: 0 24px 44px rgba(7, 28, 49, 0.22);
}

.gaia-vn-duo i + i {
  margin-left: -17%;
  transform: translateY(13%);
}

/* 04 / final key visual */
.gaia-vn-panel-final {
  background: #0b1730;
}

.gaia-vn-final-photo {
  inset: -2%;
  background: url("./assets/modes/mode-novel-v2.webp") center / cover no-repeat;
  transform: scale(1.06);
}

.gaia-vn-final-shade {
  background:
    linear-gradient(90deg, rgba(4, 13, 30, 0.92) 0%, rgba(4, 13, 30, 0.74) 31%, rgba(4, 13, 30, 0.2) 58%, transparent 75%),
    linear-gradient(180deg, rgba(2, 9, 22, 0.14), transparent 56%, rgba(2, 9, 22, 0.46));
}

.gaia-vn-final-copy {
  position: absolute;
  top: 50%;
  left: 6%;
  z-index: 4;
  width: min(540px, 43vw);
  transform: translateY(-50%);
}

.gaia-vn-final-copy p {
  margin: 0 0 15px;
  color: rgb(var(--opening-cyan));
  font: 900 9px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.14em;
}

.gaia-vn-final-copy h1 {
  margin: 0;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(52px, 6.4vw, 102px);
  font-weight: 300;
  letter-spacing: -0.07em;
  line-height: 0.84;
}

.gaia-vn-final-copy strong {
  display: block;
  margin: clamp(23px, 3vw, 38px) 0 0;
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.5;
}

.gaia-vn-final-copy span {
  display: block;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--opening-cyan), 0.4);
  color: rgba(239, 252, 255, 0.8);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(10px, 1.05vw, 14px);
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.9;
}

/* persistent film furniture */
.gaia-opening-hud {
  position: absolute;
  z-index: 30;
  right: 24px;
  bottom: 18px;
  left: 24px;
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  gap: 18px;
  align-items: center;
  color: #fff;
  font: 900 7px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.12em;
  mix-blend-mode: difference;
}

.gaia-opening-hud p { margin: 0; }
.gaia-opening-hud p:first-child { display: flex; gap: 8px; align-items: center; }
.gaia-opening-hud p:first-child span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #000;
  background: #fff;
}

.gaia-opening-progress {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.28);
}

.gaia-opening-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.gaia-opening-steps { display: flex; gap: 8px; }
.gaia-opening-steps span { opacity: 0.28; }

.gaia-vn-light-sweep {
  position: absolute;
  z-index: 26;
  top: -18%;
  bottom: -18%;
  left: -30vw;
  width: 25vw;
  min-width: 180px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: skewX(-10deg);
}

.gaia-opening-skip {
  position: absolute;
  z-index: 34;
  top: 24px;
  right: 24px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(4, 15, 28, 0.48);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font: 800 8px/1 Consolas, "Courier New", monospace;
  letter-spacing: 0.14em;
}

.gaia-opening-skip:hover,
.gaia-opening-skip:focus-visible {
  border-color: rgba(var(--opening-cyan), 0.8);
  color: #fff;
  background: rgba(23, 77, 109, 0.72);
  outline: none;
}

.gaia-opening-wipe {
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: #fff;
}

/* timeline */
.gaia-opening.is-active::before {
  animation: gaia-vn-cut-flash 8.1s linear both;
}

.gaia-opening.is-active .gaia-vn-panel-prologue {
  animation: gaia-vn-panel-prologue 1.38s 0s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.gaia-opening.is-active .gaia-vn-panel-minamo {
  animation: gaia-vn-panel-minamo 1.8s 1.02s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.gaia-opening.is-active .gaia-vn-panel-sora {
  animation: gaia-vn-panel-sora 1.8s 2.48s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.gaia-opening.is-active .gaia-vn-panel-montage {
  animation: gaia-vn-panel-montage 1.82s 3.94s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.gaia-opening.is-active .gaia-vn-panel-final {
  animation: gaia-vn-panel-final 3.2s 5.38s cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.gaia-opening.is-active .gaia-vn-prologue-lines { animation: gaia-vn-rule-draw 0.7s 0.08s ease-out both; }
.gaia-opening.is-active .gaia-vn-prologue-lockup { animation: gaia-vn-logo-arrive 0.92s 0.04s cubic-bezier(0.16, 0.86, 0.2, 1) both; }
.gaia-opening.is-active .gaia-vn-project,
.gaia-opening.is-active .gaia-vn-season { animation: gaia-vn-detail-arrive 0.5s 0.16s ease-out both; }

.gaia-opening.is-active .gaia-vn-panel-minamo .gaia-vn-character-focus { animation: gaia-vn-focus-right 0.88s 1.1s cubic-bezier(0.16, 0.86, 0.2, 1) both; }
.gaia-opening.is-active .gaia-vn-panel-minamo .gaia-vn-character-image { animation: gaia-vn-character-drift-right 1.65s 1.08s ease-out both; }
.gaia-opening.is-active .gaia-vn-panel-minamo .gaia-vn-character-copy { animation: gaia-vn-copy-left 0.76s 1.24s cubic-bezier(0.16, 0.86, 0.2, 1) both; }
.gaia-opening.is-active .gaia-vn-panel-minamo .gaia-vn-character-echoes { animation: gaia-vn-echo-right 0.92s 1.08s ease-out both; }
.gaia-opening.is-active .gaia-vn-panel-minamo .gaia-vn-character-band { animation: gaia-vn-band-left 1.65s 1.04s ease-out both; }

.gaia-opening.is-active .gaia-vn-panel-sora .gaia-vn-character-focus { animation: gaia-vn-focus-left 0.88s 2.56s cubic-bezier(0.16, 0.86, 0.2, 1) both; }
.gaia-opening.is-active .gaia-vn-panel-sora .gaia-vn-character-image { animation: gaia-vn-character-drift-left 1.65s 2.54s ease-out both; }
.gaia-opening.is-active .gaia-vn-panel-sora .gaia-vn-character-copy { animation: gaia-vn-copy-right 0.76s 2.7s cubic-bezier(0.16, 0.86, 0.2, 1) both; }
.gaia-opening.is-active .gaia-vn-panel-sora .gaia-vn-character-echoes { animation: gaia-vn-echo-left 0.92s 2.54s ease-out both; }
.gaia-opening.is-active .gaia-vn-panel-sora .gaia-vn-character-band { animation: gaia-vn-band-right 1.65s 2.5s ease-out both; }

.gaia-opening.is-active .gaia-vn-duo { animation: gaia-vn-duo-arrive 0.84s 4.02s cubic-bezier(0.16, 0.86, 0.2, 1) both; }
.gaia-opening.is-active .gaia-vn-montage-dots { animation: gaia-vn-dots-drift 1.72s 3.94s ease-out both; }
.gaia-opening.is-active .gaia-vn-montage-label { animation: gaia-vn-detail-arrive 0.42s 4.03s ease-out both; }
.gaia-opening.is-active .gaia-vn-word-rails p { animation: gaia-vn-rail-arrive 0.52s 4.08s cubic-bezier(0.16, 0.86, 0.2, 1) both; }
.gaia-opening.is-active .gaia-vn-word-rails p:nth-child(2) { animation-delay: 4.17s; }
.gaia-opening.is-active .gaia-vn-word-rails p:nth-child(3) { animation-delay: 4.26s; }
.gaia-opening.is-active .gaia-vn-word-rails p:nth-child(4) { animation-delay: 4.35s; }

.gaia-opening.is-active .gaia-vn-final-photo { animation: gaia-vn-final-photo 3.2s 5.38s ease-out both; }
.gaia-opening.is-active .gaia-vn-final-shade { animation: gaia-vn-final-shade 1.1s 5.42s ease-out both; }
.gaia-opening.is-active .gaia-vn-final-copy { animation: gaia-vn-final-copy 0.88s 5.58s cubic-bezier(0.16, 0.86, 0.2, 1) both; }
.gaia-opening.is-active .gaia-opening-progress i { animation: gaia-vn-progress 8.1s linear both; }
.gaia-opening.is-active .gaia-opening-steps span:nth-child(1) { animation: gaia-vn-count 1.38s 0s ease both; }
.gaia-opening.is-active .gaia-opening-steps span:nth-child(2) { animation: gaia-vn-count 1.8s 1.02s ease both; }
.gaia-opening.is-active .gaia-opening-steps span:nth-child(3) { animation: gaia-vn-count 1.8s 2.48s ease both; }
.gaia-opening.is-active .gaia-opening-steps span:nth-child(4) { animation: gaia-vn-count 1.82s 3.94s ease both; }
.gaia-opening.is-active .gaia-opening-steps span:nth-child(5) { animation: gaia-vn-count 3.2s 5.38s ease both; }
.gaia-opening.is-active .gaia-vn-light-sweep { animation: gaia-vn-light-pass 1.36s 0.7s cubic-bezier(0.16, 0.72, 0.2, 1) 5 both; }

.gaia-opening.is-leaving .gaia-opening-wipe { animation: gaia-vn-page-bloom 0.92s cubic-bezier(0.5, 0, 0.2, 1) both; }
.gaia-opening.is-leaving { animation: gaia-vn-away 0.92s ease both; }

@keyframes gaia-vn-panel-prologue {
  0% { opacity: 0; filter: blur(4px) brightness(0.76); transform: scale(1.04); }
  8%, 76% { opacity: 1; }
  76% { filter: none; transform: scale(1); }
  100% { opacity: 0; filter: brightness(1.35); transform: scale(0.985); }
}

@keyframes gaia-vn-panel-minamo {
  0% { opacity: 0; clip-path: polygon(108% 0, 108% 0, 100% 100%, 100% 100%); filter: brightness(1.22); transform: translateX(2.2%) scale(1.02); }
  9%, 79% { opacity: 1; }
  30%, 79% { clip-path: polygon(-12% 0, 100% 0, 100% 100%, -18% 100%); filter: none; transform: none; }
  100% { opacity: 0; clip-path: polygon(-12% 0, 100% 0, 100% 100%, -18% 100%); filter: brightness(1.24); transform: translateX(-1.4%) scale(1.016); }
}

@keyframes gaia-vn-panel-sora {
  0% { opacity: 0; clip-path: polygon(-8% 0, -8% 0, 0 100%, 0 100%); filter: brightness(1.22); transform: translateX(-2.2%) scale(1.02); }
  9%, 79% { opacity: 1; }
  30%, 79% { clip-path: polygon(0 0, 112% 0, 118% 100%, 0 100%); filter: none; transform: none; }
  100% { opacity: 0; clip-path: polygon(0 0, 112% 0, 118% 100%, 0 100%); filter: brightness(1.24); transform: translateX(1.4%) scale(1.016); }
}

@keyframes gaia-vn-panel-montage {
  0% { opacity: 0; clip-path: inset(100% 0 0); filter: brightness(1.18); transform: translateY(2%) scale(1.02); }
  10%, 79% { opacity: 1; }
  29%, 79% { clip-path: inset(0); filter: none; transform: none; }
  100% { opacity: 0; clip-path: inset(0); filter: brightness(1.22); transform: translateY(-1%) scale(1.014); }
}

@keyframes gaia-vn-panel-final {
  0% { opacity: 0; clip-path: circle(0 at 69% 44%); filter: brightness(1.35); transform: scale(1.025); }
  8%, 100% { opacity: 1; }
  31%, 100% { clip-path: circle(150% at 69% 44%); filter: none; transform: none; }
}

@keyframes gaia-vn-logo-arrive {
  0% { opacity: 0; filter: blur(11px) brightness(1.35); transform: translate(-50%, -43%) scale(1.14); }
  70% { opacity: 1; filter: none; transform: translate(-50%, -51%) scale(0.985); }
  100% { opacity: 1; filter: none; transform: translate(-50%, -50%) scale(1); }
}

@keyframes gaia-vn-detail-arrive {
  0% { opacity: 0; transform: translateY(14px); }
  72% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: none; }
}

@keyframes gaia-vn-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gaia-vn-focus-right { from { opacity: 0; filter: saturate(0.6) brightness(1.3); transform: translate(70px, -50%) scale(0.86); } to { opacity: 1; filter: none; transform: translate(0, -50%) scale(1); } }
@keyframes gaia-vn-focus-left { from { opacity: 0; filter: saturate(0.6) brightness(1.3); transform: translate(-70px, -50%) scale(0.86); } to { opacity: 1; filter: none; transform: translate(0, -50%) scale(1); } }
@keyframes gaia-vn-character-drift-right { from { transform: translate(2.5%, -1.5%) scale(1.12); } to { transform: none; } }
@keyframes gaia-vn-character-drift-left { from { transform: translate(-2.5%, -1.5%) scale(1.12); } to { transform: none; } }
@keyframes gaia-vn-copy-left { from { opacity: 0; transform: translate(-52px, -50%) scale(0.98); } to { opacity: 1; transform: translate(0, -50%) scale(1); } }
@keyframes gaia-vn-copy-right { from { opacity: 0; transform: translate(52px, -50%) scale(0.98); } to { opacity: 1; transform: translate(0, -50%) scale(1); } }
@keyframes gaia-vn-echo-right { from { opacity: 0; transform: translateX(68px); } to { opacity: 1; transform: none; } }
@keyframes gaia-vn-echo-left { from { opacity: 0; transform: translateX(-68px); } to { opacity: 1; transform: none; } }
@keyframes gaia-vn-band-left { from { opacity: 0; transform: translateX(90px); } to { opacity: 0.075; transform: translateX(-22px); } }
@keyframes gaia-vn-band-right { from { opacity: 0; transform: translateX(-90px); } to { opacity: 0.075; transform: translateX(22px); } }
@keyframes gaia-vn-dots-drift { from { opacity: 0; background-position: 40px 20px; } to { opacity: 0.3; background-position: 0 0; } }
@keyframes gaia-vn-duo-arrive { from { opacity: 0; filter: saturate(0.6) brightness(1.3); transform: translate(80px, -50%) scale(0.84); } to { opacity: 1; filter: none; transform: translate(0, -50%) scale(1); } }
@keyframes gaia-vn-rail-arrive { from { opacity: 0; transform: translateX(-72px) scaleX(0.96); } to { opacity: 1; transform: none; } }
@keyframes gaia-vn-final-photo { from { filter: brightness(1.3) saturate(0.72); transform: translateX(1.8%) scale(1.12); } to { filter: brightness(1) saturate(1.03); transform: translateX(-0.35%) scale(1.015); } }
@keyframes gaia-vn-final-shade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gaia-vn-final-copy { from { opacity: 0; transform: translate(-38px, -50%) scale(0.98); } to { opacity: 1; transform: translate(0, -50%) scale(1); } }
@keyframes gaia-vn-progress { to { transform: scaleX(1); } }
@keyframes gaia-vn-count { 0%, 100% { opacity: 0.28; } 28%, 76% { opacity: 1; } }
@keyframes gaia-vn-light-pass { 0% { left: -30vw; opacity: 0; } 22% { opacity: 0.14; } 50% { opacity: 0.52; } 74% { opacity: 0.16; } 100% { left: 108vw; opacity: 0; } }
@keyframes gaia-vn-cut-flash { 0%, 12.2% { opacity: 0; } 13% { opacity: 0.6; } 14.1%, 29.5% { opacity: 0; } 30.4% { opacity: 0.55; } 31.5%, 47.4% { opacity: 0; } 48.4% { opacity: 0.58; } 49.5%, 64.7% { opacity: 0; } 65.8% { opacity: 0.78; } 67%, 100% { opacity: 0; } }
@keyframes gaia-vn-page-bloom { 0% { opacity: 0; clip-path: circle(0 at 68% 43%); } 62%, 100% { opacity: 1; clip-path: circle(150% at 68% 43%); } }
@keyframes gaia-vn-away { 0%, 52% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 720px) {
  .gaia-vn-project { top: max(22px, env(safe-area-inset-top)); left: 20px; max-width: 55vw; font-size: 7px; }
  .gaia-vn-season { right: 20px; bottom: 70px; font-size: 12px; }
  .gaia-vn-prologue-lockup { width: 92vw; }
  .gaia-vn-prologue-lockup small { font-size: 7px; letter-spacing: 0.2em; }
  .gaia-vn-prologue-lockup h2 { margin-top: 13px; font-size: clamp(46px, 15vw, 72px); line-height: 0.9; }
  .gaia-vn-prologue-lockup p { max-width: 80vw; margin: 18px auto 0; font-size: 15px; line-height: 1.8; }

  .gaia-vn-panel-character::before { top: -8%; width: 118%; height: 62%; }
  .gaia-vn-panel-minamo::before { right: -28%; transform: skewX(-7deg); }
  .gaia-vn-panel-sora::before { left: -28%; transform: skewX(7deg); }
  .gaia-vn-character-focus,
  .gaia-vn-panel-sora .gaia-vn-character-focus {
    top: 1%;
    right: auto;
    left: 50%;
    width: min(91vw, 58vh);
    transform: translateX(-50%);
  }
  .gaia-vn-character-copy,
  .gaia-vn-panel-sora .gaia-vn-character-copy {
    top: auto;
    right: 22px;
    bottom: 14%;
    left: 22px;
    width: auto;
    text-align: left;
    transform: none;
  }
  .gaia-vn-panel-sora .gaia-vn-character-copy p { justify-content: flex-start; }
  .gaia-vn-character-copy h2 { font-size: clamp(48px, 15vw, 76px); }
  .gaia-vn-character-copy strong { max-width: 88vw; margin-top: 16px; font-size: 14px; }
  .gaia-vn-character-echoes { display: none; }
  .gaia-vn-character-band { bottom: 12%; font-size: 38px; }

  .gaia-vn-panel-montage::before { right: -35%; width: 72%; }
  .gaia-vn-panel-montage::after { right: 29%; }
  .gaia-vn-montage-label { top: 6%; left: 20px; max-width: 70vw; font-size: 7px; }
  .gaia-vn-word-rails { top: 15%; left: 20px; width: calc(100vw - 40px); }
  .gaia-vn-word-rails p { grid-template-columns: 34px minmax(0, 1fr); min-height: 58px; padding-right: 12px; }
  .gaia-vn-word-rails p:nth-child(n) { margin-left: 0; }
  .gaia-vn-word-rails strong { font-size: clamp(20px, 6.3vw, 28px); }
  .gaia-vn-word-rails small { display: none; }
  .gaia-vn-duo { right: -16%; bottom: -6%; top: auto; opacity: 0.35; transform: none; }
  .gaia-vn-duo i { width: 42vw; }

  .gaia-vn-final-photo { background-position: 62% center; }
  .gaia-vn-final-shade {
    background:
      linear-gradient(180deg, rgba(4, 13, 30, 0.66), rgba(4, 13, 30, 0.08) 44%, rgba(4, 13, 30, 0.84)),
      linear-gradient(90deg, rgba(4, 13, 30, 0.62), transparent 72%);
  }
  .gaia-vn-final-copy { top: auto; right: 20px; bottom: 11%; left: 20px; width: auto; transform: none; }
  .gaia-vn-final-copy h1 { font-size: clamp(48px, 14vw, 70px); }
  .gaia-vn-final-copy strong {
    margin-top: 20px;
    font-size: clamp(17px, 4.7vw, 21px);
    letter-spacing: -0.02em;
  }
  .gaia-vn-final-copy span { max-width: 88vw; margin-top: 13px; padding-top: 11px; font-size: 9px; }

  .gaia-opening-hud { right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); left: 14px; grid-template-columns: minmax(60px, 1fr) auto; gap: 10px; font-size: 6px; }
  .gaia-opening-hud > p:first-child { display: none; }
  .gaia-opening-steps { gap: 5px; }
  .gaia-opening-skip { top: max(17px, env(safe-area-inset-top)); right: 17px; }
  .gaia-vn-light-sweep { width: 42vw; }

  @keyframes gaia-vn-focus-right {
    from { opacity: 0; filter: saturate(0.6) brightness(1.3); transform: translate(-43%, 34px) scale(0.86); }
    to { opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); }
  }
  @keyframes gaia-vn-focus-left {
    from { opacity: 0; filter: saturate(0.6) brightness(1.3); transform: translate(-57%, 34px) scale(0.86); }
    to { opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); }
  }
  @keyframes gaia-vn-copy-left { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: none; } }
  @keyframes gaia-vn-copy-right { from { opacity: 0; transform: translateX(42px); } to { opacity: 1; transform: none; } }
  @keyframes gaia-vn-duo-arrive { from { opacity: 0; transform: translateX(70px) scale(0.84); } to { opacity: 0.35; transform: none; } }
  @keyframes gaia-vn-final-copy { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
}

@media (max-height: 620px) and (orientation: landscape) {
  .gaia-vn-character-focus { width: min(48vw, 88vh); }
  .gaia-vn-character-copy h2 { font-size: 62px; }
  .gaia-vn-character-copy strong { margin-top: 15px; font-size: 14px; }
  .gaia-vn-word-rails { top: 13%; }
  .gaia-vn-word-rails p { min-height: 50px; margin-bottom: 7px; }
  .gaia-vn-final-copy strong { margin-top: 18px; font-size: 25px; }
  .gaia-vn-final-copy span { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .gaia-opening {
    display: none;
  }
}
