/* =========================================================
   FILM Portfolio - Password Gate
   黒背景 + "FILM Portfolio" + パスワード入力欄のみ。
   ========================================================= */

:root {
	--fp-bg: #000;
	--fp-fg: #fff;
	--fp-fg-soft: rgba(255,255,255,0.55);
	--fp-grad-a: #1a0030;
	--fp-grad-b: #002438;
	--fp-grad-c: #2b0020;
	--fp-accent: #b6a37a;
}

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.fp-gate-body {
	background: #000;
	color: #fff;
	min-height: 100vh;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}

.fp-gate {
	position: relative;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem;
	overflow: hidden;
}

.fp-gate__bg { position: absolute; inset: 0; pointer-events: none; }
.fp-gate__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.55;
	mix-blend-mode: screen;
	animation: fpGlowFloat 18s ease-in-out infinite alternate;
}
.fp-gate__glow--a {
	width: 60vmax; height: 60vmax;
	left: -20vmax; top: -20vmax;
	background: radial-gradient(circle at 30% 30%, #2a004f 0%, transparent 60%);
}
.fp-gate__glow--b {
	width: 70vmax; height: 70vmax;
	right: -25vmax; bottom: -25vmax;
	background: radial-gradient(circle at 70% 70%, #00465a 0%, transparent 60%);
	animation-delay: -7s;
}
.fp-gate__grain {
	position: absolute; inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	mix-blend-mode: overlay;
	opacity: 0.55;
}

@keyframes fpGlowFloat {
	0%   { transform: translate3d(0,0,0) scale(1); }
	50%  { transform: translate3d(2vmax,3vmax,0) scale(1.07); }
	100% { transform: translate3d(-2vmax,-2vmax,0) scale(0.96); }
}

.fp-gate__inner {
	position: relative;
	width: min(420px, 92vw);
	text-align: center;
	z-index: 1;
}

.fp-gate__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	letter-spacing: 0.18em;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	margin: 0 0 0.4rem;
	background: linear-gradient(120deg, #fff 0%, #cfd8e8 50%, #b6a37a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: fpGateTitleIn 1.2s ease-out 0.1s both;
}
@keyframes fpGateTitleIn {
	from { opacity: 0; transform: translateY(8px); letter-spacing: 0.36em; }
	to   { opacity: 1; transform: translateY(0); letter-spacing: 0.18em; }
}

.fp-gate__sub {
	color: var(--fp-fg-soft);
	font-size: 0.78rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin: 0 0 2.4rem;
}

.fp-gate__form {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	padding: 0.4rem 0.4rem 0.4rem 1.2rem;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: border-color 0.3s ease, background 0.3s ease;
}
.fp-gate__form:focus-within {
	border-color: rgba(182,163,122,0.6);
	background: rgba(255,255,255,0.06);
}

.fp-gate__input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	color: #fff;
	font: inherit;
	font-size: 1rem;
	letter-spacing: 0.04em;
	padding: 0.6rem 0;
}
.fp-gate__input::placeholder { color: rgba(255,255,255,0.35); }

.fp-gate__btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 0;
	background: linear-gradient(135deg, #b6a37a, #d8c79c);
	color: #1a1300;
	display: grid; place-items: center;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fp-gate__btn:hover { transform: translateX(2px); box-shadow: 0 0 24px rgba(182,163,122,0.45); }
.fp-gate__btn-arrow { font-size: 1.1rem; line-height: 1; }

.fp-gate__error {
	margin: 1rem 0 0;
	color: #ff8a8a;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	height: 1px; width: 1px; overflow: hidden;
}