/* ============================================================
   A.W.E.CO. finishing layer · staging/polish/polish.css
   Load order: styles.css first, then every section specialist's
   stylesheet, then THIS FILE LAST. It only overrides, never
   redefines structure.

   Architecture contract (do not break):
   1. Base state of every rule below is the final, fully visible
      render. No JS, no .anim, frozen pane: page is complete.
   2. Anything that moves hangs off html.anim, which main.js adds
      only in a live renderer and a watchdog can remove.
   3. Scroll-linked values consume --p (set by main.js on
      [data-scrub-container]) and --fp (set by micro.js on the
      footer) only under html.anim, with defaults equal to the
      settled state.
   4. After the settle window, reveal transitions are pinned but
      hover transitions keep easing (settle re-scope, section 2).
   ============================================================ */

/* ------------------------------------------------------------
   1. Type rhythm: heading tracking, lead measure, spacing scale
   ------------------------------------------------------------ */
/* h1 is hero-owned, untouched. h2 was over-tightened at 3.4rem,
   h3 inherited display tracking it never needed at 1.55rem. */
h2 { letter-spacing: -0.024em; line-height: 1.08; }
h3 { letter-spacing: -0.014em; }

.sec-head h2 { margin-bottom: 16px; }
.sec-head p { max-width: 54ch; }
.sec-head { margin-bottom: clamp(2.8rem, 5vw, 4.2rem); }
.company h2 { margin-bottom: 18px; }
.wall-note { margin-top: 28px; }

/* reassurance copy beside the submit button needs room to wrap */
.form-alt { flex: 1 1 15rem; line-height: 1.5; }

/* ------------------------------------------------------------
   2. Settle re-scope: the CD-ordered fix. styles.css pins settled
   reveals with transition: none !important, which also killed
   every hover ease ten seconds into the page. Re-open exactly the
   hover longhands; geometry is already at rest, so frozen
   compositors still raster the final frame.
   ------------------------------------------------------------ */
html.anim .rv.in.settle,
html.anim .rv-pop.in.settle {
  transition-property: transform, box-shadow, border-color, background-color, color, opacity, filter !important;
  transition-duration: .35s !important;
  transition-timing-function: var(--ease) !important;
  transition-delay: 0s !important;
}
/* tiles keep their designed .4s feel */
html.anim .tile.rv-pop.in.settle {
  transition-property: transform, box-shadow, border-color, background-color !important;
  transition-duration: .4s !important;
  transition-timing-function: var(--ease) !important;
  transition-delay: 0s !important;
}
/* chips were killed by a dedicated settle rule of their own */
html.anim .region.in.settle .chip {
  transition-property: transform, box-shadow, border-color, background-color !important;
  transition-duration: .3s !important;
  transition-timing-function: var(--ease) !important;
  transition-delay: 0s !important;
}

/* ------------------------------------------------------------
   3. Printed hardware buttons. Blurred glows retire; CTAs get a
   hard offset shadow that grows on hover and compresses on press.
   --magx/--magy are written by micro.js (magnetic pull, capped
   3px); their 0px defaults make every rule inert without JS.
   ------------------------------------------------------------ */
.btn { transform: translate(var(--magx, 0px), var(--magy, 0px)); }
.btn:hover { transform: translate(var(--magx, 0px), calc(var(--magy, 0px) - 2px)); }
.btn:active { transform: translate(var(--magx, 0px), calc(var(--magy, 0px) + 1px)) scale(.985); }

.btn-sun { box-shadow: 0 2.5px 0 0 rgba(10, 37, 23, .45); }
.btn-sun:hover { background: var(--sun-300); box-shadow: 0 5px 0 0 rgba(10, 37, 23, .45); }
.btn-sun:active { box-shadow: 0 1px 0 0 rgba(10, 37, 23, .5); }

.btn-forest { box-shadow: 0 2.5px 0 0 rgba(10, 37, 23, .3); }
.btn-forest:hover { background: var(--green-600); box-shadow: 0 5px 0 0 rgba(10, 37, 23, .32); }
.btn-forest:active { box-shadow: 0 1px 0 0 rgba(10, 37, 23, .35); }

/* ------------------------------------------------------------
   4. Brands wall
   ------------------------------------------------------------ */
