/* =========================================================
   S.K Products — creative layer
   (loaded after style.css; safe to edit independently)
   ========================================================= */

/* ---------- scroll reveal (only active when JS adds .js to <html>) ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d, 0s);
}
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- proprietor photo frame (self-contained so the photo can never overflow) ---------- */
.proprietor-frame{
  position:relative;
  width:100%;
  max-width:380px;
  margin:0 auto;
}
.proprietor-frame::before{
  content:"";
  position:absolute;
  top:-14px; left:-14px;
  right:14px; bottom:14px;
  border:3px solid var(--amber);
  z-index:0;
}
.proprietor-frame .frame-inner{
  position:relative;
  z-index:1;
  background:#fff;
  padding:.6rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  box-shadow:0 22px 42px -20px rgba(10,28,51,.4);
}
.proprietor-frame .frame-inner img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:576 / 754;
  object-fit:cover;
}
.proprietor-frame .badge-tag{
  position:absolute;
  bottom:-16px; right:-16px;
  background:var(--navy);
  color:#fff;
  font-family:var(--font-head);
  font-size:.82rem;
  letter-spacing:.02em;
  padding:.6rem 1.05rem;
  z-index:2;
  box-shadow:0 12px 22px -10px rgba(10,28,51,.55);
}

/* =========================================================
   SPRING LAB (hero)
   ========================================================= */
.spring-lab{
  position:relative;
  z-index:2;
  max-width:480px;
  margin-left:auto;
  padding:1.1rem 1.25rem 1.3rem;
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.75);
}
.lab-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap; margin-bottom:.5rem;
}
.lab-title{
  font-family:var(--font-head);
  font-size:.74rem; letter-spacing:.16em;
  color:var(--amber);
}
.lab-title i{ margin-right:.35rem; }
.lab-tabs{
  display:flex; gap:.2rem; padding:.2rem;
  background:rgba(0,0,0,.28); border-radius:4px;
}
.lab-tab{
  border:0; background:transparent; cursor:pointer;
  color:#9fb2cc;
  font-family:var(--font-head); font-weight:500; font-size:.8rem;
  padding:.4rem .75rem; border-radius:3px;
  transition:background .2s, color .2s;
}
.lab-tab:hover{ color:#fff; }
.lab-tab.active{ background:var(--steel-blue); color:#fff; }
.lab-tab:focus-visible,
.lab-range:focus-visible,
.finder-chip:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.lab-stage{
  position:relative;
  border-radius:4px;
  background:
    radial-gradient(circle at 50% 48%, rgba(30,143,213,.28), transparent 62%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 28px 100%,
    rgba(5,14,28,.45);
  cursor:ns-resize;
  user-select:none; -webkit-user-select:none;
}
.lab-stage[data-mode="torsion"]{ cursor:ew-resize; }
.lab-stage svg{ display:block; width:100%; height:auto; max-height:320px; }
.lab-stage svg .wire-front{ filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.lab-readout{
  position:absolute; top:.7rem; right:.85rem; text-align:right; pointer-events:none;
}
.lab-readout-label{
  display:block; color:#8fa4c2; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.lab-readout-val{
  font-family:var(--font-head); font-weight:600; color:#fff; font-size:1.55rem; line-height:1.1;
}
.lab-drag-hint{
  position:absolute; left:.85rem; top:.7rem; pointer-events:none;
  color:#8fa4c2; font-size:.72rem; letter-spacing:.04em;
  display:flex; align-items:center; gap:.35rem;
}
.lab-drag-hint i{ color:var(--amber); }

.lab-control{ margin-top:.95rem; }
.lab-control label{
  display:block; color:#c9d3e0; font-size:.82rem; margin-bottom:.45rem;
  font-family:var(--font-head); letter-spacing:.02em;
}
.lab-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:3px; outline:none; cursor:pointer;
  background:linear-gradient(90deg, var(--steel-blue) var(--fill, 40%), rgba(255,255,255,.2) var(--fill, 40%));
}
.lab-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--amber); border:3px solid var(--navy); box-shadow:0 0 0 2px var(--amber);
}
.lab-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--amber); border:3px solid var(--navy); box-shadow:0 0 0 2px var(--amber);
}
.lab-hint{
  margin:.85rem 0 .9rem; min-height:3em;
  color:#b7c2d3; font-size:.9rem; line-height:1.5;
}
.lab-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--navy); background:var(--amber);
  font-family:var(--font-head); font-weight:600; font-size:.88rem;
  padding:.6rem 1.05rem; border-radius:3px;
  transition:transform .2s, background .2s;
}
.lab-cta:hover{ color:var(--navy); background:#ffbd5c; transform:translateX(3px); }

@media (max-width: 991.98px){
  .spring-lab{ margin:0 auto; }
}

/* =========================================================
   INDUSTRIES MARQUEE
   ========================================================= */
.marquee{
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:3px solid var(--amber);
  overflow:hidden;
  padding:.95rem 0;
}
.marquee-label{
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.16em;
  color:var(--amber); text-align:center; margin-bottom:.55rem;
}
.marquee-track{
  display:flex; width:max-content;
  animation:marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  display:flex; align-items:center; gap:.7rem;
  padding:0 1.6rem; white-space:nowrap;
  color:#dbe5f2; font-family:var(--font-head); font-size:1.05rem; letter-spacing:.03em;
}
.marquee-item i{ color:var(--steel-blue); font-size:1.15rem; }
.marquee-item::after{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--signal-red);
  margin-left:1.6rem;
}
@keyframes marquee-scroll{ to{ transform:translateX(-50%); } }

