/* ============================================================
 * TeaScape TOP ファーストビュー(4画面の横スライド)
 *   ロゴ → Experiences → Koji Matcha Syrup → Blog
 *
 * - 本番TOP本文のCSS(.ts-page .ts-hero / @keyframes tsFade など)と名前がぶつからないよう、
 *   クラスは tsx-、アニメーション名は tsx で始める。
 * - SWELLの本文用CSS(.post_content p など)に負けないよう、すべて #top から書く。
 * - 写真は背景画像で出す(SWELLの遅延読み込みが <img> を書き換えるため)。
 * - 値は本番の変数・実測値から取っている。
 * ========================================================== */

#top.tsx {
	--hero-grad: linear-gradient(180deg, #1c2421 0%, #161c1a 35%, #0e1313 70%, #080b0b 100%);
	--paper: #e8e3d8;
	--paper-soft: #c8c2b3;
	--accent: #c9b88a;
	--hero-dark: #1a1f1c;
	--line-strong: rgba(232, 227, 216, 0.28);
	--veil: rgba(15, 18, 16, 0.65);
	--ease-place: cubic-bezier(0.83, 0, 0.17, 1);
	--ease-float: cubic-bezier(0.16, 1, 0.3, 1);
	--pad: clamp(1.5rem, 6vw, 6rem);
	position: relative;
	/* ヘッダーの下から画面の下端まで(ヘッダーの高さは JS が --tsx-top に入れる) */
	height: calc(100vh - var(--tsx-top, 0px));
	height: calc(100svh - var(--tsx-top, 0px));
	min-height: 560px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #080b0b;
	color: var(--paper);
	touch-action: pan-y;
}
#top .tsx-slide { position: absolute; inset: 0; overflow: hidden; background: var(--hero-grad); visibility: hidden; }
#top .tsx-slide.is-current { visibility: visible; }
#top .tsx-dim { position: absolute; inset: 0; z-index: 9; background: var(--veil); opacity: 0; pointer-events: none; }
#top .tsx-slide.is-leaving .tsx-dim { opacity: 1; transition: opacity 1.6s var(--ease-place); }

/* 背景の写真: 画面全体に敷き、ゆっくり寄りが戻る */
#top .tsx-bg { position: absolute; inset: 0; }
#top .tsx-bg-img { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; transform: scale(1.08); }
#top .tsx-slide.is-shown .tsx-bg-img { animation: tsxSettle 12s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes tsxSettle { to { transform: scale(1); } }
/* 文字が乗る左下だけ暗くする(本番の写真の重ね .15 / .4 / .65 と同じ段) */
#top .tsx-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(15, 18, 16, 0.65) 0%, rgba(15, 18, 16, 0.4) 40%, rgba(15, 18, 16, 0.15) 75%),
		linear-gradient(0deg, rgba(15, 18, 16, 0.65) 0%, rgba(15, 18, 16, 0.15) 45%);
}
@keyframes tsxFade { to { opacity: 1; } }
@keyframes tsxFloatUp { to { opacity: 1; transform: translateY(0); } }

/* ---------------- 1. ロゴ → 夕暮れの空 ---------------- */
#top .tsx-s1 .tsx-bg { opacity: 0; animation: tsxFade 2.4s 6.9s ease-out forwards; }
#top .tsx-s1 .tsx-bg-img { background-position: 50% 70%; animation: tsxSettle 16s 6.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
#top .tsx-s1 .tsx-bg::after { background: rgba(15, 18, 16, 0.4); }

#top .tsx-hero { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; padding: 6rem 3rem; box-sizing: border-box; }
#top .tsx-hero-inner { position: relative; z-index: 2; text-align: center; max-width: 1100px; width: 100%; }
#top .tsx-logo { --h: 240px; --gap: 1.5rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 4rem; }
#top .tsx-logo-icon {
	display: block;
	height: var(--h);
	width: auto;
	aspect-ratio: 306 / 325;
	flex-shrink: 0;
	position: relative;
	z-index: 3;
	overflow: visible;
	opacity: 0;
	transform: translateX(calc((var(--h) * 580 / 325 + var(--gap)) / 2)) scale(1.45);
	animation: tsxFade 1.2s 0.6s ease-out forwards, tsxIconPlace 2.4s 4.5s var(--ease-place) forwards;
}
@keyframes tsxIconPlace { to { transform: none; } }
#top .tsx-logo-tx {
	display: block;
	height: var(--h);
	width: calc(var(--h) * 580 / 325);
	margin-left: var(--gap);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	background: no-repeat center / contain;
	opacity: 0;
	clip-path: inset(0 0 0 100%);
	animation: tsxTextFollow 2.4s 4.5s var(--ease-place) forwards;
}
@keyframes tsxTextFollow { 0% { opacity: 1; clip-path: inset(0 0 0 100%); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
#top .tsx-eyebrow,
#top .tsx-tagline { font-family: 'EB Garamond', 'Noto Serif JP', serif; font-style: normal; margin: 0; opacity: 0; transform: translateY(28px); }
#top .tsx-eyebrow {
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 1.4rem;
	text-wrap: balance;
	animation: tsxFloatUp 3s 6.4s var(--ease-float) forwards;
}
#top .tsx-tagline {
	font-size: clamp(1rem, 1.7vw, 1.3rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.78);
	animation: tsxFloatUp 3s 7.9s var(--ease-float) forwards;
}

