/**
 * ThemeFlex — Interaction Engine CSS Library
 * 
 * Complete animation and interaction preset system.
 * All classes work with IntersectionObserver via data-sf-animate.
 * 
 * USAGE:
 *   <div data-sf-animate="fade-up">...</div>
 *   <div class="sf-hover-lift">...</div>
 *   <div class="sf-motion-float">...</div>
 * 
 * @package Starter_Flavor
 * @since   2.0.0
 */

/* ============================================================
   BASE — all animated elements start hidden
   ============================================================ */
[data-sf-animate] {
    opacity: 0;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-sf-animate].sf-animated {
    opacity: 1;
    transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
    [data-sf-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }
    [class*="sf-motion-"] { animation: none !important; }
}

/* ============================================================
   10 ENTRANCE ANIMATIONS
   ============================================================ */

/* 1. Fade Up (default) */
[data-sf-animate="fade-up"]    { transform: translateY(32px); }
[data-sf-animate="fade-down"]  { transform: translateY(-32px); }
[data-sf-animate="fade-left"]  { transform: translateX(32px); }
[data-sf-animate="fade-right"] { transform: translateX(-32px); }

/* 2. Zoom In */
[data-sf-animate="zoom-in"]  { transform: scale(0.88); }
[data-sf-animate="zoom-out"] { transform: scale(1.12); }

/* 3. Flip */
[data-sf-animate="flip-x"] { transform: perspective(600px) rotateX(-60deg); transform-origin: top; }
[data-sf-animate="flip-y"] { transform: perspective(600px) rotateY(-60deg); }

/* 4. Slide */
[data-sf-animate="slide-up"]   { transform: translateY(100%); overflow: hidden; }
[data-sf-animate="slide-left"] { transform: translateX(-100%); overflow: hidden; }

/* Stagger delay utility classes */
[data-sf-delay="100"] { transition-delay: 100ms !important; }
[data-sf-delay="200"] { transition-delay: 200ms !important; }
[data-sf-delay="300"] { transition-delay: 300ms !important; }
[data-sf-delay="400"] { transition-delay: 400ms !important; }
[data-sf-delay="500"] { transition-delay: 500ms !important; }
[data-sf-delay="600"] { transition-delay: 600ms !important; }
[data-sf-delay="800"] { transition-delay: 800ms !important; }

/* Duration utilities */
[data-sf-duration="fast"]   { transition-duration: 300ms !important; }
[data-sf-duration="normal"] { transition-duration: 600ms !important; }
[data-sf-duration="slow"]   { transition-duration: 900ms !important; }

/* ============================================================
   8 HOVER PRESETS
   ============================================================ */

/* 1. Lift */
.sf-hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}
.sf-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}

/* 2. Scale */
.sf-hover-scale {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}
.sf-hover-scale:hover { transform: scale(1.05); }

/* 3. Glow */
.sf-hover-glow {
    transition: box-shadow 0.3s ease;
}
.sf-hover-glow:hover {
    box-shadow: 0 0 0 3px var(--sf-color-primary, #FF5E2E),
                0 8px 32px color-mix(in srgb, var(--sf-color-primary, #FF5E2E) 30%, transparent);
}

/* 4. Border Reveal */
.sf-hover-border {
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.sf-hover-border:hover {
    border-color: var(--sf-color-primary, #FF5E2E);
    transform: translateY(-2px);
}

/* 5. Gradient Sweep */
.sf-hover-gradient {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.sf-hover-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sf-gradient, linear-gradient(135deg, #FF5E2E, #ED4C1C));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: inherit;
}
.sf-hover-gradient:hover::before { opacity: 1; }
.sf-hover-gradient:hover { color: #fff; }

/* 6. Underline Sweep */
.sf-hover-underline {
    position: relative;
    display: inline-block;
}
.sf-hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--sf-color-primary, #FF5E2E);
    transition: width 0.3s ease;
}
.sf-hover-underline:hover::after { width: 100%; }

/* 7. Float (with pseudo-shadow) */
.sf-hover-float {
    transition: transform 0.3s ease;
    position: relative;
}
.sf-hover-float::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 10%;
    right: 10%;
    height: 20px;
    background: rgba(0,0,0,0.1);
    filter: blur(10px);
    border-radius: 50%;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
}
.sf-hover-float:hover { transform: translateY(-8px); }
.sf-hover-float:hover::after { opacity: 1; transform: scaleX(1.1); }

/* 8. Tilt (via JS in interaction-engine.js) */
.sf-hover-tilt { cursor: pointer; transform-style: preserve-3d; }

/* ============================================================
   8 MOTION PRESETS (continuous animations)
   ============================================================ */

/* 1. Float */
.sf-motion-float {
    animation: sfMotionFloat 4s ease-in-out infinite;
}
@keyframes sfMotionFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

/* 2. Pulse */
.sf-motion-pulse {
    animation: sfMotionPulse 2s ease-in-out infinite;
}
@keyframes sfMotionPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.04); opacity: 0.85; }
}

/* 3. Spin */
.sf-motion-spin {
    animation: sfMotionSpin 8s linear infinite;
}
@keyframes sfMotionSpin { to { transform: rotate(360deg); } }

/* 4. Bounce */
.sf-motion-bounce {
    animation: sfMotionBounce 1.5s ease-in-out infinite;
}
@keyframes sfMotionBounce {
    0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    50%       { transform: translateY(-20px); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
}

/* 5. Shake */
.sf-motion-shake {
    animation: sfMotionShake 0.5s ease-in-out;
}
@keyframes sfMotionShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-4px); }
    40%       { transform: translateX(4px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* 6. Heartbeat */
.sf-motion-heartbeat {
    animation: sfMotionHeartbeat 1.5s ease-in-out infinite;
}
@keyframes sfMotionHeartbeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.15); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.15); }
    70%       { transform: scale(1); }
}

