/**
 * Nias — shared motion layer styles (see assets/js/ns-motion.js).
 * Every hidden / moved state is gated behind `html.nias-motion`, which the
 * script adds only when motion is allowed, so without JS nothing is hidden.
 */

/* ── reveal ───────────────────────────────────────────────────────────── */
html.nias-motion .nm-reveal {
	opacity: 0;
	translate: 0 26px;
	transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--nm-d, 0ms), translate .7s cubic-bezier(.2,.7,.2,1) var(--nm-d, 0ms);
}
html.nias-motion .nm-reveal.nm-in { opacity: 1; translate: 0 0; }
@media (max-width: 860px) {
	html.nias-motion .nm-reveal { translate: 0 14px; transition-duration: .5s; }
}

/* ── 3D tilt with a soft glare following the pointer ─────────────────── */
html.nias-motion .nm-tilt {
	transform: perspective(900px) rotateX(var(--nm-rx, 0deg)) rotateY(var(--nm-ry, 0deg));
	transform-style: preserve-3d;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
	position: relative;
	will-change: transform;
}
html.nias-motion .nm-tilt:hover { transform: perspective(900px) rotateX(var(--nm-rx, 0deg)) rotateY(var(--nm-ry, 0deg)) translateZ(0); box-shadow: 0 18px 40px rgba(14,21,24,.12); }
html.nias-motion .nm-tilt::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(circle at var(--nm-gx, 50%) var(--nm-gy, 50%), rgba(255,255,255,.45), rgba(255,255,255,0) 55%);
	opacity: 0; transition: opacity .3s ease;
}
html.nias-motion .nm-tilt:hover::after { opacity: 1; }

/* ── magnetic + shine buttons ─────────────────────────────────────────── */
html.nias-motion .nm-magnetic {
	position: relative; overflow: hidden; isolation: isolate;
	translate: var(--nm-mx, 0px) var(--nm-my, 0px);
	transition: translate .25s cubic-bezier(.2,.7,.2,1), filter .15s ease, box-shadow .25s ease;
}
html.nias-motion .nm-magnetic:hover { box-shadow: 0 12px 28px rgba(37,99,235,.35); }
html.nias-motion .nm-magnetic::before {
	content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; z-index: -1; pointer-events: none;
	background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0));
	transform: skewX(-18deg);
	animation: nm-shine 4.5s ease-in-out infinite;
}
@keyframes nm-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* ── sticky header settles on scroll ──────────────────────────────────── */
.nias-theme-header { transition: box-shadow .25s ease, background-color .25s ease; }
.nias-theme-header.nm-scrolled { box-shadow: 0 8px 30px rgba(14,21,24,.08); background: rgba(255,255,255,.96); }

/* ── article reading progress ─────────────────────────────────────────── */
.nm-progress {
	position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 9999; pointer-events: none;
	background: linear-gradient(270deg, #2563EB, #8B5CF6, #EC4899);
	transform: scaleX(0); transform-origin: right center;
}
body.admin-bar .nm-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nm-progress { top: 46px; } }

/* ── course landing: aurora hero ──────────────────────────────────────── */
html.nias-motion .nias-theme-cp .nias-cp-hero { position: relative; overflow: hidden; isolation: isolate; }
html.nias-motion .nias-theme-cp .nias-cp-hero::before,
html.nias-motion .nias-theme-cp .nias-cp-hero::after {
	content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .55;
}
html.nias-motion .nias-theme-cp .nias-cp-hero::before {
	width: 520px; height: 520px; top: -180px; right: -120px;
	background: radial-gradient(circle, var(--cp-accent), transparent 65%);
	animation: nm-aurora-a 16s ease-in-out infinite alternate;
}
html.nias-motion .nias-theme-cp .nias-cp-hero::after {
	width: 460px; height: 460px; bottom: -220px; left: -80px;
	background: radial-gradient(circle, #8B5CF6, transparent 65%);
	animation: nm-aurora-b 19s ease-in-out infinite alternate;
	opacity: .4;
}
@keyframes nm-aurora-a { to { transform: translate(-140px, 90px) scale(1.15); } }
@keyframes nm-aurora-b { to { transform: translate(160px, -70px) scale(1.2); } }

/* cover parallax: the image is nudged by JS inside its clipped frame */
html.nias-motion .nias-theme-cp .nias-cp-video__img { will-change: transform; transform: scale(1.04); }

/* play button: soft ripple */
html.nias-motion .nias-theme-cp .nias-cp-video__play::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.7);
	animation: nm-ripple 2.2s ease-out infinite;
}
@keyframes nm-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

/* gift box icons wiggle now and then */
html.nias-motion .nias-theme-cp .nias-cp-answer--amber .nias-cp-answer__icon svg,
html.nias-motion .nias-theme-cp .nias-cp-gift__n { animation: nm-wiggle 5s ease-in-out infinite; transform-origin: 50% 80%; }
html.nias-motion .nias-theme-cp .nias-cp-gift:nth-child(2n) .nias-cp-gift__n { animation-delay: .6s; }
html.nias-motion .nias-theme-cp .nias-cp-gift:nth-child(3n) .nias-cp-gift__n { animation-delay: 1.2s; }
@keyframes nm-wiggle { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-12deg); } 92% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }

/* curriculum progress rail, filled as the reader scrolls through it */
html.nias-motion .nias-theme-cp .nm-rail { position: relative; }
html.nias-motion .nias-theme-cp .nm-rail::before,
html.nias-motion .nias-theme-cp .nm-rail::after {
	content: ""; position: absolute; top: 8px; bottom: 8px; right: -18px; width: 3px; border-radius: 3px;
}
html.nias-motion .nias-theme-cp .nm-rail::before { background: #E6EAEE; }
html.nias-motion .nias-theme-cp .nm-rail::after {
	background: linear-gradient(to bottom, var(--cp-accent), #8B5CF6);
	transform: scaleY(var(--nm-rail, 0)); transform-origin: top center; transition: transform .1s linear;
}
@media (max-width: 860px) {
	html.nias-motion .nias-theme-cp .nm-rail::before,
	html.nias-motion .nias-theme-cp .nm-rail::after { display: none; }
}

/* price pops when switching cash / installments */
html.nias-motion .nm-pop { animation: nm-pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes nm-pop { 0% { transform: scale(.92); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

/* status dot already pulses (course-page.css); the open groups' chevrons ease */
html.nias-motion .nias-theme-cp .nias-cp-group__panel:not([hidden]) { animation: nm-drop .35s ease; }
html.nias-motion .nias-theme-cp .nias-cp-faq__a:not([hidden]) { animation: nm-drop .3s ease; }
@keyframes nm-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }