/* =============================================================
   PET ART · styles-extra.css
   EXACT 1:1 port from tattoos.xoxstudio.net styles-extra.css
   ============================================================= */

/* =====================================================================
   SPOTLIGHT SCROLL — V10
   Sections out of viewport: 0.15 opacity, blur 5px, scale 0.985
   Sections in viewport: fully lit. Hero NEVER dims.
   ===================================================================== */
.spot {
  opacity: 0.15;
  filter: blur(5px) saturate(0.7);
  transform: scale(0.985);
  transition:
    opacity 0.6s var(--ease),
    filter 0.6s var(--ease),
    transform 0.6s var(--ease);
  will-change: opacity, filter, transform;
}
.spot.spot-in {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
}

/* Hero is always lit */
#hero.spot,
#hero.spot:not(.spot-in) {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Stagger children inside containers */
.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.stagger.spot-in > *:nth-child(1)    { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.stagger.spot-in > *:nth-child(2)    { transition-delay: 0.14s; opacity: 1; transform: translateY(0); }
.stagger.spot-in > *:nth-child(3)    { transition-delay: 0.23s; opacity: 1; transform: translateY(0); }
.stagger.spot-in > *:nth-child(4)    { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
.stagger.spot-in > *:nth-child(5)    { transition-delay: 0.41s; opacity: 1; transform: translateY(0); }
.stagger.spot-in > *:nth-child(6)    { transition-delay: 0.50s; opacity: 1; transform: translateY(0); }
.stagger.spot-in > *:nth-child(n+7)  { transition-delay: 0.59s; opacity: 1; transform: translateY(0); }

/* =====================================================================
   HOME CARDS — breathing + glow + border pulse
   ===================================================================== */
.home-card {
  animation: cardBreath 4.2s ease-in-out infinite, cardBorderPulse 4.2s ease-in-out infinite;
  will-change: transform, box-shadow, border-color;
}
.home-card:nth-child(2) { animation-delay: 0.6s; }

/* Glow overlay */
.home-card::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(420px 200px at 50% 100%, rgba(193,18,31,0.22), transparent 70%);
  opacity: 0;
  animation: cardGlow 4.2s ease-in-out infinite;
  z-index: 0;
}
.home-card:nth-child(2)::after { animation-delay: 0.6s; }

@keyframes cardBreath {
  0%, 100% { transform: translateY(0) scale(1);     box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
  50%      { transform: translateY(-8px) scale(1.018); box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 28px rgba(193,18,31,0.18); }
}
@keyframes cardBorderPulse {
  0%, 100% { border-color: var(--line-2); }
  50%      { border-color: rgba(193,18,31,0.5); }
}
@keyframes cardGlow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* =====================================================================
   ICON CONTACTS — idle auto-pulse (no hover required) + hover specials
   ===================================================================== */

/* Bubbles auto-pulse on mobile — staggered */
.icon-contact .icon-bubble {
  animation: iconIdle 4s ease-in-out infinite;
}
.icon-contact[data-icon="whatsapp"]  .icon-bubble { animation-delay: 0.0s; }
.icon-contact[data-icon="instagram"] .icon-bubble { animation-delay: 0.6s; }
.icon-contact[data-icon="email"]     .icon-bubble { animation-delay: 1.2s; }
.icon-contact[data-icon="portfolio"] .icon-bubble { animation-delay: 1.8s; }
@keyframes iconIdle {
  0%, 100% { transform: translateY(0)    scale(1);    border-color: var(--line-2); }
  50%      { transform: translateY(-3px) scale(1.02); border-color: rgba(193,18,31,0.45); box-shadow: 0 10px 22px -14px rgba(193,18,31,0.45); }
}

/* SVG icons idle wobble — staggered */
.icon-contact .icon-bubble svg {
  animation: svgIdle 5s ease-in-out infinite;
}
.icon-contact[data-icon="whatsapp"]  .icon-bubble svg { animation-delay: 0.0s; }
.icon-contact[data-icon="instagram"] .icon-bubble svg { animation-delay: 0.5s; }
.icon-contact[data-icon="email"]     .icon-bubble svg { animation-delay: 1.0s; }
.icon-contact[data-icon="portfolio"] .icon-bubble svg { animation-delay: 1.5s; }
@keyframes svgIdle {
  0%, 100% { transform: rotate(0deg);  stroke: var(--white); }
  50%      { transform: rotate(-4deg); stroke: var(--red); }
}

/* Hover specials */
.icon-contact[data-icon="whatsapp"]:hover .icon-bubble svg { animation: wiggle 0.7s var(--ease); }
@keyframes wiggle { 0%,100% { transform: rotate(-6deg) scale(1.06); } 25% { transform: rotate(6deg) scale(1.06); } 50% { transform: rotate(-4deg) scale(1.06); } 75% { transform: rotate(4deg) scale(1.06); } }

.icon-contact[data-icon="email"]:hover .icon-bubble svg { animation: bob 1s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg) scale(1.06); } 50% { transform: translateY(-3px) rotate(-6deg) scale(1.06); } }

