/**
 * SkyyRose Premium Animations
 *
 * Cinematic reveal system, micro-interactions, parallax classes.
 * Augments system/animations.css — does NOT replace the existing .rv system.
 *
 * Naming: .rv-* for reveals, .btn-* for button effects, .magnetic for cursor-reactive,
 *         .stagger-grid for cascading, .parallax-* for scroll-linked depth.
 *
 * All animations respect prefers-reduced-motion via the override block at bottom.
 * JS driver: premium-interactions.js sets CSS custom properties that these classes consume.
 *
 * @package SkyyRose_Flagship
 * @since   6.2.0
 */

/* ═══════════════════════════════════════════════════════════════════
   1. CLIP-PATH REVEALS — Content unveiled through geometric masks
   ═══════════════════════════════════════════════════════════════════ */

/* Reveal from bottom edge upward */
.rv-clip-up {
	clip-path: inset(100% 0 0 0);
	opacity: 0;
	transition:
		clip-path var(--reveal-normal, 0.8s) var(--ease-dramatic),
		opacity var(--reveal-fast, 0.5s) var(--ease-cinematic);
}
.rv-clip-up.is-visible {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

/* Reveal from left edge rightward */
.rv-clip-left {
	clip-path: inset(0 100% 0 0);
	opacity: 0;
	transition:
		clip-path var(--reveal-normal, 0.8s) var(--ease-dramatic),
		opacity var(--reveal-fast, 0.5s) var(--ease-cinematic);
}
.rv-clip-left.is-visible {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

/* Reveal from right edge leftward */
.rv-clip-right {
	clip-path: inset(0 0 0 100%);
	opacity: 0;
	transition:
		clip-path var(--reveal-normal, 0.8s) var(--ease-dramatic),
		opacity var(--reveal-fast, 0.5s) var(--ease-cinematic);
}
.rv-clip-right.is-visible {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

/* Diagonal wipe — cinematic curtain effect */
.rv-clip-diagonal {
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	opacity: 0;
	transition:
		clip-path var(--reveal-slow, 1.2s) var(--ease-dramatic),
		opacity var(--reveal-fast, 0.5s) var(--ease-cinematic);
}
.rv-clip-diagonal.is-visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   2. BLUR REVEALS — Materializing from ethereal to sharp
   ═══════════════════════════════════════════════════════════════════ */

.rv-blur {
	opacity: 0;
	filter: blur(12px);
	transform: scale(0.97);
	transition:
		opacity var(--reveal-normal, 0.8s) var(--ease-cinematic),
		filter var(--reveal-slow, 1.2s) var(--ease-cinematic),
		transform var(--reveal-normal, 0.8s) var(--ease-cinematic);
}
.rv-blur.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}

/* Blur from above — for badges, eyebrow text */
.rv-blur-down {
	opacity: 0;
	filter: blur(8px);
	transform: translateY(-20px);
	transition:
		opacity var(--reveal-fast, 0.5s) var(--ease-cinematic),
		filter var(--reveal-normal, 0.8s) var(--ease-cinematic),
		transform var(--reveal-normal, 0.8s) var(--ease-cinematic);
}
.rv-blur-down.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   3. SPLIT-TEXT REVEALS — Character/word/line stagger choreography
   JS wraps content in spans, CSS handles the stagger timing.
   ═══════════════════════════════════════════════════════════════════ */

/* Character-level reveal */
.rv-split-char .sr-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(100%);
	transition:
		opacity var(--reveal-fast, 0.5s) var(--ease-cinematic),
		transform var(--reveal-fast, 0.5s) var(--ease-cinematic);
	transition-delay: calc(var(--char-index, 0) * var(--split-char-delay, 25ms));
}
.rv-split-char.is-visible .sr-char {
	opacity: 1;
	transform: translateY(0);
}

/* Word-level reveal */
.rv-split-word .sr-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(40px);
	filter: blur(4px);
	transition:
		opacity var(--reveal-normal, 0.8s) var(--ease-cinematic),
		transform var(--reveal-normal, 0.8s) var(--ease-cinematic),
		filter var(--reveal-normal, 0.8s) var(--ease-cinematic);
	transition-delay: calc(var(--word-index, 0) * var(--split-word-delay, 70ms));
}
.rv-split-word.is-visible .sr-word {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* Line-level reveal */
.rv-split-line .sr-line {
	display: block;
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity var(--reveal-normal, 0.8s) var(--ease-cinematic),
		transform var(--reveal-normal, 0.8s) var(--ease-cinematic);
	transition-delay: calc(var(--line-index, 0) * var(--split-line-delay, 120ms));
}
.rv-split-line.is-visible .sr-line {
	opacity: 1;
	transform: translateY(0);
}

/* Preserve whitespace between inline words */
.sr-word + .sr-word { margin-left: 0.25em; }

/* ═══════════════════════════════════════════════════════════════════
   4. STAGGER GRID — Cascading entrance for card/item grids
   JS sets --stagger-index on each child.
   ═══════════════════════════════════════════════════════════════════ */

.stagger-grid > * {
	opacity: 0;
	transform: translateY(40px) scale(0.97);
	transition:
		opacity var(--reveal-normal, 0.8s) var(--ease-cinematic),
		transform var(--reveal-normal, 0.8s) var(--ease-cinematic);
	transition-delay: calc(var(--stagger-index, 0) * var(--stagger-base, 60ms));
}
.stagger-grid.is-visible > * {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ═══════════════════════════════════════════════════════════════════
   5. MAGNETIC HOVER — Cursor-reactive element displacement
   JS sets --mag-x, --mag-y (range: -1 to 1) on .magnetic elements.
   ═══════════════════════════════════════════════════════════════════ */

.magnetic {
	transition: transform 0.4s var(--ease-magnetic);
}
.magnetic:hover {
	transform:
		translate(
			calc(var(--mag-x, 0) * 12px),
			calc(var(--mag-y, 0) * 12px)
		)
		rotateX(calc(var(--mag-y, 0) * -4deg))
		rotateY(calc(var(--mag-x, 0) * 4deg));
}

/* ═══════════════════════════════════════════════════════════════════
   6. BUTTON MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════════ */

/* Background sweep — diagonal slide on hover */
.btn-sweep {
	position: relative;
	overflow: hidden;
	z-index: 0;
}
.btn-sweep::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--col-accent, var(--color-rose-gold, #B76E79));
	transform: translateX(-101%);
	transition: transform 0.5s var(--ease-cinematic);
	z-index: -1;
}
.btn-sweep:hover::before {
	transform: translateX(0);
}
.btn-sweep:hover {
	color: var(--color-page-bg, #0A0A0A);
}

/* Border draw — borders animate in from corners */
.btn-border-draw {
	position: relative;
	background: transparent;
}
.btn-border-draw::before,
.btn-border-draw::after {
	content: '';
	position: absolute;
	transition: all 0.5s var(--ease-cinematic);
}
.btn-border-draw::before {
	top: 0; left: 0;
	width: 0; height: 0;
	border-top: 1px solid transparent;
	border-left: 1px solid transparent;
}
.btn-border-draw::after {
	bottom: 0; right: 0;
	width: 0; height: 0;
	border-bottom: 1px solid transparent;
	border-right: 1px solid transparent;
}
.btn-border-draw:hover::before {
	width: 100%; height: 100%;
	border-top-color: var(--col-accent, var(--color-rose-gold));
	border-left-color: var(--col-accent, var(--color-rose-gold));
}
.btn-border-draw:hover::after {
	width: 100%; height: 100%;
	border-bottom-color: var(--col-accent, var(--color-rose-gold));
	border-right-color: var(--col-accent, var(--color-rose-gold));
}

/* Scale press feedback (ui-ux-pro-max §7 scale-feedback) */
.btn-press {
	transition: transform 0.15s var(--ease-whip);
}
.btn-press:active {
	transform: scale(0.96);
}

/* ═══════════════════════════════════════════════════════════════════
   7. TEXT GRADIENT ANIMATION — Animated shimmer on gradient text
   ═══════════════════════════════════════════════════════════════════ */

.gradient-shift {
	background-size: 200% auto;
	animation: gradientShift 4s linear infinite;
}
@keyframes gradientShift {
	0% { background-position: 0% center; }
	100% { background-position: 200% center; }
}

/* ═══════════════════════════════════════════════════════════════════
   8. SCROLL-LINKED HERO FADE
   JS sets --scroll-progress (0→1) as user scrolls past hero.
   ═══════════════════════════════════════════════════════════════════ */

/* scroll-fade: will-change set dynamically by JS only when scrolling */
[data-scroll-fade] > * {
	transform: scale(calc(1 - var(--scroll-progress, 0) * 0.06));
	opacity: calc(1 - var(--scroll-progress, 0));
}

/* ═══════════════════════════════════════════════════════════════════
   9. PARALLAX DEPTH CLASSES
   JS sets --parallax-offset on elements based on scroll.
   ═══════════════════════════════════════════════════════════════════ */

.parallax-slow {
	transform: translateY(calc(var(--parallax-offset, 0) * var(--parallax-slow, 0.15)));
}
.parallax-medium {
	transform: translateY(calc(var(--parallax-offset, 0) * var(--parallax-medium, 0.3)));
}
.parallax-fast {
	transform: translateY(calc(var(--parallax-offset, 0) * var(--parallax-fast, 0.5)));
}

/* Hero scene Ken Burns — starts zoomed, shifts on scroll */
.parallax-ken-burns {
	transform:
		scale(calc(1.12 - var(--scroll-progress, 0) * 0.12))
		translateY(calc(var(--parallax-offset, 0) * 0.2));
	transition: none; /* Driven by JS, not CSS transitions */
}

/* ═══════════════════════════════════════════════════════════════════
   10. AMBIENT GLOW — Cursor-tracked radial glow on dark sections
   JS sets --glow-x, --glow-y (percentages) on .ambient-glow elements.
   ═══════════════════════════════════════════════════════════════════ */

.ambient-glow::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
		rgba(var(--col-accent-rgb, 183, 110, 121), 0.06) 0%,
		transparent 60%
	);
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.6s var(--ease-cinematic);
}
.ambient-glow:hover::after {
	opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   11. PAGE TRANSITION — Fade between pages
   ═══════════════════════════════════════════════════════════════════ */

.page-enter {
	animation: pageEnter 0.5s var(--ease-cinematic) forwards;
}
@keyframes pageEnter {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.page-exit {
	animation: pageExit 0.3s var(--ease-whip) forwards;
}
@keyframes pageExit {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(-12px); }
}

/* ═══════════════════════════════════════════════════════════════════
   12. UTILITY KEYFRAMES
   ═══════════════════════════════════════════════════════════════════ */

@keyframes breathe {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(1.02); }
}

@keyframes floatGentle {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes pulseGlow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--col-accent-rgb, 183, 110, 121), 0.4); }
	50% { box-shadow: 0 0 20px 5px rgba(var(--col-accent-rgb, 183, 110, 121), 0.12); }
}

@keyframes lineReveal {
	from { width: 0; }
	to { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   13. REDUCED MOTION — Disable all choreography
   Per ui-ux-pro-max §1 reduced-motion and §7 no-blocking-animation
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.rv-clip-up, .rv-clip-left, .rv-clip-right, .rv-clip-diagonal,
	.rv-blur, .rv-blur-down,
	.stagger-grid > *,
	.rv-split-char .sr-char,
	.rv-split-word .sr-word,
	.rv-split-line .sr-line {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
		animation: none !important;
	}

	.magnetic { transform: none !important; }
	.btn-sweep::before { display: none; }
	.btn-border-draw::before, .btn-border-draw::after { display: none; }
	.gradient-shift { animation: none; }
	.parallax-slow, .parallax-medium, .parallax-fast, .parallax-ken-burns { transform: none !important; }
	[data-scroll-fade] > * { transform: none !important; opacity: 1 !important; }
	.page-enter, .page-exit { animation: none; opacity: 1; transform: none; }
}