/* ============================================================================
 * 2A Construction — Micro-interactions layer (mirrors Vercel parity)
 *
 * Loaded by orchestrator after style.css. Owns:
 *   1. Submit button 3-state machine (idle / submitting / success)
 *   2. Toast notifications (top-right slide-in)
 *   3. Form field staggered reveal
 *   4. Gallery overlay polish
 *   5. Testimonial thumb + main-video swap transitions
 *   6. Video click-to-play overlay
 *   7. Header scroll polish (additive)
 *   8. Smooth scroll
 *   9. Cost-estimator polish (results stagger, error shake)
 *  10. Service-request-form toast hook (no DOM changes required there)
 * ============================================================================ */

/* ===========================================================
 * 0. SHARED KEYFRAMES
 * =========================================================== */
@keyframes twoa-spin {
    to { transform: rotate(360deg); }
}
@keyframes twoa-toast-in {
    from { opacity: 0; transform: translateX(24px) translateY(-8px); }
    to   { opacity: 1; transform: translateX(0)    translateY(0); }
}
@keyframes twoa-toast-out {
    to { opacity: 0; transform: translateX(24px); }
}
@keyframes twoa-input-reveal {
    0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes twoa-success-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes twoa-checkmark-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes twoa-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80%      { transform: translateX( 4px); }
}
@keyframes twoa-result-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes twoa-fade-out {
    to { opacity: 0; }
}
@keyframes twoa-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===========================================================
 * 1. SUBMIT BUTTON — IDLE / SUBMITTING / SUCCESS
 * Mirrors Vercel EstimateForm.tsx three states.
 * =========================================================== */
.btn-submit-premium {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-submit-premium > span,
.btn-submit-premium > svg {
    position: relative;
    z-index: 2;
}
/* gradient sweep on hover (idle only) */
.btn-submit-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.28) 50%,
        transparent 100%);
    background-size: 200% 100%;
    background-position: -200% center;
    transition: background-position 0.6s ease;
    pointer-events: none;
    z-index: 1;
}
.btn-submit-premium:hover::before {
    background-position: 200% center;
}
/* arrow icon slides on hover (matches group-hover:translate-x-1 in Vercel) */
.btn-submit-premium:not(.is-submitting):not(.is-success) svg {
    transition: transform 0.25s var(--ease-out-cubic, cubic-bezier(0.22,1,0.36,1));
}
.btn-submit-premium:not(.is-submitting):not(.is-success):hover svg {
    transform: translateX(4px);
}

/* ----- SUBMITTING state ----- */
.btn-submit-premium.is-submitting {
    background: linear-gradient(to right,
        rgba(235,93,29,0.85),
        rgba(201,74,16,0.85));
    cursor: wait;
    pointer-events: none;
}
.btn-submit-premium.is-submitting::before { display: none; }
.btn-submit-premium__spinner {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: twoa-spin 0.8s linear infinite;
    vertical-align: -3px;
    margin-right: 0.5rem;
}

