/* 根戸ろまん ハブ — PV 枠・カットイン・流れる帯・デコ。
   場面は .pv-stage[data-scene] で切り替える（quiet / rec / slam / cutin）。最後は作者紹介（.pv-profile）で止まる。
   .pv の状態: (なし)=JS 無し→紹介の静止画／is-playing=再生中→紹介を隠す／is-done=止まった→紹介を出す。
   html.js（boot.js）があって is-done でない間は紹介を隠す＝再生前に一瞬見えない。 */

:root {
  --rec: #ff3b3b;
  --pv-say-size: clamp(14px, 4.1vw, 17px);
  --pv-say-big: clamp(17px, 5.2vw, 22px);
  --slam-size: clamp(66px, 21vw, 98px);
  --sweep: cubic-bezier(0.7, 0, 0.2, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mx: 0;
  --my: 0;
}

body { overflow-x: clip; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── PV の枠 ── */
.pv {
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}

.pv-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  container-type: inline-size;
}
.js .pv-stage { display: block; }
.pv.is-still .pv-stage { display: none; }

/* 作者紹介＝PV の最後の画。stage の上に重ね、再生中は隠す */
.pv-profile { position: relative; z-index: 2; }
.pv-profile .icon { transform-origin: 0 0; }
.js .pv:not(.is-done) .pv-profile { visibility: hidden; }
.pv.is-done .cutin-face { visibility: hidden; }

.pv-stage > * { position: absolute; inset: 0; }

/* 網トーンの地（quiet）。rec では暗転 */
.pv-tone {
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(22, 21, 26, 0.20) 1.3px, transparent 1.6px),
    linear-gradient(180deg, rgba(22, 21, 26, 0.10), transparent 40%, rgba(22, 21, 26, 0.16));
  background-size: 8px 8px, 100% 100%;
  transition: background-color 240ms linear;
}

[data-scene="rec"] .pv-tone {
  background-color: #1b1a20;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.5px),
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.7) 100%);
}

[data-scene="slam"] .pv-tone { background-image: none; background-color: var(--white); }

[data-scene="cutin"] .pv-tone {
  background-color: var(--ink);
  background-image: repeating-linear-gradient(-14deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 12px);
}

/* cast（任意の絵）。白黒にして網を重ねる */
.pv-shot { overflow: hidden; }
.pv-shot .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.25) brightness(1.05);
  opacity: 0;
  transition: opacity 400ms linear;
}
.pv-shot .shot.is-on { opacity: 0.92; }
[data-scene="slam"] .pv-shot .shot,
[data-scene="cutin"] .pv-shot .shot { opacity: 0; }
[data-scene="rec"] .pv-shot .shot.is-on { opacity: 0.55; filter: grayscale(1) contrast(1.4) brightness(0.8); }
.has-cast .pv-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(22, 21, 26, 0.35) 1.1px, transparent 1.4px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
}

/* 集中線（slam） */
.pv-lines {
  opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--ink) 0deg 1.1deg, transparent 1.1deg 4.5deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 24%, #000 62%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 24%, #000 62%);
}
[data-scene="slam"] .pv-lines { opacity: 1; }

/* ビデオレターの走査線（rec） */
.pv-scan {
  opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px);
}
[data-scene="rec"] .pv-scan { opacity: 1; }
/* ビューファインダーの四隅 */
.pv-scan::after {
  content: "";
  position: absolute;
  inset: 44px 16px 22px;
  --c: rgba(255, 255, 255, 0.75);
  background:
    linear-gradient(var(--c), var(--c)) top left / 22px 2px,
    linear-gradient(var(--c), var(--c)) top left / 2px 22px,
    linear-gradient(var(--c), var(--c)) top right / 22px 2px,
    linear-gradient(var(--c), var(--c)) top right / 2px 22px,
    linear-gradient(var(--c), var(--c)) bottom left / 22px 2px,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 22px,
    linear-gradient(var(--c), var(--c)) bottom right / 22px 2px,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 22px;
  background-repeat: no-repeat;
}