/* =========================================================
   PART FINDER
   ========================================================= */
.finder{
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--steel-blue);
  padding:1.5rem;
  box-shadow:0 24px 40px -30px rgba(10,28,51,.35);
}
.finder-chips{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:.75rem;
}
.finder-chip{
  display:flex; align-items:center; gap:.75rem; text-align:left;
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:.85rem 1rem; cursor:pointer;
  font-family:var(--font-head); font-size:.92rem; color:var(--navy); line-height:1.3;
  transition:transform .2s, border-color .2s, background .2s, color .2s;
}
.finder-chip i{ font-size:1.4rem; color:var(--steel-blue); transition:color .2s; }
.finder-chip:hover{ transform:translateY(-2px); border-color:var(--steel-blue); }
.finder-chip[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.finder-chip[aria-pressed="true"] i{ color:var(--amber); }

.finder-result{
  margin-top:1.25rem;
  display:grid; grid-template-columns:110px 1fr auto; gap:1.25rem; align-items:center;
  padding:1.15rem 1.25rem;
  background:linear-gradient(90deg, rgba(30,143,213,.10), rgba(30,143,213,0));
  border-left:4px solid var(--amber);
}
.finder-result.swap{ animation:finder-in .45s ease; }
@keyframes finder-in{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }
.finder-result img{ width:110px; height:90px; object-fit:cover; border-radius:3px; display:block; }
.finder-result h3{ font-size:1.25rem; margin:0 0 .25rem; }
.finder-result p{ margin:0; }
.finder-actions{ display:flex; flex-direction:column; gap:.5rem; }
@media (max-width: 767.98px){
  .finder-result{ grid-template-columns:1fr; }
  .finder-result img{ width:100%; height:150px; }
  .finder-actions{ flex-direction:row; flex-wrap:wrap; }
}

/* =========================================================
   PROCESS (how an order moves)
   ========================================================= */
.process{ position:relative; }
.process-steps{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem; position:relative;
}
.process-steps::before{
  content:""; position:absolute; top:28px; left:12%; right:12%; height:0;
  border-top:3px dashed rgba(30,143,213,.45);
}
.process-step{ position:relative; text-align:center; padding:0 .5rem; }
.process-num{
  position:relative; z-index:1;
  width:56px; height:56px; margin:0 auto 1rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; font-family:var(--font-head); font-weight:600; font-size:1.2rem;
  border:3px solid var(--amber);
  box-shadow:0 10px 20px -10px rgba(10,28,51,.6);
  transition:transform .3s;
}
.process-step:hover .process-num{ transform:scale(1.1) rotate(-6deg); background:var(--signal-red); }
.process-step h5{ font-size:1.05rem; margin-bottom:.35rem; }
.process-step p{ font-size:.92rem; margin:0; }
@media (max-width: 767.98px){
  .process-steps{ grid-template-columns:1fr; gap:1.75rem; }
  .process-steps::before{ display:none; }
}

/* =========================================================
   PRODUCT TILE TILT + MOBILE ACTION BAR
   ========================================================= */
.product-tile[data-tilt]{
  transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.js .product-tile.reveal:not(.in){ transform:translateY(26px); }

.mobile-bar{ display:none; }
@media (max-width: 767.98px){
  .mobile-bar{
    display:grid; grid-template-columns:repeat(3, 1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:1040;
    background:var(--navy); border-top:3px solid var(--amber);
    box-shadow:0 -10px 24px -12px rgba(0,0,0,.5);
  }
  .mobile-bar a{
    display:flex; flex-direction:column; align-items:center; gap:.1rem;
    padding:.55rem .25rem; color:#fff; font-family:var(--font-head); font-size:.72rem; letter-spacing:.03em;
  }
  .mobile-bar a i{ font-size:1.15rem; color:var(--amber); }
  .mobile-bar a.is-quote{ background:var(--signal-red); }
  .mobile-bar a.is-quote i{ color:#fff; }
  body{ padding-bottom:62px; }
  .back-to-top{ bottom:76px !important; }
}

/* ---------- respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .finder-result.swap{ animation:none; }
  .product-tile[data-tilt]{ transform:none; }
}