.icon-contact[data-icon="instagram"]:hover .icon-bubble svg { animation: soft-spin 1.5s linear infinite; }
@keyframes soft-spin { from { transform: rotate(-6deg) scale(1.06); } to { transform: rotate(354deg) scale(1.06); } }

.icon-contact[data-icon="portfolio"]:hover .icon-bubble svg { animation: portfolio-zoom 1.2s var(--ease) infinite; }
@keyframes portfolio-zoom { 0%,100% { transform: rotate(-6deg) scale(1.06); } 50% { transform: rotate(-6deg) scale(1.18); } }

/* =====================================================================
   HEADLINE <em> + FOOTER TAGLINE <em> — constant color pulse
   ===================================================================== */
.headline em,
.footer-tagline em {
  animation: emPulse 4s ease-in-out infinite;
}
@keyframes emPulse {
  0%, 100% { color: var(--red); text-shadow: none; }
  50%      { color: var(--red-2); text-shadow: 0 0 14px rgba(255,16,36,0.35); }
}

/* =====================================================================
   MARQUEE — faster + edge fades
   ===================================================================== */
.marquee-track { animation-duration: 16s; }
.marquee { position: relative; }
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 1;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); }

/* =====================================================================
   SECTION BORDERS — glow red rotation
   ===================================================================== */
main .section { animation: sectionBorderBreath 8s ease-in-out infinite; }
main .section:nth-child(2) { animation-delay: 1s; }
main .section:nth-child(3) { animation-delay: 2s; }
main .section:nth-child(4) { animation-delay: 3s; }
main .section:nth-child(5) { animation-delay: 4s; }
main .section:nth-child(n+6) { animation-delay: 5s; }
@keyframes sectionBorderBreath {
  0%, 100% { border-top-color: var(--line); }
  50%      { border-top-color: rgba(193,18,31,0.35); }
}

/* =====================================================================
   FLOAT CTA — rise + strong heartbeat glow
   ===================================================================== */
