/* ==========================================================================
   roosho. lab — motion layer styles
   2026-11-02 20:55 GMT+6 — v0.1.0
   Only decorative, JS-injected pieces are styled here (packet, boot overlay,
   cursor). Everything editable is styled with native Elementor controls.
   ========================================================================== */

/* 2026-11-02 20:55 GMT+6 — brand tokens mirrored from the Elementor kit */
:root {
	--rs-packet: var(--e-global-color-accent, #E31F71);
	--rs-cyan: var(--e-global-color-primary, #00AEFF);
	--rs-green: var(--e-global-color-secondary, #0CBD8E);
	--rs-bg: #111315;
	--rs-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   2026-11-02 20:56 GMT+6 — pre-animation states. They apply ONLY while
   html.rs-motion is set (JS on, motion allowed), so no-JS visitors and
   reduced-motion visitors always see the full content.
   -------------------------------------------------------------------------- */
.rs-motion .rs-reveal { opacity: 0; transform: translateY(24px); }
.rs-motion .rs-split .elementor-heading-title { visibility: hidden; }
.rs-motion .rs-hops .elementor-icon-list-item { opacity: 0; }

/* 2026-11-02 20:56 GMT+6 — word wrappers created by the split-heading scene */
.rs-word { display: inline-block; white-space: pre; will-change: transform, opacity; }

/* --------------------------------------------------------------------------
   2026-11-02 20:57 GMT+6 — the packet: the full stop from the logo.
   Fixed-position, pointer-transparent, hidden from assistive tech.
   -------------------------------------------------------------------------- */
.rs-packet {
	position: fixed;
	left: 0;
	top: 0;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--rs-packet);
	box-shadow: 0 0 14px 3px rgba(227, 31, 113, 0.55), 0 0 2px 1px rgba(255, 255, 255, 0.35) inset;
	pointer-events: none;
	z-index: 90;
	opacity: 0;
	will-change: transform, opacity;
}
.rs-packet-trail {
	position: fixed;
	left: 0;
	top: 0;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--rs-packet);
	pointer-events: none;
	z-index: 89;
	opacity: 0;
	will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   2026-11-02 20:58 GMT+6 — boot overlay (first visit per session, ≤ 1.5 s,
   skippable with any click or key).
   -------------------------------------------------------------------------- */
.rs-boot {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--rs-bg);
	color: #9AA4AD;
	font: 500 13px/1.7 var(--rs-mono);
	padding: clamp(20px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	cursor: pointer;
}
.rs-boot-line { white-space: pre; overflow: hidden; }
.rs-boot-line .ok { color: var(--rs-green); }
.rs-boot-line .hi { color: #ECEFF1; }
.rs-boot-skip {
	position: absolute;
	top: clamp(20px, 4vw, 40px);
	right: clamp(20px, 4vw, 40px);
	color: #9AA4AD;
	font-size: 12px;
}

/* 2026-11-02 20:59 GMT+6 — blinking terminal cursor appended after the last hop */
.rs-cursor {
	display: inline-block;
	width: 0.6em;
	height: 1.1em;
	margin-left: 6px;
	vertical-align: -0.2em;
	background: var(--rs-green);
	animation: rs-blink 1s steps(1) infinite;
}
@keyframes rs-blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   2026-11-02 21:00 GMT+6 — accessibility: honour reduced motion everywhere.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rs-packet, .rs-packet-trail, .rs-boot { display: none !important; }
	.rs-cursor { animation: none; }
}

/* 2026-11-02 21:00 GMT+6 — small screens get a smaller packet and no trail */
@media (max-width: 767px) {
	.rs-packet { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
	.rs-packet-trail { display: none; }
}