/*
 * Pet Album LP（1 画面 + フッター）。
 * 背景は白、見出しは黒。ブランドの緑はロゴにだけ使い、写真とスタンプを主役にする。
 * 書体はアプリ（ios/.../DesignTokens/Typography.swift）に合わせる:
 * 見出しは display と同じ SF Pro Rounded、本文は SF Pro。日本語はどちらもヒラギノ角ゴになる。
 * SF Pro は Web フォントとして配れないので、Apple 端末のシステムフォントを指定で呼ぶ。
 */
:root {
	color-scheme: light;
	--ink: #111111;
	--muted: #5c5c5c;
	--line: #ececea;
	--bg: #ffffff;
	--font-text: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	/* ui-rounded は Safari だけが SF Pro Rounded に解決する。他のブラウザでは次の SF Pro に落ちる */
	--font-display: ui-rounded, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 16px;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

/* PC とスマホで改行や表示を切り替える */
.sp-only {
	display: none;
}

/* --- ヘッダー ----------------------------------------------------------- */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 40px 0;
}

.logo img {
	width: auto;
	height: 56px;
}

/* --- ファーストビュー ----------------------------------------------------- */

main {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 24px 28px;
	text-align: center;
}

.headline {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(36px, 5.2vw, 80px);
	line-height: 1.2;
	letter-spacing: 0;
	font-feature-settings: "palt"; /* 「、」「。」の空きを詰める */
}

/* App Store バッジは高さ 40px 以上、周りにバッジの高さの 1/4 以上の余白（Apple のガイドライン）。
   ヘッダーではヘッダーの余白がその役を兼ねる */
.app-store img {
	width: auto;
	height: 56px;
}

.bottom-cta {
	display: none;
}

/* --- メインビジュアル --------------------------------------------------- */

/* 動画は 1440 × 600。フッターまで 1 画面に収めるため、見出しとフッターの残りを埋める高さにする。
   上限は動画の縦横比どおりの高さ。足りないぶんは object-fit: cover で上下を切る */
.visual {
	position: relative;
	flex: 1;
	width: 100%;
	max-width: 1440px;
	min-height: 320px;
	max-height: min(600px, 100vw * 600 / 1440);
	margin: 0 auto;
	overflow: hidden;
}

.visual-still,
.visual video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 動画は再生が始まってから見せる。終わったらカードの壁に切り替える */
.visual video {
	opacity: 0;
}

.visual.is-playing .visual-intro {
	opacity: 1;
}

/* 隠したものは消す。透明なだけで残すと、右クリックが上を素通りしてその画像や動画のメニューが出る */
.visual.is-playing .visual-still,
.visual.is-wall .visual-intro {
	display: none;
}

/* --- カードの壁 ----------------------------------------------------------
 * 2 段のカードが段ごとに逆向きに流れ、1 枚ずつ写真とスタンプがめくれて入れ替わる。
 * 大きさは枠の高さ（cqh）に比例させ、どの画面でも前半の動画と同じ見え方にする。
 * 動きは前半の動画（lp/storyboard-prototype の HeroRevised）と同じ値:
 * 写真・スタンプそれぞれ 6 秒（周期 12 秒）、めくれる動きは 0.6 秒、並び 1 回分を 24 秒で流す。
 */
.wall {
	--card-h: 38cqh;
	--gap: calc(var(--card-h) * 0.157);

	position: absolute;
	inset: 0;
	container-type: size;
	opacity: 0;
	pointer-events: none;
}

.visual.is-wall .wall {
	opacity: 1;
}

.wall-row {
	position: absolute;
	top: 27.5%;
	left: 0;
	height: var(--card-h);
	translate: 0 -50%;
}

.wall-row + .wall-row {
	top: 72.5%;
}

.wall-track {
	display: flex;
	width: max-content;
	height: 100%;
	will-change: transform;
}

.visual.is-wall .wall-track {
	animation: marquee 24s linear infinite;
	animation-play-state: var(--wall-play, running);
}

/* 2 段目は逆向き */
.visual.is-wall .wall-row + .wall-row .wall-track {
	animation-direction: reverse;
}

/* 並びを 3 回くり返しているので、1/3 ずれたところで元の絵に戻る */
@keyframes marquee {
	to {
		transform: translateX(calc(-100% / 3));
	}
}

.flip {
	--ar: 0.8;

	position: relative;
	flex: none;
	aspect-ratio: var(--ar);
	height: 100%;
	/* gap ではなく margin で空ける（帯の幅をちょうど並び 3 回分にするため） */
	margin-right: var(--gap);
	perspective: calc(var(--card-h) * 5);
	scale: 0;
}