/* 障子: 指一本ぶん開けて、間を置いてから開け切る */
#top .tsx-shoji .shoji-l { transform: translateX(56px); animation: tsxShojiL 3s 1.5s linear forwards; }
#top .tsx-shoji .shoji-r { transform: translateX(-56px); animation: tsxShojiR 3s 1.5s linear forwards; }
@keyframes tsxShojiL {
	0%   { transform: translateX(56px); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
	26%  { transform: translateX(47px); }
	52%  { transform: translateX(47px); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
	100% { transform: translateX(0); }
}
@keyframes tsxShojiR {
	0%   { transform: translateX(-56px); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
	26%  { transform: translateX(-47px); }
	52%  { transform: translateX(-47px); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
	100% { transform: translateX(0); }
}
#top .tsx-shoji .shoji-slit { opacity: 0; animation: tsxSlit 2.4s 1.7s ease-in-out forwards; }
@keyframes tsxSlit { 0% { opacity: 0; } 35% { opacity: 1; } 70% { opacity: 0.8; } 100% { opacity: 0; } }
#top .tsx-shoji .shoji-paper { opacity: 1; animation: tsxPaper 1.6s 2.9s ease-in forwards; }
@keyframes tsxPaper { to { opacity: 0; } }
#top .tsx-shoji .shoji-core { opacity: 0; animation: tsxFade 1.8s 3s ease-out forwards; }

/* ---------------- 2〜4. 写真の上に、本番と同じ文字組み ---------------- */
#top .tsx-copy {
	position: absolute;
	z-index: 2;
	left: var(--pad);
	bottom: 9rem;
	max-width: 34rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--paper); /* 見出しの色は本番CSSが「親から引き継ぐ」に固定しているので、親で決める */
	text-align: left;
}
#top .tsx-kicker { font: 400 0.7rem/1 'Inter', sans-serif; letter-spacing: 0.4em; text-transform: uppercase; color: var(--paper-soft); margin: 0 0 2rem; padding: 0; }
#top .tsx-title {
	font-family: 'EB Garamond', 'Noto Serif JP', serif;
	font-weight: 500;
	font-size: clamp(2.6rem, 4.6vw, 4.4rem);
	line-height: 1.1;
	letter-spacing: -0.005em;
}
#top .tsx-title span { display: block; color: var(--accent); }
#top .tsx-sub { font-family: 'EB Garamond', 'Noto Serif JP', serif; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; color: var(--paper); margin: 1.4rem 0 0; padding: 0; text-wrap: pretty; }
#top .tsx-body { font: 300 1rem/1.95 'Inter', sans-serif; color: var(--paper-soft); margin: 0.8rem 0 0; padding: 0; text-wrap: pretty; }
/* 4画面目: 最新の記事へのリンク(Latest + タイトル + →)。色はスライドの既存の紙色・金 */
#top .tsx-latest { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
#top .tsx-latest-label { font: 400 0.65rem/1 'Inter', sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
#top .tsx-latest-link { display: inline-block; font-family: 'EB Garamond', 'Noto Serif JP', serif; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; color: var(--paper); text-decoration: none; text-wrap: pretty; }
#top .tsx-latest-title { text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: text-decoration-color 0.3s; }
#top .tsx-latest-arrow { display: inline-block; margin-left: 0.6rem; color: var(--accent); transition: transform 0.3s; }
#top .tsx-latest-link:hover .tsx-latest-title,
#top .tsx-latest-link:focus-visible .tsx-latest-title { text-decoration-color: var(--accent); }
#top .tsx-latest-link:hover .tsx-latest-arrow,
#top .tsx-latest-link:focus-visible .tsx-latest-arrow { transform: translateX(4px); }
#top .tsx-latest-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
#top .tsx-btn {
	margin-top: 2.4rem;
	font: 400 0.75rem/1 'Inter', sans-serif;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--accent);
	padding: 1.2rem 2.8rem;
	border: 1px solid var(--accent);
	border-radius: 0;
	background: var(--veil);
	text-decoration: none;
	display: inline-block;
	transition: background 0.3s, color 0.3s;
}
#top .tsx-btn:hover,
#top .tsx-btn:focus-visible { background: var(--accent); color: var(--hero-dark); }

