/* 動画モーション集 */

:root {
	--text: #111111;
	--bg: #ffffff;
	--bg-sub: #f6f6f4;
	--border: #dedede;
	--accent: #e8710a;
	--accent-dark: #c25c05;

	--out: cubic-bezier(.16, 1, .3, 1);
	--in: cubic-bezier(.7, 0, .84, 0);
	--inout: cubic-bezier(.65, 0, .35, 1);
	--back: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg-sub);
	color: var(--text);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--text); }

/* ---- ヘッダー ---- */
.mv-head { background: var(--bg); border-bottom: 1px solid var(--border); }
.mv-head__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}
.mv-head__logo { font-size: 20px; font-weight: 700; text-decoration: none; }
.mv-head__title { margin: 0; font-size: 16px; font-weight: 700; }

.mv-wrap { max-width: 1440px; margin: 0 auto; padding: 24px 24px 64px; }

/* ---- 基本の2枠 ---- */
.mv-basics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}
.mv-box {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 24px;
}
.mv-h2 { margin: 0 0 16px; font-size: 20px; line-height: 1.4; }

.mv-steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: s; }
.mv-steps li {
	counter-increment: s;
	display: grid;
	grid-template-columns: 32px 136px 1fr;
	align-items: baseline;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
}
.mv-steps li::before { content: counter(s); font-weight: 700; color: var(--accent-dark); }
.mv-steps b { font-weight: 700; }

.mv-example { background: var(--bg-sub); border-radius: 8px; padding: 16px; }
.mv-example p { margin: 0; }
.mv-example__label { font-size: 14px; font-weight: 700; margin-bottom: 8px !important; }

/* 速さの変化 */
.mv-ease { margin: 0; padding: 0; list-style: none; }
.mv-ease li {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 24px;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
}
.mv-ease__name { font-weight: 700; line-height: 1.4; }
.mv-ease__name small { display: block; font-size: 14px; font-weight: 400; }
.mv-ease__desc { font-size: 14px; margin: 4px 0 0; }
.mv-track {
	position: relative;
	height: 24px;
	border-radius: 999px;
	background: var(--bg-sub);
	border: 1px solid var(--border);
}
.mv-track i {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--accent);
}
.mv-track.is-play i { animation: eMove 1.2s var(--e) .2s both; }
.mv-track.is-bounce.is-play i { animation: eBounce 1.2s linear .2s both; }
@keyframes eMove { to { left: calc(100% - 19px); } }
@keyframes eBounce {
	0% { left: 3px; animation-timing-function: ease-in; }
	50% { left: calc(100% - 19px); animation-timing-function: ease-out; }
	68% { left: calc(84% - 19px); animation-timing-function: ease-in; }
	84% { left: calc(100% - 19px); animation-timing-function: ease-out; }
	92% { left: calc(95% - 19px); animation-timing-function: ease-in; }
	100% { left: calc(100% - 19px); }
}

/* ---- 絞り込み ---- */
.mv-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.mv-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-tab {
	font: inherit;
	font-size: 14px;
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--bg);
	color: var(--text);
	cursor: pointer;
}
.mv-tab:hover { border-color: var(--text); }
.mv-tab[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #ffffff; }
.mv-tab span { margin-left: 8px; font-size: 14px; }

.mv-search { display: flex; align-items: center; gap: 8px; }
.mv-search__label { font-size: 14px; font-weight: 700; }
.mv-search input {
	font: inherit;
	width: 264px;
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg);
	color: var(--text);
}
.mv-count { font-size: 14px; margin: 0 0 16px; }

/* ---- カード ---- */
.mv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 24px;
	align-items: start;
}
.mv-card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	scroll-margin-top: 24px;
}
.mv-card:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.mv-card__body { padding: 16px 24px 24px; }
.mv-card__hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mv-card__name { margin: 0; font-size: 20px; line-height: 1.4; }
.mv-card__name a { text-decoration: none; }
.mv-card__en { font-size: 14px; }
.mv-card__desc { margin: 0 0 16px; }

