/* ============================================================================
   KAYSON STEEL — PREMIUM ELEVATION LAYER
   Loaded AFTER style.css + motion.css. Purely additive: adds depth, refined
   typography, a 3D hero stage, a load-progress bar, and a grain overlay.
   Does NOT remove or rename any existing token/class/hook the JS depends on.
   ============================================================================ */

/* ---------- Typography elevation ---------- */
:root {
  /* A hair tighter display scale + optical tracking already set in style.css.
     Add refined measured line-lengths and balanced wrapping for editorial feel. */
  --measure: 64ch;
}
h1, h2, h3, h4, h5 { text-wrap: balance; }
p, li, .section-lead, .hero__lead, .service__desc, .adv__desc, .product__desc, .news__excerpt {
  text-wrap: pretty;
}
/* Slightly larger, more confident display rhythm on wide screens */
@media (min-width: 1280px) {
  .hero h1 { letter-spacing: -.028em; }
  .section-title { letter-spacing: -.02em; }
}

/* ---------- Premium grain / texture overlay (kills digital flatness) ---------- */
.grain { position:fixed; inset:0; z-index:300; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px; }
.grain--soft { opacity:.035; }

/* ---------- Subtle section texture (paper-like depth, not flat) ---------- */
.section--soft { background-image:
  radial-gradient(120% 90% at 100% 0%, rgba(212,175,55,.04), transparent 55%),
  radial-gradient(100% 80% at 0% 100%, rgba(10,30,63,.045), transparent 55%); }
.section--bg { background-image:
  radial-gradient(120% 100% at 0% 0%, rgba(10,30,63,.05), transparent 50%); }

/* ---------- Load progress bar (top, non-blocking) ---------- */
.kayson-loader { position:fixed; left:0; top:0; height:3px; width:100%; z-index:400; pointer-events:none;
  background:linear-gradient(90deg, var(--primary-light), var(--accent) 55%, var(--accent-light));
  transform:scaleX(0); transform-origin:inline-start; transition:transform .15s ease, opacity .4s ease .25s, height .3s ease;
  box-shadow:0 0 14px rgba(212,175,55,.45); }
.kayson-loader.is-done { opacity:1; } /* keep visible as scroll rail */
.kayson-loader.is-scroll { height:2px; opacity:.9; }
.kayson-loader::after { content:""; position:absolute; inset:0; right:auto; width:90px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation:loadSweep .9s linear infinite; }
.kayson-loader.is-scroll::after { animation-duration:2.4s; opacity:.5; }
@keyframes loadSweep { to { transform:translateX(110vw); } }

/* ---------- 3D STEEL HERO STAGE ---------- */
/* The hero visual on the homepage gets an optional WebGL steel section.
   It is strictly enhancement: if WebGL/Three fails or is hidden, the static
   .hero__visual img stays visible underneath (canvas sits above, transparent). */
.hero__stage { position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.12); background:linear-gradient(160deg,#0c1830,#070d1a); min-height:420px; }
.hero__stage canvas { position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.hero__stage .hero__visual { position:absolute; inset:0; border-radius:inherit; margin:0; }
.hero__stage .hero__visual img { width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero__stage .hero__visual::after { background:linear-gradient(180deg, rgba(11,20,34,.25), rgba(11,20,34,.78)); }
.hero__stat-card { z-index:3; }
.hero__stage-badge { position:absolute; top:14px; inset-inline-start:14px; z-index:3; font-family:var(--font-en);
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#cdd9e6;
  background:rgba(7,13,26,.5); border:1px solid rgba(255,255,255,.14); padding:6px 12px; border-radius:var(--r-pill);
  backdrop-filter:blur(6px); }
.hero__stage-hint { position:absolute; bottom:14px; inset-inline-end:14px; z-index:3; font-family:var(--font-en);
  font-size:11px; font-weight:600; letter-spacing:.1em; color:rgba(205,217,230,.7); display:inline-flex; gap:7px; align-items:center; }
.hero__stage-hint .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(212,175,55,.22); }
@media (max-width:1080px){ .hero__stage { max-width:480px; } }

/* ---------- Image shimmer (premium loading of lazy imgs) ---------- */
.cat img, .product__media img, .news__media img, .hero__stage .hero__visual img { background:linear-gradient(110deg, rgba(255,255,255,.04) 30%, rgba(212,175,55,.10) 50%, rgba(255,255,255,.04) 70%); background-size:220% 100%; }
img[loading="lazy"]:not([data-loaded]) { animation:imgShimmer 1.6s linear infinite; }
@keyframes imgShimmer { to { background-position:-220% 0; } }

/* ---------- Strengthened focus visibility (a11y) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .product__link:focus-visible {
  outline:3px solid var(--accent-light); outline-offset:3px; border-radius:8px;
  box-shadow:0 0 0 6px rgba(212,175,55,.18); }

/* ---------- Skip link (keyboard a11y) ---------- */
.skip-link { position:absolute; inset-inline-start:16px; top:-60px; z-index:500; background:var(--primary); color:#fff;
  padding:10px 18px; border-radius:var(--r-pill); font-weight:700; font-size:14px; box-shadow:var(--sh-2);
  transition:top .2s var(--ease-out); }
.skip-link:focus { top:16px; }

/* ---------- Refined footer divider (less generic) ---------- */
.footer__bottom { border-top:1px solid rgba(255,255,255,.08); }