/* ============================================
   VIRALTHUMB - ANIMATIONS
   Scroll-triggered & Micro-interactions
   ============================================ */

/* ============================================
   SCROLL ANIMATIONS BASE
   ============================================ */

/* Elements with data-animate attribute start hidden */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When element becomes visible */
[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Up Animation (default) */
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
}

[data-animate="fade-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Down Animation */
[data-animate="fade-down"] {
    opacity: 0;
    transform: translateY(-40px);
}

[data-animate="fade-down"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Left Animation */
[data-animate="fade-left"] {
    opacity: 0;
    transform: translateX(60px);
}

[data-animate="fade-left"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Right Animation */
[data-animate="fade-right"] {
    opacity: 0;
    transform: translateX(-60px);
}

[data-animate="fade-right"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale In Animation */
[data-animate="scale-in"] {
    opacity: 0;
    transform: scale(0.9);
}

[data-animate="scale-in"].is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Rotate In Animation */
[data-animate="rotate-in"] {
    opacity: 0;
    transform: rotate(-5deg) scale(0.95);
}

[data-animate="rotate-in"].is-visible {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Stagger Delays */
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="700"] { transition-delay: 700ms; }
[data-delay="800"] { transition-delay: 800ms; }

/* ============================================
   HERO ANIMATIONS
   ============================================ */

/* Hero Title Word Animation */
.hero__title {
    overflow: hidden;
}

.hero__title-strike {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 1s ease-out 0.5s;
}

[data-animate].is-visible .hero__title-strike {
    stroke-dashoffset: 0;
}

/* Floating Elements Animation Enhancement */
.hero__float {
    will-change: transform;
}

.hero__float--1 {
    animation: float-1 6s ease-in-out infinite;
}

.hero__float--2 {
    animation: float-2 7s ease-in-out infinite;
}

.hero__float--3 {
    animation: float-3 8s ease-in-out infinite;
}

@keyframes float-1 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(3deg);
    }
    50% {
        transform: translateY(-5px) rotate(-2deg);
    }
    75% {
        transform: translateY(-20px) rotate(1deg);
    }
}

@keyframes float-2 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-20px) rotate(-3deg);
    }
    66% {
        transform: translateY(-10px) rotate(2deg);
    }
}

@keyframes float-3 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    40% {
        transform: translateY(-25px) rotate(4deg);
    }
    80% {
        transform: translateY(-8px) rotate(-1deg);
    }
}

/* Prompt Cursor Blink */
.hero__prompt-cursor {
    animation: cursor-blink 1s ease-in-out infinite;
}

@keyframes cursor-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Typing Animation for Prompt Text */
.hero__prompt-text {
    animation: typing-reveal 3s steps(50) 1s forwards;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes typing-reveal {
    to {
        width: 100%;
    }
}

/* ============================================
   BUTTON ANIMATIONS
   ============================================ */

.btn {
    position: relative;
    overflow: hidden;
}

/* Ripple Effect */
.btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.btn:active::after {
    transform: scale(2);
    opacity: 1;
    transition: transform 0s, opacity 0s;
}

/* Shine Effect on Hover */
.btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.btn--primary:hover::before {
    left: 100%;
}

/* Arrow Bounce on Hover */
.btn:hover .btn__icon {
    animation: arrow-bounce 0.5s ease;
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(6px);
    }
    50% {
        transform: translateX(3px);
    }
    75% {
        transform: translateX(8px);
    }
}

/* ============================================
   FORM ANIMATIONS
   ============================================ */

/* Input Focus Animation */
.form-input {
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}

.form-input:focus {
    transform: translateY(-2px);
}

/* Success State Animation */
.form-input.is-success {
    border-color: var(--color-accent-teal);
    animation: input-success 0.5s ease;
}

@keyframes input-success {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-4px);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* Error Shake Animation */
.form-input.is-error {
    animation: input-shake 0.5s ease;
}

@keyframes input-shake {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-8px);
    }
    40% {
        transform: translateX(8px);
    }
    60% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(4px);
    }
}

/* Loading Button Animation */
.btn.is-loading {
    pointer-events: none;
}

.btn.is-loading .btn__loader {
    opacity: 1;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

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

/* Step Card Hover */
.step {
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.step:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Step Icon Pulse */
.step__icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step:hover .step__icon {
    transform: scale(1.1);
    animation: icon-pulse 0.6s ease;
}

@keyframes icon-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1.1);
    }
}

