/* ==========================================================================
   Sonergy Group site — shared base (reset, a11y helpers, motion, photo slots)
   Each concept defines its own BRAND TOKENS block and components on top of this.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
section[id], [data-nav] { scroll-margin-top: calc(var(--nav-h, 72px) + 8px); }

/* Visually hidden, still announced */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link */
.skip {
  position: fixed; left: 16px; top: 12px; z-index: 1000;
  padding: 12px 18px; background: var(--skip-bg, #0B1F5C); color: #fff;
  font-weight: 600; text-decoration: none; border-radius: 4px;
  transform: translateY(-160%); transition: transform .2s;
}
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid var(--focus, #1A3DB0); outline-offset: 3px; }

/* Line icons from shared/icons.svg */
.icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Motion primitives (SPEC §7) ---------- */
/* Hero entrance: html.is-loaded is set two frames after load */
html.js [data-hero] {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .56s var(--ease-out, cubic-bezier(.2,.8,.2,1)), transform .56s var(--ease-out, cubic-bezier(.2,.8,.2,1));
  transition-delay: calc(var(--h, 0) * 90ms);
}
html.is-loaded [data-hero] { opacity: 1; transform: none; }

/* Scroll reveals */
html.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity .7s var(--ease-out, cubic-bezier(.2,.8,.2,1)), transform .7s var(--ease-out, cubic-bezier(.2,.8,.2,1));
  transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="left"] { transform: translate3d(-24px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(24px, 0, 0); }
html.js [data-reveal="scale"] { transform: scale(.96); }
html.js [data-reveal="left"].is-in, html.js [data-reveal="right"].is-in, html.js [data-reveal="scale"].is-in { transform: none; }

/* Icons that draw themselves (paths carry pathLength="1") */
html.js .draw .icon, html.js .icon.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out, cubic-bezier(.2,.8,.2,1)) calc(var(--i, 0) * 90ms + 150ms); }
html.js .is-in .draw .icon, html.js .draw.is-in .icon, html.js .is-in .icon.draw, html.js .icon.draw.is-in { stroke-dashoffset: 0; }

/* ---------- Photo slots (SPEC §8) ---------- */
.ph {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  aspect-ratio: var(--ar, 16 / 9); background: var(--ph-bg, #DDE3EF);
}
.ph > img, .ph > .ph-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.ph > img[data-parallax] { inset: -8% 0; height: 116%; will-change: transform; }

/* Count-up: animated digits are aria-hidden; the final value lives in .vh */
.count { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Reduced motion: everything in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
}
html.reduced [data-reveal], html.reduced [data-hero] { opacity: 1 !important; transform: none !important; }
html.reduced .draw .icon, html.reduced .icon.draw { stroke-dashoffset: 0 !important; }