/**
 * Motion System v2.0 - Core Styles
 *
 * Foundation CSS for Motion System animations.
 * Includes: reveal states, accessibility, performance optimizations.
 *
 * NOTE: Motion tokens (--motion-duration-*, --motion-ease-*, etc.) are
 * generated dynamically by assets.php from config.php preset values.
 * DO NOT define tokens here - this file contains structural styles only.
 *
 * @package starter-site
 * @subpackage motion
 * @version 2.0.0
 */

/* =============================================================================
   REVEAL INITIAL STATES
   ============================================================================= */

/**
 * Elements with data-motion are hidden initially.
 * GSAP reveals them on scroll.
 */
[data-motion] {
    opacity: 0;
}

/* Specific initial transforms based on animation type */
[data-motion="fade-up"] {
    transform: translateY(var(--motion-distance-md));
}

[data-motion="fade-down"] {
    transform: translateY(calc(var(--motion-distance-md) * -1));
}

[data-motion="fade-left"] {
    transform: translateX(var(--motion-distance-md));
}

[data-motion="fade-right"] {
    transform: translateX(calc(var(--motion-distance-md) * -1));
}

[data-motion="scale-in"],
[data-motion="scale-up"] {
    transform: scale(0.9);
}

[data-motion="scale-down"] {
    transform: scale(1.1);
}

[data-motion="flip-up"] {
    transform: perspective(1000px) rotateX(90deg);
    transform-origin: bottom center;
}

[data-motion="flip-down"] {
    transform: perspective(1000px) rotateX(-90deg);
    transform-origin: top center;
}

[data-motion="rotate-in"] {
    transform: rotate(-180deg) scale(0.5);
}

/* =============================================================================
   REVEALED STATES
   ============================================================================= */

/**
 * When GSAP marks elements as revealed.
 */
[data-motion].motion-revealed,
.motion-revealed [data-motion] {
    opacity: 1;
    transform: none;
}

/* =============================================================================
   STAGGER CONTAINERS
   ============================================================================= */

[data-stagger] > * {
    opacity: 0;
}

[data-stagger].motion-revealed > *,
.motion-revealed [data-stagger] > * {
    opacity: 1;
}

/* =============================================================================
   TEXT SPLIT EFFECTS
   ============================================================================= */

/**
 * FOUC Prevention: Hide parent element until SplitType creates child elements.
 *
 * Problem: CSS rules target .line/.word/.char but these don't exist until
 * SplitType JS runs, causing a flash of unstyled text.
 *
 * Solution: Hide [data-text] parent with visibility (not opacity to avoid
 * layout measurement issues). JS adds data-motion-ready after split + init.
 */
[data-text] {
    visibility: hidden;
}

[data-text][data-motion-ready] {
    visibility: visible;
}

/**
 * Hide split text child elements initially (after SplitType creates them).
 * GSAP animates these to visible state.
 */
[data-text] .line,
[data-text] .word,
[data-text] .char {
    opacity: 0;
}

[data-text="split-lines"] .line {
    transform: translateY(100%);
}

[data-text="split-words"] .word {
    transform: translateY(50%);
}

[data-text="split-chars"] .char,
[data-text="typewriter"] .char {
    transform: translateY(20px);
}

/**
 * Revealed state for split text.
 */
[data-text].motion-revealed .line,
[data-text].motion-revealed .word,
[data-text].motion-revealed .char {
    opacity: 1;
    transform: none;
}

/* Line overflow container for slide effects */
[data-text="split-lines"] {
    overflow: hidden;
}

/* =============================================================================
   PARALLAX ELEMENTS
   ============================================================================= */

[data-parallax] {
    will-change: transform;
}

/* =============================================================================
   SCRUB ELEMENTS
   ============================================================================= */

[data-scrub-y],
[data-scrub-opacity],
[data-scrub-scale],
[data-scrub-rotate] {
    will-change: transform, opacity;
}

/* =============================================================================
   COUNTER ELEMENTS
   ============================================================================= */

[data-counter] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* =============================================================================
   MARQUEE ELEMENTS
   ============================================================================= */

