@charset "utf-8";

/*  ===============================
		hero（1画面）
	デザインのアートボード: PC 1920×1080（横長の画面）/ SP 635×1080（縦長の画面）
	--u = アートボードの 1pt が画面で何 px になるか。部品の位置と大きさは「アートボード上の値 × --u」で書く
	（値は slice/tools/make_parts.py の boxes_pc.txt と、SP 版アートボードから測った値）
	演出の状態: .hero.is-pre（点火前）→ .is-run（点火）→ .is-done（常時の動き）。.is-modal はモーダル表示中
===============================*/

.hero {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--bgColor);
	container-type: size;
	isolation: isolate;
}

.hero > *,
.hero_stage > * {
	--u: calc(min(100vw, 100vh * 16 / 9) / 1920);
}
@supports (width: 1cqw) {
	.hero > *,
	.hero_stage > * {
		--u: min(100cqw / 1920, 100cqh / 1080);
	}
}
@media (orientation: portrait) {
	.hero > *,
	.hero_stage > * {
		--u: calc(min(100vw, 100vh * 635 / 1080) / 635);
	}
	@supports (width: 1cqw) {
		.hero > *,
		.hero_stage > * {
			--u: min(100cqw / 635, 100cqh / 1080);
		}
	}
}

/* 背景
=============================== */
.hero_bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	transition:
		filter 1.4s var(--easeExpo),
		transform 1.6s var(--easeExpo);
}

/* モーダルの裏では暗くぼかす */
.hero.is-pre .hero_bg,
.hero.is-modal .hero_bg {
	filter: blur(10px) brightness(0.42) saturate(1.15);
	transform: scale(1.05);
}

.hero_bgParallax {
	position: absolute;
	inset: 0;
	will-change: transform;
}

/* 画面を覆う大きさに置く（object-fit: cover と同じ考え方。光の位置を画像に合わせるため箱ごと置く） */
.hero_bgFrame {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100vw, 100vh * 4138 / 3450);
	aspect-ratio: 4138 / 3450;
	translate: -50% -50%;
}
@supports (width: 1cqw) {
	.hero_bgFrame {
		width: max(100cqw, 100cqh * 4138 / 3450);
	}
}
@media (orientation: portrait) {
	/* 縦長の画面: デザインの見えている範囲（上 399px を切る）を再現する位置 = 62.7% */
	.hero_bgFrame {
		top: 62.7%;
		width: max(100vw, 100vh * 3154 / 6000);
		aspect-ratio: 3154 / 6000;
		translate: -50% -62.7%;
	}
	@supports (width: 1cqw) {
		.hero_bgFrame {
			width: max(100cqw, 100cqh * 3154 / 6000);
		}
	}
}

.hero_bgMotion {
	position: absolute;
	inset: 0;
	transform: scale(1.04);
	transform-origin: 49% 46%;
}

.hero_bgImg {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* WebGL で描き直した背景（modules/bggl.js が <picture> の後ろに足す）。使えない端末では足されず <img> が見える */
.hero_gl {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.hero_bgMotion.is-gl .hero_gl {
	opacity: 1;
}

/* 地球のあたりの光（画像の上で明滅する） */
.hero_glow {
	position: absolute;
	left: 48.7%;
	top: 45.9%;
	width: 44%;
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(205, 190, 255, 0.55) 0%,
		rgba(140, 116, 255, 0.28) 26%,
		rgba(96, 74, 255, 0.1) 48%,
		transparent 68%
	);
	mix-blend-mode: screen;
	opacity: 0.5;
	pointer-events: none;
}
@media (orientation: portrait) {
	.hero_glow {
		left: 58.4%;
		top: 48.1%;
		width: 92%;
	}
}

/* 星の粒（canvas。描画は modules/particles.js） */
.hero_particles {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: opacity 1.2s ease;
}
.hero.is-pre .hero_particles,
.hero.is-modal .hero_particles {
	opacity: 0.55;
}

/* ロゴの後ろの影（デザインの shadow レイヤー: 黒の楕円グラデーション・乗算 40% を CSS で再現。PC のみ） */
.hero_shadow {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(
		ellipse calc(720 * var(--u)) calc(580 * var(--u)) at 50% 100%,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.4) 32%,
		rgba(0, 0, 0, 0.376) 37%,
		rgba(0, 0, 0, 0.289) 48%,
		rgba(0, 0, 0, 0.21) 59%,
		rgba(0, 0, 0, 0.135) 70%,
		rgba(0, 0, 0, 0.072) 81%,
		rgba(0, 0, 0, 0.024) 92%,
		transparent 100%
	);
}
@media (orientation: portrait) {
	.hero_shadow {
		display: none;
	}
}