/* ----- SUCCESS state ----- */
.btn-submit-premium.is-success {
    background: linear-gradient(to right, #22c55e, #16a34a) !important;
    box-shadow: 0 10px 24px rgba(34,197,94,0.30);
    animation: twoa-success-pop 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-submit-premium.is-success::before { display: none; }
.btn-submit-premium__check {
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: -3px;
    margin-right: 0.5rem;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.btn-submit-premium__check path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: twoa-checkmark-draw 0.45s ease-out 0.15s forwards;
}

/* ===========================================================
 * 2. TOAST NOTIFICATIONS (top-right slide-in)
 * Container is created once by JS (window.twoa.toast.show).
 * =========================================================== */
.twoa-toast-host {
    position: fixed;
    top: calc(var(--twoa-topbar-h, 40px) + 1rem);
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}
.twoa-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 280px;
    max-width: 420px;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    color: #fff;
    font-family: var(--twoa-font-body, system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 14px 30px rgba(0,0,0,0.18),
                0 4px 8px  rgba(0,0,0,0.10);
    animation: twoa-toast-in 0.32s cubic-bezier(0.34,1.56,0.64,1);
    will-change: transform, opacity;
}
.twoa-toast.is-exiting {
    animation: twoa-toast-out 0.28s ease-in forwards;
}
.twoa-toast--success { background: linear-gradient(135deg, #16a34a, #15803d); }
.twoa-toast--error   { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.twoa-toast--info    { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.twoa-toast__icon {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 1px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.twoa-toast__msg {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0.25rem;
}
.twoa-toast__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.85);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.twoa-toast__close:hover {
    background: rgba(255,255,255,0.20);
    color: #fff;
}
@media (max-width: 480px) {
    .twoa-toast-host { left: 1rem; right: 1rem; align-items: stretch; }
    .twoa-toast { min-width: 0; max-width: 100%; }
}

/* ===========================================================
 * 3. FORM FIELD STAGGERED REVEAL
 * Wired via data-stagger="1..6" on .form-field elements (added by JS).
 * Fields default to fully visible — the .is-revealed-staggered class
 * only adds a polish animation. Critical: if JS / IO observer never
 * fires (no-JS, blocked, observer didn't catch initial paint) the
 * form must still be USABLE. Never hide form inputs behind JS.
 * =========================================================== */
.estimate-card.is-revealed-staggered [data-stagger],
.twoa-service-form.is-revealed-staggered [data-stagger] {
    animation: twoa-input-reveal 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}
.is-revealed-staggered [data-stagger="1"] { animation-delay: 80ms;  }
.is-revealed-staggered [data-stagger="2"] { animation-delay: 160ms; }
.is-revealed-staggered [data-stagger="3"] { animation-delay: 240ms; }
.is-revealed-staggered [data-stagger="4"] { animation-delay: 320ms; }
.is-revealed-staggered [data-stagger="5"] { animation-delay: 400ms; }
.is-revealed-staggered [data-stagger="6"] { animation-delay: 480ms; }

/* ===========================================================
 * 4. GALLERY OVERLAY POLISH
 * Existing rule in style.css handles opacity 0 → 1; add lift + color text.
 * =========================================================== */
.gallery-item__overlay {
    color: #fff;
    font-family: var(--twoa-font-display, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-within .gallery-item__overlay {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================================
 * 5. TESTIMONIAL THUMB + MAIN VIDEO SWAP
 * JS adds .is-swapping for 220ms while source is reloaded.
 * =========================================================== */
.testimonial-player__video {
    transition: opacity 0.22s ease;
}
.testimonial-player.is-swapping .testimonial-player__video {
    opacity: 0;
}
.testimonial-thumb {
    transition: transform 0.25s var(--ease-out-cubic, cubic-bezier(0.22,1,0.36,1)),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}
/* Lane 14 #4 — `.testimonial-thumb.is-active` lives in style.css:2077-2081
   (canonical, matches Vercel scale(1.02) + 0 8px 24px rgba(.,.25)).
   Duplicate removed here to prevent specificity ties + value drift. */

/* ===========================================================
 * 6. VIDEO CLICK-TO-PLAY OVERLAY
 * JS wraps any native <video> (without autoplay) in .twoa-video-wrap
 * and injects .twoa-video-play. Overlay hides while playing.
 * =========================================================== */
.twoa-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
.twoa-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%);
    cursor: pointer;
    transition: opacity 0.25s ease, background-color 0.25s ease;
    z-index: 2;
    border: 0;
    padding: 0;
}
.twoa-video-play:hover {
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%);
}
.twoa-video-play__circle {
    width: clamp(64px, 8vw, 92px);
    height: clamp(64px, 8vw, 92px);
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--twoa-orange, #eb5d1d),
        var(--twoa-orange-dark, #c94a10));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(235,93,29,0.40),
                0 0 0 6px rgba(255,255,255,0.10);
    transition: transform 0.25s var(--ease-out-cubic, cubic-bezier(0.22,1,0.36,1)),
                box-shadow 0.25s ease;
}
.twoa-video-play:hover .twoa-video-play__circle {
    transform: scale(1.06);
    box-shadow: 0 16px 36px rgba(235,93,29,0.50),
                0 0 0 8px rgba(255,255,255,0.14);
}
.twoa-video-play__circle svg {
    width: 36%;
    height: 36%;
    margin-left: 4px;
    fill: currentColor;
}
.twoa-video-wrap.is-playing .twoa-video-play {
    opacity: 0;
    pointer-events: none;
}
.twoa-video-wrap.is-playing .twoa-video-play:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ===========================================================
 * 7. HEADER SCROLL — additive (style.css already adds shadow)
 * =========================================================== */
.site-header {
    transition: box-shadow 0.3s ease,
                background-color 0.3s ease,
                backdrop-filter 0.3s ease;
}
.site-header.is-scrolled {
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    background-color: rgba(255,255,255,0.92);
}
.dark .site-header.is-scrolled,
html.dark .site-header.is-scrolled,
body.dark .site-header.is-scrolled {
    background-color: rgba(26,26,26,0.92);
}

/* ===========================================================
 * 8. SMOOTH SCROLL
 * =========================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ===========================================================
 * 9. COST-ESTIMATOR POLISH (overrides inline style in partial)
 * - Stagger-fade result cards when results become visible
 * - Shake + slide-in error message
 * =========================================================== */
.twoa-cost-estimator__error[style*="block"],
.twoa-cost-estimator__error.is-visible {
    animation: twoa-shake 0.45s ease-out;
}
.twoa-cost-estimator__results.is-visible .twoa-cost-result {
    opacity: 0;
    animation: twoa-result-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.twoa-cost-estimator__results.is-visible .twoa-cost-result:nth-child(1) { animation-delay: 60ms;  }
.twoa-cost-estimator__results.is-visible .twoa-cost-result:nth-child(2) { animation-delay: 140ms; }
.twoa-cost-estimator__results.is-visible .twoa-cost-result:nth-child(3) { animation-delay: 220ms; }
.twoa-cost-estimator__results.is-visible .twoa-cost-result:nth-child(4) { animation-delay: 300ms; }
.twoa-cost-result__price {
    transition: color 0.25s ease;
}
.twoa-cost-result:hover {
    transform: translateY(-2px);
    transition: transform 0.25s var(--ease-out-cubic, cubic-bezier(0.22,1,0.36,1));
}

/* ===========================================================
 * 10. SERVICE-REQUEST-FORM — status sliding feedback
 * (Inline script in partial sets data-state; we polish.)
 * =========================================================== */
.twoa-service-form__status[data-state] {
    animation: twoa-fade-in 0.3s ease-out;
}