/* Chaos - Animations, Tilts, Hover Effects */

/* Tilt Classes */
.chaos-tilt-slight {
    transform: rotate(-2deg);
}

.chaos-tilt-medium {
    transform: rotate(3deg);
}

.chaos-tilt-heavy {
    transform: rotate(-5deg);
}

.chaos-tilt-left-slight {
    transform: rotate(-3deg);
}

.chaos-tilt-right-slight {
    transform: rotate(2deg);
}

.chaos-tilt-left-medium {
    transform: rotate(-4deg);
}

.chaos-tilt-right-medium {
    transform: rotate(4deg);
}

/* Random Tilts for Review Cards */
.review-card:nth-child(3n+1) {
    transform: rotate(-2deg);
}

.review-card:nth-child(3n+2) {
    transform: rotate(1.5deg);
}

.review-card:nth-child(3n+3) {
    transform: rotate(-1deg);
}

/* Hover Effects */

/* 1. Wobbly Grow - Buttons */
.wobbly-grow {
    transition: transform 0.3s ease;
}

.wobbly-grow:hover {
    animation: wobble 0.5s ease;
    transform: scale(1.05);
}

@keyframes wobble {
    0%, 100% { transform: scale(1.05) rotate(0deg); }
    25% { transform: scale(1.05) rotate(2deg); }
    50% { transform: scale(1.05) rotate(-2deg); }
    75% { transform: scale(1.05) rotate(1deg); }
}

/* 2. Jiggle Text - CTA Text */
.jiggle-text:hover {
    animation: jiggle 0.4s ease;
}

@keyframes jiggle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

/* 3. Bounce Scale - Icons */
.bounce-scale {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-scale:hover {
    transform: scale(1.2);
}

/* 4. Spin Tilt - Images */
.spin-tilt {
    transition: transform 0.6s ease;
}

.spin-tilt:hover {
    transform: rotate(360deg) scale(1.1);
}

/* 5. Wobble Image */
.wobble-hover {
    transition: transform 0.3s ease;
}

.wobble-hover:hover {
    animation: wobbleImage 0.6s ease;
}

@keyframes wobbleImage {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
    75% { transform: rotate(-2deg); }
}

/* Turkey Animation - Diagonal Flight */
.turkey-diagonal {
    position: absolute;
    width: 250px;
    animation: flyDiagonal 12s linear infinite;
}

@keyframes flyDiagonal {
    /* Pass 1: left to right */
    0%      { left: -500px; top: 40%; transform: rotate(0deg); }
    24.9%   { left: 110%;   top: 30%; transform: rotate(360deg); }
    /* Pass 2: top to bottom */
    25%     { left: 30%;  top: -500px; transform: rotate(360deg); }
    49.9%   { left: 60%;  top: 110%;   transform: rotate(720deg); }
    /* Pass 3: right to left */
    50%     { left: 110%;  top: 60%; transform: rotate(720deg); }
    74.9%   { left: -500px; top: 50%; transform: rotate(1080deg); }
    /* Pass 4: bottom to top */
    75%     { left: 55%; top: 110%;   transform: rotate(1080deg); }
    100%    { left: 25%; top: -500px; transform: rotate(1440deg); }
}

/* Turkey 2 - opposite directions, spins the other way */
@keyframes flyReverse {
    /* Pass 1: right to left */
    0%      { left: 110%;   top: 25%; transform: rotate(0deg); }
    24.9%   { left: -500px; top: 35%; transform: rotate(-360deg); }
    /* Pass 2: bottom to top */
    25%     { left: 65%; top: 110%;   transform: rotate(-360deg); }
    49.9%   { left: 35%; top: -500px; transform: rotate(-720deg); }
    /* Pass 3: left to right */
    50%     { left: -500px; top: 65%; transform: rotate(-720deg); }
    74.9%   { left: 110%;   top: 55%; transform: rotate(-1080deg); }
    /* Pass 4: top to bottom */
    75%     { left: 40%;  top: -500px; transform: rotate(-1080deg); }
    100%    { left: 70%;  top: 110%;   transform: rotate(-1440deg); }
}

/* Vertical Flight - Bottom to Top */
@keyframes flyVertical {
    0% {
        left: 60%;
        top: 110%;
        transform: rotate(-60deg);
    }
    100% {
        left: 20%;
        top: -300px;
        transform: rotate(-60deg);
    }
}

/* Floating Toast Animation - 4 passes, in one side out the other, no gaps */
@keyframes floatToast {
    /* Pass 1: left to right, high */
    0%      { left: -220px; top: 20%; transform: rotate(-10deg); }
    24.9%   { left: calc(100% + 220px); top: 15%; transform: rotate(10deg); }

    /* Pass 2: right to left, low */
    25%     { left: calc(100% + 220px); top: 75%; transform: rotate(8deg); }
    49.9%   { left: -220px; top: 70%; transform: rotate(-12deg); }

    /* Pass 3: left to right, diagonal drop */
    50%     { left: -220px; top: 10%; transform: rotate(-15deg); }
    74.9%   { left: calc(100% + 220px); top: 80%; transform: rotate(15deg); }

    /* Pass 4: right to left, mid */
    75%     { left: calc(100% + 220px); top: 40%; transform: rotate(12deg); }
    100%    { left: -220px; top: 45%; transform: rotate(-8deg); }
}

/* Sliding Background Animation */
@keyframes slideBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 70px 70px;
    }
}