/* 部品の置き場
=============================== */
.hero_stage {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	transition:
		opacity 0.9s var(--easeExpo),
		filter 0.9s var(--easeExpo);
}
/* モーダル表示中は部品も沈める */
.hero.is-modal .hero_stage,
.hero.is-modal .hero_shadow {
	opacity: 0.18;
	filter: blur(3px);
}
.hero_stage > * {
	position: absolute;
	margin: 0;
	pointer-events: auto;
}

/* ABOUT（左上の箱） */
.about {
	left: 0;
	top: 0;
	display: block;
	width: calc(212.38 * var(--u));
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.3s var(--easeBack);
}
.about:active {
	transform: scale(0.97);
}

/* 日付（上端・ABOUT の右から右端まで） */
.date {
	left: calc(219.52 * var(--u));
	top: calc(2.27 * var(--u));
	width: calc(100vw - 225.15 * var(--u));
	pointer-events: none;
}
@supports (width: 1cqw) {
	.date {
		/* 横に長い画面でも大きくなりすぎないように、デザインの 1.25 倍まで */
		width: min(100cqw - 225.15 * var(--u), 1694.85 * 1.25 * var(--u));
	}
}

/* チケットボタン */
.ticket_wrap {
	left: calc(50% - 229.245 * var(--u));
	bottom: calc(396.11 * var(--u));
	width: calc(458.49 * var(--u));
}
.ticket {
	display: block;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ticket.is-soon {
	cursor: default;
}

/* アーティスト名の行 */
.artist {
	left: calc(50% - 477.6 * var(--u));
	bottom: calc(320.6 * var(--u));
	width: calc(949.51 * var(--u));
	pointer-events: none;
}

/* ロゴ */
.logo {
	left: calc(50% - 438.17 * var(--u));
	bottom: calc(54.98 * var(--u));
	width: calc(876.35 * var(--u));
	pointer-events: none;
}

@media (orientation: portrait) {
	.about {
		width: calc(153.66 * var(--u));
	}
	.date {
		left: calc(50% - 315.42 * var(--u));
		top: auto;
		bottom: calc(159.83 * var(--u));
		width: calc(631.39 * var(--u));
	}
	@supports (width: 1cqw) {
		.date {
			width: calc(631.39 * var(--u));
		}
	}
	.ticket_wrap {
		bottom: calc(65.4 * var(--u));
	}
	.artist {
		left: calc(50% - 289.68 * var(--u));
		bottom: calc(359.76 * var(--u));
		width: calc(575.88 * var(--u));
	}
	.logo {
		left: calc(50% - 265.59 * var(--u));
		bottom: calc(198.76 * var(--u));
		width: calc(531.18 * var(--u));
	}
}

/* SVG の中の部品: 1文字ずつ・1本ずつ動かすための基準 */
.part .ch,
.part .ring,
.part .lg-wave,
.part .ab-br,
.part .tk-br {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

/* ABOUT の渦巻き: 傾いた面の上で回す（押しつぶす → 回す → 戻す の3段） */
.ab-spiral,
.ab-spiral_spin,
.ab-spiral_flat,
.mk-spiral,
.mk-spiral_spin,
.mk-spiral_flat {
	transform-box: view-box;
	transform-origin: var(--cx) var(--cy);
}
.ab-spiral,
.mk-spiral {
	transform: rotate(-12deg) scaleY(0.5);
}
.ab-spiral_flat,
.mk-spiral_flat {
	transform: scaleY(2) rotate(12deg);
}

/* 円盤の波紋（普段は見えない） */
.lg-wave {
	opacity: 0;
}

/* 点火の光
=============================== */
.hero_flash {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	overflow: hidden;
}
.hero_flashCore,
.hero_flashRing {
	position: absolute;
	/* 地球の位置（hero.js が点火の時に .hero_glow の位置から入れる） */
	left: var(--fx, 50%);
	top: var(--fy, 46%);
	aspect-ratio: 1;
	border-radius: 50%;
	translate: -50% -50%;
	opacity: 0;
}
.hero_flashCore {
	width: 70vmax;
	background: radial-gradient(
		circle,
		#fff 0%,
		rgba(226, 220, 255, 0.92) 10%,
		rgba(150, 128, 255, 0.5) 30%,
		rgba(90, 70, 255, 0.15) 46%,
		transparent 62%
	);
	mix-blend-mode: screen;
}
.hero_flashRing {
	width: 22vmax;
	border: 2px solid rgba(226, 222, 255, 0.95);
	box-shadow:
		0 0 28px rgba(150, 128, 255, 0.85),
		inset 0 0 28px rgba(150, 128, 255, 0.6);
}

/*  ===============================
		点火前（JS が動く時だけ隠す）
===============================*/
:root.js .hero.is-pre .hero_stage > *,
:root.js .hero.is-pre .hero_shadow {
	opacity: 0;
	visibility: hidden;
}

/*  ===============================
		点火（.is-run）
	時間の流れ（秒）: 光 0.1 → 背景 0〜2.8 → 影 0.9 → アーティスト名 1.0 → Midnight 1.15 → MISSION 1.35
	→ 円 1.55 → 日付 1.7 → ABOUT 1.9 → チケット 2.3 → 3.8 で .is-done へ
===============================*/
.hero.is-run .hero_bgMotion {
	animation: heroIgnite 2.8s var(--easeExpo) both;
}
.hero.is-run .hero_flashCore {
	animation: flashCore 1.6s var(--easeExpo) 0.1s both;
}
.hero.is-run .hero_flashRing {
	animation: flashRing 1.5s var(--easeExpo) 0.2s both;
}
.hero.is-run .hero_flashRing--2 {
	animation-delay: 0.42s;
}
.hero.is-run .hero_glow {
	animation: glowIn 2.4s ease-out 0.3s both;
}
.hero.is-run .hero_shadow {
	animation: fadeIn 1.4s ease 0.9s both;
}

/* アーティスト名: 1文字ずつ下から */
.hero.is-run .artist .ch {
	animation: charUp 0.7s var(--easeExpo) calc(1s + var(--i) * 14ms) both;
}

/* ロゴ: 全体のぼかしが晴れながら、1文字ずつ浮かび上がる */
.hero.is-run .logo {
	animation: logoFocus 1.6s var(--easeExpo) 1.1s both;
}
.hero.is-run .lg-mid .ch {
	animation: lgIn 1.1s var(--easeExpo) calc(1.15s + var(--i) * 55ms) both;
}
.hero.is-run .lg-mis .ch {
	animation: lgIn 1.1s var(--easeExpo) calc(1.35s + var(--i) * 55ms) both;
}
.hero.is-run .lg-disc .ring {
	animation: ringIn 1s var(--easeBack) calc(1.55s + var(--i) * 70ms) both;
}
.hero.is-run .lg-wave {
	animation: wave 1.8s var(--easeExpo) calc(2.1s + var(--w) * 0.25s) both;
}

/* 日付: 1文字ずつばらばらに明滅して点く ＋ 光の帯が走る */
.hero.is-run .date .ch {
	animation: flicker 0.7s linear calc(1.7s + var(--r, 0) * 0.9s) both;
}
.hero.is-run .date::after {
	animation: scanBar 1.1s var(--easeInOut) 1.65s both;
}
.date::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: calc(40 * var(--u));
	background: linear-gradient(90deg, transparent, rgba(200, 210, 255, 0.85), transparent);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
}

/* ABOUT: 左上から開く ＋ 渦巻きが回り込む ＋ 文字が点く */
.hero.is-run .about {
	animation: wipeIn 0.8s var(--easeExpo) 1.9s both;
}
.hero.is-run .ab-spiral_spin {
	animation: spinIn 2.4s var(--easeExpo) 1.9s both;
}
.hero.is-run .ab-word .ch {
	animation: flicker 0.5s linear calc(2.25s + var(--i) * 60ms) both;
}
.hero.is-run .ab-br--l {
	animation: brInL 0.7s var(--easeExpo) 2.6s both;
}
.hero.is-run .ab-br--r {
	animation: brInR 0.7s var(--easeExpo) 2.6s both;
}
.hero.is-run .ab-mark .ch {
	animation: charUp 0.6s var(--easeExpo) calc(2.3s + var(--i) * 30ms) both;
}

/* チケット: 弾んで出る */
.hero.is-run .ticket_wrap {
	animation: ticketIn 1s var(--easeBack) 2.3s both;
}

/*  ===============================
		常時の動き（.is-done）
===============================*/
.hero.is-done .hero_bgMotion {
	animation: breathe 22s var(--easeInOut) infinite alternate;
}
.hero.is-done .hero_glow {
	animation: glowPulse 7s var(--easeInOut) infinite alternate;
}

/* ロゴ: うっすら光る。時々グリッチ（.is-glitch は hero.js が付け外し） */
.hero.is-done .logo svg {
	animation: logoGlow 6s var(--easeInOut) infinite alternate;
}
.hero.is-done .logo.is-glitch {
	animation: glitch 0.42s steps(1, end) both;
}
.hero.is-done .lg-disc .ring {
	animation: ringPulse 5.2s var(--easeInOut) calc(var(--i) * 90ms) infinite;
}
.hero.is-done .lg-wave {
	animation: wave 5.2s var(--easeExpo) calc(0.55s + var(--w) * 0.3s) infinite;
}

/* 日付: 1文字だけ一瞬消える（.is-blink は hero.js が付け外し） */
.date .ch.is-blink {
	opacity: 0.15;
}

/* ABOUT: 「押せる」を伝える。矢印が内側を指し、箱から輪が広がり、光がなでる */
.about::before,
.about::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.about::before {
	z-index: 1;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) no-repeat;
	background-size: 260% 100%;
	background-position: 160% 0;
	mix-blend-mode: soft-light;
}
.hero.is-done .about::before {
	animation: shine 4.2s var(--easeInOut) 0.6s infinite;
}
.hero.is-done .about::after {
	animation: aboutPulse 2.4s ease-out infinite;
}
/* 渦巻きの回転は hero.js（spinLoop）が JS で回す（速さをゆっくり変えるため） */
.hero.is-done .ab-br--l {
	animation: pointR 1.4s var(--easeInOut) infinite;
}
.hero.is-done .ab-br--r {
	animation: pointL 1.4s var(--easeInOut) infinite;
}
.ab-box {
	transition: fill 0.3s ease;
}
.about:hover .ab-box,
.about:focus-visible .ab-box {
	fill: var(--aboutColorHi);
}
.hero.is-done .about:hover .ab-br--l,
.hero.is-done .about:hover .ab-br--r {
	animation-duration: 0.6s;
}

