/* ============================================================================
   CRONIER AIR CONDITIONING — "THERMAL"                           (2026-09-11)
   Motion for an HVAC company. This business only does one thing: it moves a
   room from one temperature to another. So the site does too.

   - the page's accent is COOL blue; headings arrive warm and cool down to it,
     which is literally what their equipment does to a house
   - the accent phrase holds a slow convection shimmer, like air off a coil
   - sections don't slide, they EQUALISE: they come up through a thermal blur
   - the four price cards rise in sequence like a system staging up
   - stat numerals settle like a thermostat finding setpoint, overshooting once
   - the dark bands carry a slow convection drift, warm to cool and back
   ========================================================================== */

/* --- 1. headings cool down to temperature -------------------------------- */
.js .hero__h, .js .phero h1, .js .cta h2, .js .idxhead h2 { opacity: 0 }
.js .hero__h.in, .js .phero h1.in, .js .cta h2.in, .js .idxhead.in h2 {
  animation: cooldown 1.15s cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes cooldown {
  0%   { opacity: 0; filter: blur(7px); color: #C2703A }         /* warm, unsettled */
  45%  { opacity: 1; filter: blur(2px); color: #8A7D62 }
  100% { opacity: 1; filter: blur(0);   color: inherit }         /* at setpoint */
}

/* --- 2. convection shimmer on the accent phrase --------------------------- */
.js .hero__h.in .y, .js .phero h1.in .y, .js .cta h2.in .y {
  animation: convect 6.5s ease-in-out 1.2s infinite;
}
@keyframes convect {
  0%,100% { text-shadow: 0 0 0 transparent }
  40%     { text-shadow: 0 -3px 16px color-mix(in srgb, var(--acc) 34%, transparent) }
  70%     { text-shadow: 0 -6px 22px color-mix(in srgb, var(--acc) 18%, transparent) }
}

/* --- 3. sections equalise through a thermal blur -------------------------- */
.js .fx { opacity: 0; transform: translateY(12px); filter: blur(5px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1), filter .7s ease }
.js .fx.in { opacity: 1; transform: none; filter: blur(0) }
.js .fx.d1 { transition-delay: .1s } .js .fx.d2 { transition-delay: .2s } .js .fx.d3 { transition-delay: .3s }

/* --- 4. price cards stage up like a system coming on ---------------------- */
.js .pricecard { transition: transform .34s cubic-bezier(.2,.9,.3,1), box-shadow .34s, border-color .3s }
.js .pricecard:hover { transform: translateY(-6px);
  box-shadow: 0 26px 46px -30px color-mix(in srgb, var(--acc) 60%, transparent) }
.js .pricecard__p { display: inline-block; transition: transform .34s cubic-bezier(.2,1.4,.4,1) }
.js .pricecard:hover .pricecard__p { transform: translateY(-2px) scale(1.06) }

/* --- 5. the thermostat finds setpoint: overshoot, then settle ------------- */
.js .stat { opacity: 0 }
.js .stat.in { animation: setpoint .8s cubic-bezier(.2,1.3,.4,1) forwards }
.js .stat.d1.in { animation-delay: .09s } .js .stat.d2.in { animation-delay: .18s } .js .stat.d3.in { animation-delay: .27s }
@keyframes setpoint {
  0%   { opacity: 0; transform: translateY(14px) }
  62%  { opacity: 1; transform: translateY(-4px) }
  100% { opacity: 1; transform: translateY(0) }
}
.js .stat b { display: block; transition: color .5s }
.js .stat.in b { animation: chill 1.4s ease-out .2s both }
@keyframes chill { from { color: #C2703A } to { color: inherit } }

/* --- 6. dark bands drift warm to cool, the way a room does ---------------- */
.section--ink, .cta { position: relative; overflow: hidden }
.section--ink::after, .cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 18% 0%,
              color-mix(in srgb, #C2703A 13%, transparent) 0%, transparent 60%),
              radial-gradient(120% 80% at 82% 100%,
              color-mix(in srgb, var(--acc) 15%, transparent) 0%, transparent 62%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { from { opacity: .5 } to { opacity: 1 } }

/* --- 7. the maintenance checklist ticks through, item by item ------------- */
.js .checklist li { position: relative; transition: color .25s, padding-left .25s }
.js .checklist li::before { transition: transform .25s cubic-bezier(.2,1.6,.4,1), background .25s }
.js .checklist li:hover { padding-left: 1.85rem; color: #fff }
.js .checklist li:hover::before { transform: scale(1.6) }

@media (prefers-reduced-motion: reduce) {
  .js .hero__h, .js .phero h1, .js .cta h2, .js .idxhead h2,
  .js .hero__h.in, .js .phero h1.in, .js .cta h2.in, .js .idxhead.in h2 {
    opacity: 1; filter: none; animation: none; color: inherit }
  .js .hero__h.in .y, .js .phero h1.in .y, .js .cta h2.in .y { animation: none; text-shadow: none }
  .js .fx { opacity: 1; transform: none; filter: none; transition: none }
  .js .stat, .js .stat.in { opacity: 1; animation: none }
  .js .stat.in b { animation: none }
  .section--ink::after, .cta::after { animation: none; opacity: .7 }
  .js .pricecard:hover, .js .checklist li:hover { transform: none; padding-left: 1.6rem }
}

@media (max-width: 760px) {
  .js .fx { filter: none }
  .js .pricecard:hover { transform: none }
}