.pv-flash { background: var(--white); opacity: 0; pointer-events: none; z-index: 8; }

/* ── 語り（角箱）と吹き出し ── */
.pv-say { z-index: 4; }

.say {
  position: absolute;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: var(--pv-say-size);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.1em;
  color: var(--ink);
  max-height: 84%;
}

.say-narr {
  padding: 12px 8px;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.say-narr.is-big {
  font-size: var(--pv-say-big);
  padding: 14px 10px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--rec);
}

.say-bubble {
  padding: 22px 14px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-weight: 700;
}
.say-bubble::before,
.say-bubble::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 40%;
  border-style: solid;
}
.say-bubble::before {
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent var(--ink);
}
.say-bubble::after {
  right: -10px;
  top: calc(40% + 3px);
  border-width: 6px 0 6px 12px;
  border-color: transparent transparent transparent var(--white);
}

/* ── 叩きつける文字（slam） ── */
.pv-slam {
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.02em;
  opacity: 0;
}
[data-scene="slam"] .pv-slam { opacity: 1; }

.slam-line {
  font-family: var(--font-display);
  font-size: var(--slam-size);
  line-height: 1.02;
  color: var(--pink);
  -webkit-text-stroke: 0.09em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.06em 0.06em 0 var(--ink);
}
.slam-line:nth-child(2) { margin-left: 0.6em; }

/* ── カットイン（静止画の既定もここ） ── */
.pv-cutin { z-index: 6; opacity: 0; }
[data-scene="cutin"] .pv-cutin { opacity: 1; }

.band {
  position: absolute;
  left: -25%;
  width: 150%;
  transform: rotate(-14deg);
}
.band-ink-top { top: 20%; height: 5%; background: var(--white); }
.band-pink {
  top: 27%;
  height: 40%;
  background-color: var(--pink);
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1.6px, transparent 1.9px);
  background-size: 9px 9px;
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
}
.band-ink-bot { top: 69%; height: 3%; background: var(--white); }

.cutin-face {
  position: absolute;
  left: 7%;
  top: 31%;
  width: 36%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--ink);
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
}

.cutin-text {
  position: absolute;
  right: 6%;
  top: 30%;
  width: 52%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  transform: rotate(-14deg);
  transform-origin: right center;
}

.cutin-kicker {
  margin: 0;
  padding: 2px 8px;
  font-size: clamp(11px, 3.2cqi, 14px);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--white);
  background: var(--ink);
}

.cutin-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 8.6cqi, 42px);
  line-height: 1;
  color: var(--white);
  -webkit-text-stroke: 0.12em var(--ink);
  paint-order: stroke fill;
  white-space: nowrap;
}

.cutin-copy {
  margin: 0;
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: clamp(16px, 5.4cqi, 24px);
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
}

.cutin-shops {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  margin: 0;
  text-align: center;
  font-size: clamp(11px, 3.4cqi, 14px);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--white);
}

/* ── PV の中のデコ ── */
.pv-deco { position: absolute; inset: auto; height: auto; pointer-events: none; z-index: 7; opacity: 0; }
.pv-deco.d-burst { width: 46%; left: 50%; top: 50%; translate: -50% -50%; z-index: 4; }
.pv-deco.d-sparkle { width: 20%; left: 5%; top: 11%; }
.pv-deco.d-heart { width: 11%; left: 45%; top: 64%; rotate: 12deg; }
[data-scene="slam"] .d-burst,
[data-scene="cutin"] .d-sparkle,
[data-scene="cutin"] .d-heart { opacity: 1; }
/* 集中線は pv.js が marks: true の吹き出しへ移す。絵は下の中央の先から放射する形
   → -45deg で吹き出しの左上の縁（ほぼ 7% 26% の点）から外へ放射。大きさは吹き出しの字に合わせて em */
.say-bubble > .pv-deco.d-marks { width: 2.8em; left: calc(7% - 2.2em); top: calc(26% - 1.6em); rotate: -45deg; opacity: 0.85; }

