/* ==========================================================================
   ARCHOTYPE COMING-SOON PAGE -- DESKTOP SCENES (1 AND 2)
   Enqueued only when arch_get_comingsoon_state()['arch_mobile'] is false
   AND only on the front page itself (see arch_comingsoon_assets() in
   functions.php). Both scenes combined into one file since scene 2 is
   ALWAYS rendered (as a hidden overlay) alongside scene 1 unless isolated
   via ?scene=2 -- they're never loaded independently of each other.
   ========================================================================== */

/* ---------- shared chrome overrides (both scenes) ---------- */
.site-nav,
.site-footer { display: none; }
.site-main   { padding: 0; }
html, body   { overflow: hidden; height: 100%; }

/* ---------- Scene 1: chamber, logo, rubble entrance ---------- */
.scene-stage {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #060606;
	overflow: hidden;
}
.scene { position: absolute; inset: 0; }
.player {
	position: absolute;
	pointer-events: none;
	--px: 0px;
	--py: 0px;
}
.layer-chamber {
	inset: auto;
	left: 50%;
	top: 50%;
	width: 100vw;
	height: 100vh;
	min-width: 177.78vh;
	min-height: 56.25vw;
	z-index: 2;
	transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) scale(1.08);
}
.layer-logo {
	inset: 0;
	z-index: 3;
	transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.08);
}
.layer-rubble-far,
.layer-rubble-near {
	inset: auto;
	left: 50%;
	top: 50%;
	width: 100vw;
	height: 100vh;
	min-width: 177.78vh;
	min-height: 56.25vw;
	transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) scale(1.08);
}
.layer-rubble-far  { z-index: 4; }
.layer-rubble-near { z-index: 5; }
.chamber-door {
	position: absolute;
	top: 0;
	height: 100%;
	display: block;
	pointer-events: none;
	user-select: none;
}
.chamber-door--left  { left: 0%;      width: 50.86%; }
.chamber-door--right { left: 50.86%;  width: 49.14%; }
.chamber-door img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
}
.logo-exit-wrap {
	position: absolute;
	inset: 0;
}
.logo-group {
	position: absolute;
	width: 59.22%;
	left: 50%;
	top: 50%;
	transform: translate(-50.14%, -76.1%);
}
.logo-main {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	pointer-events: none;
	user-select: none;
}
.logo-ring {
	position: absolute;
	left: 41.19%;
	top: 32.42%;
	width: 18.14%;
	cursor: pointer;
	pointer-events: all;
	overflow: visible;
}
.ring-state--hover {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.ring-state--normal {
	position: absolute;
	width: 78.55%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	user-select: none;
	z-index: 1;
}
.logo-ring:hover .ring-state--hover,
.logo-ring.is-lit .ring-state--hover { opacity: 1; }
.enter-prompt {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 16px;
	white-space: nowrap;
	font: 600 13px/1 ui-monospace, monospace;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	pointer-events: none;
}
.rubble-piece {
	position: absolute;
	display: block;
	pointer-events: none;
	user-select: none;
}
.rubble-hover {
	display: block;
	transform-origin: center;
}
.rubble-float {
	display: block;
}
.rubble-float img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}
.rubble-1  { left: 0%;     top: 0%;     width: 11.33%; }
.rubble-2  { left: 12.58%; top: 17.99%; width: 9.80%;  }
.rubble-3  { left: 0.94%;  top: 34.79%; width: 18.28%; }
.rubble-4  { left: 24.22%; top: 60.90%; width: 5.74%;  }
.rubble-5  { left: 12.30%; top: 64.58%; width: 15.23%; }
.rubble-6  { left: 0%;     top: 70.42%; width: 16.17%; }
.rubble-7  { left: 39.77%; top: 89.93%; width: 14.34%; }
.rubble-8  { left: 64.30%; top: 75.21%; width: 13.59%; }
.rubble-9  { left: 72.07%; top: 24.86%; width: 6.09%;  }
.rubble-10 { left: 83.83%; top: 0%;     width: 16.17%; }
.rubble-11 { left: 81.48%; top: 34.79%; width: 16.60%; }
.rubble-12 { left: 79.10%; top: 62.43%; width: 20.90%; }
.scene-pending .layer-chamber { opacity: 0; }
.scene-pending .logo-main     { opacity: 0; }
.scene-pending .rubble-piece  { transform: translateY(100vh); }
.scene-pending .rubble-piece.from-top { transform: translateY(-100vh); }
.mute-toggle {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.4s ease, background 0.2s ease;
	pointer-events: none;
}
.mute-toggle.is-visible {
	display: flex;
	opacity: 1;
	pointer-events: all;
}
.mute-toggle:hover {
	background: rgba(0, 0, 0, 0.75);
}
.scene-dev .player {
	outline: 1px dashed rgba(0, 229, 255, 0.45);
	outline-offset: -1px;
}
.scene-dev .player::before {
	content: attr(data-label);
	position: absolute;
	z-index: 50;
	font: 600 11px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #00e5ff;
	background: rgba(0, 0, 0, 0.7);
	padding: 4px 7px;
	border-radius: 3px;
	pointer-events: none;
}
.scene-dev .layer-chamber::before     { top: 6px;    left: 6px; }
.scene-dev .layer-logo::before        { top: 6px;    right: 6px; }
.scene-dev .layer-rubble-far::before  { bottom: 6px; left: 6px; }
.scene-dev .layer-rubble-near::before { bottom: 6px; right: 6px; }
.scene-dev .logo-ring { outline: 1px dashed rgba(255, 90, 90, 0.75); }
.scene-dev .rubble-piece { outline: 1px dashed rgba(255, 200, 0, 0.5); }
.scene-dev .enter-prompt { display: none; }

