/* ==========================================================================
   SHLDR — Animation & Interaction Layer
   Loaded AFTER style.css on every page. Contains every rule added for the
   "modern animations & interactive effects" pass: page loader, scroll
   progress bar, navbar scroll state, button/card/icon/image motion,
   floating action buttons, section dividers, form feedback, and footer
   polish. Nothing in this file redefines page layout — only motion,
   surface treatments (shadow/border/gradient) and small decorative shapes.

   All effects respect `prefers-reduced-motion` (see section 0) and every
   custom animation/transition is intentionally short (<= 0.6s) so it never
   gets in the way of someone trying to use the site.
   ========================================================================== */

/* ================= 0. TOKENS + REDUCED MOTION ================= */
:root{
  --dur-fast: .22s;
  --dur-base: .4s;
  --dur-slow: .7s;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --wa-green: #25D366;
  --wa-green-deep: #1DA851;
  --stagger-step: 70ms; /* per-card delay step used by the JS reveal stagger */
}

/* Belt-and-braces: style.css already zeroes animation/transition durations
   for reduced-motion users. Here we additionally hide purely decorative,
   JS-driven, or infinitely-looping pieces outright so nothing is left
   mid-animation or spinning forever. */
@media (prefers-reduced-motion: reduce){
  .page-loader{ transition:none !important; }
  .whatsapp-float,
  .whatsapp-float::before,
  .mini-arch,
  .hero-blob,
  .section-warm::before,
  .download-app::before,
  .site-footer::before,
  .site-footer::after,
  .hero-slide img{ animation:none !important; }
  .scroll-progress{ transition:none !important; }
  .vitals-cursor{ display:none !important; }
}

/* ================= 1. PAGE LOADER ================= */
.page-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ position:relative; width:88px; height:88px; display:flex; align-items:center; justify-content:center; }
.loader-mark img{ width:56px; height:auto; position:relative; z-index:1; animation:loaderPulse 1.5s ease-in-out infinite; }
.loader-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2.5px solid var(--line); border-top-color:var(--orange); border-right-color:var(--blue);
  animation:loaderSpin 1s linear infinite;
}
@keyframes loaderSpin{ to{ transform:rotate(360deg); } }
@keyframes loaderPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.92); opacity:.7; } }
body.is-loading{ overflow:hidden; }

/* ================= 2. SCROLL PROGRESS BAR ================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:9998;
  background:var(--gradient-brand);
  transition:width .12s linear;
}

/* ================= 3. NAVBAR SCROLL STATE ================= */
.site-header{
  transition:background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,0.92);
  box-shadow:0 4px 26px rgba(28,20,16,0.09);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}

/* Mobile menu — panel already slides in via style.css; add a per-link
   stagger so items cascade into view instead of appearing all at once. */
