/*
Theme Name: ひだまりわんこ
Theme URI: https://mysite.test/
Description: 架空の犬たちの日記を読んで癒されるブログ用の、Twenty Twenty-Five の子テーマ。写真は Dog API（dog.ceo）を使う。
Author: elephantnode
Template: twentytwentyfive
Version: 1.1.2
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hidamari-wan
*/

:root {
	--hw-wave-h: clamp(36px, 5vw, 72px);
	--hw-ease: cubic-bezier(.22, .61, .36, 1);
	--hw-line: rgba(74, 90, 106, .18);
}

/* ---------------------------------------------------------------
 * 全体
 * ------------------------------------------------------------- */

body {
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
}

/* セクションどうしは波形で重ねるので、既定の隙間をなくす */
.wp-site-blocks > * + *,
.hw-main > * + * {
	margin-block-start: 0;
}

.hw-main {
	margin-block-start: 0;
}

:where(a, button, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.hw-section {
	padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

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

.hw-header {
	padding-block: 1.4rem;
	position: relative;
	z-index: 10;
}

.hw-logo {
	position: relative;
	padding-left: 64px;
	min-height: 52px;
	justify-content: center;
}

.hw-logo::before,
.hw-logo::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
}

.hw-logo::before {
	width: 52px;
	height: 52px;
	border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
	background: var(--wp--preset--color--accent);
}

.hw-logo::after {
	left: 13px;
	width: 26px;
	height: 26px;
	background: var(--wp--preset--color--base);
	-webkit-mask: url(assets/img/paw.svg) center / contain no-repeat;
	mask: url(assets/img/paw.svg) center / contain no-repeat;
}

.hw-logo .wp-block-site-title {
	line-height: 1.3;
}

.hw-logo__en {
	margin: 0;
	font-size: .66rem !important;
}

.hw-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: .3em;
}

.hw-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .4s var(--hw-ease);
}

.hw-nav .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ---------------------------------------------------------------
 * ブロックスタイル
 * ------------------------------------------------------------- */

/* 縦書き */
.is-style-vertical {
	writing-mode: vertical-rl;
	letter-spacing: .32em;
	line-height: 2.3;
	margin-inline: auto;
}

/* 英字見出し */
.is-style-en-title {
	font-family: var(--wp--preset--font-family--quicksand);
	font-size: var(--wp--preset--font-size--xx-large) !important;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0;
}

/* 英字ラベル */
.is-style-en-label {
	font-family: var(--wp--preset--font-family--quicksand);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase;
	line-height: 1.6;
}

/* ラベル（枠線だけの角丸） */
.is-style-pill {
	width: fit-content;
	padding: .3em 1.2em;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
	background: var(--wp--preset--color--base-2);
}

/* 画像: まるみ（いびつな丸） */
.wp-block-image.is-style-blob img {
	border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%;
	width: 100%;
	object-fit: cover;
}

/* 画像: まる */
.wp-block-image.is-style-circle img {
	border-radius: 50%;
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
}

/* グループ: 上に波 */
.is-style-wave-top {
	position: relative;
}

.is-style-wave-top::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 1px);
	height: var(--hw-wave-h);
	background: inherit;
	-webkit-mask: url(assets/img/wave.svg) center bottom / 100% 100% no-repeat;
	mask: url(assets/img/wave.svg) center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

/* グループ: 肉球を散らす */
.is-style-paws {
	position: relative;
	overflow: clip;
}

.is-style-paws::before,
.is-style-paws::after {
	content: "";
	position: absolute;
	width: clamp(150px, 18vw, 240px);
	aspect-ratio: 1;
	background: url(assets/img/sprinkle.svg) center / contain no-repeat;
	opacity: .55;
	pointer-events: none;
	animation: hw-float 9s ease-in-out infinite;
}

.is-style-paws::before {
	top: 4%;
	right: 3%;
}

.is-style-paws::after {
	bottom: 6%;
	left: 2%;
	rotate: 160deg;
	animation-delay: -4s;
}