/* ---------- Scene 2: reveal, characters, CTA ---------- */
.scene2-stage {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #eef3f5;
	overflow: hidden;
}
.scene2-overlay {
	position: fixed;
	inset: 0;
	height: 100vh;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}
.scene2-canvas {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100vw;
	height: 100vh;
	min-width: 177.78vh;
	min-height: 56.25vw;
	transform: translate(-50%, -50%);
}
.scene2-layer {
	position: absolute;
	display: block;
	pointer-events: none;
	user-select: none;
}
.scene2-player {
	position: absolute;
	inset: 0;
	pointer-events: none;
	--px: 0px;
	--py: 0px;
	transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.08);
}
.scene2-enter-wrap {
	position: absolute;
	inset: 0;
	transform-origin: 50% 100%;
}
@keyframes scene2-text-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-0.6vh); }
}
.scene2-layer-text {
	position: absolute;
	inset: 0;
	pointer-events: none;
	animation: scene2-text-float 7s ease-in-out infinite;
}
/* .scene2-layer-text .arch-btn { pointer-events: auto; } removed -- this
   unconditionally re-enabled clicking on the button regardless of
   .scene2-overlay's own opacity/pointer-events state, since a child's
   pointer-events:auto overrides a parent's pointer-events:none with no
   timing awareness at all. opacity:0 makes something invisible, not
   unclickable -- those are separate properties. The button was fully
   clickable from page load, well before the reveal. Now handled via a
   GSAP tl.set() at the same timeline position as the opacity reveal --
   see archotype-comingsoon-desktop.js. */
