/* ============================================================
   CAVRIX PREMIUM SKIN v1
   Rules of engagement:
   - NEVER sets opacity/transform/translate on bundle elements
     (Framer Motion owns those via inline styles)
   - All effects live in ::before/::after, box-shadow, border,
     background, filter — properties the bundle never animates
   - Killable from Admin → Settings → Premium skin
   ============================================================ */

/* ---------- ambient stage (injected fixed overlay, z between
   canvas z-0 and content z-10) ---------- */
.cvx-ambient {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 38% at 18% 8%,  rgba(139, 92, 246, .055), transparent 70%),
    radial-gradient(ellipse 45% 32% at 85% 78%, rgba(163, 230, 53, .035), transparent 70%),
    radial-gradient(ellipse 50% 40% at 78% 12%, rgba(34, 211, 238, .04),  transparent 70%);
}
.cvx-ambient::before { /* faint engineering grid */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 75%);
}
.cvx-ambient::after { /* film grain */
  content: ""; position: absolute; inset: 0; opacity: .35;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 768px) {
  .cvx-ambient::after { display: none; }  /* grain costs paint on phones */
}

/* ---------- premium cards (JS tags .cvx-card on bordered,
   rounded blocks inside the main sections) ---------- */
.cvx-card { position: relative; }
.cvx-card::before { /* gradient border, awakens on hover */
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(139, 92, 246, .45), rgba(34, 211, 238, .25) 40%,
    rgba(255,255,255,.06) 60%, rgba(163, 230, 53, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.cvx-card::after { /* cursor-following highlight (vars set by JS) */
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--cvx-mx, 50%) var(--cvx-my, 50%),
    rgba(255,255,255,.055), transparent 65%);
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .cvx-card:hover::before { opacity: 1; }
  .cvx-card:hover::after  { opacity: 1; }
  /* no generic hover box-shadow: the glass card component ships its own
     crafted hover shadows (inset catchlight) — never flatten those */
}

/* ---------- buttons: soft glow, no motion ---------- */
@media (hover: hover) and (pointer: fine) {
  #root a[href]:hover, #root button:hover { text-decoration: none; }
  .cvx-glow-btn:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.4),
                0 0 24px rgba(139, 92, 246, .18),
                0 0 60px rgba(139, 92, 246, .08),
                inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
}

/* ---------- frosted nav scrim on scroll (bar is pointer-events-none,
   background-only change, zero layout impact) ---------- */
.cvx-navbar-scrim { position: relative; }
.cvx-navbar-scrim::before {
  content: ""; position: absolute; inset: -24px -48px -18px;
  background: linear-gradient(to bottom, rgba(3,3,3,.72), rgba(3,3,3,.35) 60%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  mask-image: linear-gradient(to bottom, black 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none; z-index: -1;
}
body.cvx-scrolled .cvx-navbar-scrim::before { opacity: 1; }

/* ---------- contact form focus ring ---------- */
#contact input:focus, #contact textarea:focus, #contact select:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .14),
              0 0 24px rgba(139, 92, 246, .08);
}

/* ---------- editorial typography refinements (layout-safe) ---------- */
#root h1, #root h2, #root h3 { text-wrap: balance; }
#root p { text-wrap: pretty; }

/* ---------- scroll indicator (fixed, body-level, ours) ---------- */
.cvx-scroll-hint {
  position: fixed; left: 50%; bottom: 26px; z-index: 30;
  translate: -50% 0;
  width: 24px; height: 38px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.22);
  pointer-events: none;
  opacity: 0; transition: opacity .6s ease .8s;
}
.cvx-scroll-hint.cvx-on { opacity: 1; transition-delay: 1.6s; }
.cvx-scroll-hint::before {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; border-radius: 3px;
  background: rgba(255,255,255,.65);
  translate: -50% 0;
  animation: cvx-hint 1.8s cubic-bezier(.45,0,.25,1) infinite;
}
body.cvx-scrolled .cvx-scroll-hint { opacity: 0 !important; transition-delay: 0s; }
@keyframes cvx-hint {
  0%   { translate: -50% 0;    opacity: 0; }
  25%  { opacity: 1; }
  70%  { translate: -50% 12px; opacity: 0; }
  100% { translate: -50% 12px; opacity: 0; }
}

/* ---------- our own injected elements get the full treatment ---------- */
.cvx-nl-btn, .cvx-live-link { will-change: translate; }
@media (hover: hover) and (pointer: fine) {
  .cvx-nl-btn:hover {
    box-shadow: 0 0 28px rgba(139, 92, 246, .22), 0 8px 30px rgba(0,0,0,.4);
  }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cvx-scroll-hint::before { animation: none; }
  .cvx-card::before, .cvx-card::after,
  .cvx-navbar-scrim::before { transition: none; }
}

/* ============================================================
   PRODUCT CARD SHOWCASE (v4) — #products + #featured-work
   Existing 3D tilt (translateZ layers) is the bundle's own
   system — we add NO motion, only surface + type craft.
   ============================================================ */