.is-style-paws > * {
	position: relative;
	z-index: 1;
}

/* ボタン: 矢印つき */
.wp-block-button.is-style-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 1.1rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A6A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
	transition: background-color .35s var(--hw-ease), translate .35s var(--hw-ease);
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	background-color: var(--wp--preset--color--accent-soft);
	translate: 4px 0;
}

/* ---------------------------------------------------------------
 * 見出し（英字＋和文ラベル）
 * ------------------------------------------------------------- */

.hw-sec-title {
	gap: .5rem !important;
	margin-block-end: clamp(2.5rem, 5vw, 3.5rem) !important;
}

.hw-sec-title--center {
	text-align: center;
}

.hw-sec-title__ja {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	margin: 0;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 500;
	letter-spacing: .3em;
	line-height: 1.8;
}

.hw-sec-title__ja::before {
	content: "";
	width: 1em;
	height: 1em;
	background: var(--wp--preset--color--accent);
	-webkit-mask: url(assets/img/paw.svg) center / contain no-repeat;
	mask: url(assets/img/paw.svg) center / contain no-repeat;
}

/* ---------------------------------------------------------------
 * ヒーロー
 * ------------------------------------------------------------- */

.hw-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2rem, 5vw, 4rem) calc(var(--hw-wave-h) + clamp(3rem, 6vw, 5rem));
	margin-block-start: -1px;
}

/* 大きくぼかした光の円 */
.hw-hero::before {
	content: "";
	position: absolute;
	width: min(70vw, 760px);
	aspect-ratio: 1;
	right: -12%;
	top: -18%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 40%, rgba(255, 255, 255, .95), rgba(248, 214, 206, .55) 45%, rgba(196, 224, 236, .35) 70%, transparent 72%);
	filter: blur(30px);
	pointer-events: none;
	animation: hw-breathe 14s ease-in-out infinite;
}

/* 下端の波 */
.hw-hero::after,
.hw-page-head::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: var(--hw-wave-h);
	background: var(--wp--preset--color--base);
	-webkit-mask: url(assets/img/wave-2.svg) center bottom / 100% 100% no-repeat;
	mask: url(assets/img/wave-2.svg) center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

.hw-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
}

.hw-hero__text {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: flex-start;
	gap: 1.4rem;
}

.hw-hero__text > * {
	margin: 0 !important;
}

.hw-hero__copy {
	font-size: clamp(1.35rem, 2.3vw, 1.9rem) !important;
	font-weight: 500;
	margin: 0;
}

.hw-hero__en {
	writing-mode: vertical-rl;
	margin-top: 4.5em !important;
	opacity: .75;
}

.hw-hero__photos {
	position: relative;
	height: clamp(380px, 46vw, 600px);
}

.hw-hero__photo {
	position: absolute;
	margin: 0 !important;
	animation: hw-float 10s ease-in-out infinite;
}

.hw-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hw-hero__photo--a {
	width: 54%;
	aspect-ratio: 4 / 5;
	top: 0;
	left: 4%;
}

.hw-hero__photo--b {
	width: 40%;
	aspect-ratio: 1;
	top: 22%;
	right: 0;
	animation-delay: -3s;
}

.hw-hero__photo--c {
	width: 31%;
	aspect-ratio: 1;
	bottom: 0;
	left: 44%;
	animation-delay: -6s;
}

.hw-hero__photo--c img {
	border-radius: 50%;
	border: 6px solid var(--wp--preset--color--base-2);
}

.hw-hero__scroll {
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: calc(var(--hw-wave-h) + 1rem);
	z-index: 1;
	margin: 0;
	writing-mode: vertical-rl;
	padding-bottom: 4.2rem;
}

.hw-hero__scroll::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 3.4rem;
	background: currentColor;
	transform-origin: top;
	animation: hw-scroll-line 2.4s var(--hw-ease) infinite;
}

