/*
 * Moderant Labs — shared styles for the Tailwind/Alpine site
 * (Folio template by Laurent Begey / ThemeWagon, MIT licensed,
 * adapted: orange accent -> Moderant blue, single-person copy ->
 * company copy, fabricated content removed.)
 * Shared across index.html, projects.html, case-study.html, privacy-policy.html.
 */

*, *::before, *::after { box-sizing: border-box; }
html { font-family: 'DM Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'PT Sans', sans-serif; }
body { transition: background-color .3s, color .3s; }

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

/* scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1d4ed8; border-radius: 99px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.in, .reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }

/* nav underline animation */
.nl, .nav-link { position: relative; }
.nl::after, .nav-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px;
  background: currentColor; transition: width .22s cubic-bezier(.4,0,.2,1);
}
.nl:hover::after, .nl.on::after, .nav-link:hover::after { width: 100%; }
.nl.on { font-weight: 500; }

/* shimmer button */
.shimmer, .btn-primary { position: relative; overflow: hidden; }
.shimmer::after, .btn-primary::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: rgba(255,255,255,.18); transform: skewX(-20deg); transition: left .4s cubic-bezier(.4,0,.2,1);
}
.shimmer:hover::after, .btn-primary:hover::after { left: 160%; }

/* image / cover panels — used wherever the original template expected a
   real photo we don't have; keeps a consistent look instead of stock imagery. */
.pf, .photo-frame { overflow: hidden; background: #d4d4d8; }
.pf img, .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cover-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 55%), linear-gradient(135deg, #1d4ed8, #1e3a8a);
}
.cover-panel svg { position: relative; z-index: 1; color: rgba(255,255,255,.92); }
.cover-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

/* card hover */
.card-h { transition: transform .28s cubic-bezier(.4,0,.2,1), border-color .18s; }
.card-h:hover { transform: translateY(-4px); }

/* skill/category tag */
.stag { transition: border-color .18s; }

/* step badge (used for numbered deliverable steps) */
.step-badge {
  width: 2rem; height: 2rem; min-width: 2rem; border-radius: 50%;
  background: #1d4ed8; color: #fff; font-family: 'PT Sans', sans-serif;
  font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center;
}

/* case study prose */
.prose-cs h2 { font-family: 'PT Sans', sans-serif; font-size: 1.55rem; font-weight: 700; margin: 2.75rem 0 1rem; line-height: 1.25; }
.prose-cs h3 { font-family: 'PT Sans', sans-serif; font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .6rem; line-height: 1.3; color: #1d4ed8; }
.prose-cs p { margin: 0 0 1.4rem; line-height: 1.82; color: #52525b; }
.dark .prose-cs p { color: #a1a1aa; }
.prose-cs ul { margin: 0 0 1.4rem 1.5rem; list-style: disc; }
.prose-cs li { margin-bottom: .45rem; line-height: 1.7; color: #52525b; }
.dark .prose-cs li { color: #a1a1aa; }
.prose-cs blockquote { border-left: 3px solid #1d4ed8; padding: .75rem 1.25rem; margin: 0 0 1.8rem; background: #eef3ff; border-radius: 0 8px 8px 0; }
.dark .prose-cs blockquote { background: #1e2a4a; }
.prose-cs blockquote p { color: #52525b; font-style: italic; margin: 0; }
.dark .prose-cs blockquote p { color: #a1a1aa; }
.prose-cs hr { border: none; border-top: 1px solid #e4e4e7; margin: 2.5rem 0; }
.dark .prose-cs hr { border-top-color: #27272a; }
.prose-cs a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }

/* deliverable / stat-style card */
.stat-card { border-left: 3px solid #1d4ed8; }

/* image caption */
.img-caption { font-size: .8rem; color: #a1a1aa; text-align: center; margin-top: .6rem; }

/* reading progress bar (case study) */
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: #1d4ed8; z-index: 100; transition: width .1s linear; }

[x-cloak] { display: none !important; }