/* ------------------------------------------------------------------
 * mashiro main stylesheet
 * Tailwind は CDN で読み込み、ここではカスタムクラスとアニメだけ定義する
 * ------------------------------------------------------------------ */

:root {
	--mashiro-dark: #2D2D2D;
	--mashiro-gray: #7A7A8A;
	--mashiro-pink: #E8789A;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}
@media (max-width: 767px) {
	html { scroll-padding-top: 80px; }
}

html, body {
	overflow-x: clip;
	max-width: 100vw;
}

body {
	font-family: "Zen Maru Gothic", "Quicksand", system-ui, sans-serif;
	color: #2D2D2D;
	background: #FAFAFA;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a, button { cursor: pointer; }

/* ---- Layout helpers (Tailwind container 互換) ---- */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 640px) {
	.container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
	.container { padding-left: 2rem; padding-right: 2rem; max-width: 1280px; }
}

.section-title {
	font-family: "Quicksand", "Zen Maru Gothic", system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ---- Pop card / button ---- */
.mashiro-card {
	background: #fff;
	border-radius: 24px;
	border: 3px solid #2D2D2D;
	box-shadow: 6px 6px 0 #2D2D2D;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mashiro-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 9px 9px 0 #2D2D2D;
}

.mashiro-btn {
	border-radius: 24px;
	font-weight: 700;
	padding: 0.75rem 2rem;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	border: 3px solid #2D2D2D;
	box-shadow: 4px 4px 0 #2D2D2D;
	display: inline-flex;
	align-items: center;
}
.mashiro-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #2D2D2D;
}
.mashiro-btn:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 #2D2D2D;
}

