/**
 * Tinycapes - Optimized Stylesheet
 * GPU-accelerated animations, smooth rendering, fully responsive
 * Version 2.0 - Performance Optimized
 */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --tc-brand: #6236FF;
    --tc-brand-light: #d946ef;
    --animation-speed: 1;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    :root {
        --animation-speed: 0;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   BASE STYLES & PERFORMANCE
   ======================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* GPU Acceleration for animated elements */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Gradient Text - Optimized */
.tc-gradient-text {
    background: linear-gradient(90deg, #6236FF 0%, #d946ef 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Gradient Background */
.tc-gradient-bg {
    background: linear-gradient(135deg, #6236FF 0%, #d946ef 100%);
}

/* Optimized Shimmer Effect */
.tc-shimmer {
    position: relative;
    display: inline-block;
    background: linear-gradient(
        90deg,
        rgba(98, 54, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(98, 54, 255, 0) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 2s ease-in-out infinite;
    will-change: background-position;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Urgent Pulse - Optimized */
.urgent-pulse {
    animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-red {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Dot Pattern for Projects Section */
.dot-pattern {
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.15) 1px, transparent 0);
    background-size: 40px 40px;
}

/* ========================================
   SCROLL ANIMATIONS - OPTIMIZED
   ======================================== */

.scroll-animate {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.scroll-animate.animate-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Stagger delay classes */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* ========================================
   HOVER EFFECTS - OPTIMIZED
   ======================================== */

.card-hover {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
    will-change: transform;
    transform: translateZ(0);
}

.card-hover:hover {
    transform: translate3d(0, -8px, 0);
    box-shadow: 0 20px 40px -12px rgba(98, 54, 255, 0.25);
}

.hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    transform: translateZ(0);
}

.hover-lift:hover {
    transform: translate3d(0, -5px, 0);
}

/* Button hover effect */
.btn-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

.btn-hover:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 10px 20px -5px rgba(98, 54, 255, 0.3);
}

.btn-hover:active {
    transform: translate3d(0, 0, 0);
}

/* ========================================
   HERO ANIMATIONS - GPU OPTIMIZED
   ======================================== */

.animate-hero-scale {
    opacity: 0;
    animation: heroScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
    transform: translateZ(0);
}

@keyframes heroScale {
    0% {
        opacity: 0;
        transform: scale3d(0.9, 0.9, 1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    }
}

/* ========================================
   BLOB ANIMATIONS - OPTIMIZED
   ======================================== */

.animate-blob-1 {
    animation: blob1 15s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

.animate-blob-2 {
    animation: blob2 18s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes blob1 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
    33% {
        transform: translate3d(30px, -20px, 0) scale3d(1.1, 1.1, 1);
    }
    66% {
        transform: translate3d(-20px, 15px, 0) scale3d(0.95, 0.95, 1);
    }
}

@keyframes blob2 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
    33% {
        transform: translate3d(-25px, 25px, 0) scale3d(1.15, 1.15, 1);
    }
    66% {
        transform: translate3d(20px, -15px, 0) scale3d(0.9, 0.9, 1);
    }
}

/* ========================================
   ICON POP ANIMATION
   ======================================== */

.animate-icon-pop {
    opacity: 0;
    transform: scale3d(0, 0, 1);
    animation: iconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
}

@keyframes iconPop {
    0% {
        opacity: 0;
        transform: scale3d(0, 0, 1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* ========================================
   FLOAT ANIMATIONS - OPTIMIZED
   ======================================== */

.animate-float-0 {
    animation: float1 3s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

.animate-float-1 {
    animation: float2 3.5s ease-in-out infinite;
    animation-delay: 0.5s;
    will-change: transform;
    transform: translateZ(0);
}

.animate-float-2 {
    animation: float3 4s ease-in-out infinite;
    animation-delay: 1s;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes float1 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }
    50% { transform: translate3d(0, -8px, 0) rotate3d(0, 0, 1, 3deg); }
}

@keyframes float2 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }
    50% { transform: translate3d(0, -6px, 0) rotate3d(0, 0, 1, -2deg); }
}

@keyframes float3 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }
    50% { transform: translate3d(0, -10px, 0) rotate3d(0, 0, 1, 2deg); }
}

/* ========================================
   FLOATING BADGES - OPTIMIZED
   ======================================== */

.animate-float-badge-1 {
    animation: floatBadge1 3s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

.animate-float-badge-2 {
    animation: floatBadge2 4s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes floatBadge1 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -6px, 0); }
}

@keyframes floatBadge2 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 6px, 0); }
}

/* ========================================
   PROGRESS BAR ANIMATION
   ======================================== */

.animate-progress {
    animation: progressGrow 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
    width: 0%;
    will-change: width;
}

@keyframes progressGrow {
    0% { width: 0%; }
    100% { width: 80%; }
}

/* ========================================
   FORM SUCCESS ANIMATION
   ======================================== */

.animate-in {
    animation: fadeInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale3d(0.95, 0.95, 1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* ========================================
   SHOWCASE CARD ANIMATIONS
   ======================================== */

/* Pulse Scale - Optimized */
.animate-pulse-scale {
    animation: pulseScale 2s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes pulseScale {
    0%, 100% { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.05, 1.05, 1); }
}

/* Draw Path Animation - SVG optimized */
.animate-draw-path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawPath 2.5s ease-in-out infinite;
}

@keyframes drawPath {
    0% { stroke-dashoffset: 400; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -400; }
}

/* Target Ring Animations */
.animate-target-ring-1 {
    animation: targetRing1 2s ease-in-out infinite;
    will-change: transform, opacity;
}

.animate-target-ring-2 {
    animation: targetRing2 1.5s ease-in-out infinite;
    animation-delay: 0.3s;
    will-change: transform;
}

@keyframes targetRing1 {
    0%, 100% { 
        transform: scale3d(1, 1, 1); 
        opacity: 0.5; 
    }
    50% { 
        transform: scale3d(1.15, 1.15, 1); 
        opacity: 1; 
    }
}

@keyframes targetRing2 {
    0%, 100% { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.08, 1.08, 1); }
}

/* Slide In Animations */
.animate-slide-in-1 {
    animation: slideIn 2.5s ease-in-out infinite;
}

.animate-slide-in-2 {
    animation: slideIn 2.5s ease-in-out infinite;
    animation-delay: 0.2s;
}

.animate-slide-in-3 {
    animation: slideIn 2.5s ease-in-out infinite;
    animation-delay: 0.4s;
}

@keyframes slideIn {
    0%, 100% {
        transform: translate3d(-15px, 0, 0);
        opacity: 0.3;
    }
    50% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* ========================================
   PING ANIMATION (Notification dot)
   ======================================== */

.animate-ping {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Tablet adjustments */
@media (max-width: 1024px) {
    .animate-blob-1,
    .animate-blob-2 {
        animation-duration: 20s;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Disable complex animations on mobile for battery saving */
    .animate-blob-1,
    .animate-blob-2 {
        animation: none;
        opacity: 0.5;
    }
    
    /* Simpler scroll animation */
    .scroll-animate {
        opacity: 1;
        transform: none;
        transition: opacity 0.3s ease;
    }
    
    .scroll-animate.animate-in {
        opacity: 1;
        transform: none;
    }
    
    /* Reduce float animation intensity */
    @keyframes float1 {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0, -4px, 0); }
    }
    
    @keyframes float2 {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0, -3px, 0); }
    }
    
    @keyframes float3 {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0, -5px, 0); }
    }
    
    /* Simpler hover effects on touch devices */
    .card-hover:hover,
    .hover-lift:hover {
        transform: none;
        box-shadow: 0 4px 12px -2px rgba(98, 54, 255, 0.15);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .animate-float-0,
    .animate-float-1,
    .animate-float-2,
    .animate-float-badge-1,
    .animate-float-badge-2 {
        animation: none;
    }
}