.mv-meta { margin: 0 0 16px; display: grid; gap: 0; }
.mv-meta div {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 8px;
	padding: 8px 0;
	border-top: 1px solid var(--border);
	font-size: 14px;
}
.mv-meta div:last-child { border-bottom: 1px solid var(--border); }
.mv-meta dt { font-weight: 700; }
.mv-meta dd { margin: 0; }

.mv-pr { border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; }
.mv-pr__hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 8px 8px 16px;
	background: var(--bg-sub);
	border-radius: 8px 8px 0 0;
	font-size: 14px;
	font-weight: 700;
}
details.mv-pr > summary { list-style: none; cursor: pointer; border-radius: 8px; }
details.mv-pr > summary::-webkit-details-marker { display: none; }
details.mv-pr:not([open]) > summary { border-radius: 8px; }
.mv-pr__toggle::before { content: "開く"; font-weight: 400; }
details[open] .mv-pr__toggle::before { content: "閉じる"; }
.mv-pr__tx { margin: 0; padding: 16px; font-size: 14px; line-height: 1.8; }
.mv-pr__foot { display: flex; justify-content: flex-end; padding: 0 8px 8px; }

.mv-copy {
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	padding: 4px 16px;
	border: 1px solid var(--accent);
	border-radius: 4px;
	background: var(--accent);
	color: #ffffff;
	cursor: pointer;
	white-space: nowrap;
}
.mv-copy:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.mv-empty { padding: 48px 0; text-align: center; }