/* sun bar under each section head; static by default, sweeps in
   from the left only under html.anim as the head reveals */
.sec-head h2::after {
  content: ""; display: block;
  width: 64px; height: 6px; border-radius: 3px;
  background: var(--sun-400);
  margin-top: 14px;
  transform-origin: left center;
}
html.anim .sec-head.rv h2::after { transform: scaleX(0); }
html.anim .sec-head.rv.in h2::after {
  transform: scaleX(1);
  transition: transform .7s var(--ease) .2s;
}
html.anim .sec-head.rv.in.settle h2::after { transition: none; }

/* richer tile hover: deeper lift, alternating tilt, green-cast
   shadow with a hard printed underline, sun sheen that follows
   the cursor (micro.js writes --mx/--my/--rx/--ry; defaults hold
   a pleasant fixed state without it) */
.tile { position: relative; --tilt: -1.3deg; }
.wall .tile:nth-child(even) { --tilt: 1.2deg; }
.tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(230px circle at var(--mx, 72%) var(--my, 22%), rgba(255, 206, 62, .16), transparent 65%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
/* tile-cta background finally transitions (it snapped before) */
.tile-cta {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease), background-color .4s var(--ease);
}
/* keep the pre-settle reveal stagger, add the new hover longhands */
html.anim .tile.rv-pop.in {
  transition: opacity .6s var(--ease) calc(var(--i, 0) * 26ms),
              transform .6s var(--ease) calc(var(--i, 0) * 26ms),
              box-shadow .4s var(--ease), border-color .4s var(--ease),
              background-color .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    transform: translateY(-7px) rotate(var(--tilt, -1.3deg)) scale(1.015);
    border-color: var(--green-500);
    box-shadow: 0 20px 36px -18px rgba(15, 140, 64, .42),
                0 2px 0 0 rgba(15, 140, 64, .14);
  }
  html.anim .tile:hover {
    transform: perspective(640px) translateY(-7px) rotate(var(--tilt, -1.3deg))
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.015);
  }
  .tile:hover::after { opacity: 1; }
  .tile-cta:hover svg { transform: translateX(6px); transition: transform .45s cubic-bezier(.3, 1.6, .55, 1); }
}

/* ------------------------------------------------------------
   5. Story: polaroid physics, stamp rig, beat ignition,
   display-size year numerals
   ------------------------------------------------------------ */
/* springy straighten and lift; children of the .rv container, so
   their transitions were never touched by settle */
.pola {
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .55s var(--ease), z-index 0s .1s;
}
@media (hover: hover) and (pointer: fine) {
  .pola:hover { box-shadow: 0 32px 58px -22px rgba(10, 37, 23, .45); }
  .pola-1:hover { transform: rotate(-1deg) translateY(-8px) scale(1.045); }
  .pola-2:hover { transform: rotate(.8deg) translateY(-8px) scale(1.045); }
}

/* stamp driven by inherited custom props so hover, reveal and the
   static base never fight over specificity */
.stamp {
  transform: rotate(var(--stamp-r, -12deg)) scale(var(--stamp-s, 1));
  opacity: var(--stamp-o, .96);
  transition: transform .6s cubic-bezier(.3, 1.5, .55, 1), opacity .45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .polas:hover { --stamp-r: -7deg; --stamp-s: 1.04; }
}
/* thumped onto the page as the polaroids reveal */
html.anim .polas.rv:not(.in) { --stamp-r: -30deg; --stamp-s: .6; --stamp-o: 0; }

/* year numerals at true display size, low optical size for the
   chunky toy-sign cut the CD asked for */
.beat-year {
  font-size: clamp(3.4rem, 6.2vw, 5.8rem);
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 14;
  --yo-max: .32;
  opacity: var(--yo-max);
}
@supports (-webkit-text-stroke: 2px black) {
  .beat-year { --yo-max: .55; }
}

/* beat ignition: dots fill and years settle as #tlLine passes,
   driven from the container --p with per-beat thresholds.
   Consumed only under html.anim; base render is fully ignited. */