/* ---- luxury surface: breathing room, glass noise, edge light */
#products .cvx-card {
  padding: clamp(36px, 3.6vw, 52px) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),                    /* top edge catchlight */
    inset 32px 32px 72px -64px rgba(139, 92, 246, .14),     /* corner ambience */
    inset -32px -32px 72px -64px rgba(34, 211, 238, .10),
    0 1px 2px rgba(0,0,0,.5),                               /* layered depth, not blur-soup */
    0 8px 16px -8px rgba(0,0,0,.5),
    0 24px 48px -24px rgba(0,0,0,.55);
  /* no transition declared: the card's own transition-all animates this,
     and overriding transition here would snap its hover-lift */
}
@media (hover: hover) and (pointer: fine) {
  #products .cvx-card:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 32px 32px 72px -60px rgba(139, 92, 246, .2),
      inset -32px -32px 72px -60px rgba(34, 211, 238, .15),
      0 1px 2px rgba(0,0,0,.5),
      0 12px 24px -8px rgba(0,0,0,.55),
      0 40px 80px -32px rgba(0,0,0,.65);
  }
}

/* ---- reflection sweep rides the existing hover ::after */
#products .cvx-card::after {
  background:
    radial-gradient(280px circle at var(--cvx-mx, 50%) var(--cvx-my, 50%),
      rgba(255,255,255,.055), transparent 65%),
    linear-gradient(105deg, transparent 42%, rgba(255,255,255,.065) 50%, transparent 58%);
  background-size: auto, 260% 100%;
  background-repeat: no-repeat;
  background-position: 0 0, -160% 0;
}
@media (hover: hover) and (pointer: fine) {
  #products .cvx-card:hover::after {
    animation: cvx-sweep 1.1s cubic-bezier(.3,.6,.3,1) .08s 1 forwards;
  }
}
@keyframes cvx-sweep {
  from { background-position: 0 0, -160% 0; }
  to   { background-position: 0 0, 260% 0; }
}

/* ---- typography: title is the anchor */
#products .cvx-card h3 {
  font-size: clamp(34px, 3.2vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
}
#products .cvx-card p {
  font-size: 16px !important;
  line-height: 1.72 !important;
  color: #DADADA !important;
  font-weight: 300;
  max-width: 46ch;
}

/* ---- small labels: metadata, not placeholders */
#products .cvx-card span[class*="font-mono"][class*="tracking-"],
#featured-work span[class*="font-mono"][class*="uppercase"] {
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  word-spacing: 0.12em;
  opacity: .92;
}

/* ---- footer metadata: internal build label energy */
#products .cvx-card div[class*="text-[10px]"][class*="font-mono"] {
  letter-spacing: 0.22em !important;
  opacity: .85;
}

/* ---- hairline gradient divider with fading edges */
#products .cvx-card div[class*="border-t"][class*="my-6"],
#featured-work div[class*="border-t"][class*="my-6"] {
  border-top: 0 !important;
  height: 1px;
  margin-top: 28px !important;
  margin-bottom: 28px !important;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.14) 18%,
    rgba(139, 92, 246, .28) 50%,
    rgba(255,255,255,.14) 82%, transparent);
  box-shadow: 0 0 12px rgba(139, 92, 246, .08);
}

/* ---- status pill → deployment badge */
#products div[class*="rounded-full"][class*="font-mono"][class*="border-white/20"] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.35);
  letter-spacing: 0.2em !important;
}
#products div[class*="rounded-full"][class*="font-mono"][class*="border-white/20"]::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 999px;
  background: #a3e635;
  box-shadow: 0 0 8px rgba(163, 230, 53, .8);
  animation: cvx-live 2.2s ease-in-out infinite;
  vertical-align: middle;
  position: relative; top: -1px;
}
/* upcoming/locked pill: amber standby dot, no pulse */
#products div[class*="rounded-full"][class*="font-mono"][class*="border-white/10"]::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 999px;
  background: rgba(251, 146, 60, .7);
  vertical-align: middle;
  position: relative; top: -1px;
}
@keyframes cvx-live {
  0%, 100% { box-shadow: 0 0 4px rgba(163, 230, 53, .5); }
  50%      { box-shadow: 0 0 12px rgba(163, 230, 53, .95); }
}

/* ---- gradient border: brighter on these showcase cards */
#products .cvx-card::before {
  background: linear-gradient(150deg,
    rgba(255,255,255,.22), rgba(139, 92, 246, .5) 30%,
    rgba(255,255,255,.05) 55%, rgba(34, 211, 238, .35) 80%,
    rgba(163, 230, 53, .3));
}

/* ---- featured-work: shared craft, lighter hand */
#featured-work .cvx-card p[class*="text-"] {
  color: #DADADA !important;
  line-height: 1.7 !important;
}

@media (prefers-reduced-motion: reduce) {
  #products .cvx-card:hover::after { animation: none; }
  #products div[class*="border-white/20"]::before { animation: none; }
}
@media (max-width: 768px) {
  #products .cvx-card { padding: 30px !important; }
  #products .cvx-card h3 { font-size: clamp(30px, 8vw, 40px) !important; }
}