.mv-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	background: var(--text);
	color: #ffffff;
	padding: 8px 24px;
	border-radius: 999px;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.mv-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 960px) {
	.mv-basics { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.mv-head__inner, .mv-wrap { padding-left: 16px; padding-right: 16px; }
	.mv-grid { grid-template-columns: 1fr; }
	.mv-box { padding: 16px; }
	.mv-steps li { grid-template-columns: 24px 1fr; }
	.mv-steps li span { grid-column: 2; }
	.mv-ease li { grid-template-columns: 1fr; gap: 8px; }
	.mv-search, .mv-search input { width: 100%; }
	.mv-card__body { padding: 16px; }
}

/* =========================================================
   見本の画面
   ========================================================= */

.st {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #161616;
	overflow: hidden;
	container-type: inline-size;
	display: grid;
	place-items: center;
	color: #ffffff;
	cursor: pointer;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	isolation: isolate;
}
.st__replay {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 20;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}
.st__replay svg { width: 16px; height: 16px; }

.st .t { font-size: 9cqw; font-weight: 700; letter-spacing: .04em; line-height: 1.2; white-space: nowrap; position: relative; }
.st .c { display: inline-block; white-space: pre; }
.st .sub { font-size: 3.2cqw; }

@keyframes kOn { to { opacity: 1; } }
@keyframes kFade { from { opacity: 0; } }
@keyframes kFadeUp { from { opacity: 0; transform: translateY(.5em); } }
@keyframes kScaleX { to { transform: scaleX(1); } }

/* ---- 文字の出し方 ---- */
.st[data-fx="typewriter"] .caret { display: inline-block; width: .08em; height: 1em; margin-left: .06em; background: #fff; vertical-align: -.1em; animation: kBlink .5s steps(1) infinite; }
.st[data-fx="typewriter"] .caret.is-off { visibility: hidden; animation: none; }
@keyframes kBlink { 50% { opacity: 0; } }

.st[data-fx="fade"] .t { animation: kFade .8s linear .3s both; }
.st[data-fx="fadeup"] .t { animation: kFadeUp .6s var(--out) .3s both; }
.st[data-fx="stagger"] .c { animation: kFadeUp .6s var(--out) both; animation-delay: calc(.3s + var(--i) * .06s); }

.st[data-fx="slide"] .t { animation: kSlide .5s var(--out) .3s both; }
@keyframes kSlide { from { opacity: 0; transform: translateX(-30cqw); } }

.st[data-fx="pop"] .t { animation: kPop .5s ease-out .3s both; }
@keyframes kPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 80% { transform: scale(.96); } 100% { transform: scale(1); } }

.st[data-fx="scalein"] .t { animation: kScaleIn .4s cubic-bezier(.2, .9, .3, 1) .3s both; }
@keyframes kScaleIn { from { opacity: 0; transform: scale(2.5); } }

.st[data-fx="blurin"] .t { animation: kBlurIn 1s var(--out) .3s both; }
@keyframes kBlurIn { from { opacity: 0; filter: blur(3cqw); } }

.st .m { display: inline-block; overflow: hidden; padding: 0 .1em .08em; vertical-align: bottom; }
.st .m > * { display: block; }
.st[data-fx="mask"] .m > .t { animation: kRise .6s var(--out) .3s both; }
@keyframes kRise { from { transform: translateY(110%); } }

.st[data-fx="wipetext"] .t { animation: kWipeT .6s var(--inout) .3s both; }
@keyframes kWipeT { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.st[data-fx="glow"] .t { animation: kGlow 1s ease-in-out infinite alternate; }
@keyframes kGlow {
	from { text-shadow: 0 0 .2cqw rgba(255, 210, 150, .3); }
	to { text-shadow: 0 0 1cqw #ffd199, 0 0 3cqw #ff9a3c, 0 0 6cqw #e8710a; }
}

.st[data-fx="neon"] { background: #1c0f15; }
.st[data-fx="neon"] .t { color: #ffe3ea; text-shadow: 0 0 .4cqw #fff, 0 0 2cqw #ff3d6e, 0 0 5cqw #ff3d6e; animation: kNeon 1.1s linear .3s both; }
@keyframes kNeon {
	0% { opacity: 0; } 6% { opacity: 1; } 9% { opacity: .1; } 16% { opacity: 1; } 19% { opacity: .15; }
	34% { opacity: .15; } 36% { opacity: 1; } 39% { opacity: .3; } 48% { opacity: 1; } 100% { opacity: 1; }
}

.st[data-fx="glitch"] .t { animation: kGlMain 2.4s steps(1) infinite; }
.st[data-fx="glitch"] .t::before,
.st[data-fx="glitch"] .t::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; }
.st[data-fx="glitch"] .t::before { color: #ff2d55; animation: kGl1 2.4s steps(1) infinite; }
.st[data-fx="glitch"] .t::after { color: #19e6ff; animation: kGl2 2.4s steps(1) infinite; }
@keyframes kGlMain { 0%, 100% { transform: none; } 55% { transform: translateX(.8cqw) skewX(-10deg); } 58% { transform: translateX(-.8cqw); } 61% { transform: none; } 80% { transform: translateX(-.5cqw); } 82% { transform: none; } }
@keyframes kGl1 { 0%, 100% { opacity: 0; } 55% { opacity: .9; transform: translate(-1.4cqw, 0); clip-path: inset(10% 0 55% 0); } 58% { transform: translate(1.2cqw, 0); clip-path: inset(60% 0 5% 0); } 61% { opacity: 0; } 80% { opacity: .9; transform: translate(1cqw, 0); clip-path: inset(35% 0 35% 0); } 82% { opacity: 0; } }
@keyframes kGl2 { 0%, 100% { opacity: 0; } 55% { opacity: .9; transform: translate(1.4cqw, 0); clip-path: inset(50% 0 20% 0); } 58% { transform: translate(-1cqw, 0); clip-path: inset(5% 0 70% 0); } 61% { opacity: 0; } 80% { opacity: .9; transform: translate(-1cqw, 0); clip-path: inset(60% 0 10% 0); } 82% { opacity: 0; } }

.st[data-fx="scramble"] .t, .st[data-fx="countup"] .t { font-variant-numeric: tabular-nums; }
.st[data-fx="countup"] .t small { font-size: .5em; margin-left: .1em; }

.st[data-fx="handwrite"] svg { width: 80%; overflow: visible; }
.st[data-fx="handwrite"] .hw {
	font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", "Brush Script MT", cursive;
	font-size: 104px;
	fill: rgba(255, 255, 255, 0);
	stroke: #fff;
	stroke-width: 1.6;
	stroke-dasharray: 900;
	stroke-dashoffset: 900;
	animation: kDraw 2s linear .3s forwards, kFill .5s ease-out 2.2s forwards;
}
.st[data-fx="handwrite"] .hwclip { animation: kWipeT 2s linear .3s both; }
@keyframes kDraw { to { stroke-dashoffset: 0; } }
@keyframes kFill { to { fill: #fff; } }

.st[data-fx="wave"] .c { animation: kWave 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .1s - 2.4s); }
@keyframes kWave { 0%, 100% { transform: translateY(.1em); } 50% { transform: translateY(-.15em); } }

.st[data-fx="flip"] .t { perspective: 60cqw; }
.st[data-fx="flip"] .c { transform-origin: 50% 100%; animation: kFlip .4s var(--out) both; animation-delay: calc(.3s + var(--i) * .05s); }
@keyframes kFlip { from { opacity: 0; transform: rotateX(-90deg); } }

.st[data-fx="drop"] .t { animation: kDrop 1s linear .3s both; }
@keyframes kDrop {
	0% { transform: translateY(-320%); animation-timing-function: ease-in; }
	45% { transform: translateY(0); animation-timing-function: ease-out; }
	62% { transform: translateY(-45%); animation-timing-function: ease-in; }
	78% { transform: translateY(0); animation-timing-function: ease-out; }
	89% { transform: translateY(-14%); animation-timing-function: ease-in; }
	100% { transform: translateY(0); }
}

.st[data-fx="tracking"] .t { font-size: 7cqw; animation: kTrack 2s var(--out) .3s both; letter-spacing: .35em; margin-right: -.35em; }
@keyframes kTrack { from { letter-spacing: -.2em; margin-right: .2em; opacity: 0; } }

.st[data-fx="marker"] .mk {
	background: linear-gradient(transparent 55%, rgba(232, 113, 10, .9) 55%) no-repeat 0 0 / 0% 100%;
	animation: kMarker .5s var(--out) .8s forwards;
	padding: 0 .08em;
}
@keyframes kMarker { to { background-size: 100% 100%; } }

.st[data-fx="underline"] .t { animation: kFade .3s linear .3s both; }
.st[data-fx="underline"] .t::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.15em;
	height: .07em;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	animation: kScaleX .5s var(--inout) .7s forwards;
}

/* ---- 場面の切り替え ---- */
.st .sc {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 7cqw;
	font-weight: 700;
	color: #fff;
}
.st .sc.a { background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, .22) 0 14cqw, transparent 14.2cqw), linear-gradient(135deg, #f08a2c, #b95204); }
.st .sc.b { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .08) 0 2cqw, transparent 2cqw 4cqw), linear-gradient(135deg, #3a79ad, #1b3a57); }
.st .ov { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 5; }

.st[data-fx="cut"] .b { opacity: 0; animation: kOn 1ms linear 1.2s forwards; }
.st[data-fx="dissolve"] .b { opacity: 0; animation: kOn 1s linear 1s forwards; }

.st[data-fx="fadeblack"] .ov { background: #000; animation: kDip 1.2s ease-in-out 1s forwards; }
.st[data-fx="fadeblack"] .b { opacity: 0; animation: kOn 1ms linear 1.6s forwards; }
@keyframes kDip { 0% { opacity: 0; } 42%, 58% { opacity: 1; } 100% { opacity: 0; } }

.st[data-fx="flash"] .ov { background: #fff; animation: kFlash .45s 1s forwards; }
.st[data-fx="flash"] .b { opacity: 0; animation: kOn 1ms linear 1.1s forwards; }
@keyframes kFlash { 0% { opacity: 0; } 22% { opacity: 1; animation-timing-function: ease-out; } 100% { opacity: 0; } }

.st[data-fx="wipe"] .b { clip-path: inset(0 100% 0 0); animation: kWipeT .6s var(--inout) 1s forwards; }
.st[data-fx="wipe"] .ov { opacity: 1; width: .5cqw; left: 0; right: auto; background: #fff; transform: translateX(-1cqw); animation: kWipeLine .6s var(--inout) 1s forwards; }
@keyframes kWipeLine { to { transform: translateX(100cqw); } }

.st[data-fx="push"] .a { animation: kToLeft .5s var(--inout) 1s forwards; }
.st[data-fx="push"] .b { transform: translateX(100%); animation: kToZero .5s var(--inout) 1s forwards; }
@keyframes kToLeft { to { transform: translateX(-100%); } }
@keyframes kToZero { to { transform: none; } }

.st[data-fx="iris"] .b { clip-path: circle(0% at 50% 50%); animation: kIris .6s cubic-bezier(.55, 0, 1, .45) 1s forwards; }
@keyframes kIris { to { clip-path: circle(75% at 50% 50%); } }

.st[data-fx="zoomtrans"] .a { animation: kZoomA .25s ease-in 1s forwards; }
.st[data-fx="zoomtrans"] .b { opacity: 0; animation: kZoomB .35s ease-out 1.25s forwards; }
@keyframes kZoomA { to { transform: scale(2.4); filter: blur(1.4cqw); } }
@keyframes kZoomB { from { opacity: 1; transform: scale(2.4); filter: blur(1.4cqw); } to { opacity: 1; transform: none; filter: blur(0); } }

.st[data-fx="blurtrans"] .a { animation: kBlurOut .8s var(--inout) 1s forwards; }
.st[data-fx="blurtrans"] .b { opacity: 0; filter: blur(2.4cqw); animation: kBlurInB .8s var(--inout) 1s forwards; }
@keyframes kBlurOut { to { filter: blur(2.4cqw); opacity: 0; } }
@keyframes kBlurInB { to { opacity: 1; filter: blur(0); } }

.st[data-fx="whip"] .a { animation: kWhipA .3s cubic-bezier(.7, 0, .3, 1) 1s forwards; }
.st[data-fx="whip"] .b { transform: translateX(100%); animation: kWhipB .3s cubic-bezier(.7, 0, .3, 1) 1s forwards; }
@keyframes kWhipA { 50% { filter: blur(2cqw); } to { transform: translateX(-100%); filter: blur(2cqw); } }
@keyframes kWhipB { from { filter: blur(2cqw); } 50% { filter: blur(2cqw); } to { transform: none; filter: blur(0); } }

.st[data-fx="glitchtrans"] .a { animation: kGlA .36s steps(1) 1s forwards; }
.st[data-fx="glitchtrans"] .b { opacity: 0; animation: kGlB .36s steps(1) 1.18s forwards; }
@keyframes kGlA {
	0% { transform: translateX(3cqw); filter: hue-rotate(90deg); }
	20% { transform: translateX(-4cqw); clip-path: inset(20% 0 30% 0); filter: none; }
	40% { transform: none; clip-path: none; filter: saturate(4); }
	60% { transform: translateX(5cqw); clip-path: inset(50% 0 10% 0); }
	80%, 100% { opacity: 0; }
}
@keyframes kGlB {
	0% { opacity: 1; transform: translateX(-3cqw); filter: hue-rotate(-70deg); }
	30% { transform: translateX(2cqw); clip-path: inset(0 0 60% 0); filter: none; }
	60% { transform: translateX(-1cqw); clip-path: inset(30% 0 0 0); }
	80%, 100% { opacity: 1; transform: none; clip-path: none; filter: none; }
}

.st[data-fx="shapetrans"] .ov { opacity: 1; background: #ffd23f; transform: translateX(-100%); animation: kBand .8s var(--inout) 1s forwards; }
.st[data-fx="shapetrans"] .b { opacity: 0; animation: kOn 1ms linear 1.4s forwards; }
@keyframes kBand { 0% { transform: translateX(-100%); } 45%, 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }

.st[data-fx="split"] .b { clip-path: inset(50% 0 50% 0); animation: kSplit .6s var(--out) 1s forwards; }
@keyframes kSplit { to { clip-path: inset(0 0 0 0); } }

.st[data-fx="spin"] .a { animation: kSpinOut .35s ease-in 1s forwards; }
.st[data-fx="spin"] .b { transform: rotate(-180deg) scale(0); animation: kToZero .35s ease-out 1.35s forwards; }
@keyframes kSpinOut { to { transform: rotate(180deg) scale(0); } }

/* ---- 画面の動き（風景のイラスト） ---- */
.st .cam { position: absolute; inset: 0; }
.st .cam > * { position: absolute; }
.st .sky { inset: 0; background: linear-gradient(#f7b267 0%, #f4845f 48%, #6d597a 100%); }
.st .sun { width: 16cqw; aspect-ratio: 1; border-radius: 50%; background: #ffe8a3; left: 58%; top: 16%; }
.st .m1 { left: -10%; right: 30%; bottom: 18%; height: 46%; background: #4a3f63; clip-path: polygon(0 100%, 40% 10%, 60% 40%, 75% 0, 100% 100%); }
.st .m2 { left: 35%; right: -30%; bottom: 14%; height: 38%; background: #3a2f4f; clip-path: polygon(0 100%, 35% 15%, 55% 45%, 80% 5%, 100% 100%); }
.st .gr { left: -10%; right: -40%; bottom: 0; height: 20%; background: #2b2238; }
.st .tree { left: 16%; bottom: 12%; width: 9cqw; height: 42%; background: #1a1426; clip-path: polygon(50% 0, 100% 80%, 58% 80%, 58% 100%, 42% 100%, 42% 80%, 0 80%); }
.st .tree.t2 { left: 26%; height: 30%; width: 7cqw; }

.st[data-fx="kenburns"] .cam { animation: kKB 5s linear .2s both; }
@keyframes kKB { to { transform: scale(1.25) translateX(3%); } }

.st[data-fx="pan"] .cam { right: -60%; animation: kPan 4s var(--inout) .3s both; }
@keyframes kPan { to { transform: translateX(-37.5%); } }

.st[data-fx="tilt"] .cam { top: -60%; animation: kTilt 3s var(--inout) .3s both; }
@keyframes kTilt { to { transform: translateY(37.5%); } }

.st[data-fx="punchin"] .cam { transform-origin: 30% 60%; animation: kPunch 2s steps(1, end) .2s both; }
@keyframes kPunch { 0% { transform: none; } 50%, 100% { transform: scale(1.35); } }

.st[data-fx="shake"] .cam { inset: -5%; animation: kShake .5s linear 1s both; }
@keyframes kShake {
	0% { transform: translate(0, 0); } 10% { transform: translate(-2.2%, 1.6%) rotate(-.6deg); } 20% { transform: translate(2%, -1.8%); }
	30% { transform: translate(-1.6%, -1%) rotate(.5deg); } 40% { transform: translate(1.4%, 1.4%); } 50% { transform: translate(-1%, .6%); }
	60% { transform: translate(.9%, -.8%); } 70% { transform: translate(-.5%, .5%); } 80% { transform: translate(.3%, -.2%); } 100% { transform: none; }
}

.st[data-fx="parallax"] .m1 { animation: kPx1 4s ease-in-out infinite alternate; }
.st[data-fx="parallax"] .m2 { animation: kPx2 4s ease-in-out infinite alternate; }
.st[data-fx="parallax"] .gr,
.st[data-fx="parallax"] .tree { animation: kPx3 4s ease-in-out infinite alternate; }
.st[data-fx="parallax"] .sun { animation: kPx0 4s ease-in-out infinite alternate; }
@keyframes kPx0 { to { transform: translateX(-1cqw); } }
@keyframes kPx1 { to { transform: translateX(-4cqw); } }
@keyframes kPx2 { to { transform: translateX(-10cqw); } }
@keyframes kPx3 { to { transform: translateX(-22cqw); } }

.st[data-fx="rackfocus"] .cam { animation: kUnblur 1.5s var(--inout) 1s both; }
.st[data-fx="rackfocus"] .fg { animation: kBlurTo 1.5s var(--inout) 1s both; }
.st .fg { position: absolute; left: 10%; bottom: -4%; width: 16cqw; height: 72%; z-index: 3; }
.st .fg::before { content: ""; position: absolute; left: 32%; right: 32%; top: 0; height: 26%; background: #1d3b2f; border-radius: 1cqw 1cqw 0 0; }
.st .fg::after { content: ""; position: absolute; left: 0; right: 0; top: 22%; bottom: 0; background: #2f6a50; border-radius: 4cqw 4cqw 1cqw 1cqw; box-shadow: inset 3cqw 0 0 rgba(255, 255, 255, .15); }
@keyframes kUnblur { from { filter: blur(1cqw); } to { filter: blur(0); } }
@keyframes kBlurTo { from { filter: blur(0); } to { filter: blur(1.2cqw); } }

.st[data-fx="speedramp"] { background: #161616; }
.st .rail { position: absolute; left: 8%; right: 8%; top: 50%; height: .3cqw; background: rgba(255, 255, 255, .35); }
.st .ball { position: absolute; left: 8%; top: 50%; width: 6cqw; aspect-ratio: 1; margin: -3cqw 0 0 -3cqw; border-radius: 50%; background: var(--accent); animation: kRamp 2.6s cubic-bezier(.05, .9, .95, .1) .3s both; }
@keyframes kRamp { to { transform: translateX(84cqw); } }
.st .zones { position: absolute; left: 8%; right: 8%; top: 62%; display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; font-size: 3.2cqw; font-weight: 700; }

.st[data-fx="rotate"] .cam { inset: -14%; animation: kRot 5s linear .2s both; }
@keyframes kRot { to { transform: rotate(5deg) scale(1.1); } }

/* ---- 図形と装飾 ---- */
.st svg.full { position: absolute; inset: 0; width: 100%; height: 100%; }
.st[data-fx="linedraw"] .ln { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: kDraw .8s var(--inout) .4s forwards; }
.st[data-fx="linedraw"] .dot { fill: var(--accent); opacity: 0; animation: kOn .2s linear 1.2s forwards; }

.st[data-fx="framedraw"] .fr { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: kDraw 1s var(--inout) .5s forwards; }
.st[data-fx="framedraw"] .t { font-size: 6cqw; }

.st .rp { position: absolute; left: 50%; top: 50%; width: 10cqw; aspect-ratio: 1; margin: -5cqw 0 0 -5cqw; border: .4cqw solid #fff; border-radius: 50%; animation: kRipple 2s var(--out) infinite; animation-delay: calc(var(--i) * .4s); opacity: 0; }
.st .rp-dot { position: absolute; left: 50%; top: 50%; width: 3cqw; aspect-ratio: 1; margin: -1.5cqw 0 0 -1.5cqw; border-radius: 50%; background: var(--accent); }
@keyframes kRipple { from { transform: scale(.3); opacity: 1; } to { transform: scale(3.6); opacity: 0; } }

.st .spk { position: absolute; width: 6cqw; aspect-ratio: 1; fill: #fff; transform: scale(0); animation: kTwinkle var(--d) ease-in-out infinite; animation-delay: var(--dl); }
.st[data-fx="sparkle"] .t { font-size: 7cqw; }
@keyframes kTwinkle { 0% { transform: scale(0) rotate(0); } 18% { transform: scale(1) rotate(45deg); } 36%, 100% { transform: scale(0) rotate(90deg); } }

.st .burst {
	position: absolute;
	inset: -40%;
	background: repeating-conic-gradient(from 0deg, #fff 0deg .9deg, transparent .9deg 7deg, #fff 7deg 7.5deg, transparent 7.5deg 12deg);
	-webkit-mask: radial-gradient(circle, transparent 20%, #000 42%);
	mask: radial-gradient(circle, transparent 20%, #000 42%);
	animation: kBurst .16s steps(2) infinite;
}
.st[data-fx="burst"] .t { font-size: 7cqw; color: #fff; z-index: 2; }
@keyframes kBurst { 50% { transform: rotate(2.5deg) scale(1.03); } }

.st .person { position: absolute; left: 14%; bottom: 0; width: 20cqw; height: 58%; }
.st .person::before { content: ""; position: absolute; left: 50%; top: 0; width: 9cqw; aspect-ratio: 1; margin-left: -4.5cqw; border-radius: 50%; background: #5a6b7c; }
.st .person::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; border-radius: 10cqw 10cqw 0 0; background: #5a6b7c; }
.st .bub { position: absolute; left: 34%; top: 14%; background: #fff; color: #111; padding: 2cqw 4cqw; border-radius: 4cqw; font-size: 5cqw; font-weight: 700; transform-origin: 8% 130%; animation: kPop .4s ease-out .4s both; white-space: nowrap; }
.st .bub::after { content: ""; position: absolute; left: 6%; bottom: -2.2cqw; border: 1.6cqw solid transparent; border-top: 2.4cqw solid #fff; border-left-width: 0; }
.st .bub span { animation: kFade .2s linear .9s both; }

.st .arw-box { position: absolute; right: 16%; top: 50%; transform: translateY(-50%); background: var(--accent); color: #fff; padding: 2.4cqw 5cqw; border-radius: 1.2cqw; font-size: 4.6cqw; font-weight: 700; }
.st .arw { position: absolute; left: 22%; top: 50%; width: 22cqw; margin-top: -4cqw; height: 8cqw; animation: kNudge .45s ease-in-out infinite alternate; }
.st .arw path { fill: #fff; }
@keyframes kNudge { to { transform: translateX(4cqw); } }

.st .cf { position: absolute; top: 0; width: 1.6cqw; height: .9cqw; animation: kFall var(--d) ease-in both; animation-delay: var(--dl); }
@keyframes kFall { from { transform: translateY(-4cqw) rotate(0) rotateY(0); } to { transform: translateY(62cqw) rotate(var(--r)) rotateY(720deg); } }

.st .bars { position: absolute; left: 18%; right: 18%; bottom: 16%; top: 16%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3cqw; align-items: end; border-bottom: .3cqw solid rgba(255, 255, 255, .6); }
.st .bar { background: #8fa3b8; height: var(--h); transform: scaleY(0); transform-origin: bottom; animation: kGrow .6s var(--out) both; animation-delay: calc(.3s + var(--i) * .12s); }
.st .bar:last-child { background: var(--accent); }
@keyframes kGrow { to { transform: scaleY(1); } }

.st[data-fx="particles"] { background: radial-gradient(circle at 50% 110%, #3b2a4a, #120d1a 70%); }
.st .pt { position: absolute; bottom: -4%; width: var(--s); aspect-ratio: 1; border-radius: 50%; background: #ffd699; box-shadow: 0 0 1.2cqw #ffb347; animation: kRise2 var(--d) linear infinite; animation-delay: var(--dl); opacity: 0; }
@keyframes kRise2 { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: var(--o); } 85% { opacity: var(--o); } 100% { transform: translate(var(--x), -62cqw); opacity: 0; } }

.st .leak {
	position: absolute;
	inset: -20% -40%;
	background: radial-gradient(ellipse at 35% 45%, rgba(255, 150, 60, .95), transparent 45%), radial-gradient(ellipse at 60% 60%, rgba(255, 60, 60, .7), transparent 40%);
	mix-blend-mode: screen;
	opacity: 0;
	animation: kLeak 1.6s ease-in-out .6s both;
	z-index: 4;
}
@keyframes kLeak { 0% { transform: translateX(-70%); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }

.st .lc { position: absolute; left: 50%; top: 50%; width: 10cqw; aspect-ratio: 1; margin: -5cqw 0 0 -5cqw; border-radius: 50%; background: var(--accent); transform: scale(0); animation: kCircle .5s var(--out) .3s forwards; }
@keyframes kCircle { to { transform: scale(12); } }
.st[data-fx="logoreveal"] .m { position: relative; z-index: 2; }
.st[data-fx="logoreveal"] .m > .t { animation: kRise .5s var(--out) .9s both; font-size: 8cqw; }
.st[data-fx="logoreveal"] .logo-mark { display: inline-block; width: .8em; height: .8em; border: .12em solid #fff; border-radius: 50%; margin-right: .25em; vertical-align: -.05em; }