/* ---- Blob shape ---- */
.blob-shape {
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.blob-v1 { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.blob-v2 { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
.blob-v3 { border-radius: 70% 30% 50% 50% / 50% 60% 40% 50%; }
.blob-v4 { border-radius: 50% 50% 70% 30% / 40% 60% 40% 60%; }

/* ---- Animations ---- */
@keyframes mashiro-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
@keyframes mashiro-float-slow {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@keyframes mashiro-pulse-soft {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}
@keyframes mashiro-spin-orbit {
	from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
	to   { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}
@keyframes mashiro-fade-in-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mashiro-scale-in {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes mashiro-scroll-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 6px); }
}
@keyframes mashiro-underline {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.mashiro-anim-float       { animation: mashiro-float 3s ease-in-out infinite; }
.mashiro-anim-float-slow  { animation: mashiro-float-slow 4s ease-in-out infinite; }
.mashiro-anim-pulse-soft  { animation: mashiro-pulse-soft 6s ease-in-out infinite; }
.mashiro-anim-fade-up     { animation: mashiro-fade-in-up 0.8s ease-out both; }
.mashiro-anim-scale-in    { animation: mashiro-scale-in 0.6s ease-out both; }
.mashiro-anim-scroll-bounce { animation: mashiro-scroll-bounce 2s ease-in-out infinite; }

.mashiro-underline {
	position: relative;
	display: inline-block;
}
.mashiro-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 22px;
	background: #FFD97D;
	z-index: -1;
	border-radius: 2px;
	transform-origin: left;
	animation: mashiro-underline 0.6s 0.4s ease-out both;
}
@media (max-width: 768px) {
	.mashiro-underline::after { height: 18px; }
}

/* ---- Mobile hamburger button (outline circle — production design) ---- */
.mashiro-menu-btn {
	width: 52px;
	height: 52px;
	color: #2D2D2D;
	border: 2px solid #2D2D2D;
	background: #fff;
	box-shadow: none;
}
.mashiro-menu-btn:hover {
	background: #FFF5F8;
}

/* ---- Header inner padding — extra breathing room on mobile ---- */
@media (max-width: 767px) {
	.site-header__inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* ---- Header scrolled state ---- */
.site-header.is-scrolled {
	background: rgba(255,255,255,0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 3px solid #2D2D2D;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ---- Reveal on scroll ---- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f0eef0; }
::-webkit-scrollbar-thumb { background: #E8C0CE; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #D89AAB; }

/* ---- Friends slider ---- */
.friends-card { display: none; }
.friends-card.is-active { display: block; }

@keyframes friends-card-in-right {
	from { opacity: 0; transform: translateX(28px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes friends-card-in-left {
	from { opacity: 0; transform: translateX(-28px); }
	to   { opacity: 1; transform: translateX(0); }
}
.friends-card.is-active.is-entering-right { animation: friends-card-in-right 0.32s ease-out; }
.friends-card.is-active.is-entering-left  { animation: friends-card-in-left  0.32s ease-out; }

/* ---- Friends nav dots (responsive — fits with prev/next arrows) ---- */
.friends-dots {
	min-width: 0;
}
.friends-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 9999px;
	overflow: hidden;
	background: #fff;
	border: 2px solid rgba(45, 45, 45, 0.3);
	opacity: 0.6;
	transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	padding: 0;
	/* viewport から arrows/gaps/padding を差し引いた残りを 4 等分。clamp で 40〜96px。 */
	width: clamp(40px, calc((100vw - 200px) / 4 * 0.9), 96px);
	height: clamp(40px, calc((100vw - 200px) / 4 * 0.9), 96px);
}
.friends-dot:hover { opacity: 1; }
.friends-dot.is-active {
	opacity: 1;
	border: 3px solid #2D2D2D;
	box-shadow: 3px 3px 0 #2D2D2D;
	width: clamp(50px, calc((100vw - 200px) / 4 * 1.15), 120px);
	height: clamp(50px, calc((100vw - 200px) / 4 * 1.15), 120px);
}

/* ---- Instagram slider ---- */
.instagram-track {
	display: flex;
	gap: 20px;
	transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.instagram-card {
	flex: 0 0 auto;
}

/* ---- Instagram dots (page navigation) ---- */
.ig-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 2rem;
}
.ig-dot {
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	background: rgba(45, 45, 45, 0.2);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}
.ig-dot:hover { background: rgba(45, 45, 45, 0.4); }
.ig-dot.is-active {
	width: 28px;
	background: #E8789A;
}

/* ---- Hero particles ---- */
@keyframes mashiro-particle {
	0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
	100% { opacity: 0; transform: var(--p-end, translate(60px, -60px) scale(1.4) rotate(120deg)); }
}
.mashiro-particle {
	position: absolute;
	pointer-events: none;
	user-select: none;
	font-size: 1.4rem;
	animation: mashiro-particle 0.7s ease-out forwards;
}

/* ---- Hero frame ---- */
.hero-frame {
	width: clamp(320px, 80vw, 480px);
	height: clamp(320px, 80vw, 480px);
	border: 4px solid #222;
}

/* ---- Hero subchars (SP は固定 / PC で React の元値に切替) ---- */
.hero-subchar {
	position: absolute;
	z-index: 30;
	pointer-events: none;
	/* SP: 240px 固定、scale(1) — 現状維持 */
	width: 240px;
	height: 240px;
}
.hero-subchar > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
	transform: scale(var(--subchar-scale, 1));
	transform-origin: center center;
}
.hero-subchar--chibi { top: -5%;    left:  -15%; --subchar-scale: 1; }
.hero-subchar--sora  { top: -5%;    right: -15%; --subchar-scale: 1; }
.hero-subchar--yura  { bottom: -8%; right:  -5%; --subchar-scale: 1; }

@media (min-width: 768px) {
	.hero-subchar {
		width:  clamp(180px, 18vw, 280px);
		height: clamp(180px, 18vw, 280px);
	}
	.hero-subchar--chibi { top: -5%; left:  -10%; --subchar-scale: 1; }
	.hero-subchar--sora  { top: -5%; right: -10%; --subchar-scale: 1; }
	.hero-subchar--yura  {
		width:  clamp(170px, 17vw, 260px);
		height: clamp(170px, 17vw, 260px);
		bottom: -2%;
		right:  -8%;
		--subchar-scale: 1;
	}
}

/* ---- Hero moku orbit (flies around the main mashiro frame) ---- */
.hero-moku-orbit {
	width: clamp(110px, 22vw, 180px);
	height: clamp(110px, 22vw, 180px);
	animation: hero-moku-orbit-mobile 12s linear infinite;
	will-change: transform;
}
@media (min-width: 768px) {
	.hero-moku-orbit {
		width: clamp(110px, 10vw, 160px);
		height: clamp(110px, 10vw, 160px);
		animation: hero-moku-orbit-desktop 12s linear infinite;
	}
}

.hero-moku-img {
	transform: scale(1);
	transform-origin: center center;
	animation: hero-moku-bob 2.2s ease-in-out infinite;
	will-change: transform;
}

@keyframes hero-moku-orbit-mobile {
	0%    { transform: translate(0px,    -60px); }
	12.5% { transform: translate(80px,   -36px); }
	25%   { transform: translate(136px,    0px); }
	37.5% { transform: translate(80px,    36px); }
	50%   { transform: translate(0px,     60px); }
	62.5% { transform: translate(-80px,   36px); }
	75%   { transform: translate(-136px,   0px); }
	87.5% { transform: translate(-80px,  -36px); }
	100%  { transform: translate(0px,    -60px); }
}
@keyframes hero-moku-orbit-desktop {
	0%    { transform: translate(0px,    -180px); }
	12.5% { transform: translate(130px,  -108px); }
	25%   { transform: translate(221px,     0px); }
	37.5% { transform: translate(130px,   108px); }
	50%   { transform: translate(0px,     180px); }
	62.5% { transform: translate(-130px,  108px); }
	75%   { transform: translate(-221px,    0px); }
	87.5% { transform: translate(-130px, -108px); }
	100%  { transform: translate(0px,    -180px); }
}
@keyframes hero-moku-bob {
	0%   { transform: scale(1) translateY(0)    rotate(0deg); }
	25%  { transform: scale(1) translateY(-3px) rotate(15deg); }
	50%  { transform: scale(1) translateY(0)    rotate(0deg); }
	75%  { transform: scale(1) translateY(-3px) rotate(-15deg); }
	100% { transform: scale(1) translateY(0)    rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-moku-orbit,
	.hero-moku-img {
		animation: none !important;
	}
}

/* Hover lift utility for SNS card etc. */
.hover-lift {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 6px 6px 0 #2D2D2D;
}
.hover-lift:active {
	transform: translateY(2px);
	box-shadow: 2px 2px 0 #2D2D2D;
}

.footer-sns {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.footer-sns:hover {
	transform: translateY(-4px) scale(1.08);
	box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* Border helpers */
.border-3 { border-width: 3px; }