#top .tsx-copy > * { opacity: 0; transform: translateY(30px); }
#top .tsx-slide.is-shown .tsx-copy > * { animation: tsxFloatUp 1.8s var(--ease-float) forwards; }
#top .tsx-slide.is-shown .tsx-copy > :nth-child(2) { animation-delay: 0.15s; }
#top .tsx-slide.is-shown .tsx-copy > :nth-child(3) { animation-delay: 0.3s; }
#top .tsx-slide.is-shown .tsx-copy > :nth-child(4) { animation-delay: 0.45s; }
#top .tsx-slide.is-shown .tsx-copy > :nth-child(5) { animation-delay: 0.6s; }

#top .tsx-s2 .tsx-bg-img { background-position: 50% 40%; }
#top .tsx-s4 .tsx-bg-img { background-position: 50% 60%; }

/* 3. 商品: 花蓮さんのバナーから文字を抜いた画像を 1536x864 の比率のまま敷く(左寄せで右を切る) */
#top .tsx-s3 {
	--ink: #182a1a;
	--btn: #18341d;
	--rule: #7c8979;
	--ground: #fefdf8; /* バナーの実測 */
	container-type: size; /* 中の画像の大きさを、この画面の幅・高さ(cqw / cqh)から決める */
	background: var(--ground);
}
#top .tsx-scene {
	--sw: max(100cqw, 100cqh * 16 / 9);
	position: absolute;
	top: 50%;
	left: max(100cqw - var(--sw), var(--sw) * -0.04);
	width: var(--sw);
	aspect-ratio: 16 / 9;
	transform: translateY(-50%);
	background: no-repeat center / 100% 100%;
}
/* 文字とボタンは他の画面と同じ組み方。地が明るいので色だけ置き換える(金色は明るい地では読めないため、2行目はバナーの灰緑) */
#top .tsx-s3 .tsx-copy { max-width: 26rem; color: var(--ink); }
#top .tsx-s3 .tsx-kicker { color: var(--rule); }
#top .tsx-s3 .tsx-sub,
#top .tsx-s3 .tsx-body { color: var(--ink); }
#top .tsx-s3 .tsx-title span { color: var(--rule); }
#top .tsx-s3 .tsx-btn { color: var(--ink); border-color: var(--ink); background: transparent; }
#top .tsx-s3 .tsx-btn:hover,
#top .tsx-s3 .tsx-btn:focus-visible { background: var(--btn); border-color: var(--btn); color: var(--ground); }

/* ---------------- 操作(画面名・残り時間・矢印・一時停止) ---------------- */
#top .tsx-bar {
	position: absolute;
	z-index: 20;
	left: var(--pad);
	right: var(--pad);
	bottom: 2rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	pointer-events: none;
}
#top .tsx-bar > * { pointer-events: auto; }
#top .tsx-bar button {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: var(--paper-soft);
}
#top .tsx-bar button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
#top .tsx-tabs { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
#top .tsx-tabs li { margin: 0; padding: 0; list-style: none; }
#top .tsx-tabs li::before,
#top .tsx-tabs li::after { content: none; display: none; }
#top .tsx-bar .tsx-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 0.6rem 0; min-width: 6.5rem; }
#top .tsx-tab .lbl { font: 400 0.65rem/1 'Inter', sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: var(--paper-soft); }
#top .tsx-tab[aria-current="true"] .lbl,
#top .tsx-tab:hover .lbl { color: var(--paper); }
#top .tsx-tab .trk { position: relative; display: block; width: 100%; height: 1px; background: var(--line-strong); }
#top .tsx-tab .trk i { position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left; }
#top .tsx-btns { display: flex; gap: 0.5rem; }
#top .tsx-bar .tsx-btns button {
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-strong);
	background: var(--veil);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 300 0.95rem/1 'Inter', sans-serif;
}
#top .tsx-bar .tsx-btns button:hover { border-color: var(--accent); color: var(--accent); }
#top .tsx-btns svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1; }
#top .tsx-tab .lbl,
#top .tsx-tab .trk,
#top .tsx-tab .trk i,
#top .tsx-bar .tsx-btns button { transition: color 0.8s, background-color 0.8s, border-color 0.8s; }

