/* ==========================================================================
   LAYOUT — セクションの骨格と共通の演出レイヤー
   ========================================================================== */

.aa-main{ display:block }

/* 1セクション = 1画面 を基本としつつ、内容が多い場合は自然に伸びる */
.aa-section{
	position:relative;
	width:100%;
	min-height:100svh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding-block:var(--space-block);
	background:var(--bg);
	color:var(--fg);
	isolation:isolate;
}

/* 高さを必要としないセクション */
.aa-news,
.aa-page{ min-height:auto; padding-block:var(--space-block) }

.aa-section__inner{
	width:100%;
	max-width:var(--max-stage);
	margin-inline:auto;
	padding-inline:var(--gutter);
}

/* 大画面では左右の空間もデザインとして残す */
@media (min-width:1920px){
	.aa-section__inner{ padding-inline:clamp(96px,9vw,220px) }
}
@media (min-aspect-ratio:2/1) and (min-width:1600px){
	.aa-section__inner{ max-width:1440px }
}

/* --- Sticky 区間の基本形 ---------------------------------------------------
   高さは各セクションのCSSで指定する（--track-h）。
   進行度 --p は JS（modules/scroll-progress.js）が 0→1 で付与する。
   -------------------------------------------------------------------------- */
[data-aa-sticky-track]{
	position:relative;
	width:100%;
	height:var(--track-h,300vh);
}
[data-aa-sticky-view]{
	position:sticky;
	top:0;
	min-height:100svh;
	display:grid;
	place-content:center;
	justify-items:center;
	gap:clamp(20px,3.5svh,56px);
	padding:var(--space-block) var(--gutter);
}
/* Sticky を使うセクションは自身の padding を持たない */
.aa-section:has([data-aa-sticky-track]){ padding-block:0 }

/* --- 共通Reveal ----------------------------------------------------------- */
[data-aa-reveal]{
	opacity:0;
	transform:translateY(28px);
	filter:blur(6px);
	transition:
		opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out),
		filter var(--dur-base) var(--ease-out);
	transition-delay:calc(var(--index,0) * 90ms);
}
[data-aa-reveal].is-visible{ opacity:1; transform:none; filter:none }

/* 行分割テキスト（改行位置を管理画面から制御する） */
.aa-line{ display:block }

/* --- 画像 ------------------------------------------------------------------ */
.aa-media{ position:relative; display:block; width:100% }
.aa-media__img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:var(--focal,50% 50%);
	aspect-ratio:var(--ratio,auto);
}
.aa-media--placeholder{
	aspect-ratio:var(--ratio,16/9);
	background:
		radial-gradient(120% 90% at 30% 20%, rgb(127 168 255/.18), transparent 60%),
		radial-gradient(100% 80% at 75% 70%, rgb(184 166 245/.16), transparent 60%),
		var(--c-mist);
	border:1px dashed var(--rule);
}