/* チケット: ほんの少しふわふわ浮く ＋ 枠がゆっくり光る */
.hero.is-done .ticket_wrap {
	animation: float 3.6s var(--easeInOut) infinite alternate;
}
.hero.is-done .ticket svg {
	animation: ticketGlow 3.6s var(--easeInOut) infinite alternate;
}
.tk-bg {
	transition: fill 0.3s ease;
}
.tk-br {
	transition: transform 0.35s var(--easeBack);
}
.ticket:not(.is-soon):hover .tk-bg,
.ticket:not(.is-soon):focus-visible .tk-bg {
	fill: #1d1652;
}
.ticket:not(.is-soon):hover .tk-br--l {
	transform: translateX(5px);
}
.ticket:not(.is-soon):hover .tk-br--r {
	transform: translateX(-5px);
}

/*
 * チケット（リンク先がある時だけ）: 「押せる」を伝える
 *   - 時々、光がなでる。カーソルを乗せると、すぐにもう一度なでる
 *   - 乗せると少し持ち上がって強く光り、文字が左から順に跳ねる。押すと沈む
 *   - 押した時の衝撃波・星の飛び散りは modules/play.js（5. チケット）
 */
.ticket:not(.is-soon) {
	position: relative;
	transition: transform 0.35s var(--easeBack), filter 0.35s ease;
}
.ticket:not(.is-soon)::before {
	content: "";
	position: absolute;
	inset: 3%;
	z-index: 1;
	border-radius: 999px;
	background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%) no-repeat;
	background-size: 260% 100%;
	background-position: 160% 0;
	pointer-events: none;
}
.hero.is-done .ticket:not(.is-soon)::before {
	animation: shine 5.2s var(--easeInOut) 2.4s infinite;
}
.hero.is-done .ticket:not(.is-soon):hover::before {
	animation: shine 1.1s var(--easeInOut) both;
}
.ticket:not(.is-soon):hover,
.ticket:not(.is-soon):focus-visible {
	transform: translateY(calc(-1 * max(2px, 4 * var(--u)))) scale(1.03);
	filter: drop-shadow(0 0 calc(22 * var(--u)) rgba(127, 122, 255, 0.75));
}
.ticket:not(.is-soon):active {
	transform: scale(0.96);
	transition-duration: 0.12s;
}
.ticket:not(.is-soon):hover .tk-line {
	stroke: #b3afff;
}
.ticket:not(.is-soon):hover .ch {
	animation: tkHop 0.5s var(--easeBack) calc(var(--i) * 0.035s) both;
}
.tk-line {
	transition: stroke 0.3s ease;
}