.scene2-bg {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.scene2-fullcanvas {
	inset: 0;
	width: 100%;
	height: 100%;
}
.alaira {
	left: 0%;
	top: 0%;
	width: 51.84%;
	height: auto;
}
.vaelen {
	left: 53.87%;
	top: 21.39%;
	width: 46.13%;
	height: auto;
}
.scene2-text-group {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.scene2-headline-wrap {
	position: absolute;
	left: 33.18%;
	top: 25.77%;
	width: 27.91%;
}
.scene2-headline {
	position: absolute;
	inset: 0;
	margin: 0;
	font-family: 'Orbitron', sans-serif;
	font-weight: 500;
	font-size: max(1.6406vw, 2.9167vh);
	line-height: 1.571;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}
.scene2-headline--glow {
	color: #ffffff;
	font-weight: 900;
	-webkit-text-stroke: max(0.35vw, 0.6222vh) #ffffff;
	filter: blur(max(0.5vw, 0.8889vh));
}
.scene2-headline--text {
	color: #333333;
}
.scene2-headline--text .pillar-clarity { color: #28a9c2; }
.scene2-headline--text .pillar-will    { color: #38a86b; }
.scene2-subtext {
	position: absolute;
	left: 42.85%;
	top: 43.45%;
	width: 15.06%;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: max(0.9375vw, 1.6667vh);
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: #333333;
	text-align: center;
	white-space: nowrap;
}
.scene2-subtext strong {
	font-weight: 700;
}
.scene2-btn-wrap {
	position: absolute;
	left: 35.73%;
	top: 60.42%;
	width: 13.28%;
}
/* .arch-btn* styles now come entirely from the shared archotype-components.css,
   enqueued site-wide via functions.php -- removed the page's own stale copy
   here to avoid two conflicting definitions. */
/* Placeholder .signup-modal styles removed -- the real newsletter modal now
   comes from arch_modal_shortcode(), which brings its own CSS via the
   shared archotype-components.css. */
.scene2-shard {
	position: absolute;
	display: block;
	pointer-events: none;
	user-select: none;
}
.scene2-shard-1 { left: 79.61%; top: 4.10%; width: 2.70%; }
.scene2-shard-2  { left: 74.69%; top: 10.69%; width: 2.11%; }
.scene2-shard-3  { left: 85.27%; top: 17.15%; width: 6.29%; }
.scene2-shard-4  { left: 95.47%; top: 14.65%; width: 2.27%; }
.scene2-shard-5  { left: 95.70%; top: 38.13%; width: 3.09%; }
.scene2-shard-6  { left: 92.85%; top: 43.89%; width: 2.93%; }
.scene2-shard-7  { left: 90.51%; top: 56.88%; width: 3.20%; }
.scene2-shard-8  { left: 95.70%; top: 72.57%; width: 2.89%; }
.scene2-shard-9  { left: 95.66%; top: 76.25%; width: 4.34%; }
.scene2-shard-10 { left: 93.75%; top: 91.04%; width: 3.20%; }
.scene2-shard-11 { left: 79.65%; top: 95.00%; width: 2.38%; }
.scene2-shard-12 { left: 60.16%; top: 88.68%; width: 3.91%; }
.scene2-shard-13 { left: 24.53%; top: 93.61%; width: 3.83%; }
.scene2-shard-14 { left: 19.14%; top: 91.32%; width: 3.01%; }
.scene2-shard-15 { left: 13.16%; top: 73.68%; width: 3.52%; }
.scene2-shard-16 { left: 0%;     top: 92.99%; width: 4.26%; }
.scene2-shard-17 { left: 0%;     top: 86.39%; width: 2.11%; }
.scene2-shard-18 { left: 0%;     top: 65.97%; width: 3.13%; }
.scene2-shard-19 { left: 5.51%;  top: 52.36%; width: 3.32%; }
.scene2-shard-20 { left: 1.33%;  top: 36.25%; width: 5.59%; }
.scene2-shard-21 { left: 8.01%;  top: 21.94%; width: 2.38%; }
.scene2-shard-22 { left: 4.06%;  top: 13.96%; width: 2.89%; }
.scene2-shard-23 { left: 5.90%;  top: 4.58%;  width: 3.36%; }
.scene2-shard-24 { left: 33.83%; top: 10.07%; width: 3.16%; }
.shard-float {
	display: block;
}
.shard-float img {
	display: block;
	width: 100%;
	height: auto;
}
@keyframes shard-float-1 { 0%, 100% { transform: translate(0, 0); }               50% { transform: translate(0.8vw, -1.1vh); } }
@keyframes shard-float-2 { 0%, 100% { transform: translate(0, 0); }               50% { transform: translate(-1.1vw, 0.8vh); } }
@keyframes shard-float-3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); }  50% { transform: translate(0.55vw, 0.95vh) rotate(5deg); } }
@keyframes shard-float-4 { 0%, 100% { transform: translate(0, 0) rotate(0deg); }  50% { transform: translate(-0.8vw, -0.8vh) rotate(-5deg); } }
@keyframes shard-float-5 { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(0.7vw, 0.55vh); }   66% { transform: translate(-0.4vw, 0.85vh); } }
@keyframes shard-float-6 { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-0.55vw, -0.7vh); } 66% { transform: translate(0.8vw, -0.4vh); } }
.scene2-canvas {
	outline: 2px dashed rgba(0, 229, 255, 0.6);
	outline-offset: -2px;
}