/*
 * Solar Explorer V2 — Cockpit Stylesheet
 * Viewport, planet scene, cockpit frame, effects layers.
 */

/* ── Cockpit container ───────────────────────────────────────────────────── */

.se-cockpit {
	position:   relative;
	flex:        1;
	overflow:    hidden;
	background:  var(--se-bg-deep);
}

/* Decorative cockpit frame (SVG overlay) — desktop only */
.se-cockpit__frame {
	position:       absolute;
	inset:          0;
	z-index:        12;
	pointer-events: none;
}

/* ── Viewport (the "window" through which space is seen) ─────────────────── */

.se-cockpit__viewport {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	cursor:          crosshair;
}

/* Viewport is inset on desktop to leave room for cockpit frame columns */
@media screen and (min-width: 768px) {
	.se-cockpit__viewport {
		left:  68px;
		right: 68px;
	}
}

/* ── Starfield ────────────────────────────────────────────────────────────── */

.se-starfield {
	position:        absolute;
	inset:           -4%;
	width:           108%;
	height:          108%;
	pointer-events:  none;
	will-change:     transform;
	transition:      transform .06s linear;
}

/* ── Planet scene ────────────────────────────────────────────────────────── */

.se-planet-scene {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	pointer-events:  none;
}

.se-planet {
	pointer-events: auto;
	cursor:         pointer;
	will-change:    transform, opacity;
	filter:         drop-shadow(0 0 40px currentColor);
	transition:     filter .4s;
}

.se-planet:focus {
	outline: 2px solid var(--se-accent);
	outline-offset: 8px;
	border-radius: 50%;
}

.se-planet--distant {
	filter: drop-shadow(0 0 8px currentColor);
	transform: scale(0.15);
}

.se-planet--approaching {
	transform: scale(0.45);
}

.se-planet--orbiting {
	filter: drop-shadow(0 0 48px currentColor);
}

/* ── Effects layer ────────────────────────────────────────────────────────── */

.se-effects-layer {
	position:       absolute;
	inset:          0;
	pointer-events: none;
	z-index:        8;
}

/* ── Warp effect ─────────────────────────────────────────────────────────── */

.se-warp {
	position:         absolute;
	inset:            0;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	opacity:          0;
	pointer-events:   none;
	transition:       opacity .3s;
}

.se-warp--active { opacity: 1; }

.se-warp svg {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
}

/* ── Orbital ring ────────────────────────────────────────────────────────── */

.se-orbital-ring {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0;
	pointer-events:  none;
	transition:      opacity .6s;
}

.se-orbital-ring--active { opacity: 1; }