/* 明るい画面(3)の間は、下の操作も暗い色にする */
#top.tsx[data-tone="light"] .tsx-tab .lbl { color: #7c8979; }
#top.tsx[data-tone="light"] .tsx-tab[aria-current="true"] .lbl,
#top.tsx[data-tone="light"] .tsx-tab:hover .lbl { color: #182a1a; }
#top.tsx[data-tone="light"] .tsx-tab .trk { background: rgba(15, 18, 16, 0.15); }
#top.tsx[data-tone="light"] .tsx-tab .trk i { background: #182a1a; }
#top.tsx[data-tone="light"] .tsx-bar .tsx-btns button { border-color: rgba(15, 18, 16, 0.4); background: transparent; color: #182a1a; }
#top.tsx[data-tone="light"] .tsx-bar .tsx-btns button:hover { border-color: #182a1a; }

/* ---------------- スマホ ---------------- */
@media (max-width: 900px) {
	#top .tsx-hero { padding: 5rem 1.5rem; }
	#top .tsx-logo { margin-bottom: 3rem; --h: 130px; }
	#top .tsx-bg::after { background: linear-gradient(0deg, rgba(15, 18, 16, 0.65) 0%, rgba(15, 18, 16, 0.65) 30%, rgba(15, 18, 16, 0.15) 70%); }
	#top .tsx-copy { right: var(--pad); bottom: 5.5rem; }
	#top .tsx-kicker { margin-bottom: 1.2rem; }
	#top .tsx-sub { margin-top: 1rem; }
	#top .tsx-body { margin-top: 0.5rem; line-height: 1.8; }
	#top .tsx-btn { margin-top: 1.6rem; padding: 1.05rem 2rem; }
	#top .tsx-bar { bottom: 1rem; }
	#top .tsx-tabs { gap: 0.6rem; }
	#top .tsx-bar .tsx-tab { min-width: 0; width: 2.4rem; gap: 0; padding: 1.3rem 0; }
	#top .tsx-tab .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	#top .tsx-bar .tsx-btns button { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
	#top .tsx-logo { --h: clamp(84px, 26vw, 130px); --gap: 1rem; }
	#top .tsx-eyebrow { font-size: 1.15rem; margin-bottom: 1.1rem; }
	#top .tsx-tagline { font-size: 0.9rem; }
	#top .tsx-title { font-size: 2.3rem; }
	#top .tsx-sub { font-size: 1.1rem; }
	#top .tsx-body { font-size: 0.9rem; }
	#top .tsx-latest-link { font-size: 1.1rem; }
}
@media (max-width: 900px) and (max-height: 720px) {
	#top .tsx-body { display: none; }
	#top .tsx-body.tsx-latest { display: flex; } /* 記事へのリンクは低い画面でも残す */
}
/* 縦長の画面: 3 は写真(商品のあたり)を上、文字を下に */
@media (max-aspect-ratio: 5/4) {
	#top .tsx-scene { left: 0; right: 0; top: 0; width: auto; height: 52%; aspect-ratio: auto; transform: none; background-size: cover; background-position: 88% 55%; }
	#top .tsx-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(254, 253, 248, 0) 70%, var(--ground) 100%); }
	#top .tsx-s3 .tsx-copy { right: var(--pad); bottom: 6rem; max-width: none; }
}
@media (max-aspect-ratio: 5/4) and (max-height: 720px) {
	#top .tsx-scene { height: 44%; }
	#top .tsx-s3 .tsx-body { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	#top .tsx-logo-icon,
	#top .tsx-logo-tx,
	#top .tsx-eyebrow,
	#top .tsx-tagline,
	#top .tsx-copy > * { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
	#top .tsx-s1 .tsx-bg { opacity: 1; animation: none; }
	#top .tsx-bg-img { transform: none !important; animation: none !important; }
	#top .tsx-shoji .shoji-l,
	#top .tsx-shoji .shoji-r { transform: none; animation: none; }
	#top .tsx-shoji .shoji-paper,
	#top .tsx-shoji .shoji-slit { opacity: 0; animation: none; }
	#top .tsx-shoji .shoji-core { opacity: 1; animation: none; }
}