/* Scroll-Triggered Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Section Entrance Wobble */
.entrance-wobble {
    animation: entranceWobble 0.8s ease;
}

@keyframes entranceWobble {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    60% {
        transform: scale(1.05) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Hand-Drawn Arrow SVG Animation */
.arrow-bounce {
    animation: arrowBounce 1.5s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-10px) rotate(-5deg);
    }
}

/* Confetti Trigger Icon */
.confetti-icon {
    display: inline-block;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.confetti-icon:hover {
    transform: scale(1.3) rotate(15deg);
}

.confetti-icon:active {
    animation: pop 0.3s ease;
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Cursor Trail Dot */
.cursor-dot {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: fadeDot 1s ease-out forwards;
}

@keyframes fadeDot {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* Scattered Images Layout */
.scattered-images {
    position: relative;
    min-height: 600px;
    padding: 2rem;
}

.scattered-images img {
    position: absolute;
    max-width: 300px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.scattered-images img:nth-child(1) {
    top: 0;
    left: 5%;
    transform: rotate(-4deg);
    z-index: 1;
}

.scattered-images img:nth-child(2) {
    top: 20%;
    right: 10%;
    transform: rotate(3deg);
    z-index: 2;
}

.scattered-images img:nth-child(3) {
    bottom: 10%;
    left: 15%;
    transform: rotate(-2deg);
    z-index: 3;
}

/* Colored Text Boxes */
.text-box {
    background: rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    max-width: 500px;
}

.text-box.offset {
    transform: translateX(20px);
}

/* Responsive Chaos Adjustments */
@media (max-width: 1024px) {
    /* Moderate chaos for tablets */
    .chaos-tilt-heavy {
        transform: rotate(-3deg);
    }

    .chaos-tilt-medium {
        transform: rotate(2deg);
    }

    .turkey-diagonal {
        width: 200px;
    }

    .scattered-images {
        min-height: 500px;
    }

    .scattered-images img {
        max-width: 250px;
    }
}

@media (max-width: 768px) {
    /* Simplified chaos for mobile */
    .chaos-tilt-heavy,
    .chaos-tilt-medium,
    .chaos-tilt-slight {
        transform: rotate(0deg) !important;
    }

    .chaos-tilt-left-slight,
    .chaos-tilt-right-slight,
    .chaos-tilt-left-medium,
    .chaos-tilt-right-medium {
        transform: rotate(0deg) !important;
    }

    .turkey-diagonal {
        width: 150px;
    }

    .scattered-images {
        position: static;
        min-height: auto;
    }

    .scattered-images img {
        position: static;
        transform: none !important;
        max-width: 100%;
        margin: 1rem 0;
    }

    /* Disable cursor trail on mobile */
    .cursor-dot {
        display: none;
    }

    /* Reduce animation complexity */
    .spin-tilt:hover {
        transform: rotate(10deg) scale(1.05);
    }

    /* Make polaroid images responsive */
    .polaroid {
        max-width: 100%;
        padding: 0.75rem 0.75rem 2rem;
    }

    .polaroid img {
        max-width: 100%;
        height: auto;
    }

}

@media (max-width: 480px) {
    /* Further constrain on small mobile */
    section {
        overflow-x: hidden !important;
    }

}

@media (max-width: 480px) {
    .turkey-diagonal {
        width: 120px;
    }
}

/* Respect Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .chaos-tilt-slight,
    .chaos-tilt-medium,
    .chaos-tilt-heavy,
    .chaos-tilt-left-slight,
    .chaos-tilt-right-slight,
    .chaos-tilt-left-medium,
    .chaos-tilt-right-medium {
        transform: none !important;
    }

    .wobbly-grow:hover,
    .jiggle-text:hover,
    .bounce-scale:hover,
    .spin-tilt:hover,
    .wobble-hover:hover {
        animation: none !important;
        transform: none !important;
    }

    .turkey-diagonal {
        animation: none !important;
        position: static !important;
    }

    .fade-in-up {
        opacity: 1 !important;
        transform: none !important;
    }

    .cursor-dot {
        display: none !important;
    }
}