.float-cta {
  animation: floatRise 0.9s var(--ease) 0.4s backwards, floatBreathStrong 3.6s ease-in-out 1.3s infinite;
}
@keyframes floatRise {
  from { transform: translateX(-50%) translateY(120%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes floatBreathStrong {
  0%, 100% { border-top-color: rgba(193,18,31,0.5); box-shadow: 0 -1px 0 0 rgba(193,18,31,0.4), 0 -8px 18px -10px rgba(193,18,31,0.25); }
  50%      { border-top-color: rgba(255,16,36,1);   box-shadow: 0 -1px 0 0 rgba(255,16,36,1), 0 -12px 32px -8px rgba(193,18,31,0.65); }
}

/* Float CTA button — scale breath */
.float-cta .btn { animation: btnBreath 2.4s ease-in-out infinite; }
@keyframes btnBreath {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 18px -6px rgba(193,18,31,0.45); }
  50%      { transform: scale(1.03); box-shadow: 0 0 28px rgba(255,16,36,0.5), 0 8px 24px -4px rgba(193,18,31,0.6); }
}

/* =====================================================================
   NAV — border breathing red
   ===================================================================== */
.site-nav { animation: navBorderBreath 4.5s ease-in-out infinite; }
@keyframes navBorderBreath {
  0%, 100% { border-bottom-color: var(--line); }
  50%      { border-bottom-color: rgba(193,18,31,0.35); }
}

/* =====================================================================
   HERO KICKER + LABEL bars breathe
   ===================================================================== */
.hero-kicker::before { animation: heroKickerBar 2.8s ease-in-out infinite; }
@keyframes heroKickerBar { 0%,100% { width: 18px; opacity: 0.7; } 50% { width: 36px; opacity: 1; } }

.label::before { animation: labelBarBreath 2.6s ease-in-out infinite; box-shadow: 0 0 6px rgba(255,16,36,0.5); }
@keyframes labelBarBreath {
  0%, 100% { width: 18px; opacity: 0.7; box-shadow: 0 0 4px rgba(255,16,36,0.3); }
  50%      { width: 36px; opacity: 1;   box-shadow: 0 0 14px rgba(255,16,36,0.85); }
}

/* Dots breathe constantly */
.float-cta span::before,
.label::before,
.hero-kicker::after {
  animation-duration: 2.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* =====================================================================
   NUMBERS — glow
   ===================================================================== */
.service-num, .step-num, .home-card-num { animation: numGlow 2.8s ease-in-out infinite; }
@keyframes numGlow { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 14px rgba(255,16,36,0.6); } }

/* =====================================================================
   GALLERY CASE CARDS — breathing + border pulse
   ===================================================================== */
.case-card { animation: caseBorderBreath 4.5s ease-in-out infinite, cardBorderPulse 4.5s ease-in-out infinite; will-change: transform, box-shadow; }
.case-card:nth-child(1) { animation-delay: 0s, 0s; }
.case-card:nth-child(2) { animation-delay: 0.4s, 0.4s; }
.case-card:nth-child(3) { animation-delay: 0.8s, 0.8s; }
.case-card:nth-child(4) { animation-delay: 1.2s, 1.2s; }
.case-card:nth-child(5) { animation-delay: 1.6s, 1.6s; }
.case-card:nth-child(6) { animation-delay: 2.0s, 2.0s; }
.case-card:nth-child(7) { animation-delay: 2.4s, 2.4s; }
@keyframes caseBorderBreath {
  0%, 100% { transform: translateY(0) scale(1);     box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
  50%      { transform: translateY(-6px) scale(1.015); box-shadow: 0 14px 32px rgba(0,0,0,0.5), 0 0 22px rgba(193,18,31,0.15); }
}

.case-pet-name { animation: caseNameGlow 5s ease-in-out infinite; }
@keyframes caseNameGlow { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 20px rgba(255,16,36,0.25); } }

.case-ref { animation: refBreath 3.2s ease-in-out infinite; }
.case-ref:nth-child(2) { animation-delay: 0.3s; }
.case-ref:nth-child(3) { animation-delay: 0.6s; }
@keyframes refBreath { 0%,100% { border-color: var(--line); } 50% { border-color: rgba(193,18,31,0.25); } }

/* Gallery progress bar glow */
.gallery-progress-fill { animation: progressGlow 2s ease-in-out infinite; box-shadow: 0 0 8px rgba(255,16,36,0.5); }
@keyframes progressGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,16,36,0.4); }
  50%      { box-shadow: 0 0 18px rgba(255,16,36,0.95), 0 0 32px rgba(193,18,31,0.4); }
}

/* Gallery controls icon-btn: breathing border + color */
.gallery-controls .icon-btn { animation: iconBtnBreath 3.5s ease-in-out infinite; }
.gallery-controls .icon-btn:nth-child(2) { animation-delay: 1.5s; }
@keyframes iconBtnBreath {
  0%, 100% { border-color: var(--line); color: var(--white); }
  50%      { border-color: var(--red); color: var(--red); box-shadow: 0 0 18px rgba(193,18,31,0.35); }
}

/* =====================================================================
   STEPS — breathe row borders
   ===================================================================== */
.step { animation: rowBreath 3.8s ease-in-out infinite; }
.step:nth-child(2) { animation-delay: 0.4s; }
.step:nth-child(3) { animation-delay: 0.8s; }
.step:nth-child(4) { animation-delay: 1.2s; }
.step:nth-child(5) { animation-delay: 1.6s; }
@keyframes rowBreath { 0%,100% { border-bottom-color: var(--line); } 50% { border-bottom-color: rgba(193,18,31,0.35); } }

/* =====================================================================
   FAQ — borders breathe + plus icon pulse
   ===================================================================== */