@media (max-width:760px){
  .main-nav .nav-link{
    opacity:0; transform:translateX(24px);
    transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .main-nav.is-open .nav-link{ opacity:1; transform:translateX(0); }
  .main-nav.is-open .nav-link:nth-child(1){ transition-delay:.08s; }
  .main-nav.is-open .nav-link:nth-child(2){ transition-delay:.14s; }
  .main-nav.is-open .nav-link:nth-child(3){ transition-delay:.2s; }
  .main-nav.is-open .nav-link:nth-child(4){ transition-delay:.26s; }
}

/* ================= 4. REVEAL VARIANTS (used by animations.js stagger) ================= */
/* Base .reveal (fade + rise) already lives in style.css. These optional
   variants can be swapped in per-element by adding a second class. */
.reveal-zoom{ opacity:0; transform:scale(.92); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-zoom.in-view{ opacity:1; transform:scale(1); }
.reveal-left{ opacity:0; transform:translateX(-32px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-left.in-view{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(32px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-right.in-view{ opacity:1; transform:translateX(0); }

/* ================= 5. BUTTONS ================= */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
/* Diagonal sheen sweep on hover */
.btn::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 70%);
  transform:translateX(-130%); transition:transform .65s var(--ease);
}
.btn:hover::before{ transform:translateX(130%); }
.btn > *{ position:relative; z-index:2; }
.btn:active{ transform:scale(.96) !important; }

/* Gradient shift on hover for the primary CTA */
.btn-primary{
 background-image: linear-gradient(
    135deg,
    #f8770d 0%,
    #3374C3 60%,
    #f8770d 80%
);
  background-size:180% 100%; background-position:0% 0%;
  transition:background-position .45s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-primary:hover{
  background-image:linear-gradient(120deg, var(--blue-deep) 0%, var(--blue) 55%, #5C7CFF 100%);
  background-position:100% 0%;
}
.btn-ghost{ transition:background .3s var(--ease), color .3s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }

/* Unify the "lift + slight scale" hover across every button style */
.btn-primary:hover, .btn-outline:hover, .btn-ghost:hover, .btn-primary-light:hover{
  transform:translateY(-2px) scale(1.025);
}
.btn-outline-light:not(:disabled):hover{ transform:translateY(-2px) scale(1.025); }

/* Ripple (span injected by animations.js on click) */
.btn-ripple{
  position:absolute; z-index:0; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.55); pointer-events:none;
  animation:rippleAnim .6s ease-out forwards;
}
.btn-outline .btn-ripple, .btn-ghost .btn-ripple, .btn-primary-light .btn-ripple{ background:rgba(36,84,255,.22); }
@keyframes rippleAnim{ to{ transform:scale(2.8); opacity:0; } }

/* ================= 6. CARDS: lift + glow + gradient border + icon motion ================= */
.service-card, .pfeature-card, .audience-card, .value-card, .contact-info-card{
  position:relative; isolation:isolate;
}
.service-card::before, .pfeature-card::before, .value-card::before, .contact-info-card::before, .audience-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; padding:1.5px;
  background:var(--gradient-brand); opacity:0;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity var(--dur-base) var(--ease);
}
.service-card:hover::before, .pfeature-card:hover::before, .value-card:hover::before,
.contact-info-card:hover::before, .audience-card:hover::before{ opacity:1; }

.service-card:hover, .value-card:hover, .contact-info-card:hover{
  box-shadow:0 20px 40px -14px rgba(255,106,61,.22), 0 10px 24px -10px rgba(36,84,255,.16);
}
.pfeature-card:hover{ box-shadow:0 18px 36px -14px rgba(28,20,16,.16); }

.service-card .service-icon, .value-card .value-icon, .contact-info-card .contact-info-icon,
.pfeature-card .icon-badge, .audience-card .audience-icon-badge, .svcd-icon{
  transition:transform .45s var(--ease-spring);
}
.service-card:hover .service-icon, .value-card:hover .value-icon, .contact-info-card:hover .contact-info-icon,
.pfeature-card:hover .icon-badge, .audience-card:hover .audience-icon-badge{
  transform:scale(1.14) rotate(-6deg);
}
.service-detail-card:hover .svcd-icon{ transform:scale(1.1) rotate(-5deg); }
.service-detail-card{ transition:box-shadow .35s var(--ease); }
.service-detail-card:hover{ box-shadow:var(--shadow-md); }

/* Subtle tilt (mouse-driven, class + inline transform applied by animations.js;
   ignored entirely for touch/reduced-motion users since JS never attaches it there) */
.tilt-ready{ transition:transform .12s ease-out; transform-style:preserve-3d; will-change:transform; }

/* why-row icons: small hover pop, complements the card family above */
.why-row-icon{ transition:transform .3s var(--ease-spring), background .3s var(--ease); }
.why-row:hover .why-row-icon{ transform:scale(1.12) rotate(-6deg); }

/* ================= 7. ICONS: floating + pulse ================= */
.mini-arch{ animation:iconFloat 4s ease-in-out infinite; }
.hero-trust-icons .mini-arch:nth-child(1){ animation-delay:0s; }
.hero-trust-icons .mini-arch:nth-child(2){ animation-delay:.25s; }
.hero-trust-icons .mini-arch:nth-child(3){ animation-delay:.5s; }
.hero-trust-icons .mini-arch:nth-child(4){ animation-delay:.75s; }
.hero-trust-icons .mini-arch:nth-child(5){ animation-delay:1s; }
.hero-trust-icons .mini-arch:nth-child(6){ animation-delay:1.25s; }
@keyframes iconFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.hero-trust-icons .mini-arch:hover{ animation-play-state:paused; transform:translateY(-5px) scale(1.08); }

.pulse-dot{ animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.15); } }

/* ================= 8. IMAGES: hover zoom (rounded corners / shadow already in style.css) ================= */
.about-lead-media, .why-media, .svcd-hero, .svcd-benefits-media, .pfeature-card.pf-large{ overflow:hidden; }
.about-lead-media img, .why-media img, .svcd-hero img, .svcd-benefits-media img, .pfeature-card.pf-large img{
  transition:transform .7s var(--ease);
}
.about-lead-media:hover img, .why-media:hover img, .svcd-hero:hover img, .svcd-benefits-media:hover img, .pfeature-card.pf-large:hover img{
  transform:scale(1.08);
}

/* ================= 9. SECTION DIVIDERS: waves + floating blobs ================= */
.section-warm, .download-app{ position:relative; overflow:hidden; }
.section-warm > .section-inner{ position:relative; z-index:2; }
.download-app > .section-inner{ position:relative; z-index:2; }

/* soft ambient blob, reused on every warm section */
.section-warm::before, .download-app::before{
  content:''; position:absolute; top:-150px; left:-110px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,61,.1), transparent 70%);
  pointer-events:none; z-index:0; animation:blobFloat 16s ease-in-out infinite;
}
@keyframes blobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(34px,22px) scale(1.08); }
}