/* ── HUD ── */
.pv-hud {
  inset: 0 0 auto 0;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
  pointer-events: none;
}
[data-scene="rec"] .pv-hud,
[data-scene="cutin"] .pv-hud { color: var(--white); }

.pv-tag { display: inline-flex; align-items: center; gap: 6px; }
.pv-tag b {
  padding: 1px 6px;
  color: var(--white);
  background: var(--pink);
  border: 2px solid var(--ink);
}
.pv-rec { display: none; color: var(--rec); }
.pv-rec::before { content: "● "; }
[data-scene="rec"] .pv-rec { display: inline; }
[data-scene="rec"] .pv-title { display: none; }
.pv-tc { display: none; }
.is-live .pv-tc { display: inline; }

.pv-bar {
  inset: auto 0 0 0;
  height: 4px;
  z-index: 9;
  background: rgba(22, 21, 26, 0.15);
}
.pv-bar i {
  display: block;
  height: 100%;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left center;
}
.is-still .pv-bar,
.pv-stage:not(.is-live) .pv-bar { display: none; }

/* 一時停止ボタン（WCAG 2.2.2） */
.pv-toggle {
  position: absolute;
  right: 10px;
  bottom: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.pv-toggle[hidden] { display: none; }
.pv-toggle:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--pink); }
.pv-toggle:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.pv-toggle::before {
  content: "";
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.pv-toggle[data-state="replay"]::before {
  width: 13px;
  height: 13px;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}
/* ↻ の矢じり（輪の切れ目の右端） */
.pv-toggle[data-state="replay"]::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 19px;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent currentColor;
  rotate: 35deg;
}
.pv-toggle[data-state="paused"]::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 3px;
}

/* ── 流れる帯（ゲームの告知サイトの帯） ── */
.ticker-wrap {
  position: relative;
  z-index: 2;
  width: 100vw;
  margin: 4px 0 8px calc(50% - 50vw);
  padding: 14px 0;
  overflow: hidden;
}
.ticker {
  width: 110%;
  margin-left: -5%;
  overflow: hidden;
  background: var(--ink);
  border-top: 3px solid var(--pink);
  border-bottom: 3px solid var(--pink);
  transform: rotate(-3deg);
}
.ticker-track {
  display: flex;
  width: max-content;
}
.ticker-track span {
  flex: none;
  padding: 7px 0;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--white);
  white-space: nowrap;
}
.ticker-track em { font-style: normal; color: var(--pink); padding: 0 0.8em; }

/* ── 画面の外周に浮かぶデコ ── */
.deco-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.deco-field img {
  position: absolute;
  height: auto;
  translate: calc(var(--mx) * var(--depth, 10px)) calc(var(--my) * var(--depth, 10px));
  user-select: none;
}
.f-donut  { width: 92px;  left: -26px; top: 12%;  --depth: 18px; }
.f-sparkle{ width: 110px; right: -18px; top: 6%;  --depth: 26px; }
.f-heart  { width: 64px;  right: 2%;   top: 46%;  --depth: 14px; }
.f-drops  { width: 70px;  left: 1%;    top: 58%;  --depth: 22px; }
.f-dots   { width: 130px; right: -40px; bottom: 6%; --depth: 8px; opacity: 0.8; }
.f-arrow  { width: 120px; left: -10px; bottom: 14%; --depth: 16px; }
.f-tri    { width: 60px;  left: 8%;    top: 34%;  --depth: 30px; display: none; }
.f-loop   { width: 130px; right: 6%;   top: 26%;  --depth: 20px; display: none; }

/* 広い画面: 左右の余白に大きい縦文字とデコを足す */
.side-type {
  display: none;
  position: fixed;
  top: 50%;
  z-index: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(80px, 9vw, 150px);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(22, 21, 26, 0.55);
  pointer-events: none;
  user-select: none;
}
.side-type.left { left: 3vw; writing-mode: vertical-rl; transform: translateY(-50%); }
.side-type.right {
  right: 2vw;
  writing-mode: vertical-rl;
  font-size: clamp(48px, 5vw, 84px);
  letter-spacing: 0.12em;
  -webkit-text-stroke: 2px rgba(255, 78, 139, 0.8);
  transform: translateY(-50%);
}

