/* ============================================================
   Web{X} Studio — shared stylesheet
   Extracted & consolidated from the original design canvas.
   Loaded by every page (cache-friendly across the whole site).
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:#0A0A0A;color:#EDEDED;font-family:'Space Grotesk',sans-serif;overflow-x:hidden}
::selection{background:#9D5CFF;color:#0A0A0A}
img{max-width:100%;display:block}
section[id]{scroll-margin-top:96px}

/* ---------- Lenis smooth scroll ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* custom-cursor pages hide the native cursor (desktop only) */
@media (pointer:fine){
  html,body,a,button,summary{cursor:none}
  input,textarea,select{cursor:text}
}

/* ---------- Accessibility helpers ---------- */
.wx-skip{position:fixed;top:-120px;left:16px;z-index:100001;background:#9D5CFF;color:#0A0A0A;
  padding:12px 20px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;
  transition:top .25s cubic-bezier(.16,1,.3,1)}
.wx-skip:focus{top:16px}
.wx-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid #9D5CFF;outline-offset:3px;border-radius:4px}

/* When JS is unavailable (or hasn't booted), never hide reveal content */
.no-js [data-reveal]{opacity:1!important;transform:none!important}

/* ---------- Keyframes ---------- */
@keyframes wx-grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(2%,4%)}}
@keyframes wx-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes wx-marquee-rev{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes wx-mesh{0%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,-5%) scale(1.15)}66%{transform:translate(-5%,4%) scale(1.05)}100%{transform:translate(0,0) scale(1)}}
@keyframes wx-scrolldot{0%{transform:translateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes wx-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}}
@keyframes wx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes wx-spin{to{transform:rotate(360deg)}}

/* ---------- Animated underline links ---------- */
.wx-uline{position:relative}
.wx-uline::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.wx-uline:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Selected-work cards (home) ---------- */
.wx-work:hover .wx-work-img{transform:scale(1.06)}
.wx-work:hover .wx-work-rgb{opacity:.55}
.wx-work:hover .wx-work-meta{transform:translateY(0);opacity:1}

/* ---------- Project rows (work) — name rolls up, violet copy rolls in from below ---------- */
.wx-row{transition:padding-left .5s cubic-bezier(.16,1,.3,1)}
.wx-row:hover{padding-left:clamp(10px,2vw,40px)}
.wx-row:hover .wx-row-arrow{opacity:1;transform:translateX(0)}
.wx-row-name{position:relative;display:block;overflow:hidden;line-height:1.15;color:transparent}
.wx-row-name::before,.wx-row-name::after{content:attr(data-text);position:absolute;left:0;top:0;white-space:nowrap;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.wx-row-name::before{color:#EDEDED}
.wx-row-name::after{color:#9D5CFF;transform:translateY(115%)}
.wx-row:hover .wx-row-name::before{transform:translateY(-115%)}
.wx-row:hover .wx-row-name::after{transform:translateY(0)}

/* ---------- Team cards (studio) ---------- */
.wx-team:hover .wx-team-img{filter:grayscale(0);transform:scale(1.04)}

/* ---------- Form fields (contact) ---------- */
input::placeholder,textarea::placeholder{color:#5A5A62}
input:focus,textarea:focus{outline:none;border-color:#9D5CFF !important}

/* ---------- FAQ accordion (SEO content) — rounded cards, morphing icon, JS-animated height ---------- */
.wx-faq{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#0E0E12;margin-bottom:14px;overflow:hidden;transition:border-color .4s ease,background .4s ease,box-shadow .4s ease}
.wx-faq:hover{border-color:rgba(255,255,255,.18)}
.wx-faq[open]{border-color:rgba(157,92,255,.45);background:#100b18;box-shadow:0 20px 50px -30px rgba(157,92,255,.55)}
.wx-faq[open]:hover{border-color:rgba(157,92,255,.6)}
.wx-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(20px,2.6vh,28px) clamp(20px,3vw,34px);font-size:clamp(17px,1.7vw,23px);font-weight:600;letter-spacing:-.02em;color:#EDEDED;transition:color .3s ease}
.wx-faq summary::-webkit-details-marker{display:none}
.wx-faq summary:hover{color:#fff}
.wx-faq[open] summary{color:#fff}
.wx-faq-ico{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease,border-color .35s ease}
.wx-faq-ico::before,.wx-faq-ico::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:2px;border-radius:2px;background:#9D5CFF;transform:translate(-50%,-50%);transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease}
.wx-faq-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.wx-faq summary:hover .wx-faq-ico{border-color:rgba(157,92,255,.65)}
.wx-faq[open] .wx-faq-ico{transform:rotate(135deg);background:#9D5CFF;border-color:#9D5CFF}
.wx-faq[open] .wx-faq-ico::before,.wx-faq[open] .wx-faq-ico::after{background:#0A0A0A}
.wx-faq-body{padding:0 clamp(20px,3vw,34px) clamp(22px,2.8vh,30px);max-width:840px;font-size:clamp(15px,1.15vw,17px);line-height:1.7;color:#9A9AA2}
.wx-faq-body a{color:#9D5CFF;text-decoration:none}
.wx-faq-body a:hover{text-decoration:underline}

/* ---------- Capability cards: cursor-tracking spotlight ---------- */
[data-cap-card]{--mx:50%;--my:50%}
[data-cap-card]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .45s ease;background:radial-gradient(circle 520px at var(--mx) var(--my),rgba(157,92,255,.16),transparent 60%)}
@media (pointer:fine){[data-cap-card]:hover::after{opacity:1}}

/* ---------- Selected-work cards: 3D tilt ---------- */
.wx-work{will-change:transform}

/* ---------- Responsive polish (was injected by the runtime) ---------- */
@media (max-width:820px){
  [data-cap-card]{grid-template-columns:1fr !important}
  [data-cap-media]{max-width:520px;width:100%}
}
@media (max-width:600px){
  [data-header]{padding:14px 20px !important}
  .wx-row{grid-template-columns:28px 1fr auto !important;gap:14px !important}
  .wx-faq .wx-faq-body{padding-right:0}
}

/* ---------- Respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}