/* =======================================
   Intro Overlay – Petal animation on landing page
   Petals cover the page; clicking the seal dissolves them.
   ======================================= */

/* Lock scroll while sealed */
body.is-sealed {
	overflow: hidden;
}

/* Raise header above petals while sealed */
body.is-sealed #header {
	z-index: 11;
	/* Force fixed attachment so header.jpg aligns with the petals at all breakpoints */
	background-attachment: scroll, scroll, fixed !important;
	/* Use transparent SVG so petals show through the V-area */
	background-image: url('images/top-3200-transparent.svg'), url('images/overlay.png'), url('../../images/header.jpg');
}

@media screen and (max-width: 1280px) {
	body.is-sealed #header {
		background-image: url('images/top-1600-transparent.svg'), url('images/overlay.png'), url('../../images/header.jpg');
	}
}

@media screen and (max-width: 736px) {
	body.is-sealed #header {
		background-image: url('images/top-1280-transparent.svg'), url('images/overlay.png'), url('../../images/header.jpg');
	}
}

/* ---- V-Fill (fades in the white SVG fill as petals fall) ---- */

.v-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 460px;
	background-image: url('images/top-3200.svg');
	background-position: bottom center;
	background-repeat: repeat-x;
	background-size: 3200px 460px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.3s ease;
	z-index: 0;
}

.v-fill.visible {
	opacity: 1;
}

@media screen and (max-width: 1280px) {
	.v-fill {
		background-image: url('images/top-1600.svg');
		background-size: 1600px 230px;
		height: 230px;
	}
}

@media screen and (max-width: 736px) {
	.v-fill {
		background-image: url('images/top-1280.svg');
		background-size: 1280px 184px;
		height: 184px;
	}
}

/* ---- Petals (cover viewport, fall away on open) ---- */

.petals {
	position: fixed;
	inset: 0;
	z-index: 10;
	pointer-events: none;
}

.petal {
	position: absolute;
	inset: 0;
	background:
		url('images/overlay.png') top left repeat,
		url('../../images/header.jpg') center center / cover no-repeat fixed;
	background-color: #1d1619;
	will-change: transform, opacity;
}

/* 5 irregular pieces tiling the full viewport */

.petal-1 {
	clip-path: polygon(0 0, 52% 0, 46% 54%, 12% 72%, 0 60%);
	transition: transform 1.3s cubic-bezier(0.55, 0, 1, 0.45) 0.05s,
	            opacity 1.1s ease 0.15s;
}

.petal-2 {
	clip-path: polygon(52% 0, 100% 0, 100% 60%, 88% 72%, 46% 54%);
	transition: transform 1.3s cubic-bezier(0.55, 0, 1, 0.45) 0.1s,
	            opacity 1.1s ease 0.2s;
}

.petal-3 {
	clip-path: polygon(46% 54%, 88% 72%, 58% 100%, 42% 100%, 12% 72%);
	transition: transform 1.2s cubic-bezier(0.55, 0, 1, 0.45) 0s,
	            opacity 1s ease 0.1s;
}

.petal-4 {
	clip-path: polygon(0 60%, 12% 72%, 42% 100%, 0 100%);
	transition: transform 1.1s cubic-bezier(0.55, 0, 1, 0.45) 0.18s,
	            opacity 1s ease 0.28s;
}

.petal-5 {
	clip-path: polygon(88% 72%, 100% 60%, 100% 100%, 58% 100%);
	transition: transform 1.1s cubic-bezier(0.55, 0, 1, 0.45) 0.14s,
	            opacity 1s ease 0.24s;
}

/* Falling animation – each piece drifts in a different direction */

.petals.falling .petal-1 {
	transform: translate(-55%, 45%) rotate(-15deg);
	opacity: 0;
}

.petals.falling .petal-2 {
	transform: translate(55%, 45%) rotate(15deg);
	opacity: 0;
}

.petals.falling .petal-3 {
	transform: translateY(70%) rotate(4deg);
	opacity: 0;
}

.petals.falling .petal-4 {
	transform: translate(-40%, 55%) rotate(-22deg);
	opacity: 0;
}

.petals.falling .petal-5 {
	transform: translate(40%, 55%) rotate(22deg);
	opacity: 0;
}