/*  ===============================
		keyframes
===============================*/
@keyframes heroIgnite {
	0% {
		transform: scale(1.28) rotate(-3deg);
		filter: brightness(0.2) saturate(1.8) blur(14px);
	}
	16% {
		filter: brightness(1.9) saturate(1.35) blur(4px);
	}
	45% {
		filter: brightness(1.12) saturate(1.1) blur(0);
	}
	100% {
		transform: scale(1.04) rotate(0deg);
		filter: brightness(1) saturate(1) blur(0);
	}
}
@keyframes flashCore {
	0% {
		opacity: 0;
		transform: scale(0.12);
	}
	14% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1.8);
	}
}
@keyframes flashRing {
	0% {
		opacity: 0.95;
		transform: scale(0.08);
		border-width: 6px;
	}
	100% {
		opacity: 0;
		transform: scale(5.5);
		border-width: 1px;
	}
}
@keyframes glowIn {
	0% {
		opacity: 0;
		transform: scale(0.4);
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
		transform: scale(1);
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes charUp {
	0% {
		opacity: 0;
		transform: translateY(60%);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@keyframes logoFocus {
	0% {
		filter: blur(14px) drop-shadow(0 0 0 rgba(150, 130, 255, 0));
	}
	50% {
		filter: blur(0) drop-shadow(0 0 calc(40 * var(--u)) rgba(190, 175, 255, 0.9));
	}
	100% {
		filter: blur(0) drop-shadow(0 0 0 rgba(150, 130, 255, 0));
	}
}
@keyframes lgIn {
	0% {
		opacity: 0;
		transform: translateY(28%) scale(0.94);
	}
	55% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@keyframes ringIn {
	0% {
		opacity: 0;
		transform: scale(0.15) rotate(-90deg);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@keyframes wave {
	0% {
		opacity: 0;
		transform: scale(1);
		stroke-width: 2.4px;
	}
	4% {
		opacity: 0.8;
	}
	45% {
		opacity: 0;
		transform: scale(2.3);
		stroke-width: 0.4px;
	}
	100% {
		opacity: 0;
		transform: scale(2.3);
	}
}
@keyframes flicker {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	20% {
		opacity: 0.1;
	}
	32% {
		opacity: 1;
	}
	42% {
		opacity: 0.3;
	}
	56%,
	100% {
		opacity: 1;
	}
}
@keyframes scanBar {
	0% {
		opacity: 0;
		transform: translateX(0);
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateX(calc(100cqw - 260 * var(--u)));
	}
}
@keyframes wipeIn {
	0% {
		clip-path: inset(0 100% 100% 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes spinIn {
	from {
		transform: rotate(720deg);
	}
	to {
		transform: rotate(0deg);
	}
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}
@keyframes brInL {
	0% {
		opacity: 0;
		transform: translateX(-14px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@keyframes brInR {
	0% {
		opacity: 0;
		transform: translateX(14px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@keyframes pointR {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(4px);
	}
}
@keyframes pointL {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-4px);
	}
}
@keyframes ticketIn {
	0% {
		opacity: 0;
		transform: translateY(40%) scale(0.82);
		filter: blur(8px);
	}
	100% {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}
/* 回転はしない（絵が描き直されてぼけるため）。拡大も控えめに */
@keyframes breathe {
	0% {
		transform: scale(1.04);
	}
	100% {
		transform: scale(1.07);
	}
}
@keyframes glowPulse {
	0% {
		opacity: 0.32;
		transform: scale(0.94);
	}
	100% {
		opacity: 0.85;
		transform: scale(1.06);
	}
}
@keyframes logoGlow {
	0% {
		filter: drop-shadow(0 0 calc(6 * var(--u)) rgba(150, 130, 255, 0.25));
	}
	100% {
		filter: drop-shadow(0 0 calc(22 * var(--u)) rgba(170, 150, 255, 0.6));
	}
}
@keyframes glitch {
	0% {
		transform: translate(calc(5 * var(--u)), 0);
		filter: drop-shadow(calc(-5 * var(--u)) 0 0 rgba(0, 240, 255, 0.85)) drop-shadow(calc(5 * var(--u)) 0 0 rgba(255, 40, 200, 0.85));
		clip-path: inset(8% 0 52% 0);
	}
	20% {
		transform: translate(calc(-4 * var(--u)), calc(1 * var(--u))) skewX(-6deg);
		clip-path: inset(58% 0 6% 0);
	}
	40% {
		transform: translate(calc(3 * var(--u)), 0);
		filter: drop-shadow(calc(4 * var(--u)) 0 0 rgba(0, 240, 255, 0.75)) drop-shadow(calc(-4 * var(--u)) 0 0 rgba(255, 40, 200, 0.75));
		clip-path: none;
	}
	60%,
	100% {
		transform: none;
		filter: none;
		clip-path: none;
	}
}
@keyframes ringPulse {
	0%,
	34%,
	100% {
		transform: none;
		opacity: 1;
	}
	12% {
		transform: scale(1.06);
		opacity: 0.7;
	}
}
@keyframes shine {
	0% {
		background-position: 160% 0;
	}
	45%,
	100% {
		background-position: -60% 0;
	}
}
@keyframes aboutPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(130, 150, 255, 0.65);
	}
	75%,
	100% {
		box-shadow: 0 0 0 calc(24 * var(--u)) rgba(130, 150, 255, 0);
	}
}
@keyframes float {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(calc(-1 * max(3px, 5 * var(--u))));
	}
}
@keyframes tkHop {
	0%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-4px);
	}
}
@keyframes ticketGlow {
	from {
		filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(127, 122, 255, 0.35));
	}
	to {
		filter: drop-shadow(0 0 calc(16 * var(--u)) rgba(127, 122, 255, 0.8));
	}
}

/*  ===============================
		遊びの仕掛け（modules/play.js）
	長押しで溜めて離すと点火・星座・ABOUT のブラックホール・隠しコマンド「ignition」
===============================*/

/* スマホの長押しで、画像の保存メニューや文字の選択を出さない。ダブルタップの拡大も止める */
.hero {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}

/* 離した場所からの光（--fx/--fy = 位置・--fp = 大きさ 0.25〜1） */
.hero_flash.is-burst .hero_flashCore {
	scale: var(--fp, 1);
	animation: flashCore 1.3s var(--easeExpo) both;
}
.hero_flash.is-burst .hero_flashRing {
	scale: var(--fp, 1);
	animation: flashRing 1.2s var(--easeExpo) 0.05s both;
}
.hero_flash.is-burst .hero_flashRing--2 {
	animation-delay: 0.22s;
}

/* 満タンまで溜めると、文字が小さく震える */
.hero.is-overcharge .hero_stage {
	animation: shake 0.1s linear infinite;
}

/* 満タンで離した時: 日付がもう一度明滅・渦巻きが急回転・円盤が開き直す */
.hero.is-reignite .date .ch {
	animation: flicker 0.6s linear calc(var(--r, 0) * 0.5s) both;
}
.hero.is-reignite .lg-disc .ring {
	animation: ringIn 0.9s var(--easeBack) calc(var(--i) * 50ms) both;
}
.hero.is-reignite .lg-wave {
	animation: wave 1.8s var(--easeExpo) calc(0.3s + var(--w) * 0.2s) both;
}

@keyframes shake {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(1.5px, -1px);
	}
	50% {
		transform: translate(-1px, 1.5px);
	}
	75% {
		transform: translate(-1.5px, -0.5px);
	}
	100% {
		transform: translate(0, 0);
	}
}

/*  ===============================
		動きを減らす設定の人には、点火も常時の動きも出さない
===============================*/
@media (prefers-reduced-motion: reduce) {
	.hero *,
	.hero *::before,
	.hero *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
	.hero_flash {
		display: none;
	}
}