/* BytArch Studio — Tailwind companion (assets/css/site.css)
   Black + caramel editorial theme. Tailwind handles layout.
   This file: tokens, 3D scene utilities, scroll-motion, texture. */

:root{
  --bg:#0A0805;
  --card-bg:#131009;
  --bg-tertiary:#1E170D;
  --text-main:#F5EDE0;
  --text-muted:#AB9A83;
  --border:rgba(210,154,91,.18);
  --accent:#D9A45B;
  --accent-deep:#7A4E22;
}

html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; }
@supports (overflow: clip) {
  html, body{ overflow-x:clip; }
}
body{
  background:var(--bg);
  color:var(--text-main);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* type helpers */
.micro-label{ font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.serif-heading{ font-weight:700; letter-spacing:-.02em; line-height:1.05; }
.mono{ font-family:'JetBrains Mono',monospace; }

/* film grain */
.noise-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------- scroll reveal variants (JS adds .active) ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal[data-reveal="left"]{ transform:translateX(-36px); }
.reveal[data-reveal="right"]{ transform:translateX(36px); }
.reveal[data-reveal="scale"]{ transform:scale(.94) translateY(12px); }
.reveal[data-reveal="flip"]{ transform:perspective(900px) rotateX(8deg) translateY(20px); transform-origin:top center; }
.reveal.active{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .marquee-track{animation:none !important;}
  .spin-slow{animation:none !important;}
  .float-y{animation:none !important;}
}

/* ---------- 3D scene utilities ---------- */
.scene{ perspective:1200px; }
.tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .25s ease-out; }
.tilt-layer{ transform:translateZ(46px); }
.tilt-layer-deep{ transform:translateZ(90px); }
.card-3d{
  transform-style:preserve-3d;
  box-shadow:0 1px 0 rgba(245,237,224,.06) inset, 0 30px 80px rgba(0,0,0,.5);
}
.card-3d:hover{ box-shadow:0 1px 0 rgba(245,237,224,.09) inset, 0 40px 100px rgba(0,0,0,.6), 0 0 60px rgba(198,138,75,.10); }

/* stacked server slabs behind hero terminal */
.slab{ position:absolute; inset:0; border-radius:18px; border:1px solid var(--border); }
.slab-1{ transform:translateZ(-60px) translateY(26px) rotate(-2deg); background:#0d0a06; }
.slab-2{ transform:translateZ(-110px) translateY(52px) rotate(1.5deg); background:#0a0805; opacity:.8; }

/* rotating stamp badge */
.spin-slow{ animation:spin 22s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* gentle float */
.float-y{ animation:floatY 7s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* parallax helper (JS sets --py) */
.parallax{ transform:translate3d(0, var(--py, 0px), 0); will-change:transform; }

/* marquee strip */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:0; width:max-content; animation:marquee 30s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ticket perforation edge for price cards */
.ticket-edge{
  --notch:#0A0805;
  -webkit-mask-image:radial-gradient(circle 9px at 0 50%, transparent 98%, #000 100%), radial-gradient(circle 9px at 100% 50%, transparent 98%, #000 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* scroll progress bar */
#scroll-progress{ transform-origin:0 50%; transform:scaleX(0); }

/* ledger row hover slide */
.ledger-row{ position:relative; isolation:isolate; }
.ledger-row::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(217,164,91,.10), transparent 60%);
  opacity:0; transition:opacity .35s ease;
}
.ledger-row:hover::after{ opacity:1; }

/* blueprint / wireframe texture */
.setup-section{
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(198,138,75,.16), transparent 70%),
    linear-gradient(180deg, #0A0805 0%, #131009 100%);
}
.blueprint-grid{
  background-image:linear-gradient(rgba(210,154,91,.25) 1px, transparent 1px),linear-gradient(90deg, rgba(210,154,91,.25) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 75%);
}
.wireframe-grid{
  background-image:linear-gradient(rgba(210,154,91,.2) 1px, transparent 1px),linear-gradient(90deg, rgba(210,154,91,.2) 1px, transparent 1px);
  background-size:32px 32px;
}
.hero-visual-frame{
  background:rgba(19,16,9,.82);
  border:1px solid var(--border);
  border-radius:20px;
  backdrop-filter:blur(12px);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.product-shadow{ box-shadow:0 40px 120px rgba(0,0,0,.55), 0 0 80px rgba(198,138,75,.14); }

/* FAQ */
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item[open] summary .faq-plus{ transform:rotate(45deg); }
.faq-plus{ transition:transform .3s ease; }

/* mobile menu (bottom sheet states driven by .sheet-open) */
#mobile-menu{ transition:opacity .3s ease, visibility .3s ease; }

/* ---------- iOS-native mobile layer (tablets/phones only) ---------- */
@media (max-width:1023.5px){
  *{ -webkit-tap-highlight-color:transparent; }
  html{ overscroll-behavior-y:none; }
  body{ touch-action:manipulation; }
  /* keep 16px inputs so iOS Safari never auto-zooms into the form */
  input, select, textarea{ font-size:16px !important; }
  /* bottom sheet states */
  #mobile-menu{ visibility:hidden; transition:visibility 0s linear .45s; }
  #mobile-menu.sheet-open{ visibility:visible; transition-delay:0s; }
  #mobile-menu .sheet-backdrop{ opacity:0; transition:opacity .3s ease; }
  #mobile-menu.sheet-open .sheet-backdrop{ opacity:1; }
  #mobile-menu .sheet{
    transform:translateY(103%);
    transition:transform .42s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -20px 80px rgba(0,0,0,.55);
  }
  #mobile-menu.sheet-open .sheet{ transform:translateY(0); }
  /* grouped-list tap feedback */
  .ledger-row:active{ background:rgba(217,164,91,.07); }
  .tabbar-tab:active{ opacity:.6; }
}

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0A0805; }
::-webkit-scrollbar-thumb{ background:#3A2C18; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#5A4426; }