/* Global resets */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #0a0a0a; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input, textarea, select, button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

#root { min-height: 100vh; }

/* Concept stage wraps the rendered prototype */
.stage {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

/* Reveal-on-scroll utility */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--rd, 0ms);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* Pointer cursor for clickable */
[role="button"], button:not(:disabled) { cursor: pointer; }

/* Before/after slider */
.ba-wrap {
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.ba-after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--ba-pos, 50%));
}
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  width: 2px;
  background: currentColor;
  transform: translateX(-1px);
  pointer-events: none;
}
.ba-handle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.ba-handle::before {
  content: "↔";
  position: absolute;
  left: 50%; top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  mix-blend-mode: difference;
}

/* Custom scrollbars only inside concept stages */
.stage ::-webkit-scrollbar { width: 8px; height: 8px; }
.stage ::-webkit-scrollbar-track { background: transparent; }
.stage ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 4px; }

/* Marquee */
@keyframes marqueeX {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  width: max-content;
  animation: marqueeX var(--mq-dur, 40s) linear infinite;
}

/* Subtle blur fade overlay */
.fade-edges {
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* No-text-decoration links */
.stage a { text-decoration: none; }

/* Grain texture utility */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Section padding helpers */
.sect-pad { padding: clamp(64px, 9vw, 140px) clamp(20px, 5vw, 80px); }

/* ─────────────────────────────────────────────────────────────────────
   Mobile / touch adaptations
   The 15 concepts use inline `style={{...}}` with fixed multi-column
   grids, large fixed gaps and decorative vertical text. Inline styles
   beat normal CSS, so we use `!important` in a narrow media query to
   re-stack layouts and give touch-sized hit targets without editing
   each concept file.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Re-stack any inline multi-column grid inside a concept */
  .stage [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Allow inline flex rows to wrap so CTA pairs don't overflow */
  .stage [style*="display: flex"]:not(header):not(nav),
  .stage [style*="display:flex"]:not(header):not(nav) {
    flex-wrap: wrap;
  }
  /* Hard cap horizontal overflow inside the stage */
  .stage { overflow-x: hidden; }
  /* Soften huge gaps that look fine on desktop, brutal on phones */
  .stage [style*="gap: clamp"],
  .stage [style*="gap:clamp"] {
    gap: 24px !important;
  }
  /* Section padding — keep vertical rhythm, shrink horizontal */
  .stage .sect-pad,
  .stage [style*="padding: clamp"],
  .stage [style*="padding:clamp"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Headers / nav rows: let them wrap and let horizontal nav scroll */
  .stage header { flex-wrap: wrap !important; gap: 12px !important; row-gap: 12px !important; }
  .stage header nav {
    order: 3;
    width: 100%;
    gap: 18px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  .stage header nav::-webkit-scrollbar { display: none; }
  /* Decorative vertical text gets in the way on phones */
  .stage [style*="writing-mode"] { display: none !important; }
  /* Avoid huge hero min-heights so users can scroll past */
  .stage [style*="min-height: 78vh"],
  .stage [style*="min-height:78vh"],
  .stage [style*="min-height: 90vh"],
  .stage [style*="min-height:90vh"],
  .stage [style*="min-height: 100vh"],
  .stage [style*="min-height:100vh"] {
    min-height: auto !important;
  }
  /* Touch hit targets — buttons/links inside concepts */
  .stage button { min-height: 44px; }
  .stage a[role="button"], .stage [role="button"] { min-height: 44px; }
  /* Reveal animations: shorter travel feels less janky on mobile */
  [data-reveal] { transform: translateY(12px); }
  /* Before/after handle larger for touch */
  .ba-handle::after { width: 52px; height: 52px; }
  .ba-handle::before { font-size: 22px; }
}

/* iOS: prevent zoom on input focus (font < 16px triggers zoom) */
@media (max-width: 768px) {
  .stage input, .stage textarea, .stage select { font-size: 16px !important; }
}