@media (min-width: 960px) {
  .side-type { display: block; }
  .f-tri, .f-loop { display: block; }
  .f-donut  { width: 140px; left: 16vw; top: 10%; }
  .f-sparkle{ width: 160px; right: 16vw; top: 8%; }
  .f-heart  { width: 90px;  right: 20vw; top: 52%; }
  .f-drops  { width: 100px; left: 20vw;  top: 64%; }
  .f-dots   { width: 200px; right: 12vw; bottom: 8%; }
  .f-arrow  { width: 170px; left: 14vw;  bottom: 12%; }
  .f-tri    { left: 24vw; top: 36%; }
  .f-loop   { right: 22vw; top: 30%; }
}

/* 主導線のコマに貼るデコ */
.link-main .pin-sparkle {
  position: absolute;
  right: 54px;
  bottom: 10px;
  width: 78px;
  height: auto;
  pointer-events: none;
}
/* アイコンと同じ升に置く（升が包含ブロック）→ 右上の縁（45° の点＝0.854・0.146）から外へ放射 */
.hero .pin-marks {
  position: absolute;
  grid-column: 1;
  grid-row: 1;
  left: calc(var(--icon-size) * 0.854 - 6px);
  top: calc(var(--icon-size) * 0.146 - 28px);
  rotate: 45deg;
  width: 44px;
  height: auto;
  pointer-events: none;
}

/* ══ ここから下は動きあり（.is-live か motion 許可のときだけ） ══ */
@media (prefers-reduced-motion: no-preference) {
  .is-live .ch { opacity: 0; animation: ch-in 1ms steps(1, end) forwards; }
  .is-live .say { animation: say-in 320ms var(--pop) both; }

  .is-live[data-scene="quiet"] .pv-tone { animation: tone-drift 9s linear infinite; }
  .is-live[data-scene="quiet"] .pv-shot .shot.is-on { animation: ken-burns 8s ease-out both; }
  .is-live[data-scene="rec"] .pv-flash { animation: flash-rec 420ms ease-out; }
  .is-live[data-scene="rec"] .pv-scan { animation: scan-roll 2.4s steps(24) infinite; }
  .is-live[data-scene="rec"] .pv-rec { animation: blink 1s steps(2, start) infinite; }
  .is-live[data-scene="slam"] .pv-flash { animation: flash-slam 300ms ease-out; }
  .is-live[data-scene="slam"] .pv-lines { animation: lines-flicker 240ms steps(3) infinite; }
  .is-live[data-scene="slam"] .pv-slam { animation: slam-in 220ms var(--ease) both, shake 300ms 220ms linear 1; }
  .is-live[data-scene="slam"] .d-burst { animation: burst-pop 300ms var(--pop) both; }

  .is-live[data-scene="cutin"] .band-pink { animation: sweep-in 420ms var(--sweep) both; }
  .is-live[data-scene="cutin"] .band-ink-top { animation: sweep-in-r 380ms 60ms var(--sweep) both; }
  .is-live[data-scene="cutin"] .band-ink-bot { animation: sweep-in 380ms 120ms var(--sweep) both; }
  .is-live[data-scene="cutin"] .cutin-face { animation: face-pop 420ms 260ms var(--pop) both; }
  .is-live[data-scene="cutin"] .cutin-kicker { animation: slide-l 300ms 380ms var(--ease) both; }
  .is-live[data-scene="cutin"] .cutin-name { animation: slide-l 340ms 460ms var(--ease) both; }
  .is-live[data-scene="cutin"] .cutin-copy { animation: stamp 360ms 720ms var(--pop) both; }
  .is-live[data-scene="cutin"] .cutin-shops { animation: fade-up 400ms 900ms var(--ease) both; }
  .is-live[data-scene="cutin"] .d-sparkle { animation: twinkle 1.4s 600ms ease-in-out infinite both; }
  .is-live[data-scene="cutin"] .d-heart { animation: face-pop 360ms 1000ms var(--pop) both; }

  .is-paused *,
  .is-paused *::before,
  .is-paused *::after { animation-play-state: paused !important; }

  .ticker-track { animation: ticker 26s linear infinite; }

  .deco-field img { animation: float 7s ease-in-out infinite alternate; }
  .deco-field img:nth-child(2n) { animation-duration: 9s; animation-delay: -3s; }
  .deco-field img:nth-child(3n) { animation-duration: 11s; animation-delay: -5s; }

  /* 止まった＝作者紹介の出（顔は pv.js がカットインの位置から飛ばす） */
  .pv.is-done:not(.is-still) .pv-stage { animation: stage-off 1ms 420ms forwards; }
  .pv.is-done:not(.is-still) .pv-profile { animation: bg-in 260ms ease-out both; }
  .pv.is-done:not(.is-still) .pv-profile::before { animation: lines-in 520ms 80ms var(--ease) both; }
  .pv.is-done:not(.is-still) .name { animation: slide-l 340ms 220ms var(--ease) both; }
  .pv.is-done:not(.is-still) .pin-marks { animation: face-pop 300ms 520ms var(--pop) both; }
  .pv.is-done:not(.is-still) .bubble { animation: say-in 320ms 360ms var(--pop) both; }
  .pv.is-done:not(.is-still) .alias { animation: fade-up 400ms 1500ms var(--ease) both; }
  .pv.is-done:not(.is-still) .bubble .ph { animation: ph-pop 360ms var(--pop) both; }
  .pv.is-done:not(.is-still) .bubble .ph:nth-child(1) { animation-delay: 520ms; }
  .pv.is-done:not(.is-still) .bubble .ph:nth-child(3) { animation-delay: 680ms; }
  .pv.is-done:not(.is-still) .bubble .ph:nth-child(4) { animation-delay: 760ms; }
  .pv.is-done:not(.is-still) .bubble .ph:nth-child(5) { animation-delay: 840ms; }
  .pv.is-done:not(.is-still) .bubble .ph:nth-child(7) { animation-delay: 1000ms; }
  .pv.is-done:not(.is-still) .bubble .ph:nth-child(8) { animation-delay: 1080ms; }

  .link-main .pin-sparkle { animation: twinkle 2.4s ease-in-out infinite; }
}