.faq-item { position: relative; animation: faqIdle 4s ease-in-out infinite; }
.faq-item:nth-child(1)  { animation-delay: 0s; }
.faq-item:nth-child(2)  { animation-delay: 0.3s; }
.faq-item:nth-child(3)  { animation-delay: 0.6s; }
.faq-item:nth-child(4)  { animation-delay: 0.9s; }
.faq-item:nth-child(5)  { animation-delay: 1.2s; }
.faq-item:nth-child(6)  { animation-delay: 1.5s; }
@keyframes faqIdle { 0%,100% { border-bottom-color: var(--line); } 50% { border-bottom-color: rgba(193,18,31,0.45); } }

.faq-plus::before, .faq-plus::after { animation: faqPlusBreath 2.4s ease-in-out infinite; }
@keyframes faqPlusBreath { 0%,100% { background: var(--red); box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { background: var(--red-2); box-shadow: 0 0 8px rgba(255,16,36,0.6); } }

/* =====================================================================
   ABOUT — photo zoom-breath + signature
   ===================================================================== */
.about-photo { animation: aboutPhotoBreath 7s ease-in-out infinite; will-change: transform, box-shadow; }
@keyframes aboutPhotoBreath {
  0%, 100% { transform: scale(1);     box-shadow: 0 24px 70px rgba(0,0,0,0.42); }
  50%      { transform: scale(1.014); box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 38px rgba(193,18,31,0.18); }
}

.signature { animation: sigBreath 5s ease-in-out infinite; }
@keyframes sigBreath { 0%,100% { border-top-color: var(--line); } 50% { border-top-color: rgba(193,18,31,0.4); } }

/* =====================================================================
   SERVICES — red bottom bar pulse
   ===================================================================== */
.service-card::after { animation: styleBarBreath 2.6s ease-in-out infinite !important; transform: scaleX(0.4); transform-origin: left; }
.service-card:nth-child(2)::after { animation-delay: 0.5s !important; }
.service-card:nth-child(3)::after { animation-delay: 1s !important; }
@keyframes styleBarBreath { 0%,100% { transform: scaleX(0.3); opacity: 0.6; } 50% { transform: scaleX(1); opacity: 1; } }

/* =====================================================================
   FOOTER — XOX mark glow + rule pulse + bar pulses
   ===================================================================== */

/* XOX text glow breath */
.footer-meta .footer-mark .fm-xox {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
  animation: fmXoxBreath 4s ease-in-out infinite;
}
@keyframes fmXoxBreath {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 22px rgba(193,18,31,0.55); }
}

.footer-meta .footer-mark .fm-studio {
  letter-spacing: 0.32em;
  padding-left: 1px;
}

/* Footer rule expands/contracts */
.footer-rule { animation: rulePulse 3.4s ease-in-out infinite; }
@keyframes rulePulse { 0%,100% { width: 50px; opacity: 1; } 50% { width: 110px; opacity: 0.7; } }

/* Pre-footer red bar pulses */
.pre-footer::before { animation: barPulse 3s ease-in-out infinite; }
@keyframes barPulse { 0%,100% { width: 60px; opacity: 1; } 50% { width: 120px; opacity: 0.7; } }

/* Footer top bar + meta bar + BG word already have animations in styles.css */

/* =====================================================================
   PAGE-SPECIFIC spacing
   ===================================================================== */
.page-faq .section,
.page-about .section {
  padding-top: 28px;
}

/* =====================================================================
   REDUCED MOTION — kill everything
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .spot, .stagger > * {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  .home-card, .home-card::after,
  .case-card, .case-pet-name, .case-ref,
  .icon-contact .icon-bubble,
  .icon-contact .icon-bubble svg,
  .headline em, .footer-tagline em,
  .footer-rule, .pre-footer::before,
  .footer-meta .footer-mark .fm-xox,
  .float-cta, .float-cta .btn,
  .site-nav,
  .hero-kicker::before,
  .hero-kicker::after,
  .label::before,
  .gallery-progress-fill,
  .gallery-controls .icon-btn,
  .faq-item, .faq-plus::before, .faq-plus::after,
  .about-photo, .signature,
  .service-card::after,
  .step, .service-num, .step-num, .home-card-num,
  main .section,
  .footer-block::before, .footer-meta::before,
  .footer-block .footer-bg-word,
  .hero-title .title-dayan,
  #hero::before,
  .logo-mark circle:nth-child(2) {
    animation: none !important;
  }
}

.page-certificate .section { padding-top: 28px; }