/* =====================================================
   GOLDEN YOLK FARMS — ANIMATIONS & EYE CANDY
   ===================================================== */

/* ── Page load fade in ── */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

body {
    animation: pageFadeIn 0.5s ease both;
}

/* ── Keyframes library ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}

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

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(249,115,22,0.4); }
    70%  { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
    100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}

@keyframes spinIn {
    from { opacity: 0; transform: rotate(-15deg) scale(0.8); }
    to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes typewriter {
    from { width: 0; }
    to   { width: 100%; }
}

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

/* ── Scroll-reveal base class ──
   JS adds .visible when element enters viewport */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
                transform 0.65s cubic-bezier(0.22,1,0.36,1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
                transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
                transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger delays for children */
.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.15s; }
.stagger > *:nth-child(3) { transition-delay: 0.25s; }
.stagger > *:nth-child(4) { transition-delay: 0.35s; }
.stagger > *:nth-child(5) { transition-delay: 0.45s; }
.stagger > *:nth-child(6) { transition-delay: 0.55s; }

/* ── Hero entrance animations ── */
.hero__badge   { animation: fadeDown 0.7s 0.1s cubic-bezier(0.22,1,0.36,1) both; }
.hero h1       { animation: fadeUp  0.8s 0.25s cubic-bezier(0.22,1,0.36,1) both; }
.hero p        { animation: fadeUp  0.8s 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.hero__actions { animation: fadeUp  0.8s 0.55s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Animated gradient hero overlay ── */
.hero__overlay {
    background-size: 300% 300%;
    animation: gradientShift 10s ease infinite;
}

/* ── Nav slide down ── */
.nav {
    animation: fadeDown 0.5s ease both;
}

/* Nav links hover underline slide — desktop only */
@media (min-width: 681px) {
    .nav__links a {
        position: relative;
    }
    .nav__links a::after {
        content: '';
        position: absolute;
        bottom: 4px;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--gold);
        transition: width 0.25s ease, left 0.25s ease;
        border-radius: 2px;
    }
    .nav__links a:hover::after,
    .nav__links a.active::after {
        width: calc(100% - 2rem);
        left: 1rem;
    }
}

/* ── Floating logo icon — desktop only ── */
@media (min-width: 681px) {
    .nav__logo-img {
        animation: float 4s ease-in-out infinite;
    }
}

/* ── Pricing cards ── */
.pricing__card {
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.3s ease;
    cursor: default;
}

.pricing__card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 40px rgba(249,115,22,0.25);
}

.pricing__card--featured:hover {
    box-shadow: 0 16px 40px rgba(251,191,36,0.3);
}

/* Shimmer on pricing price */
.pricing__price {
    position: relative;
    display: inline-block;
}

/* ── Why us icons bounce on hover ── */
.why__item {
    transition: transform 0.3s ease;
    border-radius: var(--radius);
}
.why__item:hover { transform: translateY(-6px); }

.why__icon {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.why__item:hover .why__icon { transform: scale(1.3) rotate(8deg); }

/* ── Buttons ── */
.btn {
    position: relative;
    overflow: hidden;
}

/* Ripple layer */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    opacity: 0;
    transition: opacity 0.2s;
}
.btn:hover::after { opacity: 1; }

/* Pulse on primary CTA — desktop only to avoid mobile layout shift */
@media (min-width: 681px) {
    .btn--primary {
        animation: pulse-ring 2.5s ease-out infinite;
    }
    .btn--primary:hover { animation: none; }
}

/* ── Cards generic hover ── */
.card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
    box-shadow: 0 8px 32px rgba(249,115,22,0.18);
}

/* ── Contact cards ── */
.contact-card {
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.3s ease;
}
.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(249,115,22,0.2);
}

.contact-card__icon {
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.contact-card:hover .contact-card__icon {
    transform: scale(1.2) rotate(-5deg);
}

/* ── Egg cards on order page ── */
.egg-card {
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
}
.egg-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(249,115,22,0.12);
}

/* ── Qty buttons spin bounce ── */
.qty-control button {
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
                background 0.2s ease;
}
.qty-control button:active {
    transform: scale(0.85);
}

/* ── Stock cards admin ── */
.stock-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stock-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(249,115,22,0.2);
}

/* ── Stat cards ── */
.stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(249,115,22,0.18);
}

/* ── Table rows ── */
tbody tr {
    transition: background 0.15s ease;
}

