/* ASCENTUS Studio — core design system.
   Self-hosted fonts (no external CDN), design tokens (CLAUDE.md ui-ux-pro-max),
   responsive helper classes, keyframes, and reduced-motion support. Component
   styling stays inline in the markup for pixel-fidelity with the design handoff. */

/* ---- Self-hosted fonts ---------------------------------------------------- */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/playfair-400.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/playfair-500.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/playfair-600.woff2') format('woff2'); }

/* ---- Design tokens -------------------------------------------------------- */
:root {
  --primary: #FFFFFF;
  --secondary: #B0B3B8;
  --bg: #0A0A0C;
  --surface: #16161A;
  --gold: #D3AF37;
  --gold-hi: #F3E5AB;
  --cta: #FF5A00;
  --border: rgba(255, 255, 255, 0.08);
}

/* ---- Reset / base --------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--primary);
  font-family: Geist, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; }
button, input { font-family: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; border-radius: 4px; }

/* ---- Layout helpers ------------------------------------------------------- */
.asc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.asc-sec { padding-top: 140px; padding-bottom: 140px; }
.art-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.leg-wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.leg-wrap a { color: var(--gold-hi); }
@media (max-width: 768px) { .asc-sec { padding-top: 92px; padding-bottom: 92px; } }

/* ---- Header nav responsiveness -------------------------------------------- */
.asc-navlinks { display: flex; gap: 2px; align-items: center; }
.asc-hamb { display: none; }
@media (max-width: 920px) {
  .asc-navlinks { display: none; }
  .asc-hamb { display: inline-flex; }
  .asc-deskcta { display: none; }
}

/* Overlays: toggled via the [hidden] attribute in client.js. */
[data-mobile-menu]:not([hidden]) { display: flex; }
[data-cookie-banner]:not([hidden]) { display: flex; }
[data-cookie-modal]:not([hidden]) { display: flex; }
[data-quiz-overlay]:not([hidden]) { display: block; }

/* ---- Pricing swipe matrix (mobile) --------------------------------------- */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pcarrows { display: none; }
@media (max-width: 980px) {
  .pcards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px;
    padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pcards::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 82%; scroll-snap-align: center; }
  .pcarrows { display: flex; }
}

/* ---- Blog grid ------------------------------------------------------------ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---- Scroll-reveal (progressive: no hiding without JS) -------------------- */
.asc-js .asc-reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.asc-js .asc-reveal.asc-in { opacity: 1; transform: none; }

/* ---- Keyframes ------------------------------------------------------------ */
@keyframes ascSpin { to { transform: rotate(360deg); } }
@keyframes ascPulse { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }
@keyframes ascMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ascFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ascRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.asc-marquee:hover { animation-play-state: paused; }

/* ---- Lift cards: staggered viewport entry + hover scale + diagonal red line --
   Entry: fade in + translateY(20px)->0 + drop-shadow "lift", staggered per card
   (delay via --d set by client.js). Hover: scale(1.025) + a soft diagonal red
   line overlay. All motion is transform/opacity/box-shadow only — no CLS. */
.asc-rise { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.asc-js .asc-rise { opacity: 0; transform: translateY(20px); }
.asc-rise.asc-in { opacity: 1; transform: none; }

.asc-lift {
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.asc-js .asc-lift { opacity: 0; }
.asc-lift.asc-in { opacity: 1; animation: ascLiftIn .7s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--d, 0ms); }
.asc-lift:hover { transform: scale(1.025); box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(211, 175, 55, .3); z-index: 2; }
.asc-lift::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transform: scale(0);
  background: linear-gradient(135deg, transparent calc(50% - 50px), rgba(150, 28, 32, .22) calc(50% - 10px), rgba(176, 42, 46, .4) 50%, rgba(150, 28, 32, .22) calc(50% + 10px), transparent calc(50% + 50px));
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.asc-lift:hover::after { opacity: 1; transform: scale(1); }

@keyframes ascLiftIn { from { opacity: 0; transform: translateY(20px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } to { opacity: 1; transform: none; box-shadow: 0 22px 48px rgba(0, 0, 0, .5); } }

.asc-sheen { position: relative; overflow: hidden; }
.asc-sheen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transform: translateX(-120%);
  background: linear-gradient(115deg, transparent 30%, rgba(243, 229, 171, .14) 45%, rgba(255, 255, 255, .30) 50%, rgba(243, 229, 171, .14) 55%, transparent 70%);
}
.asc-sheen:hover::after { animation: ascSheen .85s ease; }

@keyframes ascSheen { 0% { transform: translateX(-120%); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }

/* ---- Portfolio 3D card stack ---------------------------------------------
   Base = the original single-column showcase (works with no JS / reduced-motion).
   client.js promotes it to a pinned 3D stack by adding `.asc-stack-live` to the
   section and driving per-card transforms; sticky handles the pin (no library).
   --stack-h (track length) and card min-heights are measured + set by client.js. */
[data-stack-cards] { display: flex; flex-direction: column; gap: 96px; }

.asc-stack-live [data-stack-track] { position: relative; height: var(--stack-h); }
.asc-stack-live [data-stack-stage] {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  perspective: var(--stack-persp, 1500px);
}
/* width:100% is load-bearing: the cards are position:absolute (out of flow), so
   without it this flex item collapses to 0 width and the cards collapse with it. */
.asc-stack-live [data-stack-cards] { display: block; position: relative; width: 100%; }
.asc-stack-live [data-stack-card] {
  position: absolute; top: 0; left: 0; width: 100%;
  transform-origin: bottom center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .asc-js .asc-reveal, .asc-js .asc-rise, .asc-js .asc-lift { opacity: 1 !important; transform: none !important; }
  .asc-marquee { animation: none !important; }
  /* Never pin/stack under reduced motion, even if the class were added. */
  [data-stack-card] { position: static !important; transform: none !important; opacity: 1 !important; min-height: 0 !important; }
  [data-stack-cards] { display: flex !important; flex-direction: column; gap: 96px; height: auto !important; }
  [data-stack-track] { height: auto !important; }
  [data-stack-stage] { position: static !important; height: auto !important; display: block !important; }
}