/**
 * Antigravity Hero — Styles
 *
 * Canvas container, CSS 3D room, and fallback styling.
 *
 * @package Pond_Apex
 * @since   1.3.0
 */

/* ── Shared container ─────────────────────────────────── */

.pa-ah-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* ── WebGL canvas (horizon / hallway) ─────────────────── */

.pa-ah-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* ── CSS 3D Room mode ─────────────────────────────────── */

.pa-ah-room-mode {
	background: var(--pa-ah-color-bg, #0a0a0a);
	overflow: visible;
}

.pa-ah-viewport {
	width: 100%;
	height: 100%;
	perspective: var(--pa-ah-room-perspective, 500px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pa-ah-room {
	position: relative;
	width: 100vw;
	height: 100vh;
	transform-style: preserve-3d;
	transition: transform 0.15s ease-out;
}

.pa-ah-face {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background: var(--pa-ah-color-bg, #050505);
	background-image:
		linear-gradient(var(--pa-ah-grid-line, rgba(0, 255, 255, 0.25)) 1px, transparent 1px),
		linear-gradient(90deg, var(--pa-ah-grid-line, rgba(0, 255, 255, 0.25)) 1px, transparent 1px);
	background-size: var(--pa-ah-grid-size, 5%) var(--pa-ah-grid-size, 5%);
	border: 1px solid var(--pa-ah-grid-line, rgba(0, 255, 255, 0.25));
}

/* Back wall — depth is 100vh, so back wall sits at -50vh (half depth) */
.pa-ah-back {
	transform: translateZ(-50vh);
}

/* Floor */
.pa-ah-floor {
	transform: rotateX(90deg) translateZ(50vh);
	height: 100vh;
}

/* Ceiling */
.pa-ah-ceiling {
	transform: rotateX(-90deg) translateZ(50vh);
	height: 100vh;
}

/* Left wall */
.pa-ah-left {
	width: 100vh;
	left: 50vw;
	margin-left: -50vh;
	transform: rotateY(90deg) translateZ(-50vw);
}

/* Right wall */
.pa-ah-right {
	width: 100vh;
	left: 50vw;
	margin-left: -50vh;
	transform: rotateY(-90deg) translateZ(-50vw);
}

/* ── Fallback ─────────────────────────────────────────── */

.pa-ah-fallback {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ── Content stacking — keep row content above the effect ── */

/* WebGL mode (horizon/hallway): z-index is safe, no preserve-3d needed. */
.fl-row:has(.pa-ah-container:not(.pa-ah-room-mode)) .fl-row-content-wrap,
.fl-row:has(.pa-ah-container:not(.pa-ah-room-mode)) .fl-col,
.fl-row:has(.pa-ah-container:not(.pa-ah-room-mode)) .fl-module {
	position: relative;
	z-index: 1;
}

/* Room mode: content is pushed forward via translateZ in JS.
   Do NOT use z-index here — it flattens preserve-3d. */

/* ── Room pulse animation ─────────────────────────────── */

@keyframes pa-ah-pulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}

/* ── Reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.pa-ah-canvas {
		display: none !important;
	}

	.pa-ah-container {
		background-color: var(--pa-ah-color-bg, #0a0a0a);
	}

	.pa-ah-room {
		transition: none !important;
	}
}

/* ── Print ────────────────────────────────────────────── */

@media print {
	.pa-ah-container {
		display: none !important;
	}
}