/* ---- Seal (post-auth, letter-open animation) ---- */

@keyframes seal-pulse {
	0%, 100% { transform: translate(-50%, 50%) scale(1); }
	50%      { transform: translate(-50%, 50%) scale(1.05); }
}

#header .seal {
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 4;
	width: 200px;
	height: auto;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	animation: seal-pulse 2.5s ease-in-out 1s infinite;
	transition: opacity 0.4s ease, transform 0.15s ease;
}

#header .seal img {
	display: block;
	width: 200px;
	height: auto;
	filter: drop-shadow(0 4px 12px rgba(80, 40, 60, 0.3));
	transition: filter 0.3s ease;
}

#header .seal:hover img {
	filter: drop-shadow(0 6px 18px rgba(80, 40, 60, 0.4));
}

#header .seal:focus-visible {
	outline: 2px solid #d4a6ad;
	outline-offset: 8px;
}

/* Passwort-Text auf dem Siegel (nach Auth) */
.seal .seal-pw-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 58%;
	text-align: center;
	color: rgba(255, 255, 255, 0.9);
	font-family: 'Cormorant Garamond', 'Georgia', serif;
	font-size: 1.15rem;
	letter-spacing: 0.18em;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.seal .seal-pw-text.visible {
	opacity: 1;
}

/* Seal pressed */
#header .seal.pressed {
	animation: none;
	transform: translate(-50%, 50%) scale(0.9);
}

/* After opening, seal becomes static logo */
#header .seal.opened {
	animation: none;
	cursor: default;
}

/* ---- Password Seal (rectangular pw-siegel.png, wraps the pw form) ---- */

#header .seal-pw-wrap {
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 4;
	cursor: pointer;
	animation: seal-pulse 2.5s ease-in-out 1s infinite;
}

#header .seal-pw-wrap img {
	display: block;
	width: 200px;
	height: auto;
	filter: drop-shadow(0 4px 16px rgba(80, 40, 60, 0.4));
}

/* ---- Password Gate ---- */

@keyframes hint-enter {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Inside the seal: absolute overlay, centered on the seal image */
.seal-pw-wrap .pw-gate {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 58%;
	padding: 0;
	text-align: center;
	animation: hint-enter 0.6s ease-out 1.5s both;
	transition: opacity 0.5s ease;
}

.seal-pw-wrap .pw-gate.hiding {
	opacity: 0;
	pointer-events: none;
}

.pw-gate input[type="text"] {
	display: block;
	margin: 0 auto;
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	outline: none;
	color: rgba(255, 255, 255, 0.95);
	font-family: 'Cormorant Garamond', 'Georgia', serif;
	font-size: 1.15rem;
	text-align: center;
	letter-spacing: 0.18em;
	padding: 0.3em 0.3em 0.4em;
	caret-color: rgba(255, 255, 255, 0.7);
	transition: border-color 0.3s ease;
}

.pw-gate input[type="text"]:focus {
	border-bottom-color: rgba(255, 255, 255, 0.7);
}

.pw-gate input[type="text"]::placeholder {
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.15em;
}

#pw-hint {
	position: relative;
	z-index: 11;
	margin: 0;
	padding: 5rem 0 0;
	text-align: center;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: color 0.35s ease;
	animation: hint-enter 0.6s ease-out 1.5s both;
}

#pw-hint.error-hint {
	color: rgba(255, 150, 150, 0.9);
}

/* Shake animation for wrong password */

@keyframes pw-shake {
	0%, 100% { transform: translate(-50%, 50%); }
	15%      { transform: translate(calc(-50% - 8px), 50%); }
	30%      { transform: translate(calc(-50% + 6px), 50%); }
	45%      { transform: translate(calc(-50% - 5px), 50%); }
	60%      { transform: translate(calc(-50% + 3px), 50%); }
	75%      { transform: translate(calc(-50% - 2px), 50%); }
}

#header .seal-pw-wrap.pw-error {
	animation: pw-shake 0.5s ease !important;
}

/* ---- Responsive ---- */

@media screen and (max-width: 736px) {
	#header .seal,
	#header .seal img {
		width: 160px;
	}

	#header .seal-pw-wrap img {
		width: 160px;
	}

	#pw-hint {
		padding-top: 4.5rem;
	}
}