/* ---------------------------------------------------------------
 * ようこそ
 * ------------------------------------------------------------- */

.hw-welcome p.has-text-align-center {
	line-height: 2.4;
}

.hw-welcome .wp-block-buttons {
	margin-block-start: 2.5rem;
}

/* ---------------------------------------------------------------
 * 今日のわんこ
 * ------------------------------------------------------------- */

.hw-today {
	margin-block-start: 0 !important;
}

.hw-today__cols {
	gap: clamp(2rem, 6vw, 5rem) !important;
}

.hw-today-photo {
	position: relative;
}

.hw-today-photo::after {
	content: "";
	position: absolute;
	width: 22%;
	aspect-ratio: 1;
	right: -2%;
	bottom: -4%;
	background: url(assets/img/paw-badge.svg) center / contain no-repeat;
	rotate: -12deg;
}

.hw-today-photo img {
	aspect-ratio: 4 / 3;
	transition: opacity .5s var(--hw-ease), scale .5s var(--hw-ease);
}

.hw-today.is-loading .hw-today-photo img {
	opacity: .35;
	scale: .98;
}

.hw-today .wp-block-buttons {
	margin-block-start: 2rem;
}

/* ---------------------------------------------------------------
 * 日記カード
 * ------------------------------------------------------------- */

.hw-latest .wp-block-buttons,
.hw-more .wp-block-buttons {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.hw-cards .wp-block-post-template {
	gap: clamp(1.5rem, 3.5vw, 3rem);
}

.hw-card {
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.hw-card > * {
	margin: 0 !important;
}

.hw-card__img {
	overflow: hidden;
	border-radius: 28px;
}

.hw-card__img img {
	transition: scale .8s var(--hw-ease);
}

.hw-card:hover .hw-card__img img {
	scale: 1.04;
}

.hw-card__cat {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .6rem !important;
	font-size: 0;
}

.hw-card__cat a,
.hw-cat-pills a {
	display: inline-block;
	padding: .15em 1em;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	background: var(--wp--preset--color--base-2);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.9;
	letter-spacing: .14em;
	text-decoration: none;
	transition: background-color .3s var(--hw-ease);
}

.hw-card__cat a:hover,
.hw-cat-pills a:hover,
.hw-cat-pills .current-cat a {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

.hw-card__title {
	line-height: 1.7 !important;
	letter-spacing: .08em;
}

.hw-card__title a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: .3em;
}

@media (min-width: 782px) {
	.hw-cards--stagger .wp-block-post-template > li:nth-child(3n+2) {
		margin-top: 4rem;
	}

	.hw-cards--stagger .wp-block-post-template > li:nth-child(3n) {
		margin-top: 1.75rem;
	}
}

@media (min-width: 600px) and (max-width: 781px) {
	.hw-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.hw-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* カテゴリーの切り替え */
.hw-cat-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem) !important;
	padding: 0;
	list-style: none;
	font-size: 0;
}

.hw-cat-pills a {
	font-size: var(--wp--preset--font-size--small);
	padding: .3em 1.3em;
}

/* ページ送り */
.hw-archive .wp-block-query-pagination {
	margin-block-start: clamp(3rem, 6vw, 5rem);
	gap: 1rem;
	font-family: var(--wp--preset--font-family--quicksand);
}

.hw-archive .wp-block-query-pagination a {
	text-decoration: none;
}

/* ---------------------------------------------------------------
 * わんこたち
 * ------------------------------------------------------------- */

.hw-friends {
	margin-block-start: 0 !important;
}

.hw-friends__grid.is-layout-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.5rem) !important;
}

