/* ═══════════════════════════════════════════════════════
   Năsucul Vesel — Custom Styles
   Brand: Orange #DB7419 + Navy #23406E + Cream #FDFBF7 + Ink #1A1A2E
   ═══════════════════════════════════════════════════════ */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fraunces stylistic settings for warmth */
.font-heading {
    font-feature-settings: "ss01", "ss02";
    font-optical-sizing: auto;
    letter-spacing: -0.015em;
}

/* Reduced motion: disable all animations & transitions */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fab-pulse::before,
    .fab-pulse::after { display: none !important; }
}

/* Focus rings — brand orange on keyboard only */
*:focus-visible {
    outline: 3px solid #DB7419;
    outline-offset: 2px;
    border-radius: 6px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 3px;
}
*:focus:not(:focus-visible) {
    outline: none;
}

/* Navbar scroll shadow */
#main-navbar.scrolled {
    box-shadow: 0 1px 0 rgba(26, 26, 46, 0.08),
                0 8px 24px rgba(26, 26, 46, 0.06);
    background: rgba(253, 251, 247, 0.94);
}

/* Hero warm background */
.hero-bg {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(219, 116, 25, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(35, 64, 110, 0.10) 0%, transparent 60%),
        #FDFBF7;
}

/* Paw-print decorative background */
.paw-bg {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(219, 116, 25, 0.08) 0%, transparent 1%),
        radial-gradient(circle at 70% 60%, rgba(35, 64, 110, 0.06) 0%, transparent 1%);
    background-size: 60px 60px, 80px 80px;
}

/* Number counter — tabular nums prevent jitter */
.counter-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* WhatsApp pulse ring */
.fab-pulse {
    position: fixed;
}
.fab-pulse::before,
.fab-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: pulse-ring 2.5s ease-out infinite;
}
.fab-pulse::after {
    animation-delay: 1.25s;
}

@keyframes pulse-ring {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Floating cards gentle hover */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* Shimmer for loading states */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Card hover lift */
.card-lift {
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 300ms ease;
}
.card-lift:hover {
    transform: translateY(-6px);
}

/* FAQ accordion polish */
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }

/* Prose overrides for legal pages */
.prose-vet {
    color: #1A1A2E;
    max-width: 65ch;
    line-height: 1.75;
}
.prose-vet h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A1A2E;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.015em;
}
.prose-vet h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1A1A2E;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}
.prose-vet p { margin-bottom: 1rem; color: #56566E; }
.prose-vet ul { margin: 1rem 0 1.25rem 1.5rem; list-style: disc; }
.prose-vet li { margin-bottom: 0.5rem; color: #56566E; }
.prose-vet a { color: #DB7419; text-decoration: underline; }
.prose-vet a:hover { color: #B85F12; }

/* Form field polish */
.form-field {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1.5px solid #E8E0D2;
    border-radius: 0.75rem;
    background: white;
    color: #1A1A2E;
    font-size: 0.95rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.form-field:focus {
    outline: none;
    border-color: #DB7419;
    box-shadow: 0 0 0 4px rgba(219, 116, 25, 0.12);
}
.form-field::placeholder { color: #94A3B8; }
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1A1A2E;
    margin-bottom: 0.5rem;
}
.form-label .req { color: #DB7419; }

/* Hide scrollbar on pill rows */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; }

/* Selection highlight */
::selection {
    background: rgba(219, 116, 25, 0.25);
    color: #1A1A2E;
}

/* Decorative dot grid */
.dot-grid {
    background-image: radial-gradient(circle, rgba(219, 116, 25, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Image frames — gentle warm border */
.img-frame {
    border: 4px solid #FDFBF7;
    box-shadow: 0 4px 6px rgba(26, 26, 46, 0.05), 0 24px 48px rgba(219, 116, 25, 0.14);
}

/* ═══════════════════════════════════════════════════════
   Hero 3D Scene — SVG cartoon with CSS animations + parallax
   ═══════════════════════════════════════════════════════ */
.hero-3d-section {
    min-height: 85vh;
}
@media (min-width: 1024px) {
    .hero-3d-section { min-height: 78vh; }
}

.hero-3d-scene {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    filter: drop-shadow(0 30px 40px rgba(219, 116, 25, 0.15));
}

.hero-3d-scene svg {
    display: block;
    overflow: visible;
}

.hero-3d-logo {
    position: absolute;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    width: 58%;
    max-width: 220px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(26, 26, 46, 0.12));
}

/* Parallax layers — smooth follow */
.hero-3d-scene .layer {
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-box: fill-box;
}

/* Dog breathing */
.dog-character {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: breathe 4.5s ease-in-out infinite;
}

/* Cat breathing — slightly offset so they don't sync */
.cat-character {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: breathe 4s ease-in-out infinite -1.2s;
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

/* Blink */
.dog-eye, .cat-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: blink 5.5s infinite;
}
.cat-eye  { animation-duration: 6.5s; animation-delay: 1.5s; }
.cat-eye-right { animation-delay: 1.6s; }
.dog-eye-right { animation-delay: 0.1s; }

@keyframes blink {
    0%, 44%, 49%, 100% { transform: scaleY(1); }
    46%                { transform: scaleY(0.08); }
}

/* Dog tail wag */
.dog-tail-group {
    transform-box: fill-box;
    transform-origin: 65px 85px;
    animation: dogWag 0.9s ease-in-out infinite;
}

@keyframes dogWag {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(18deg); }
}

/* Dog ears — subtle flop */
.dog-ear-left, .dog-ear-right {
    transform-box: fill-box;
    transform-origin: top center;
    animation: earFlop 3.2s ease-in-out infinite;
}
.dog-ear-right { animation-delay: -1.6s; }

@keyframes earFlop {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-3deg); }
}

/* Cat tail slow curl */
.cat-tail {
    transform-box: fill-box;
    transform-origin: 50px 80px;
    animation: catTail 4s ease-in-out infinite;
}

@keyframes catTail {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-6deg); }
}

/* Sparkles — floating hearts */
.sparkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: sparkleFloat 4s ease-in-out infinite;
}
.sparkle-1 { animation-delay: 0s;   animation-duration: 4.2s; }
.sparkle-2 { animation-delay: 1.1s; animation-duration: 3.8s; }
.sparkle-3 { animation-delay: 2.3s; animation-duration: 4.6s; }
.sparkle-4 { animation-delay: 0.6s; animation-duration: 5.0s; }

@keyframes sparkleFloat {
    0%, 100% { transform: translateY(0) scale(1);    opacity: 0.5; }
    50%      { transform: translateY(-14px) scale(1.15); opacity: 1; }
}

/* Reduced motion — disable decorative SVG animations */
@media (prefers-reduced-motion: reduce) {
    .dog-character,
    .cat-character,
    .dog-eye,
    .cat-eye,
    .dog-tail-group,
    .dog-ear-left,
    .dog-ear-right,
    .cat-tail,
    .sparkle {
        animation: none !important;
    }
    .hero-3d-scene .layer { transition: none !important; }
}