/* ============================================================
   ARCYNIDE — shared motion & hover effects (loaded on all public pages)
   Everything here is progressive: if JS fails, content stays visible.
   ============================================================ */

html{overflow-x:clip;}

/* ---------- Scroll progress bar ---------- */
#fx-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1000; pointer-events:none;
  background:linear-gradient(90deg, var(--green, #57e3a8), var(--cyan, #4fd8ff));
  transform-origin:0 50%; transform:scaleX(0);
  box-shadow:0 0 10px rgba(87,227,168,0.6);
}

/* ---------- Nav: depth when scrolled + active page ---------- */
header.nav{transition:box-shadow .3s ease, border-color .3s ease, background .3s ease;}
header.nav.fx-scrolled{
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
  border-bottom-color:rgba(87,227,168,0.16) !important;
  background:rgba(7,8,10,0.94) !important;
}
.nav-links a.fx-active{color:var(--green, #57e3a8) !important;}
.nav-links a.fx-active::after{right:0 !important;}
.brand img{transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .3s ease;}
.brand:hover img{transform:rotate(-8deg) scale(1.06); filter:drop-shadow(0 0 10px rgba(87,227,168,0.45));}
.cart-nav-btn{transition:color .2s ease, transform .2s ease;}
.cart-nav-btn:hover{color:var(--green, #57e3a8) !important; transform:translateY(-1px);}

/* ---------- Buttons ---------- */
.btn-primary{
  background-image:linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.5) 50%, transparent 62%) !important;
  background-size:260% 100% !important; background-repeat:no-repeat !important;
  background-position:150% 0 !important;
  transition:background-position .7s ease, transform .2s ease, filter .2s ease !important;
}
.btn-primary:hover:not([disabled]){background-position:-60% 0 !important; transform:translateY(-2px); filter:brightness(1.08);}
.btn-primary:active:not([disabled]){transform:translateY(0) scale(.98);}
.btn-outline{transition:border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease !important;}
.btn-outline:hover{border-color:var(--green, #57e3a8) !important; color:var(--green, #57e3a8) !important; background-color:rgba(87,227,168,0.06) !important; transform:translateY(-2px);}

/* ---------- Cursor spotlight on cards ---------- */
.fx-spot{position:relative;}
.fx-spot::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(87,227,168,0.11), transparent 45%);
  opacity:0; transition:opacity .35s ease;
}
.fx-spot:hover::after{opacity:1;}

/* ---------- Tilt (Built Different image etc.) ---------- */
.fx-tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; transform-style:preserve-3d; will-change:transform;}
.fx-tilt:hover{border-color:var(--green-dim, #2c7a5a) !important; box-shadow:0 24px 60px rgba(0,0,0,0.5), 0 0 40px rgba(87,227,168,0.10);}
.fx-tilt img{transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.fx-tilt:hover img{transform:scale(1.04);}

/* ---------- Small details ---------- */
.process-step{transition:transform .3s ease;}
.process-step:hover{transform:translateY(-3px);}
.process-step .ps-num{transition:color .3s ease, text-shadow .3s ease;}
.process-step:hover .ps-num{text-shadow:0 0 12px rgba(87,227,168,0.7);}
.process-step:hover .ps-title{color:var(--green, #57e3a8);}
.process-step .ps-title{transition:color .3s ease;}
.value-list li{transition:color .2s ease, transform .2s ease;}
.value-list li:hover{color:var(--steel-l, #d7dcdf); transform:translateX(4px);}
.testimonial-card{transition:border-color .3s ease, transform .3s ease;}
.testimonial-card:hover{border-color:var(--green-dim, #2c7a5a); transform:translateY(-4px);}
footer a{transition:color .2s ease;}
footer a:hover{color:var(--green, #57e3a8) !important;}

/* ---------- Scroll reveal ---------- */
.fx-reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1) !important;}
.fx-reveal.fx-in{opacity:1; transform:none;}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-reveal{opacity:1 !important; transform:none !important;}
  .fx-tilt, .fx-tilt img, .btn-primary, .btn-outline, .process-step, .testimonial-card{transition:none !important; transform:none !important;}
  #fx-progress{display:none;}
}
@media (hover: none){
  .fx-spot::after{display:none;}
}

/* ============================================================
   RESPONSIVE: full-width layout + big-monitor scaling
   ============================================================ */
:root{--gutter:clamp(16px, 3.6vw, 80px);}

/* 1440p / 4K / ultrawide: scale the whole UI so it isn't tiny & sparse.
   Layout stays fluid, so it still fills edge-to-edge. */
@media (min-width:2200px) and (min-height:1200px){ html{zoom:1.22;} :root{--z:1.22;} }
@media (min-width:3000px){ html{zoom:1.32;} :root{--z:1.32;} }
@media (min-width:3000px) and (min-height:1500px){ html{zoom:1.5;} :root{--z:1.5;} }
@media (min-width:3600px) and (min-height:1900px){ html{zoom:1.75;} :root{--z:1.75;} }

/* ---------- Mobile menu (canonical nav) ---------- */
.fx-burger{display:none; background:none; border:1px solid var(--hairline, #1d2125); width:40px; height:40px; cursor:pointer; color:var(--steel-l, #d7dcdf); align-items:center; justify-content:center; margin-left:12px; padding:0;}
.fx-burger span{display:block; width:18px; height:1.5px; background:currentColor; position:relative; transition:background .2s ease;}
.fx-burger span::before, .fx-burger span::after{content:''; position:absolute; left:0; width:18px; height:1.5px; background:currentColor; transition:transform .25s ease, top .25s ease;}
.fx-burger span::before{top:-6px;} .fx-burger span::after{top:6px;}
.fx-burger.open span{background:transparent;}
.fx-burger.open span::before{top:0; transform:rotate(45deg);}
.fx-burger.open span::after{top:0; transform:rotate(-45deg);}
.fx-mobile-menu{display:none;}

@media (max-width:750px){
  header.nav:has(#nav-cart-btn) .nav-inner{display:flex !important; align-items:center;}
  header.nav:has(#nav-cart-btn) .nav-links{display:none !important;}
  header.nav:has(#nav-cart-btn) .cart-nav-btn{margin-left:auto !important;}
  .fx-burger{display:inline-flex;}
  .brand img{height:30px !important;}
  .fx-mobile-menu{
    display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%;
    background:#07080a; border-bottom:1px solid var(--hairline, #1d2125); box-shadow:0 20px 40px rgba(0,0,0,0.6);
    padding:8px var(--gutter) 18px; backdrop-filter:blur(12px);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
  }
  .fx-mobile-menu.open{max-height:480px; opacity:1; pointer-events:auto;}
  .fx-mobile-menu a{padding:15px 2px; border-bottom:1px solid var(--hairline, #1d2125); font-size:16px; color:var(--steel-l, #d7dcdf); display:flex; justify-content:space-between; align-items:center;}
  .fx-mobile-menu a::after{content:'→'; color:var(--green, #57e3a8); font-family:'JetBrains Mono', monospace;}
  .fx-mobile-menu a:last-child{border-bottom:none;}
  .fx-mobile-menu a.fx-active{color:var(--green, #57e3a8);}
}

/* ============================================================
   NAV — open links with bracket hover + cart button
   (applies to the shared nav on every page that has the cart)
   ============================================================ */
header.nav:has(#nav-cart-btn) .nav-links{gap:clamp(22px, 2.6vw, 46px) !important;}
header.nav:has(#nav-cart-btn) .nav-links a{
  position:relative; padding:8px 2px !important; font-size:15.5px !important; font-weight:500;
  color:var(--steel-m, #9aa1a6) !important;
  transition:color .25s ease, text-shadow .25s ease, letter-spacing .3s ease !important;
}
/* Corner brackets that snap in around the hovered link */
header.nav:has(#nav-cart-btn) .nav-links a::before{
  content:''; position:absolute; inset:0 -12px; pointer-events:none; opacity:0;
  transform:scale(1.25); transition:opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  --c:var(--green, #57e3a8);
  background:
    linear-gradient(var(--c),var(--c)) top left    / 8px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) top left    / 1.5px 8px no-repeat,
    linear-gradient(var(--c),var(--c)) top right   / 8px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) top right   / 1.5px 8px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left / 8px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left / 1.5px 8px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/ 8px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/ 1.5px 8px no-repeat;
}
header.nav:has(#nav-cart-btn) .nav-links a:hover::before,
header.nav:has(#nav-cart-btn) .nav-links a:focus-visible::before{opacity:1; transform:scale(1);}
header.nav:has(#nav-cart-btn) .nav-links a:hover{color:#fff !important; text-shadow:0 0 14px rgba(87,227,168,0.45);}
/* No underline; the current page gets a glowing dot instead */
header.nav:has(#nav-cart-btn) .nav-links a::after{display:none !important;}
header.nav:has(#nav-cart-btn) .nav-links a.fx-active{color:var(--green, #57e3a8) !important;}
header.nav:has(#nav-cart-btn) .nav-links a.fx-active::after{display:none !important;}
header.nav:has(#nav-cart-btn) .nav-links a.repair-nav-btn{--c:var(--cyan, #4fd8ff);}
header.nav:has(#nav-cart-btn) .nav-links a.repair-nav-btn::before{--c:var(--cyan, #4fd8ff);}
header.nav:has(#nav-cart-btn) .nav-links a.repair-nav-btn:hover{text-shadow:0 0 14px rgba(79,216,255,0.45);}

/* Cart button */
header.nav:has(#nav-cart-btn) .cart-nav-btn{
  width:44px; height:44px; justify-content:center; border-radius:12px !important;
  border:1px solid rgba(255,255,255,0.09) !important; background:rgba(255,255,255,0.03) !important;
  color:var(--steel-l, #d7dcdf) !important;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .2s ease, color .2s ease !important;
}
header.nav:has(#nav-cart-btn) .cart-nav-btn:hover{
  border-color:rgba(87,227,168,0.5) !important; background:rgba(87,227,168,0.08) !important;
  box-shadow:0 0 22px rgba(87,227,168,0.2); color:var(--green, #57e3a8) !important; transform:translateY(-1px);
}
header.nav:has(#nav-cart-btn) .cart-nav-btn svg{width:20px !important; height:20px !important;}
header.nav:has(#nav-cart-btn) #cart-count-badge{
  top:-7px !important; right:-7px !important; min-width:19px; width:auto !important; height:19px !important; padding:0 5px;
  border-radius:999px !important; background:var(--green, #57e3a8) !important; color:#07110d !important;
  box-shadow:0 0 12px rgba(87,227,168,0.6); border:2px solid #07080a; box-sizing:border-box; font-size:10px !important;
}
header.nav:has(#nav-cart-btn) .fx-burger{width:44px; height:44px; border-radius:12px; border-color:rgba(255,255,255,0.09); background:rgba(255,255,255,0.03);}

@media (max-width:1100px) and (min-width:751px){
  header.nav:has(#nav-cart-btn) .nav-links{gap:20px !important;}
  header.nav:has(#nav-cart-btn) .nav-links a{font-size:14px !important;}
}
@media (prefers-reduced-motion: reduce){
  header.nav:has(#nav-cart-btn) .nav-links a::before{transition:none;}
}

/* One consistent header size + logo on every page */
header.nav:has(#nav-cart-btn){padding:14px 0 !important;}
header.nav:has(#nav-cart-btn) .brand{display:flex !important; align-items:center; gap:10px !important;}
header.nav:has(#nav-cart-btn) .brand img{height:36px !important; width:auto !important;}
header.nav:has(#nav-cart-btn) .brand span{font-family:'Chakra Petch', sans-serif !important; font-weight:700 !important; font-size:17.5px !important; letter-spacing:0.05em !important; color:var(--steel-l, #d7dcdf);}
@media (max-width:750px){ header.nav:has(#nav-cart-btn){padding:10px 0 !important;} header.nav:has(#nav-cart-btn) .brand img{height:30px !important;} }