@keyframes ch-in { to { opacity: 1; } }
@keyframes say-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes tone-drift { to { background-position: 16px 16px, 0 0; } }
@keyframes ken-burns { from { transform: scale(1.12) translate(2%, 1%); } to { transform: scale(1); } }
@keyframes flash-rec { from { opacity: 0.9; } to { opacity: 0; } }
@keyframes flash-slam { from { opacity: 1; } to { opacity: 0; } }
@keyframes scan-roll { to { background-position: 0 72px; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes lines-flicker { 33% { transform: rotate(1.5deg) scale(1.03); } 66% { transform: rotate(-1deg); } }
@keyframes slam-in { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: scale(1); } }
@keyframes shake {
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(3px, -3px); }
  60% { transform: translate(-2px, 3px); }
  80% { transform: translate(2px, -1px); }
}
@keyframes burst-pop { from { opacity: 0; scale: 0.2; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes sweep-in { from { translate: -110% 0; } to { translate: 0 0; } }
@keyframes sweep-in-r { from { translate: 110% 0; } to { translate: 0 0; } }
@keyframes face-pop { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
@keyframes slide-l { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes stamp { from { opacity: 0; scale: 1.8; } to { opacity: 1; scale: 1; } }
@keyframes fade-up { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes twinkle { 50% { scale: 0.86; rotate: 8deg; opacity: 0.7; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes float { from { transform: translateY(-8px) rotate(-4deg); } to { transform: translateY(10px) rotate(5deg); } }
@keyframes stage-off { to { visibility: hidden; } }
@keyframes bg-in { from { background-color: rgba(255, 255, 255, 0); } }
@keyframes lines-in { from { opacity: 0; scale: 1.25; } }
@keyframes ph-pop { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes wiggle { 25% { rotate: -14deg; } 75% { rotate: 2deg; } }