/* DO THE PROJECT — decorative extras layered on top of the Tailwind design system */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

/* Sticky header gains a slightly denser shadow once the page has scrolled */
#navbar.scrolled { box-shadow: 0 8px 30px -12px rgba(15, 23, 42, .12); }

/* Hero document stage: three overlapping tilted document samples */
.document-stage {
  position: relative;
  width: min(900px, 100%);
  margin: 0 auto;
  perspective: 1500px;
}
.sheet {
  position: relative;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: #1e293b;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
  overflow: hidden;
  transition: transform .5s var(--ease);
}
.sheet img { width: 100%; height: 230px; object-fit: contain; background: #fff; border-radius: 8px; }
.sheet figcaption { color: #cbd5e1; font-size: .7rem; letter-spacing: .03em; padding: 10px 2px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet:hover { transform: translateY(-6px); }

/* Work / portfolio preview panel */
.work-display { transition: transform .35s var(--ease); }
#work-panel { min-height: 96px; }
.work-tabs button[aria-selected="true"] { background: #2563eb; color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, .35); }
.work-tabs button[aria-selected="false"] { background: rgba(255, 255, 255, .06); color: #cbd5e1; }

/* Portfolio category tabs */
.portfolio-tab.active { background: #2563eb; color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, .3); }

/* Sample / case study image links */
.sample { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.sample:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, .12); }

/* FAQ accordion marker */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary .faq-icon { transition: transform .25s var(--ease); }
details[open] > summary .faq-icon { transform: rotate(45deg); }

/* Scroll-reveal utility, progressively enhanced by IntersectionObserver in site.js */
.reveal-ready { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-ready.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  .sheet img { height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
 .reveal-ready.reveal-enabled { opacity: 1; transform: none; transition: none; }
}