@media (max-width: 1023px) {
	.hw-friends__grid.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.hw-friends__grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hw-friend {
	gap: .2rem !important;
	text-align: center;
}

.hw-friend .wp-block-image {
	width: 100%;
	margin-bottom: .8rem !important;
	transition: translate .5s var(--hw-ease);
}

.hw-friend:hover .wp-block-image {
	translate: 0 -6px;
}

.hw-friend__name {
	margin: 0;
	font-weight: 700;
	letter-spacing: .2em;
}

.hw-friend__breed {
	margin: 0;
	opacity: .85;
}

@media (min-width: 1024px) {
	.hw-friends__grid > .hw-friend:nth-child(even) {
		margin-top: 2.5rem;
	}
}

.hw-friends .wp-block-buttons {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------
 * ページ見出し・固定ページ
 * ------------------------------------------------------------- */

.hw-page-head {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 8vw, 6rem) calc(var(--hw-wave-h) + clamp(2.5rem, 5vw, 4rem));
}

.hw-page-head::before {
	content: "";
	position: absolute;
	width: min(55vw, 520px);
	aspect-ratio: 1;
	left: -10%;
	top: -40%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(248, 214, 206, .4) 55%, transparent 70%);
	filter: blur(24px);
	pointer-events: none;
}

.hw-page-head > * {
	position: relative;
	z-index: 1;
}

.hw-page-head .hw-sec-title {
	margin-block-end: 0 !important;
}

.hw-page-head__en {
	margin: 0;
}

.hw-page-head .wp-block-query-title {
	font-size: var(--wp--preset--font-size--small) !important;
}

.hw-page-head__title {
	font-size: var(--wp--preset--font-size--x-large) !important;
	letter-spacing: .24em;
}

.hw-404 .wp-block-buttons {
	margin-block-start: 2.5rem;
}

.hw-page-content {
	padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 9vw, 7rem);
}

/* わんこ紹介 */
.hw-profile {
	gap: clamp(2rem, 6vw, 5rem) !important;
	margin-block: clamp(3.5rem, 8vw, 6rem) !important;
}

.hw-profile .wp-block-column > * {
	margin-block: 0 0 1rem;
}

.hw-profile .is-style-blob img {
	aspect-ratio: 1;
}

.hw-profile .is-style-en-label {
	margin: 0;
	color: var(--wp--preset--color--accent-ink);
}

.hw-profile__name {
	font-size: var(--wp--preset--font-size--x-large) !important;
	letter-spacing: .3em;
	margin-block: .1rem .8rem !important;
}

.hw-profile__likes {
	padding-block-start: 1rem;
	border-top: 1px dashed var(--hw-line);
	line-height: 2.1;
}

.hw-profile__likes strong {
	font-weight: 500;
	color: var(--wp--preset--color--accent-ink);
}

@media (min-width: 782px) {
	.hw-profile:nth-of-type(even) {
		flex-direction: row-reverse;
	}
}

/* ---------------------------------------------------------------
 * 記事
 * ------------------------------------------------------------- */

.hw-single {
	padding-block: clamp(3rem, 7vw, 5rem) calc(var(--hw-wave-h) + clamp(4rem, 8vw, 6rem));
}

.hw-single__head {
	gap: .9rem !important;
	margin-block-end: clamp(2.5rem, 5vw, 3.5rem) !important;
	text-align: center;
}

.hw-single__head > * {
	margin: 0 !important;
}

.hw-single__head .hw-card__cat {
	justify-content: center;
}

.hw-single__title {
	font-size: var(--wp--preset--font-size--x-large) !important;
	letter-spacing: .14em;
	line-height: 1.7 !important;
}

.hw-single__content > .wp-block-image:first-child {
	margin-block-end: 2.5rem;
}

.hw-single__content .wp-block-image img {
	width: 100%;
}

.hw-single__content h2,
.hw-single__content h3 {
	margin-block-start: 3rem;
	font-size: var(--wp--preset--font-size--large);
}

.hw-single__content blockquote,
.hw-single__content .wp-block-quote {
	margin-inline: 0;
	padding: 1.5rem 2rem;
	border: 0;
	border-radius: 24px;
	background: var(--wp--preset--color--cream);
}