[data-marquee] {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

[data-marquee] > * {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* =============================================================================
   MICRO INTERACTIONS
   ============================================================================= */

/**
 * Magnetic effect container.
 */
[data-micro="magnetic"] {
    display: inline-block;
    transition: transform 0.3s var(--motion-ease-out);
}

/**
 * Hover lift effect.
 */
[data-micro="lift"] {
    transition: transform var(--motion-duration-sm) var(--motion-ease-out),
                box-shadow var(--motion-duration-sm) var(--motion-ease-out);
}

[data-micro="lift"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/**
 * Scale effect.
 */
[data-micro="scale"] {
    transition: transform var(--motion-duration-sm) var(--motion-ease-out);
}

[data-micro="scale"]:hover {
    transform: scale(1.05);
}

/**
 * Tilt effect (JS enhanced).
 */
[data-micro="tilt"] {
    transform-style: preserve-3d;
    transition: transform var(--motion-duration-sm) var(--motion-ease-out);
}

/* =============================================================================
   CURSOR SYSTEM v2.0
   Architecture: CSS tokens (from assets.php) → styles here → logic in cursor.js
   Types: dot | dot-ring | ring | trail | morph | text-only | icon-only
   ============================================================================= */

/**
 * Hide native cursor on elements with custom cursor.
 */
[data-cursor],
[data-cursor] *,
.has-custom-cursor,
.has-custom-cursor * {
    cursor: none !important;
}

/**
 * Restore native cursor on excluded elements.
 */
.has-custom-cursor input,
.has-custom-cursor textarea,
.has-custom-cursor [contenteditable],
.has-custom-cursor iframe,
.has-custom-cursor video {
    cursor: auto !important;
}

/**
 * Custom cursor container.
 * Position is set via JS transform for performance.
 */
.motion-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: var(--cursor-blend, difference);
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform;
}

.motion-cursor--visible {
    opacity: 1;
}

/**
 * Inner dot element.
 * Position driven by JS via --cursor-x/y custom properties.
 */
.motion-cursor__inner {
    position: absolute;
    left: var(--cursor-x, 0);
    top: var(--cursor-y, 0);
    width: var(--cursor-dot, var(--cursor-dot-md, 12px));
    height: var(--cursor-dot, var(--cursor-dot-md, 12px));
    background: var(--cursor-color, #ffffff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform var(--cursor-transition, 0.2s ease),
                width var(--cursor-transition, 0.2s ease),
                height var(--cursor-transition, 0.2s ease),
                opacity var(--cursor-transition, 0.2s ease);
    will-change: left, top, transform, width, height;
}

/**
 * Outer ring element.
 * Position driven by JS via --cursor-outer-x/y for trailing effect.
 */
.motion-cursor__outer {
    position: absolute;
    left: var(--cursor-outer-x, 0);
    top: var(--cursor-outer-y, 0);
    width: var(--cursor-ring, var(--cursor-ring-md, 40px));
    height: var(--cursor-ring, var(--cursor-ring-md, 40px));
    border: 1px solid var(--cursor-color, #ffffff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    transition: transform var(--cursor-transition, 0.2s ease),
                width var(--cursor-transition, 0.2s ease),
                height var(--cursor-transition, 0.2s ease),
                opacity var(--cursor-transition, 0.2s ease),
                border-color var(--cursor-transition, 0.2s ease);
    will-change: left, top, transform, width, height, opacity;
}

/**
 * Text label element.
 * Follows inner cursor position.
 */
.motion-cursor__text {
    position: absolute;
    left: var(--cursor-x, 0);
    top: var(--cursor-y, 0);
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cursor-color, #ffffff);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cursor-transition, 0.2s ease);
}

/**
 * Icon element.
 * Follows inner cursor position.
 */
.motion-cursor__icon {
    position: absolute;
    left: var(--cursor-x, 0);
    top: var(--cursor-y, 0);
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--cursor-transition, 0.2s ease);
}

.motion-cursor__icon svg {
    width: 100%;
    height: 100%;
    fill: var(--cursor-color, #ffffff);
}

/* =============================================================================
   CURSOR TYPES
   ============================================================================= */

/* dot: inner only */
.motion-cursor--dot .motion-cursor__outer { display: none; }

/* ring: outer only */
.motion-cursor--ring .motion-cursor__inner { display: none; }

/* dot-ring: both (default) */
.motion-cursor--dot-ring .motion-cursor__inner,
.motion-cursor--dot-ring .motion-cursor__outer { display: block; }

/* text-only: text visible, dot/ring hidden */
.motion-cursor--text-only .motion-cursor__inner,
.motion-cursor--text-only .motion-cursor__outer { display: none; }
.motion-cursor--text-only .motion-cursor__text { opacity: 1; }

/* icon-only: icon visible, dot/ring hidden */
.motion-cursor--icon-only .motion-cursor__inner,
.motion-cursor--icon-only .motion-cursor__outer { display: none; }
.motion-cursor--icon-only .motion-cursor__icon { opacity: 1; }

/* =============================================================================
   CURSOR STATES
   ============================================================================= */

/* Hover state: ring expands, dot shrinks */
.motion-cursor--hover .motion-cursor__inner {
    transform: translate(-50%, -50%) scale(0.5);
}

.motion-cursor--hover .motion-cursor__outer {
    transform: translate(-50%, -50%) scale(var(--cursor-hover-scale, 1.5));
    opacity: 0.3;
}

/* Click state: pulse effect */
.motion-cursor--click .motion-cursor__inner {
    transform: translate(-50%, -50%) scale(var(--cursor-click-scale, 0.8));
}

.motion-cursor--click .motion-cursor__outer {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
}

/* Drag state: compact */
.motion-cursor--drag .motion-cursor__inner {
    transform: translate(-50%, -50%) scale(0.8);
}

.motion-cursor--drag .motion-cursor__outer {
    transform: translate(-50%, -50%) scale(var(--cursor-drag-scale, 0.6));
    opacity: 1;
}

/* Text state: show text, hide dot/ring */
.motion-cursor--text .motion-cursor__inner,
.motion-cursor--text .motion-cursor__outer {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

.motion-cursor--text .motion-cursor__text {
    opacity: 1;
}

/* Icon state: show icon, hide dot/ring */
.motion-cursor--icon .motion-cursor__inner,
.motion-cursor--icon .motion-cursor__outer {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

.motion-cursor--icon .motion-cursor__icon {
    opacity: 1;
}

/* Hidden state */
.motion-cursor--hidden .motion-cursor__inner,
.motion-cursor--hidden .motion-cursor__outer {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

/* Link state: enhanced visibility */
.motion-cursor--link .motion-cursor__inner {
    transform: translate(-50%, -50%) scale(0.6);
}

.motion-cursor--link .motion-cursor__outer {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.4;
}

/* Loading state: spinner animation */
.motion-cursor--loading .motion-cursor__outer {
    animation: cursor-spin 1s linear infinite;
    border-style: dashed;
}

@keyframes cursor-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Disabled state */
.motion-cursor--disabled {
    opacity: 0.3;
}

/* Magnetic state: subtle glow */
.motion-cursor--magnetic .motion-cursor__inner {
    box-shadow: 0 0 10px var(--cursor-color, #ffffff);
}

/* Sticky state: locked to element */
.motion-cursor--sticky .motion-cursor__outer {
    transition: none;
}

/* =============================================================================
   CURSOR SIZE VARIANTS (utility classes)
   ============================================================================= */

.motion-cursor--sm .motion-cursor__inner {
    width: var(--cursor-dot-sm, 8px);
    height: var(--cursor-dot-sm, 8px);
}

.motion-cursor--sm .motion-cursor__outer {
    width: var(--cursor-ring-sm, 24px);
    height: var(--cursor-ring-sm, 24px);
}

.motion-cursor--lg .motion-cursor__inner {
    width: var(--cursor-dot-lg, 16px);
    height: var(--cursor-dot-lg, 16px);
}

.motion-cursor--lg .motion-cursor__outer {
    width: var(--cursor-ring-lg, 56px);
    height: var(--cursor-ring-lg, 56px);
}

/* =============================================================================
   TRAIL CURSOR TYPE (multiple dots following)
   ============================================================================= */

.motion-cursor--trail .motion-cursor__trail {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--cursor-color, #ffffff);
    border-radius: 50%;
    opacity: 0.5;
    transform: translate(-50%, -50%);
}

.motion-cursor--trail .motion-cursor__trail:nth-child(1) { opacity: 0.4; }
.motion-cursor--trail .motion-cursor__trail:nth-child(2) { opacity: 0.3; }
.motion-cursor--trail .motion-cursor__trail:nth-child(3) { opacity: 0.2; }
.motion-cursor--trail .motion-cursor__trail:nth-child(4) { opacity: 0.1; }

/* =============================================================================
   MORPH CURSOR TYPE (shape changes)
   ============================================================================= */

.motion-cursor--morph .motion-cursor__inner {
    transition: border-radius 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.motion-cursor--morph.motion-cursor--hover .motion-cursor__inner {
    border-radius: 4px;
    width: 60px;
    height: 30px;
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .motion-cursor,
    .motion-cursor__inner,
    .motion-cursor__outer,
    .motion-cursor__text,
    .motion-cursor__icon {
        transition: none !important;
        animation: none !important;
    }
}

/* =============================================================================
   TRANSITIONS (PAGE TRANSITIONS)
   ============================================================================= */

/**
 * Page transition states.
 */
.motion-page-exit {
    opacity: 0;
    transform: translateY(-20px);
}

.motion-page-enter {
    opacity: 0;
    transform: translateY(20px);
}

/* =============================================================================
   PRELOADER
   ============================================================================= */

.motion-preloader {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg, #000);
    transition: opacity 0.5s, visibility 0.5s;
}

.motion-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.motion-preloader__progress {
    width: 200px;
    height: 2px;
    background: var(--border, #333);
    border-radius: 1px;
    overflow: hidden;
}

.motion-preloader__bar {
    height: 100%;
    background: var(--primary, #fff);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.2s;
}

/* =============================================================================
   LENIS SMOOTH SCROLL: DISABLE NATIVE INTERPOLATION
   ============================================================================= */

/**
 * When Lenis is active, disable CSS scroll-behavior to prevent
 * double interpolation conflict (CSS smooth + Lenis = 2s lag on Chromium).
 * The .lenis class is added/removed by smooth-scroll.js.
 */
html.lenis,
html.lenis body {
    scroll-behavior: auto;
}

/* =============================================================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================================================= */

/**
 * When user prefers reduced motion or motion is paused.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Show elements immediately */
    [data-motion],
    [data-stagger] > *,
    [data-text] .line,
    [data-text] .word,
    [data-text] .char {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable parallax */
    [data-parallax] {
        transform: none !important;
    }

    /* Pause marquee */
    [data-marquee] > * {
        animation-play-state: paused !important;
    }
}

/**
 * When motion is programmatically reduced.
 */
.motion-reduced *,
.motion-reduced *::before,
.motion-reduced *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

.motion-reduced [data-motion],
.motion-reduced [data-stagger] > *,
.motion-reduced [data-text] .line,
.motion-reduced [data-text] .word,
.motion-reduced [data-text] .char {
    opacity: 1 !important;
    transform: none !important;
}

.motion-reduced [data-parallax] {
    transform: none !important;
}

.motion-reduced [data-marquee] > * {
    animation-play-state: paused !important;
}

/* =============================================================================
   ACCESSIBILITY: PAUSE CONTROL
   ============================================================================= */

.motion-pause-control {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--bg-elevated, #333);
    color: var(--text, #fff);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s var(--motion-ease-out),
                background 0.2s;
}

.motion-pause-control:hover {
    transform: scale(1.1);
}

.motion-pause-control:focus-visible {
    outline: 2px solid var(--primary, #fff);
    outline-offset: 2px;
}

/* =============================================================================
   ACCESSIBILITY: FOCUS VISIBLE
   ============================================================================= */

.motion-focus-visible :focus:not(:focus-visible) {
    outline: none;
}

.motion-focus-visible :focus-visible {
    outline: 2px solid var(--primary, currentColor);
    outline-offset: 2px;
}

/* =============================================================================
   PERFORMANCE: GPU ACCELERATION
   ============================================================================= */

/**
 * Elements that benefit from GPU acceleration.
 */
[data-motion],
[data-parallax],
[data-scrub-y],
[data-scrub-scale],
[data-scrub-rotate],
[data-micro],
.motion-cursor {
    backface-visibility: hidden;
    perspective: 1000px;
}

/**
 * Prevent layout thrashing.
 */
[data-motion] {
    contain: layout style;
}

/* =============================================================================
   PERFORMANCE: WILL-CHANGE HINTS
   ============================================================================= */

/**
 * Hint browser about upcoming changes.
 * Note: will-change is applied dynamically by JS for better performance.
 */
.motion-animating {
    will-change: transform, opacity;
}

/* =============================================================================
   NOSCRIPT FALLBACK
   ============================================================================= */

noscript + .motion-required {
    display: none;
}

/* =============================================================================
   SCREEN READER ANNOUNCEMENTS
   ============================================================================= */

#motion-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   DEBUG STYLES
   ============================================================================= */

.motion-debug [data-motion] {
    outline: 2px dashed rgba(255, 0, 0, 0.5);
    outline-offset: 2px;
}

.motion-debug [data-motion].motion-revealed {
    outline-color: rgba(0, 255, 0, 0.5);
}

.motion-debug [data-parallax] {
    outline: 2px dashed rgba(0, 0, 255, 0.5);
}

.motion-debug [data-stagger] {
    outline: 2px dashed rgba(255, 165, 0, 0.5);
}