.timeline > article:nth-of-type(1) { --bt: 0; }
.timeline > article:nth-of-type(2) { --bt: .22; }
.timeline > article:nth-of-type(3) { --bt: .42; }
.timeline > article:nth-of-type(4) { --bt: .62; }
.timeline > article:nth-of-type(5) { --bt: .82; }
.beat { --ig: clamp(0, calc((var(--p, 1) - var(--bt, 0)) * 6), 1); }
html.anim .beat::before {
  background: color-mix(in oklab, var(--green-500) calc(var(--ig, 1) * 100%), var(--mint-100));
  transform: scale(calc(.55 + .45 * var(--ig, 1)));
}
html.anim .beat-year {
  opacity: calc(var(--yo-max, .32) * (.45 + .55 * var(--ig, 1)));
  transform: translateY(calc((1 - var(--ig, 1)) * 14px));
}

/* ------------------------------------------------------------
   6. Services: engineered rows. Tint moves to an inset layer,
   lift moves to transform, text never rewraps. Icons hold the
   brand 2.5 stroke, draw on under .anim, spring on hover.
   ------------------------------------------------------------ */
.svc-row { position: relative; isolation: isolate; }
/* neutralize the old padding-inline hover everywhere, including
   sticky :hover states on touch */
.svc-row:hover { background: transparent; padding-inline: 0; }
.svc-row::before {
  content: ""; position: absolute; inset: 8px -18px; z-index: -1;
  background: var(--mint-50); border-radius: 14px;
  opacity: 0; transform: scaleX(.99);
  transform-origin: left center;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.svc-title { transition: transform .35s var(--ease); }
.svc-row > p { transition: transform .45s var(--ease) .04s; }
.svc-ico {
  stroke-width: 2.5;
  transition: transform .5s cubic-bezier(.3, 1.5, .55, 1);
}
@media (hover: hover) and (pointer: fine) {
  .svc-row:hover::before { opacity: 1; transform: none; }
  .svc-row:hover .svc-title, .svc-row:hover > p { transform: translateX(12px); }
  .svc-row:hover .svc-ico { transform: translateY(-2px) rotate(-5deg) scale(1.05); }
}
/* dash draw-on: static-complete by default, undrawn only under
   html.anim before the row reveals. 220 exceeds the longest
   subelement so every stroke starts fully hidden. */
html.anim .svc-row.rv .svc-ico :is(path, rect, circle) {
  stroke-dasharray: 220; stroke-dashoffset: 220;
}
html.anim .svc-row.rv.in .svc-ico :is(path, rect, circle) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s var(--ease) .15s;
}
html.anim .svc-row.rv.in.settle .svc-ico :is(path, rect, circle) { transition: none; }

/* ------------------------------------------------------------
   7. Territory: chip glow, arrival-gated node pulses
   ------------------------------------------------------------ */
.chip {
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    background: rgba(255, 206, 62, .1);
    border-color: rgba(255, 206, 62, .55);
    box-shadow: 0 0 0 4px rgba(255, 206, 62, .08),
                0 10px 20px -10px rgba(0, 0, 0, .6);
    transform: translateY(-2px);
  }
}
/* keep the reveal stagger, add the new hover longhands with zero delay */
html.anim .region.in .chip {
  transition: opacity .5s var(--ease) calc(var(--i, 0) * 45ms),
              transform .5s var(--ease) calc(var(--i, 0) * 45ms),
              background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}

/* node pulses used to ring before any route had arrived. Gate
   each ring and dot on the shared map --p so it ignites as its
   arc lands. stroke-opacity multiplies with the keyframed
   opacity, so the pulse animation itself is untouched. */
html.anim .node-r1 { --nt: .42; }
html.anim .node-r2 { --nt: .58; }
html.anim .node-r3 { --nt: .74; }
html.anim .node-r1, html.anim .node-r2, html.anim .node-r3 {
  --np: clamp(0, calc((var(--p, 1) - var(--nt, 0)) * 7), 1);
}
html.anim .node-dot {
  transform-box: fill-box; transform-origin: center;
  transform: scale(calc(.55 + .45 * var(--np, 1)));
}
html.anim .node-pulse { stroke-opacity: var(--np, 1); }
html.anim .node-label, html.anim .node-count {
  fill-opacity: calc(.3 + .7 * var(--np, 1));
}