.hw-single__nav {
	margin-block-start: clamp(3rem, 6vw, 4.5rem) !important;
	padding-block-start: 1.75rem;
	border-top: 1px solid var(--hw-line);
	font-size: var(--wp--preset--font-size--small);
}

.hw-single__nav a {
	text-decoration: none;
}

.hw-more {
	padding-block-start: clamp(3rem, 6vw, 5rem);
}

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

/* 波は直前のセクションの下端に重ねる（上に余白を作ると地色の帯が出るため） */
.hw-footer {
	margin-block-start: 0 !important;
	padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}

.hw-footer__inner {
	gap: 2.5rem !important;
}

.hw-footer__tagline {
	margin-block-start: .8rem !important;
}

.hw-footer__nav .wp-block-navigation-item__content {
	text-decoration: none;
}

.hw-footer__nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: .3em;
}

.hw-footer__bottom {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem) !important;
	padding-block-start: 1.25rem;
	border-top: 1px solid var(--hw-line);
}

.hw-footer__bottom p {
	margin: 0;
}

/* ---------------------------------------------------------------
 * スマホ・タブレット
 * ------------------------------------------------------------- */

@media (max-width: 781px) {
	.hw-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.hw-hero__text {
		order: 2;
	}

	.hw-hero__photos {
		order: 1;
		height: clamp(300px, 88vw, 420px);
	}

	.hw-hero__copy {
		font-size: 1.3rem !important;
	}

	.hw-hero__scroll {
		display: none;
	}

	.hw-today__cols {
		flex-direction: column;
	}

	.hw-today__cols > .wp-block-column {
		flex-basis: auto !important;
		width: 100%;
	}

	.hw-logo {
		padding-left: 54px;
		min-height: 44px;
	}

	.hw-logo::before {
		width: 44px;
		height: 44px;
	}

	.hw-logo::after {
		left: 11px;
		width: 22px;
		height: 22px;
	}

	.hw-logo .wp-block-site-title {
		font-size: 1.05rem !important;
	}
}

/* ---------------------------------------------------------------
 * アニメーション
 * ------------------------------------------------------------- */

@keyframes hw-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes hw-breathe {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.06); opacity: .85; }
}

@keyframes hw-scroll-line {
	0% { transform: scaleY(0); transform-origin: top; }
	45% { transform: scaleY(1); transform-origin: top; }
	55% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------------------------------------------------------------
 * 今日のわんこ: 写真のモーダル表示（要素は today-dog.js が作る）
 * ------------------------------------------------------------- */

.hw-today-photo img[role="button"] {
	cursor: zoom-in;
}

.hw-today-photo img[role="button"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* 開いていないときはブラウザ既定の display: none のまま */
.hw-lightbox[open] {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: clamp(16px, 4vw, 48px);
	border: 0;
	background: transparent;
	overscroll-behavior: contain;
}

.hw-lightbox::backdrop {
	background: rgba(46, 56, 66, .72);
	backdrop-filter: blur(4px);
}

.hw-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: min(1080px, 100%);
	margin: 0;
	animation: hw-lightbox-in .45s var(--hw-ease) both;
}

.hw-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100dvh - 9rem);
	object-fit: contain;
	border-radius: 20px;
	background: var(--wp--preset--color--base-2);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.hw-lightbox__caption {
	padding: .3em 1.2em;
	border-radius: 999px;
	background: var(--wp--preset--color--base-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
	text-align: center;
}

.hw-lightbox__caption:empty {
	display: none;
}

.hw-lightbox__close {
	position: fixed;
	top: clamp(12px, 2.5vw, 28px);
	right: clamp(12px, 2.5vw, 28px);
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base-2);
	cursor: pointer;
	transition: background-color .3s var(--hw-ease);
}

/* × を2本の線で描く */
.hw-lightbox__close::before,
.hw-lightbox__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 1.5px;
	background: var(--wp--preset--color--contrast);
	translate: -50% -50%;
	rotate: 45deg;
}

.hw-lightbox__close::after {
	rotate: -45deg;
}

