/* HVAC Pro Blog — UI enhancement layer v2 (impeccable + motion-adv)
   Premium polish + advanced motion on top of the existing Tailwind build.
   Brand-safe: reuses navy #050c4d / red #bb0014 tokens. No build step.
   Progressive enhancement only — never hides content if JS fails.
   Animates transform/opacity/filter/box-shadow only. Honors reduced-motion + touch. */

:root{
  --elev-1:0 1px 2px rgba(5,12,77,.06), 0 2px 8px rgba(5,12,77,.06);
  --elev-2:0 12px 30px -16px rgba(5,12,77,.22), 0 4px 10px -6px rgba(5,12,77,.14);
  --elev-3:0 36px 70px -28px rgba(5,12,77,.42), 0 10px 24px -14px rgba(5,12,77,.20);
  --ring:#bb0014;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---- Global type & rendering polish ---- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{scroll-behavior:smooth}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}
/* Brand selection colour */
::selection{background:rgba(187,0,20,.92);color:#fff}
/* Tighten display headings for an editorial, intentional feel */
.font-display-lg,.font-headline-lg{letter-spacing:-.02em}

/* ---- Atmospheric grain (premium texture, ultra-subtle) ---- */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Scroll progress bar (premium nav cue) ---- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,#bb0014,#e51d24);box-shadow:0 0 12px rgba(187,0,20,.55);
  transition:width .12s linear}

/* ---- Accessible focus rings (keyboard users) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}

/* ---- Refined elevation on existing card classes (layered, directional) ---- */
.card-3d,.card-lift,.partner-card,.bento-grid>*{will-change:transform}
.card-3d:hover,.card-lift:hover,.partner-card:hover{box-shadow:var(--elev-3)}

/* ---- Universal tactile press feedback on CTAs (keys off existing classes) ---- */
a[class*="bg-secondary"],a[class*="bg-primary"],button[class*="bg-secondary"],button[class*="bg-primary"]{
  cursor:pointer;transition:transform .18s var(--ease-spring),box-shadow .25s var(--ease-out),filter .25s ease}
a[class*="bg-secondary"]:active,a[class*="bg-primary"]:active,
button[class*="bg-secondary"]:active,button[class*="bg-primary"]:active{transform:scale(.97)}
a[class*="bg-secondary"]:hover,button[class*="bg-secondary"]:hover{filter:saturate(1.08) brightness(1.02)}

/* ---- Magnetic button (JS sets inline --mx/--my translate) ---- */
.magnetic{transition:transform .4s var(--ease-spring)}
.magnetic.pulling{transition:transform .12s ease-out}

/* ---- 3D tilt-on-hover (JS sets transform inline) ---- */
[data-tilt]{transform-style:preserve-3d;transition:transform .35s var(--ease-out);will-change:transform}
[data-tilt].tilting{transition:transform .08s linear}
[data-tilt] .tilt-pop{transform:translateZ(38px);transition:transform .35s var(--ease-out)}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 40%);
  transition:opacity .3s ease}
[data-tilt].tilting::after{opacity:1}

/* ---- Hero parallax layers (JS sets transform inline) ---- */
[data-parallax] [data-depth]{transition:transform .3s var(--ease-out);will-change:transform}

/* ---- Button sheen sweep on hover ---- */
.btn-sheen{position:relative;overflow:hidden;isolation:isolate}
.btn-sheen::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);
  transition:left .6s ease}
.btn-sheen:hover::after{left:150%}

/* ---- Elevation hover helper ---- */
.elev-hover{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.elev-hover:hover{transform:translateY(-6px);box-shadow:var(--elev-3)}

/* ---- Image hover refinement on card / article imagery ---- */
.card-3d img,.partner-card img,article img,.bento-grid img{transition:transform .7s var(--ease-out),filter .7s var(--ease-out)}
.card-3d:hover img,article:hover img{transform:scale(1.04)}

/* ---- Scroll-reveal (additive: default state stays visible; .u-reveal opt-in via JS) ---- */
.u-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.u-reveal.u-in{opacity:1;transform:none}
.u-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.u-stagger.u-in>*{opacity:1;transform:none}

/* ---- Smooth anchor scrolling ---- */
html{scroll-behavior:smooth}

/* ---- Disable all pointer-3D on touch / small screens (perf + accuracy) ---- */
@media (hover:none),(max-width:1023px){
  [data-tilt],[data-parallax] [data-depth],.magnetic{transform:none!important}
  [data-tilt]::after{display:none}
}

/* ---- Respect reduced-motion: strip motion, keep everything visible ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
  [data-tilt],[data-parallax] [data-depth],.magnetic{transform:none!important;transition:none!important}
  [data-tilt]::after,.btn-sheen::after,.scroll-progress,body::before{display:none}
  .u-reveal,.u-stagger>*{opacity:1!important;transform:none!important}
  .card-3d:hover img,article:hover img{transform:none}
}