/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.landing-video-pair-card {
	background-color: #fff !important;
	background-image: none !important;
	border-radius: 1rem;
	box-shadow:
		0 28px 70px rgba(15, 23, 42, 0.10),
		0 0 0 1px rgba(255, 255, 255, 0);
	isolation: isolate;
}

.landing-phone-preview {
	border-radius: 0.5rem;
	overflow: hidden;
	clip-path: inset(0 round 0.5rem);
}

.landing-phone-preview > img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0.5rem;
	clip-path: inset(0 round 0.5rem);
}

/* ── Report Preview — animated 3-page stack ──────────────────────── */
.rp-stage {
	position: relative;
	width: 100%;
	max-width: 22rem;
}

.rp-page {
	background: #fff;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(15, 23, 42, 0.11), 0 0 0 1px rgba(226, 232, 240, 0.8);
	transition: transform 0.65s cubic-bezier(0.34, 1.15, 0.64, 1), opacity 0.5s ease, z-index 0s;
	will-change: transform, opacity;
}

.rp-page img { display: block; width: 100%; height: auto; }

/* Pages 2 & 3 overlay page 1 (the height-setter) */
.rp-page-2,
.rp-page-3 { position: absolute; top: 0; left: 0; width: 100%; }

/* ── Phase 0 defaults (all hidden) ── */
.rp-page-1 { position: relative; z-index: 3; opacity: 0; }
.rp-page-2 { z-index: 4; opacity: 0; transform: translateX(0) translateY(-45%) scale(0.92); }
.rp-page-3 { z-index: 2; opacity: 0; transform: translateX(0) translateY(-25%) scale(0.88); }

/* ── Phase 1: page 2 drops to center ── */
[data-phase="1"] .rp-page-2 {
	opacity: 1;
	transform: translateX(0) translateY(0) scale(1);
}

/* ── Phase 2: fan / spread — pages fully separated ── */
[data-phase="2"] .rp-page-1 {
	opacity: 1;
	transform: translateX(-58%) translateY(4%) scale(0.84);
	z-index: 3;
}
[data-phase="2"] .rp-page-2 {
	opacity: 1;
	transform: translateX(0%) translateY(-3%) scale(0.84);
	z-index: 4;
}
[data-phase="2"] .rp-page-3 {
	opacity: 0.9;
	transform: translateX(62%) translateY(5%) scale(0.84);
	z-index: 2;
}

/* ── Phase 3: final stack ── */
[data-phase="3"] .rp-page-1 {
	opacity: 1;
	transform: none;
	z-index: 3;
}
[data-phase="3"] .rp-page-2 {
	opacity: 1;
	transform: translateX(6%) translateY(0.65rem);
	z-index: 2;
}
[data-phase="3"] .rp-page-3 {
	opacity: 1;
	transform: translateX(11%) translateY(1.3rem);
	z-index: 1;
}

@media (min-width: 1024px) {
	/* Landscape: fill the grid column but cap by section height so it doesn't overflow */
	.rp-stage { max-width: min(100%, calc((100svh - 16rem) * 0.70)); }
}

@media (max-width: 1023px) {
	/* Shrink stage so image + text stack fits in the panel height */
	.rp-stage { max-width: 16rem; }
	/* Skip the fan on mobile — jump straight to final stack layout */
	[data-phase="2"] .rp-page-1 { opacity: 1; transform: none; z-index: 3; }
	[data-phase="2"] .rp-page-2 { opacity: 1; transform: translateX(6%) translateY(0.65rem); z-index: 2; }
	[data-phase="2"] .rp-page-3 { opacity: 1; transform: translateX(11%) translateY(1.3rem); z-index: 1; }
}
@media (max-width: 639px) {
	/* Further shrink on small phones */
	.rp-stage { max-width: 12rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION_FEATURES_MORE — animated dot background + Three.js canvas
   ═══════════════════════════════════════════════════════════════ */

/* ── Dot layers: static base + smooth-drifting overlay ──────── */
/* Layer 1 (bottom): fixed grid — provides stable visual anchor  */
.fm-dot-static {
        background-image: radial-gradient(rgba(99, 102, 241, 0.22) 1.5px, transparent 1.5px);
        background-size: 32px 32px;
        background-position: 0px 0px;
}
/* Layer 2 (top): identical grid that drifts diagonally.         */
/* 32px → 0px loops seamlessly because tile repeats at 32px.    */
.fm-dot-float {
        background-image: radial-gradient(rgba(99, 102, 241, 0.14) 1.5px, transparent 1.5px);
        background-size: 32px 32px;
        animation: fm-dot-drift 10s linear infinite;
}
@keyframes fm-dot-drift {
        0%   { background-position: 0px   0px; }
        100% { background-position: 32px  32px; }
}