.flip.is-landscape {
	--ar: 1.25;
}

.visual.is-wall .flip {
	animation: pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--pop-delay, 0s) forwards;
	animation-play-state: var(--wall-play, running);
}

@keyframes pop {
	to {
		scale: 1;
	}
}

.flip-inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.visual.is-wall .flip-inner {
	animation: flip 12s var(--delay, 0s) infinite;
	animation-play-state: var(--wall-play, running);
}

/* 0〜5%（0.6 秒）で写真 → スタンプ、50〜55% でスタンプ → 写真。あいだは止まっている */
@keyframes flip {
	0% {
		transform: rotateY(0deg);
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}
	5%,
	50% {
		transform: rotateY(180deg);
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}
	55%,
	100% {
		transform: rotateY(360deg);
	}
}

/* 裏面を隠す指定は子の画像にも付ける（Chrome では子が別レイヤーになると親の指定からはみ出して裏が透ける） */
.flip-front,
.flip-back,
.flip-front img,
.flip-back img {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.flip-front,
.flip-back {
	position: absolute;
	inset: 0;
}

.flip-front {
	transform: rotateY(0deg);
}

.flip-front {
	padding: 3.5%;
	border-radius: calc(var(--card-h) * 0.06);
	background: #fff;
	box-shadow: 0 calc(var(--card-h) * 0.04) calc(var(--card-h) * 0.1) rgb(70 45 20 / 0.16);
}

.flip-front img {
	width: 100%;
	height: 100%;
	border-radius: calc(var(--card-h) * 0.04);
	object-fit: cover;
}

.flip-back {
	transform: rotateY(180deg);
}

/* スタンプの画像は正方形（白フチ・影・文言込み）。大きさ（--sticker）はカードごとに hero-video.js が決める */
.flip-back img {
	--side: calc(var(--card-h) * var(--sticker));

	position: absolute;
	top: calc(50% - var(--side) / 2);
	left: calc(50% - var(--side) / 2);
	width: var(--side);
	max-width: none;
	height: var(--side);
}

/* 止めるボタン。壁の各アニメーションは --wall-play を見て止まる */
.visual.is-paused {
	--wall-play: paused;
}

.visual-toggle {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: rgb(255 255 255 / 0.85);
	color: var(--ink);
	cursor: pointer;
}

.visual-toggle[hidden] {
	display: none;
}

.visual-toggle svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.visual-toggle .icon-play,
.visual-toggle[aria-pressed="true"] .icon-pause {
	display: none;
}

.visual-toggle[aria-pressed="true"] .icon-play {
	display: block;
}

/* --- フッター ----------------------------------------------------------- */

.site-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 40px;
	font-size: 14px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.footer-links a {
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.footer-links a:hover {
	text-decoration: underline;
}

.copyright {
	margin: 0;
	color: var(--muted);
}

/* --- スマホ ------------------------------------------------------------- */

/* --- スマホ ------------------------------------------------------------- */

/*
 * スマホでもフッターまで 1 画面に収める（retro.app と同じ考え方）。
 * 見出し・バッジ・フッターは大きさ固定、動画の枠だけが残りの高さに合わせて伸び縮みする。
 * 枠の上限は動画の縦横比どおりの高さで、それより空きがあれば枠の上下に余白として振り分ける。
 */
@media (max-width: 640px) {
	.sp-only {
		display: inline;
	}

	.pc-only {
		display: none;
	}

	.site-header {
		justify-content: center;
		padding: 20px 16px 0;
	}

	.header-cta {
		display: none;
	}

	.logo img {
		height: 40px;
	}

	.hero {
		padding: 16px 16px 12px;
	}

	.visual {
		flex: 1 1 0;
		min-height: 240px;
		max-height: 100vw; /* スマホ用の動画は正方形 */
		margin-block: auto;
	}

	.wall {
		--card-h: 32cqh;
	}

	.wall-row {
		top: 32%;
	}

	.wall-row + .wall-row {
		top: 68%;
	}

	.bottom-cta {
		display: flex;
		justify-content: center;
		padding: 12px 16px 4px;
	}

	.app-store img {
		height: 48px;
	}

	.site-footer {
		flex-direction: column;
		gap: 2px;
		padding: 8px 16px max(14px, env(safe-area-inset-bottom));
		text-align: center;
	}

	.footer-links {
		justify-content: center;
		gap: 4px 20px;
	}

	.footer-links a {
		font-size: 13px;
	}

	.copyright {
		font-size: 11px;
	}
}