/* ============================================================
   GENE HEW v5 — PREMIUM POLISH LAYER
   Additive only. Keeps the existing hero & layout; elevates
   micro-interactions, depth, and finish across the site.
   Loaded AFTER base.css / sections.css / v4.css.
   ============================================================ */

:root {
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-cine: cubic-bezier(0.62, 0.01, 0.18, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --shadow-card: 0 2px 5px -2px rgba(11,20,16,0.12), 0 24px 48px -30px rgba(11,20,16,0.42);
  --shadow-float: 0 30px 60px -32px rgba(11,20,16,0.5);
}

/* ---------- buttons: magnetic-ready + depth + sheen ---------- */
.btn {
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.4s var(--ease-out), transform 0.45s var(--ease-out);
}
.btn-green {
  box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--green), transparent 18%);
}
.btn-green:hover {
  box-shadow: 0 18px 38px -16px color-mix(in oklab, var(--green-deep), transparent 30%);
}
/* one-pass light sheen — a dedicated layer injected by polish.js so it never covers the label */
.btn .btn-sheen {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.42) 50%, transparent 62%);
  transform: translateX(-130%); opacity: 0;
}
.btn-line .btn-sheen { background: linear-gradient(105deg, transparent 38%, color-mix(in oklab, var(--green), transparent 55%) 50%, transparent 62%); }
.btn:hover .btn-sheen { animation: btnSheen 0.85s var(--ease-out) 0.04s; }
@keyframes btnSheen { 0% { opacity: 1; transform: translateX(-130%); } 100% { opacity: 1; transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .btn:hover .btn-sheen { animation: none; } }

/* ---------- chips: individual hover lift (approved) ---------- */
.chip {
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.3s ease;
}
.chip:hover {
  transform: translateY(-2px);
  background: var(--green-pale);
  border-color: color-mix(in oklab, var(--green), transparent 40%);
  box-shadow: 0 9px 20px -11px color-mix(in oklab, var(--green-deep), transparent 38%);
}

/* ---------- case cards: cursor spotlight (approved) ---------- */
.case > * { position: relative; z-index: 1; }
.case::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(280px 220px at var(--mx, 50%) var(--my, 0%),
              color-mix(in oklab, var(--green), transparent 80%), transparent 72%);
  transition: opacity 0.45s ease;
}
.case:hover::before { opacity: 1; }
.case { transition: border-color 0.4s ease, transform 0.55s var(--ease-out), background 0.4s ease, box-shadow 0.55s ease; }
.case:hover { box-shadow: 0 30px 64px -34px rgba(0,0,0,0.6); }

/* ---------- depth: richer, more intentional shadows ---------- */
.web-card { box-shadow: 0 1px 2px rgba(11,20,16,0.04); }
.web-card:hover { box-shadow: 0 34px 66px -30px color-mix(in oklab, var(--green-deep), transparent 38%); }
.sheet { box-shadow: var(--shadow-card); }
.float-ph { box-shadow: var(--shadow-float); }

/* ---------- nav: crisper interactions ---------- */
.nav-cta { box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--green), transparent 30%); transition: background 0.3s ease, transform 0.3s var(--ease-out), box-shadow 0.3s ease; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px color-mix(in oklab, var(--green), transparent 24%); }
.nav-cta:active { transform: translateY(0); }

/* ---------- reveals: a touch more cinematic (gentle de-blur) ---------- */
body.js .reveal { transition: opacity 1s var(--ease-soft), transform 1.15s var(--ease-out), filter 1s var(--ease-soft); }
body.js .reveal:not(.in) { filter: blur(7px); }
body.js .reveal.in { filter: blur(0); }
body.js [data-stagger] > * { transition: opacity 0.85s var(--ease-soft), transform 1.05s var(--ease-out), filter 0.85s var(--ease-soft); }
body.js [data-stagger]:not(.in) > * { filter: blur(6px); }
body.js [data-stagger].in > * { filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  body.js .reveal, body.js .reveal:not(.in), body.js [data-stagger] > *, body.js [data-stagger]:not(.in) > * { filter: none !important; }
}

/* ---------- sections: refined entrance for the section heads ---------- */
.sec-eyebrow::before { transition: width 0.6s var(--ease-out) 0.1s; }

/* ---------- principle/cap hover: smoother accent ---------- */
.principle::before { transition: width 0.9s var(--ease-cine); }

/* ---------- contact links: warmer hover ---------- */
.clink { transition: padding-left 0.45s var(--ease-out), background 0.35s ease, box-shadow 0.35s ease; }
.clink:hover { box-shadow: inset 2px 0 0 var(--green); }
.clink-static { cursor: default; }
.clink-static:hover { padding-left: 4px; background: none; box-shadow: none; }

/* ---------- accessibility: consistent, on-brand focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .web-card:focus-visible, .art:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}
.dark-zone a:focus-visible, .dark-zone button:focus-visible, .contact :focus-visible { outline-color: var(--mint); }
:focus:not(:focus-visible) { outline: none; }

/* ---------- design gallery: subtle premium lift on the masonry tiles ---------- */
.art { box-shadow: 0 1px 2px rgba(11,20,16,0.05); transition: transform 0.55s var(--ease-out), box-shadow 0.55s ease; }
.art:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -30px color-mix(in oklab, var(--green-deep), transparent 40%); }
.art:hover img { transform: scale(1.045); }