/* curved wave seam at the base of every warm section (fill = its own warm
   background, so it only becomes visible where the next section differs) */
.section-warm::after, .download-app::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:64px; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C32%20C150%2C70%20350%2C0%20600%2C28%20C850%2C56%201050%2C8%201200%2C36%20L1200%2C80%20L0%2C80%20Z%22%20fill%3D%22%23EEF1F8%22/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat; pointer-events:none;
}

/* same wave, flipped, for the base of the hero (index page) fading into the trust bar */
.hero{ position:relative; }
.hero-decor{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(54px); opacity:.55; animation:blobFloat 13s ease-in-out infinite; }
.hero-blob-1{ top:10%; right:9%; width:220px; height:220px; background:radial-gradient(circle, rgba(255,106,61,.45), transparent 70%); }
.hero-blob-2{ bottom:16%; left:5%; width:180px; height:180px; background:radial-gradient(circle, rgba(36,84,255,.45), transparent 70%); animation-delay:2.4s; animation-direction:reverse; }
@media (max-width:760px){
  .hero-blob-1, .hero-blob-2{ width:130px; height:130px; opacity:.4; }
}
/* Bottom edge of the hero is intentionally left flat — no wave/curve seam
   into the trust bar, per request. */

/* Ken Burns drift on hero photography */
.hero-slide img {
    animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.03);
    }
}

/* Per-slide label re-animates via animations.js (MutationObserver toggles this class) */
.hero-slide-label span{ display:inline-block; }
.hero-slide-label span.label-swap{ animation:labelSwap .5s var(--ease); }
@keyframes labelSwap{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* Page-hero already carries its own blobs in style.css — just give them motion */
.page-hero::before, .page-hero::after{ animation:blobFloat 17s ease-in-out infinite; }
.page-hero::after{ animation-delay:3s; animation-direction:reverse; }

/* ================= 10. FLOATING ACTION BUTTONS ================= */
.whatsapp-float{
  position:fixed; left:24px; bottom:24px; z-index:95;
  width:58px; height:58px; border-radius:50%;
  background:var(--wa-green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45);
  animation:waBounceIn .7s var(--ease-spring) .4s both, waPulse 3s ease-in-out 3s infinite;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.whatsapp-float:hover, .whatsapp-float:focus-visible{
  transform:translateY(-4px) scale(1.06);
  background:var(--wa-green-deep);
  box-shadow:0 14px 32px rgba(37,211,102,.55);
}
.whatsapp-icon{ width:31px; height:31px; }
.whatsapp-float::before{
  content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa-green);
  animation:waPulseRing 3s ease-out 3s infinite;
}
@keyframes waBounceIn{
  0%{ transform:scale(0) translateY(50px); opacity:0; }
  55%{ transform:scale(1.14) translateY(-8px); opacity:1; }
  75%{ transform:scale(.94) translateY(2px); }
  100%{ transform:scale(1) translateY(0); }
}
@keyframes waPulse{
  0%,100%{ box-shadow:0 10px 26px rgba(37,211,102,.45); }
  50%{ box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 10px rgba(37,211,102,.12); }
}
@keyframes waPulseRing{
  0%{ transform:scale(1); opacity:.55; }
  80%,100%{ transform:scale(1.55); opacity:0; }
}
.whatsapp-tooltip{
  position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(-6px);
  background:var(--ink); color:#fff; font-size:.82rem; font-weight:500; padding:8px 14px; border-radius:8px;
  white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease); box-shadow:var(--shadow-sm);
}
.whatsapp-tooltip::after{
  content:''; position:absolute; right:100%; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-right-color:var(--ink);
}
.whatsapp-float:hover .whatsapp-tooltip, .whatsapp-float:focus-visible .whatsapp-tooltip{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}