/* ── Footer link hover ── */
.footer a {
    transition: color 0.2s ease;
    position: relative;
}

/* ── CTA banner animated background ── */
.cta-banner {
    background: linear-gradient(135deg, var(--orange) 0%, #E8580A 50%, var(--orange-dark) 100%);
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}

/* ── Address suggestion items ── */
.address-suggestion-item {
    transition: background 0.15s ease, padding-left 0.15s ease;
}
.address-suggestion-item:hover { padding-left: 1.2rem; }

/* ── Popup animation ── */
@keyframes popIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    70%  { transform: translate(-50%, -50%) scale(1.03); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.popup-box.show {
    animation: popIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.popup-overlay.show {
    animation: overlayIn 0.25s ease both;
}

/* ── Input focus glow ── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── Section title ── */
.section-title {
    position: relative;
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange-dark); }

/* ── Confetti pieces ── */
@keyframes confettiFall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    80%  { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(var(--fall-y)) translateX(var(--drift-x)) rotate(var(--spin)) scale(0.5); }
}
.confetti-piece {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 2px;
    animation: confettiFall var(--fall-dur) cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* ── Add-Tray button glow burst ── */
@keyframes trayGlow {
    0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
    30%  { box-shadow: 0 0 0 10px rgba(251,191,36,0.5), 0 0 24px 6px rgba(249,115,22,0.35); }
    100% { box-shadow: 0 0 0 18px rgba(251,191,36,0); }
}
.btn--add-tray-pop {
    animation: trayGlow 0.55s cubic-bezier(0.22,1,0.36,1) both;
    cursor: url('/static/egg-crack-cursor.svg') 13 15, pointer !important;
}

/* Floating egg particle */
@keyframes eggFloat {
    0%   { opacity: 1; transform: translateY(0) scale(1) rotate(-8deg); }
    60%  { opacity: 0.85; transform: translateY(-52px) scale(0.9) rotate(6deg); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.6) rotate(20deg); }
}
.egg-particle {
    position: fixed;
    pointer-events: none;
    font-size: 1.3rem;
    z-index: 9999;
    animation: eggFloat 0.75s cubic-bezier(0.22,1,0.36,1) forwards;
    filter: drop-shadow(0 0 4px rgba(251,191,36,0.7));
}

/* Cart icon bump */
@keyframes cartBump {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.35) rotate(-12deg); }
    60%  { transform: scale(1.15) rotate(6deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.cart-bump { animation: cartBump 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Counter smooth update */
@keyframes countPop {
    0%   { transform: scale(1); color: var(--dark); }
    40%  { transform: scale(1.5); color: var(--gold); }
    100% { transform: scale(1); color: var(--dark); }
}
.qty-pop { animation: countPop 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Qty button — crack cursor on hover */
.qty-control button:hover {
    cursor: url('/static/egg-crack-cursor.svg') 13 15, pointer;
}

/* ── Hero background blur ── */
.hero__bg-img {
    filter: blur(0px);
    transition: filter 0.6s ease, transform 8s ease;
}
.hero:not(:hover) .hero__bg-img {
    filter: blur(2px);
}

/* ── Mobile: reduce motion for battery/preference ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Mobile tweaks ── */
@media (max-width: 680px) {
    /* Faster hero stagger on small screens */
    .hero__badge   { animation-delay: 0.05s; }
    .hero h1       { animation-delay: 0.12s; }
    .hero p        { animation-delay: 0.2s; }
    .hero__actions { animation-delay: 0.28s; }

    /* No hover transforms on touch — prevents sticky hover state */
    .pricing__card:hover,
    .why__item:hover,
    .contact-card:hover,
    .egg-card:hover,
    .stock-card:hover,
    .stat-card:hover,
    .card:hover         { transform: none; box-shadow: var(--shadow); }

    /* No hover icon transforms on touch */
    .why__item:hover .why__icon,
    .contact-card:hover .contact-card__icon { transform: none; }

    /* Keep nav underline off on mobile — it causes overflow */
    .nav__links a::after { display: none; }

    /* Gradient animation is fine but keep it subtle */
    .hero { background-size: 200% 200%; }

    /* Reveal elements should animate faster on mobile */
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        transition-duration: 0.45s;
    }

    /* Popup fits small screens */
    .popup-box {
        width: 92%;
        padding: 1.75rem 1.25rem;
    }

    /* Btn ripple can cause overflow on mobile — contain it */
    .btn { overflow: hidden; }
}