/*
	Bandoned — Modern 3D / Interactive Layer
	Additive styles only. Preserves all original design tokens, colours,
	typography and layout from style.css. Loads after the base stylesheet.
	Degrades gracefully on touch, reduced-motion and legacy browsers.
*/

/*********************************************************************************/
/* Design tokens (mirroring style.css for use inside new rules)                  */
/*********************************************************************************/

:root {
	--bd-accent:     #98c593;
	--bd-accent-hi:  #a8d5a3;
	--bd-ink:        #39454b;
	--bd-ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
	--bd-ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*********************************************************************************/
/* Hero (#intro) — depth reveal + foreground parallax hooks                      */
/*********************************************************************************/

#intro .content {
	will-change: transform, opacity;
}

#intro h2,
#intro p,
#intro footer {
	will-change: transform, opacity;
	transition:
		transform 0.9s var(--bd-ease),
		opacity 0.9s var(--bd-ease);
}

/* Pre-reveal (initial) state — kicks in until .is-ready is added */
#intro:not(.is-ready) h2 {
	transform: translate3d(0, 34px, 0);
	opacity: 0;
}

#intro:not(.is-ready) p {
	transform: translate3d(0, 22px, 0);
	opacity: 0;
}

#intro:not(.is-ready) footer {
	transform: translate3d(0, 18px, 0);
	opacity: 0;
}

/* Reveal — staggered */
#intro.is-ready h2 {
	transition-delay: 0.05s;
}

#intro.is-ready p {
	transition-delay: 0.25s;
}

#intro.is-ready footer {
	transition-delay: 0.45s;
}

/*********************************************************************************/
/* 3D Tilt cards — #one and #two content boxes                                   */
/*********************************************************************************/

.main.style2 {
	perspective: 1400px;
}

.main.style2 .content.box {
	transform-style: preserve-3d;
	box-shadow:
		0 22px 44px -20px rgba(0, 0, 0, 0.38),
		0 8px 18px -10px rgba(0, 0, 0, 0.22);
}

/* Short, snappy transitions while actively tilting.
   When not tilting, the base `all 1s ease` from style.css still runs. */
.main.style2 .content.box.is-tilting {
	transition:
		transform 0.12s var(--bd-ease),
		box-shadow 0.3s var(--bd-ease) !important;
}

/*********************************************************************************/
/* Scroll reveal — 3D entry for sections (layers on existing .inactive system)   */
/*********************************************************************************/

/* Style1 (hero) inactive gains a Z-axis recede */
.main.style1.inactive .content {
	transform: translate3d(0, 22px, -70px) scale(0.97) !important;
}

/* Style2 left reveal — slight rotateY wrapping in from the left */
.main.style2.inactive.left .content {
	transform: translate3d(-22px, 24px, -40px) rotateY(-4deg) !important;
	opacity: 0.0;
}

.main.style2.left .content {
	opacity: 1;
	transition-property: transform, opacity, left, box-shadow;
}

/* Style2 right reveal — mirrored (future-proofing in case .right is used) */
.main.style2.inactive.right .content {
	transform: translate3d(22px, 24px, -40px) rotateY(4deg) !important;
	opacity: 0.0;
}

.main.style2.right .content {
	opacity: 1;
}

/*********************************************************************************/
/* Header — glass-morphism after scrolling past hero + nav micro-interactions    */
/*********************************************************************************/

#header {
	transition:
		background-color 0.35s var(--bd-ease),
		-webkit-backdrop-filter 0.35s var(--bd-ease),
		backdrop-filter 0.35s var(--bd-ease),
		box-shadow 0.35s var(--bd-ease);
}

#header.is-scrolled {
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.35);
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#header.is-scrolled {
		background: rgba(0, 0, 0, 0.92);
	}
}

/* Logo — subtle scale + glow on hover */
#logo {
	transition:
		transform 0.3s var(--bd-ease),
		text-shadow 0.3s var(--bd-ease);
	cursor: default;
}

#logo:hover {
	transform: scale(1.04);
	text-shadow: 0 0 18px rgba(152, 197, 147, 0.6);
}

/* Nav — animated underline draw-in + active state */
#nav ul li a {
	position: relative;
	transition: color 0.25s var(--bd-ease);
}