/* 7. Wave */
.sf-motion-wave {
    animation: sfMotionWave 2s ease-in-out infinite;
    transform-origin: bottom;
}
@keyframes sfMotionWave {
    0%, 100% { transform: rotate(0deg); }
    25%       { transform: rotate(10deg); }
    75%       { transform: rotate(-10deg); }
}

/* 8. Gradient Shift */
.sf-motion-gradient {
    background-size: 200% 200%;
    animation: sfMotionGradient 4s ease infinite;
}
@keyframes sfMotionGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================================
   GLASSMORPHISM UTILITY
   ============================================================ */
.sf-glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--sf-radius-lg, 12px);
}
.sf-glass-dark {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--sf-radius-lg, 12px);
}
.sf-glass-primary {
    background: color-mix(in srgb, var(--sf-color-primary, #FF5E2E) 10%, rgba(255,255,255,0.05));
    backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--sf-color-primary, #FF5E2E) 30%, transparent);
    border-radius: var(--sf-radius-lg, 12px);
}

/* ============================================================
   NOISE/GRAIN TEXTURE
   ============================================================ */
.sf-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px;
}
.sf-noise { position: relative; }

/* ============================================================
   CURSOR FOLLOW (applied via JS)
   ============================================================ */
.sf-cursor-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sf-color-primary, #FF5E2E);
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, opacity 0.2s;
    mix-blend-mode: difference;
}
.sf-cursor-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--sf-color-primary, #FF5E2E);
    position: fixed;
    pointer-events: none;
    z-index: 999998;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, opacity 0.2s;
    opacity: 0.4;
}

/* ============================================================
   PARALLAX SECTIONS
   ============================================================ */
.sf-parallax {
    overflow: hidden;
    position: relative;
}
.sf-parallax-inner {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ============================================================
   STICKY HEADER STATES
   ============================================================ */
.site-header.sf-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--sf-z-sticky, 200);
    animation: sfHeaderDown 0.3s ease;
    box-shadow: var(--sf-shadow-md, 0 4px 16px rgba(0,0,0,.08));
}
.site-header.sf-sticky.sf-scrolled-up { animation: sfHeaderDown 0.3s ease; }
.site-header.sf-sticky.sf-scrolled-down { animation: sfHeaderUp 0.3s ease; transform: translateY(-100%); }

@keyframes sfHeaderDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes sfHeaderUp   { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* ============================================================
   FOCUS STYLES (Accessibility)
   ============================================================ */
:focus-visible {
    outline: 3px solid var(--sf-color-primary, #FF5E2E);
    outline-offset: 3px;
    border-radius: 4px;
}
.sf-skip-link:focus-visible {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 99999;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (forced-colors: active) {
    [data-sf-animate].sf-animated { opacity: 1 !important; }
    .sf-glass, .sf-glass-dark { border: 2px solid ButtonText; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    [data-sf-animate] { opacity: 1 !important; transform: none !important; }
    .sf-motion-float, .sf-motion-pulse, .sf-motion-spin,
    .sf-motion-bounce, .sf-motion-heartbeat, .sf-motion-gradient { animation: none !important; }
    .site-header.sf-sticky { position: static !important; box-shadow: none !important; }
    .sf-cursor-dot, .sf-cursor-ring { display: none !important; }
}