/* ============================================================
   Motion layer - calm, premium movement on top of the existing design.
   Animates transform and opacity (filter only on the hero word).
   Everything is gated by .motion-ready (added by js/motion.js), so the
   site shows complete content without JS or with reduced motion.
============================================================ */
:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --status-open:#1F9D55;
  --status-closed:#D98A04;
}

/* ---------- 1. Scroll reveal ---------- */
.motion-ready .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--stagger, 0) * .06s);
}
.motion-ready .reveal.is-visible{opacity:1; transform:none}

/* ---------- 2. Rotating hero words ---------- */
.hero-rotator{
  margin:-6px 0 18px; font-family:var(--display); font-weight:600;
  font-size:clamp(1.1rem, 1.8vw, 1.35rem); line-height:1.35; color:var(--ink-2);
}
.rotator{display:inline-grid; vertical-align:bottom; perspective:600px}
.rotator > span{
  grid-area:1 / 1; white-space:nowrap; opacity:0;
  background:linear-gradient(90deg, #9E1621 0%, #C41E2A 30%, #E4545B 50%, #C41E2A 70%, #9E1621 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:word-shimmer 6s linear infinite;
}
.rotator > span:first-child{opacity:1}
.motion-ready .rotator > span{
  opacity:0; transform:translateY(60%) rotateX(-60deg); filter:blur(4px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.motion-ready .rotator > span.is-in{opacity:1; transform:none; filter:blur(0)}
.motion-ready .rotator > span.is-out{
  opacity:0; transform:translateY(-60%) rotateX(60deg); filter:blur(4px); transition-duration:.5s;
}
@keyframes word-shimmer{to{background-position:-200% 0}}

/* ---------- 3. Open / closed status ---------- */
.status-pill{
  display:inline-flex; align-items:center; gap:8px; line-height:1; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:.8rem;
}
.status-pill[hidden]{display:none}
.status-dot{position:relative; width:8px; height:8px; border-radius:50%; background:var(--status-open); flex:none}
.status-dot::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:inherit;
  animation:status-pulse 2.2s var(--ease) infinite;
}
.status-pill.is-closed .status-dot{background:var(--status-closed)}
@keyframes status-pulse{
  0%{transform:scale(.9); opacity:.75}
  100%{transform:scale(1.9); opacity:0}
}
.topbar .status-pill{padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.92)}
.topbar .t-item--right{gap:14px}
.loc-info .status-pill{
  margin:2px 0 8px; padding:6px 11px; border-radius:999px;
  background:var(--soft); border:1px solid var(--line); color:var(--ink-2);
}
.hours-row{margin:0 -10px; padding:5px 10px; border-radius:8px}
.hours-row.is-today{background:linear-gradient(90deg, rgba(196,30,42,.10), rgba(196,30,42,0))}
.today-tag{
  display:inline-block; margin-left:8px; padding:3px 6px; border-radius:4px; vertical-align:1px;
  background:var(--red); color:#fff; font-family:var(--display); font-weight:700;
  font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; line-height:1;
}

/* ---------- 4. Services ticker ---------- */
.svc-ticker{
  position:relative; overflow:hidden; padding:14px 0; background:#C41E2A; color:#fff;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track{display:flex; width:max-content; animation:ticker 38s linear infinite}
.svc-ticker:hover .ticker-track{animation-play-state:paused}
.ticker-list{display:flex; align-items:center; flex:none; margin:0; padding:0; list-style:none}
.ticker-list li{
  display:flex; align-items:center; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:.92rem; letter-spacing:.01em;
}
.ticker-list li::after{content:"\2726"; margin:0 22px; font-size:.68rem; opacity:.7}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- 5. Counters ---------- */
[data-count]{display:inline-block; font-variant-numeric:tabular-nums; text-align:right}

/* ---------- 6. Card hover (decor always, movement on real hover) ---------- */
.trust-item, .why-item{position:relative; overflow:hidden; isolation:isolate}
.trust-item::after, .why-item::after{
  content:""; position:absolute; z-index:-1; top:-26px; right:-26px; width:78px; height:78px;
  border-radius:50%; background:rgba(196,30,42,.06); pointer-events:none;
  transition:transform .6s var(--ease);
}
.trust-item svg{transition:transform .6s var(--ease)}
.why-num{transition:transform .35s var(--ease), background-color .35s ease, color .35s ease, border-color .35s ease}

@media (hover:hover) and (pointer:fine){
  .svc-card{transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
  .svc-card:hover{
    transform:translateY(-7px); border-color:rgba(196,30,42,.32);
    box-shadow:0 24px 46px -24px rgba(27,30,35,.38);
  }
  .svc-photo img{transition:transform .7s var(--ease)}
  .svc-card:hover .svc-photo img{transform:scale(1.06)}
  .txtlink svg{transition:transform .35s var(--ease)}
  .svc-card:hover .txtlink svg, .txtlink:hover svg{transform:translateX(4px)}

  .trust-item:hover::after, .why-item:hover::after{transform:scale(1.5)}
  .trust-item:hover svg{transform:rotate(360deg)}
  .why-item:hover .why-num{transform:rotate(12deg); background:var(--red); border-color:var(--red); color:#fff}
}

/* ---------- 7. Final CTA rings + dot grid ---------- */
.final-cta{position:relative; overflow:hidden; isolation:isolate}
.final-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.5px);
  background-size:22px 22px;
}
.cta-ring{position:absolute; z-index:-1; border-radius:50%; pointer-events:none}
.cta-ring--thick{
  top:-170px; right:-150px; width:430px; height:430px;
  border:28px solid rgba(255,255,255,.045); border-top-color:rgba(255,255,255,.11);
  animation:ring-reverse 70s linear infinite;
}
.cta-ring--dashed{
  top:-70px; right:-44px; width:230px; height:230px;
  border:2px dashed rgba(255,255,255,.18); animation:ring-forward 38s linear infinite;
}
@keyframes ring-forward{to{transform:rotate(360deg)}}
@keyframes ring-reverse{to{transform:rotate(-360deg)}}

/* ---------- 8. Floating hero badges ---------- */
.hero-badge{
  position:absolute; z-index:6; display:inline-flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:12px; background:#fff; color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:.82rem; line-height:1; white-space:nowrap;
  box-shadow:0 14px 30px -14px rgba(27,30,35,.42); pointer-events:none;
  animation:badge-bob 6.5s ease-in-out infinite;
}
.hero-badge .status-pill{font-size:inherit}
.hero-badge--status{top:18px; left:18px}
.hero-badge--since{right:18px; bottom:18px; animation-duration:7s; animation-delay:-2.8s}
.hero-badge--since b{color:var(--red); font-weight:700}
@keyframes badge-bob{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

/* ---------- 9. How it works ---------- */
.steps{position:relative}
.steps::before{
  content:""; position:absolute; z-index:0; top:23px; left:23px; right:calc(33.333% - 49.67px); height:2px;
  background:linear-gradient(90deg, rgba(196,30,42,.45), rgba(196,30,42,.14));
  transform:scaleX(0); transform-origin:left center; transition:transform 1s var(--ease); pointer-events:none;
}
.steps.is-drawn::before{transform:scaleX(1)}
.step{position:relative; z-index:1}
.motion-ready .steps .step-icon{
  opacity:0; transform:scale(.6);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(.2s + var(--stagger, 0) * .2s);
}
.motion-ready .steps.is-drawn .step-icon{opacity:1; transform:none}

/* ---------- 10. Header, nav, buttons, icons ---------- */
.site-header{transition:box-shadow .45s var(--ease)}
.site-header.stuck{box-shadow:0 10px 28px -18px rgba(27,30,35,.35)}
.nav-links a::after{transition:transform .35s var(--ease)}

.btn{transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .2s ease, border-color .2s ease, color .2s ease}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-primary:hover{box-shadow:0 12px 26px -10px rgba(196,30,42,.55)}
  .btn-outline:hover, .btn-ghost-light:hover{box-shadow:0 12px 24px -14px rgba(196,30,42,.4)}
  a[href^="tel:"]:hover svg{animation:icon-wiggle .6s var(--ease)}
  .rev-next:hover svg{transform:translateX(3px)}
  .rev-prev:hover svg{transform:translateX(-3px)}
}
.btn:active{transform:scale(.98); transition-duration:.2s}
.rev-arrow svg{transition:transform .3s var(--ease)}
@keyframes icon-wiggle{
  0%, 100%{transform:rotate(0)}
  25%{transform:rotate(-8deg)}
  60%{transform:rotate(8deg)}
}

/* ---------- 11. Mobile menu, form, toast ---------- */
.mobile-nav{opacity:0; transition:max-height .45s var(--ease), opacity .45s var(--ease)}
.mobile-nav.open{opacity:1}

.field input, .field select, .field textarea{transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.field input:focus, .field select:focus, .field textarea:focus{box-shadow:0 0 0 4px rgba(196,30,42,.15)}

.toast{
  top:132px; right:22px; bottom:auto; left:auto; display:flex; align-items:flex-start; gap:14px;
  opacity:0; transform:translateX(28px) scale(.96); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.toast.show{opacity:1; transform:none; pointer-events:auto}
.toast-close{
  flex:none; width:28px; height:28px; margin:-4px -6px 0 auto; border:0; border-radius:6px;
  background:transparent; color:var(--muted); font-size:1.25rem; line-height:1; cursor:pointer;
}
.toast-close:hover{background:var(--soft); color:var(--ink)}
.toast-close:focus-visible{outline:2px solid var(--red); outline-offset:1px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .steps::before{display:none}
}
@media (max-width:720px){
  .topbar .status-pill{padding:4px 8px; font-size:.74rem}
  .hero-badge{padding:7px 10px; font-size:.74rem; border-radius:10px}
  .hero-badge--status{top:10px; left:10px}
  .hero-badge--since{right:10px; bottom:10px}
  .cta-ring--thick{top:-120px; right:-150px; width:300px; height:300px; border-width:20px}
  .cta-ring--dashed{top:-60px; right:-60px; width:170px; height:170px}
  .steps::before{
    display:block; top:23px; left:-12px; right:auto; bottom:var(--steps-tail, 60px); width:2px; height:auto;
    background:linear-gradient(180deg, rgba(196,30,42,.45), rgba(196,30,42,.14));
    transform:scaleY(0); transform-origin:center top;
  }
  .steps.is-drawn::before{transform:scaleY(1)}
  .toast{top:118px; left:12px; right:12px; bottom:auto}
}
@media (max-width:400px){
  .hero-badge--since{display:none}
}

/* ---------- Reduced motion: final state, no movement ---------- */
@media (prefers-reduced-motion:reduce){
  .motion-ready .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .rotator > span, .status-dot::before, .ticker-track, .cta-ring, .hero-badge{animation:none !important}
  .motion-ready .rotator > span{transition:none !important}
  .steps::before{transform:none !important; transition:none !important}
  .motion-ready .steps .step-icon{opacity:1 !important; transform:none !important; transition:none !important}
  .svc-card:hover, .svc-card:hover .svc-photo img, .btn:hover, .btn:active,
  .trust-item:hover svg, .trust-item:hover::after, .why-item:hover::after, .why-item:hover .why-num{transform:none !important}
  a[href^="tel:"]:hover svg{animation:none !important}
  .toast, .mobile-nav{transition:none !important}
}