/* ------------------------------------------------------------
   8. Contact: focus choreography, door behaviour, success pop
   ------------------------------------------------------------ */
/* copy.md pair 7 makes this small bold link longer and more
   load-bearing; shipped green-600 sits at roughly 4.3:1 on white,
   forest-700 clears 4.5:1 with room to spare */
.form-alt a { color: var(--forest-700); }

.field label { transition: color .25s var(--ease), transform .25s var(--ease); }
.field:focus-within label { color: var(--forest-700); transform: translateX(3px); }
.field input, .field textarea { caret-color: var(--green-600); }
.field input:hover, .field textarea:hover { border-color: #B9CEC2; }
.field input:focus-visible, .field textarea:focus-visible { background: #fff; }

.seg span {
  transition: background-color .3s var(--ease), color .3s var(--ease),
              box-shadow .3s var(--ease), transform .2s var(--ease);
}
.seg input:not(:checked) + span:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.seg label:active span { transform: scale(.96); }

/* door: springy arrow, honest press state */
.door-go svg { transition: transform .45s cubic-bezier(.3, 1.6, .55, 1); }
.door:hover .door-go svg { transform: translateX(6px); }
.door:active {
  transform: translateY(-1px) scale(.995);
  box-shadow: 0 12px 24px -16px rgba(10, 37, 23, .3);
}

/* success star pop and check draw, one shot, .anim only; the
   static base is the finished star so a dead renderer still
   shows the complete card */
@keyframes star-pop {
  0% { transform: scale(.5) rotate(-14deg); }
  60% { transform: scale(1.12) rotate(4deg); }
  100% { transform: none; }
}
@keyframes check-draw { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
html.anim .form-success:not([hidden]) svg { animation: star-pop .55s var(--ease) both; }
html.anim .form-success:not([hidden]) .fs-check {
  stroke-dasharray: 34;
  animation: check-draw .5s var(--ease) .3s both;
}
/* error message nudges sideways to catch the eye */
@keyframes err-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
}
html.anim .form-error:not([hidden]) { animation: err-nudge .4s var(--ease); }

/* ------------------------------------------------------------
   9. Footer: watermark eases sideways into place as the footer
   scrolls into view. micro.js writes --fp 0 to 1; the default 1
   equals the resting position for every non-anim render.
   ------------------------------------------------------------ */
html.anim .foot-big { transform: translateX(calc((1 - var(--fp, 1)) * -3%)); }
.foot-nav a { transition: opacity .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.foot-nav a:hover { transform: translateY(-1px); }

/* ------------------------------------------------------------
   10. Reduced motion. Not just belt and braces: main.js never
   arms .anim under reduce AT LOAD, but it has no flip listener,
   so after a mid-session flip .anim persists and this block is
   the load-bearing static pin for every html.anim rule above.
   micro.js stops and zeroes its vars on the same flip.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* stale micro.js vars must never move a CTA or tilt a tile after a
     mid-session reduce flip while .anim persists; micro.js also stops
     and zeroes these on flip, this is the CSS backstop. The !important
     on the custom properties is what beats the inline style vars. */
  .btn { --magx: 0px !important; --magy: 0px !important; }
  html.anim .tile:hover {
    transform: translateY(-7px) rotate(var(--tilt, -1.3deg)) scale(1.015) !important;
  }
  html.anim .sec-head.rv h2::after { transform: none !important; transition: none !important; }
  html.anim .svc-row.rv .svc-ico :is(path, rect, circle) {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  }
  html.anim .beat::before { transform: none !important; background: var(--green-500) !important; }
  html.anim .beat-year { transform: none !important; opacity: var(--yo-max, .32) !important; }
  html.anim .node-dot { transform: none !important; }
  html.anim .node-label, html.anim .node-count { fill-opacity: 1 !important; }
  html.anim .polas.rv:not(.in) { --stamp-r: -12deg; --stamp-s: 1; --stamp-o: .96; }
  html.anim .foot-big { transform: none !important; }
  html.anim .form-success:not([hidden]) svg,
  html.anim .form-success:not([hidden]) .fs-check,
  html.anim .form-error:not([hidden]) { animation: none !important; }
  html.anim .form-success:not([hidden]) .fs-check { stroke-dasharray: none !important; }
}