/* Feature Card Hover */
.feature {
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* Feature Icon Animation */
.feature__icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature:hover .feature__icon {
    transform: scale(1.1) rotate(5deg);
}

/* ============================================
   GALLERY ANIMATIONS
   ============================================ */

/* Gallery Item Entrance */
.gallery__item {
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease,
        opacity 0.4s ease;
}

/* Staggered entrance animation */
.gallery__grid[data-animate].is-visible .gallery__item {
    animation: gallery-item-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

.gallery__grid[data-animate].is-visible .gallery__item:nth-child(1) { animation-delay: 0ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(2) { animation-delay: 50ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(3) { animation-delay: 100ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(4) { animation-delay: 150ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(5) { animation-delay: 200ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(6) { animation-delay: 250ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(7) { animation-delay: 300ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(8) { animation-delay: 350ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(9) { animation-delay: 400ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(10) { animation-delay: 450ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(11) { animation-delay: 500ms; }
.gallery__grid[data-animate].is-visible .gallery__item:nth-child(12) { animation-delay: 550ms; }

@keyframes gallery-item-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Gallery Item Hover */
.gallery__item:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* Gallery Overlay Slide */
.gallery__overlay {
    transition: opacity 0.3s ease;
}

.gallery__format-tag {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(-10px);
    opacity: 0;
}

.gallery__author {
    transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s;
    transform: translateY(10px);
    opacity: 0;
}

.gallery__item:hover .gallery__format-tag,
.gallery__item:hover .gallery__author {
    transform: translateY(0);
    opacity: 1;
}

/* Gallery Filter Button Animation */
.gallery__filter {
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.2s ease;
}

.gallery__filter:active {
    transform: scale(0.95);
}

/* Filter animation for items */
.gallery__item.is-filtering-out {
    animation: gallery-filter-out 0.3s ease forwards;
}

.gallery__item.is-filtering-in {
    animation: gallery-filter-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gallery-filter-out {
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

@keyframes gallery-filter-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Placeholder Shimmer Effect */
.gallery__placeholder {
    position: relative;
    overflow: hidden;
}

.gallery__placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.gallery__item:hover .gallery__placeholder::after {
    left: 100%;
}

/* ============================================
   STATS COUNTER ANIMATION
   ============================================ */

.stat__number {
    transition: transform 0.3s ease;
}

.stat:hover .stat__number {
    transform: scale(1.05);
}

/* ============================================
   MARQUEE ANIMATION
   ============================================ */

.marquee__track {
    animation: marquee 25s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.marquee:hover .marquee__track {
    animation-play-state: paused;
}

/* ============================================
   MODAL ANIMATIONS
   ============================================ */

.modal {
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.modal__backdrop {
    transition: opacity 0.3s ease;
    opacity: 0;
}

.modal.is-open .modal__backdrop {
    opacity: 1;
}

.modal__content {
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.3s ease;
    transform: scale(0.9) translateY(30px);
    opacity: 0;
}

.modal.is-open .modal__content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Success Icon Animation */
.modal__icon svg {
    animation: success-draw 0.8s ease-out 0.2s forwards;
}

.modal__icon svg circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: circle-draw 0.6s ease-out 0.2s forwards;
}

.modal__icon svg path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: check-draw 0.4s ease-out 0.6s forwards;
}

@keyframes circle-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes check-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ============================================
   NAVIGATION ANIMATIONS
   ============================================ */

.nav {
    transition:
        background 0.3s ease,
        padding 0.3s ease,
        backdrop-filter 0.3s ease;
}

.nav__logo {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav__logo:hover {
    transform: scale(1.02);
}

/* ============================================
   SOCIAL LINK ANIMATIONS
   ============================================ */

.social-link {
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.social-link:hover {
    transform: translateY(-3px);
}

.social-link:active {
    transform: translateY(0);
}

/* ============================================
   TEXT UNDERLINE ANIMATION
   ============================================ */

.text-underline::after {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   PARALLAX & SCROLL EFFECTS
   ============================================ */

/* Subtle parallax for background shapes */
.hero__shapes .shape {
    transition: transform 0.1s ease-out;
}

/* Smooth scroll indicator */
@keyframes scroll-indicator {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(10px);
        opacity: 0.5;
    }
}

/* ============================================
   THUMBNAIL GRID ANIMATIONS
   ============================================ */

.hero__thumbnail {
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease;
}

.hero__thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* Staggered entrance for thumbnails */
.hero__thumbnail--1 { transition-delay: 0ms; }
.hero__thumbnail--2 { transition-delay: 100ms; }
.hero__thumbnail--3 { transition-delay: 200ms; }
.hero__thumbnail--4 { transition-delay: 300ms; }

/* ============================================
   DEMO ARROW ANIMATION
   ============================================ */

.demo-arrow {
    animation: demo-arrow-pulse 2s ease-in-out infinite;
}

@keyframes demo-arrow-pulse {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(8px);
        opacity: 0.6;
    }
}

/* ============================================
   REDUCED MOTION
   Respect user preferences for reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-animate] {
        opacity: 1;
        transform: none;
    }

    .hero__float {
        animation: none;
    }

    .marquee__track {
        animation: none;
    }

    .hero__prompt-cursor {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

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

/* Page load animation */
body.is-loading {
    overflow: hidden;
}

body.is-loading * {
    animation-play-state: paused !important;
}

/* Content reveal after load */
body:not(.is-loading) .hero__content,
body:not(.is-loading) .hero__visual {
    animation: content-reveal 0.8s ease-out forwards;
}

@keyframes content-reveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   HOVER STATES FOR TOUCH DEVICES
   ============================================ */

@media (hover: none) {
    .btn:hover,
    .step:hover,
    .feature:hover,
    .social-link:hover {
        transform: none;
    }

    .btn--primary:hover::before {
        left: -100%;
    }
}