.hw-lightbox__close:hover {
	background: var(--wp--preset--color--accent-soft);
}

@keyframes hw-lightbox-in {
	from { opacity: 0; scale: .96; }
	to { opacity: 1; scale: 1; }
}

/* ---------------------------------------------------------------
 * ふんわり表示（クラスは motion.js が付ける。JS が動かなければ常に表示されたまま）
 * ------------------------------------------------------------- */

.hw-reveal {
	opacity: 0;
	translate: 0 26px;
	transition:
		opacity 1s var(--hw-ease) var(--hw-delay, 0ms),
		translate 1.2s var(--hw-ease) var(--hw-delay, 0ms);
}

.hw-reveal.is-shown {
	opacity: 1;
	translate: none;
}

/* ---------------------------------------------------------------
 * パララックス
 * スクロール連動アニメーション（animation-timeline）で動かすので、JS は使わない。
 * 漂うアニメーション（transform）とは別に translate を動かして重ねている。
 * スマホ幅・視差効果を減らす設定・非対応ブラウザ・エディタでは動かさない。
 * ------------------------------------------------------------- */

@keyframes hw-px-rise-s { from { translate: 0 0; } to { translate: 0 -48px; } }
@keyframes hw-px-rise-m { from { translate: 0 0; } to { translate: 0 -110px; } }
@keyframes hw-px-rise-l { from { translate: 0 0; } to { translate: 0 -180px; } }
@keyframes hw-px-sink { from { translate: 0 0; } to { translate: 0 140px; } }
@keyframes hw-px-drift { from { translate: 0 50px; } to { translate: 0 -50px; } }
@keyframes hw-px-drift-rev { from { translate: 0 -40px; } to { translate: 0 40px; } }

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 782px) {
		/* ヒーロー: ページ上端から 1 画面分スクロールするあいだに、写真ごとに違う速さで上へ */
		body:not(.editor-styles-wrapper) .hw-hero__photo--a {
			animation: hw-float 10s ease-in-out infinite, hw-px-rise-m linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100vh;
		}

		body:not(.editor-styles-wrapper) .hw-hero__photo--b {
			animation: hw-float 10s ease-in-out -3s infinite, hw-px-rise-l linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100vh;
		}

		body:not(.editor-styles-wrapper) .hw-hero__photo--c {
			animation: hw-float 10s ease-in-out -6s infinite, hw-px-rise-s linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100vh;
		}

		/* ぼかした光は逆に少し沈ませて、奥行きを出す */
		body:not(.editor-styles-wrapper) .hw-hero::before {
			animation: hw-breathe 14s ease-in-out infinite, hw-px-sink linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100vh;
		}

		/* 散らした肉球: セクションが画面を通り過ぎるあいだに、上下逆向きにゆっくり動く */
		body:not(.editor-styles-wrapper) .is-style-paws {
			view-timeline-name: --hw-paws;
		}

		body:not(.editor-styles-wrapper) .is-style-paws::before {
			animation: hw-float 9s ease-in-out infinite, hw-px-drift linear both;
			animation-timeline: auto, --hw-paws;
		}

		body:not(.editor-styles-wrapper) .is-style-paws::after {
			animation: hw-float 9s ease-in-out -4s infinite, hw-px-drift-rev linear both;
			animation-timeline: auto, --hw-paws;
		}

		/* 今日のわんこの写真 */
		body:not(.editor-styles-wrapper) .hw-today-photo {
			animation: hw-px-drift linear both;
			animation-timeline: view();
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.hw-reveal {
		opacity: 1;
		translate: none;
		transition: none;
	}

	.hw-lightbox__figure {
		animation: none;
	}

	.hw-hero::before,
	.hw-hero__photo,
	.hw-hero__scroll::after,
	.is-style-paws::before,
	.is-style-paws::after {
		animation: none;
	}

	.hw-card__img img,
	.hw-friend .wp-block-image,
	.hw-today-photo img {
		transition: none;
	}
}