/* ========================================
   SMOOTH SCROLLING
   ======================================== */

html {
    scroll-behavior: smooth;
}

/* Smooth scroll with offset for fixed header */
[id] {
    scroll-margin-top: 100px;
}

/* ========================================
   SELECTION STYLES
   ======================================== */

::selection {
    background: rgba(98, 54, 255, 0.15);
    color: #6236FF;
}

/* ========================================
   FORM FOCUS STYLES - OPTIMIZED
   ======================================== */

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #6236FF;
    box-shadow: 0 0 0 3px rgba(98, 54, 255, 0.15);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ========================================
   LINK STYLES
   ======================================== */

a {
    transition: color 0.2s ease, transform 0.2s ease;
}

/* ========================================
   IMAGE OPTIMIZATION
   ======================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   LAYOUT CONTAINMENT (Performance)
   ======================================== */

.section-contained {
    contain: layout style;
}

.animate-contained {
    contain: layout style paint;
}

/* ========================================
   LOADING STATE
   ======================================== */

.skeleton {
    background: linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e2e8f0 50%,
        #f1f5f9 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   ACCESSIBILITY - FOCUS VISIBLE
   ======================================== */

:focus-visible {
    outline: 2px solid #6236FF;
    outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   SAFARI FIXES
   ======================================== */

/* Fix for Safari gradient text */
@supports (-webkit-touch-callout: none) {
    .tc-gradient-text {
        -webkit-text-fill-color: transparent;
    }
}

/* Fix for Safari backdrop-filter */
@supports (-webkit-backdrop-filter: none) {
    .backdrop-blur-md {
        -webkit-backdrop-filter: blur(12px);
    }
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* Prevent horizontal overflow */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix for iOS momentum scrolling */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Container fixes */
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl {
    width: 100%;
    max-width: 100%;
}

/* Fix for fixed header on mobile */
@supports (padding-top: env(safe-area-inset-top)) {
    nav.fixed {
        padding-top: env(safe-area-inset-top);
    }
}

/* Prevent text overflow */
h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Touch-friendly tap targets on mobile */
@media (max-width: 768px) {
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better text sizing on mobile */
    html {
        font-size: 15px;
    }
    
    /* Prevent zoom on input focus in iOS */
    input, textarea, select {
        font-size: 16px;
    }
}

/* High DPI screen optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .tc-gradient-text,
    .tc-gradient-bg {
        -webkit-font-smoothing: antialiased;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    /* Only apply if you want dark mode support */
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .animate-blob-1,
    .animate-blob-2,
    .animate-float-0,
    .animate-float-1,
    .animate-float-2,
    .animate-float-badge-1,
    .animate-float-badge-2,
    .tc-shimmer,
    nav,
    .animate-ping {
        animation: none !important;
        display: none !important;
    }
    
    .scroll-animate {
        opacity: 1 !important;
        transform: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    a {
        text-decoration: underline;
        color: black !important;
    }
    
    /* Ensure good contrast for printing */
    .text-slate-600,
    .text-slate-500,
    .text-slate-400 {
        color: #333 !important;
    }
}