/* Back-to-top keeps its own standard bottom-right spot — the two buttons
   now sit on opposite corners, so there's no stacking to account for. */
.back-to-top{ transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), visibility .3s; }
.back-to-top:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 14px 30px rgba(28,20,16,.22); }
.back-to-top-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.back-to-top-ring-track{ fill:none; stroke:rgba(255,255,255,.2); stroke-width:2.5; }
.back-to-top-ring-fill{
  fill:none; stroke:var(--orange); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:122.5; stroke-dashoffset:122.5; transition:stroke-dashoffset .1s linear;
}

@media (max-width:760px){
  .whatsapp-float{ left:16px; bottom:16px; width:50px; height:50px; }
  .whatsapp-icon{ width:27px; height:27px; }
  .whatsapp-tooltip{ display:none; }
}

/* ================= 11. FAQ POLISH ================= */
.faq-item{ transition:box-shadow .3s var(--ease), border-color .3s var(--ease); }
.faq-item.is-open{ box-shadow:var(--shadow-sm); border-color:var(--line-strong); }
.faq-answer p{ opacity:0; transform:translateY(-6px); transition:opacity .3s var(--ease) .05s, transform .3s var(--ease) .05s; }
.faq-item.is-open .faq-answer p{ opacity:1; transform:translateY(0); }

/* ================= 12. FORMS: floating labels, focus glow, shake, success ================= */
.form-floating{ position:relative; }
.form-floating input, .form-floating textarea{
  width:100%; padding:23px 16px 9px;
}
.form-floating textarea{ padding-top:26px; }
.form-floating label{
  position:absolute; left:16px; top:16px; font-size:.95rem; color:var(--ink-faint);
  pointer-events:none; transform-origin:left top; background:transparent; font-weight:500;
  transition:top var(--dur-fast) var(--ease), font-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.form-floating input:focus ~ label,
.form-floating input:not(:placeholder-shown) ~ label,
.form-floating textarea:focus ~ label,
.form-floating textarea:not(:placeholder-shown) ~ label{
  top:8px; font-size:.7rem; letter-spacing:.03em; text-transform:uppercase; color:var(--blue-deep); font-weight:600;
}

/* Animated focus ring — applies to every text input/textarea site-wide */
.form-row input, .form-row textarea, .notify-form input{
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-row input:focus, .form-row textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 4px rgba(36,84,255,.16);
}
.download-copy .notify-form input:focus, .notify-form input:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(36,84,255,.18);
}

/* Invalid-field shake, toggled by animations.js on a failed submit attempt */
@keyframes shakeX{
  10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); }
}
.form-row.is-invalid input, .form-row.is-invalid textarea{
  border-color:#DC2626 !important; animation:shakeX .5s var(--ease);
}