#nav ul li a::after {
	content: '';
	position: absolute;
	left: 0.5em;
	right: 0.5em;
	bottom: 0.55em;
	height: 2px;
	background: var(--bd-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s var(--bd-ease);
	border-radius: 2px;
	pointer-events: none;
}

#nav ul li a:hover::after,
#nav ul li a.is-active::after {
	transform: scaleX(1);
}

#nav ul li a.is-active {
	color: rgba(255, 255, 255, 1);
}

/*********************************************************************************/
/* Buttons — subtle lift + glow                                                  */
/*********************************************************************************/

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

/* Only the free-floating (non-anchored) down arrow gets the idle float */
.button.down:not(.anchored) {
	animation: bd-float 2.8s var(--bd-ease-soft) infinite;
}

.button.down:not(.anchored):hover {
	animation-play-state: paused;
	transform: scale(1.08) translateY(-2px);
	box-shadow: 0 12px 32px -10px rgba(152, 197, 147, 0.55);
}

.button.down.anchored {
	transition:
		background-color 0.25s var(--bd-ease),
		box-shadow 0.35s var(--bd-ease),
		transform 0.3s var(--bd-ease);
}

.button.down.anchored:hover {
	box-shadow: 0 12px 30px -10px rgba(152, 197, 147, 0.45);
}

/* Non-"down" pill buttons */
.button:not(.down) {
	transition:
		transform 0.25s var(--bd-ease),
		background-color 0.2s ease-in-out,
		box-shadow 0.3s var(--bd-ease);
}

.button:not(.down):hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(152, 197, 147, 0.5);
}

/*********************************************************************************/
/* Footer — social icon lift                                                     */
/*********************************************************************************/

#footer .actions a {
	display: inline-block;
	transition:
		transform 0.25s var(--bd-ease),
		color 0.2s ease-in-out;
}

#footer .actions a:hover {
	transform: translateY(-3px) scale(1.12);
}

/*********************************************************************************/
/* Graceful degradation                                                          */
/*********************************************************************************/

/* Touch / coarse-pointer devices — no tilt, no mouse parallax, no button float */
@media (hover: none), (pointer: coarse) {

	.main.style2 .content.box {
		transform: none !important;
		box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.3);
	}

	#intro h2,
	#intro p,
	#intro footer {
		transform: none !important;
	}

	.button.down:not(.anchored) {
		animation: none;
	}
}

/* Reduced motion — strip animation + 3D entry transforms */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.button.down:not(.anchored) {
		animation: none !important;
	}

	.main.style1.inactive .content,
	.main.style2.inactive.left .content,
	.main.style2.inactive.right .content {
		transform: none !important;
		opacity: 1 !important;
	}

	#intro:not(.is-ready) h2,
	#intro:not(.is-ready) p,
	#intro:not(.is-ready) footer {
		transform: none !important;
		opacity: 1 !important;
	}
}

/* Mobile — drop perspective to save paint cost, trim shadow weight,
   and restore true fullscreen sections (style-mobile.css kills them by default) */
@media (max-width: 736px) {

	.main.style2 {
		perspective: none;
	}

	.main.style2 .content.box {
		box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.3);
	}

	/* Each section fills the viewport on phones.
	   - 100vh is the legacy fallback.
	   - 100svh ("small viewport height") is stable across Safari/Chrome
	     URL-bar show/hide on iOS and Android (2022+ browsers).
	   height:auto keeps content expandable if it ever overflows. */
	.main.fullscreen {
		min-height: 100vh;
		min-height: 100svh;
		height: auto !important;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	/* Kill the vertical-centering pseudo-elements on mobile.
	   They were only needed for the inline-block centering trick used on
	   desktop; flexbox handles alignment here. Style-mobile.css already
	   hides style2's pseudos — we do the same for style1. */
	.main.style1:before,
	.main.style1:after {
		display: none !important;
	}

	/* Content fills the flex column comfortably */
	.main.style1 .content,
	.main.style2 .content {
		width: 100%;
	}

	/* Large hero headline shouldn't crowd the top of small screens */
	.main.style1 h2 {
		margin-bottom: 0.2em;
	}
}