/* Success message pop, toggled by animations.js once a message is written in */
.form-message.is-success, .notify-message.is-success{
  animation:successPop .5s var(--ease-spring); color:#15803D !important; font-weight:600;
}
.form-message.is-success::before, .notify-message.is-success::before{ content:'✓ '; }
@keyframes successPop{
  0%{ opacity:0; transform:translateY(-4px) scale(.95); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* ================= 14. PAGE TRANSITIONS (between the site's static pages) ================= */
/* animations.js fades #pageLoader back in (via inline style, so it's
   independent of the .is-hidden entrance transition below) right before
   following an internal link, then the destination page's own loader
   fade-out picks up from there — giving the multi-page site a single
   continuous cross-fade instead of a hard page flash. */
.page-loader{ transition:opacity .3s ease, visibility 0s linear .3s; }
.page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s var(--ease), visibility 0s linear .5s; }

/* ================= 15. CURSOR SPOTLIGHT (primary buttons only — kept to one
   place rather than on every hoverable element, per "spend your boldness
   in one place") ================= */
.btn-primary, .btn-primary-light{ --mx:50%; --my:50%; }
.btn-primary::after, .btn-primary-light::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120px circle at var(--mx) var(--my), rgba(255,255,255,.4), transparent 70%);
  opacity:0; transition:opacity .35s var(--ease);
}
.btn-primary:hover::after, .btn-primary-light:hover::after{ opacity:1; }

/* ================= 16. FOOTER ================= */
.site-footer{ position:relative; overflow:hidden; }
.site-footer::before{
  content:''; position:absolute; top:-220px; right:-160px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,61,.09), transparent 70%);
  animation:blobFloat 19s ease-in-out infinite; pointer-events:none; z-index:0;
}
.site-footer::after{
  content:''; position:absolute; bottom:-260px; left:-160px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(36,84,255,.09), transparent 70%);
  animation:blobFloat 23s ease-in-out infinite reverse; pointer-events:none; z-index:0;
}
.footer-inner, .footer-bottom{ position:relative; z-index:1; }

.footer-col a{ position:relative; display:inline-block; width:fit-content; }
.footer-col a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--orange);
  transition:width var(--dur-fast) var(--ease);
}
.footer-col a:hover::after{ width:100%; }
.social-icon:hover{ transform:translateY(-3px) rotate(8deg) scale(1.08); }
.footer-legal a{ position:relative; }
.footer-legal a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor;
  transition:width var(--dur-fast) var(--ease);
}
.footer-legal a:hover::after{ width:100%; }

/* ================= 17. VITALS CURSOR ================= */
/* A small always-on cursor companion — not a cursor replacement, the native
   pointer stays visible. Echoes the hero eyebrow pill's existing pulse-dot:
   a steady dot with a slow ring pulse. Markup is injected once by
   animations.js (initVitalsCursor); this is purely the visual styling for
   what it inserts. Desktop mouse only — see the media queries at the
   bottom, mirrored by the JS-side gate. */
.vitals-cursor{
  position:fixed; top:0; left:0; width:0; height:0; z-index:9997;
  pointer-events:none; opacity:0; transition:opacity .3s ease;
}
.vitals-dot{
  position:absolute; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--orange);
  transition:transform .25s var(--ease-spring), background .25s var(--ease);
}
.vitals-ring{
  position:absolute; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; border:1.5px solid var(--orange);
  animation:vitalsPulse 2.2s var(--ease) infinite;
}
@keyframes vitalsPulse{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(4.2); opacity:0; }
}

/* Hover acknowledgment — small, no snapping/morphing, just enough feedback
   that the cursor "notices" something clickable is underneath it. */
.vitals-cursor.is-hover .vitals-dot{ transform:scale(1.8); }
.vitals-cursor.is-hover .vitals-ring{ border-color:var(--blue); opacity:.55; }

@media (hover:none), (pointer:coarse){
  .vitals-cursor{ display:none !important; }
}
/* ---------- */


.app-header__social-btn--yt {
  background: #ff0000;
  color: #ffffff;
  border: none;
}

.app-header__social-btn--yt:hover {
  background: #cc0000;
  color: #ffffff;
}

.social-youtube {
  background-color: #ff0000 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.social-youtube .icon {
  width: 22px !important;
  height: 22px !important;
  fill: #ffffff !important;
}