/* Glacz site — site-specific styles layered atop colors_and_type.css + _shared.css */

/* ---------- Selection ---------- */
::selection { background: var(--ink-900); color: var(--paper); }

/* ---------- Body baseline ---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--fg);
  overflow-x: hidden;
}
* { -webkit-tap-highlight-color: transparent; }

/* ---------- Container widening ---------- */
.container { max-width: 1480px; }

/* ---------- Reveals ----------
   Visible by default so SSR/no-JS/above-the-fold content never pops. After
   hydration, JS adds `.pre` to below-the-fold elements so they animate in on
   scroll. Render output only ever carries `reveal` (+ delay-N) → hydration-safe. */
.reveal { opacity: 1; transform: none; }
.reveal.pre { opacity: 0; transform: translateY(28px); }
.reveal.pre.in { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.delay-1.in { transition-delay: 80ms; }
.reveal.delay-2.in { transition-delay: 160ms; }
.reveal.delay-3.in { transition-delay: 240ms; }
.reveal.delay-4.in { transition-delay: 320ms; }
.reveal.delay-5.in { transition-delay: 400ms; }
.reveal.delay-6.in { transition-delay: 480ms; }

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

/* ---------- Section ---------- */
.section { padding: 112px 0; position: relative; }
.section.tight { padding: 80px 0; }
.section.tall { padding: 144px 0; }
.section.dark { background: var(--ink-900); color: var(--paper); }
.section.tint { background: var(--paper-2); }
.section.ice { background: var(--ice-2); }

/* ---------- Headlines ---------- */
.display-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.display-l {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.display-m {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

/* ---------- Eyebrow with leading dot ---------- */
.eb-dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}
.eb-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glacz-700);
  display: inline-block;
}
.section.dark .eb-dot { color: rgba(246,245,242,0.55); }
.section.dark .eb-dot::before { background: var(--glacz-200); }

/* ---------- Plates (image placeholders) — enhanced ---------- */
.plate {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #DCE0E4 0%, #E2F4EC 50%, #F1F3F5 100%);
  border-radius: var(--r-lg);
}
.plate::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 70% 30%, rgba(255,255,255,0.7), transparent 55%),
    linear-gradient(120deg, transparent 38%, rgba(26,107,82,0.08) 50%, transparent 62%);
  pointer-events: none;
}
.plate.warm { background: linear-gradient(135deg, #EDEAE3 0%, #F6F5F2 100%); }
.plate.dark { background: linear-gradient(140deg, #0B0F14 0%, #232932 60%, #3A424C 100%); }
.plate.dark::after {
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(200,234,216,0.18), transparent 50%),
    radial-gradient(80% 60% at 20% 90%, rgba(26,107,82,0.28), transparent 60%);
}
.plate.ice { background: linear-gradient(135deg, #C8EAD8 0%, #E2F4EC 60%, #F6F5F2 100%); }
.plate.viridian {
  background: linear-gradient(135deg, #0D3D2E 0%, #1A6B52 60%, #2A9A72 100%);
  color: var(--paper);
}
.plate.viridian::after {
  background:
    radial-gradient(120% 80% at 75% 20%, rgba(200,234,216,0.32), transparent 60%);
}

.plate-label {
  position: absolute; bottom: 14px; left: 14px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-2);
  background: rgba(246,245,242,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 2;
}
.plate.dark .plate-label,
.plate.viridian .plate-label {
  background: rgba(11,15,20,0.55);
  color: var(--paper);
}

/* ---------- Hero ambient backdrop ---------- */
.hero-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-ambient .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(11,15,20,0.06);
  animation: spin 90s linear infinite;
}
.hero-ambient .ring.a { width: 1200px; height: 1200px; right: -300px; top: -200px; }
.hero-ambient .ring.b { width: 800px; height: 800px; right: -100px; top: 0; animation-duration: 60s; animation-direction: reverse; }
.hero-ambient .ring.c { width: 1600px; height: 1600px; right: -500px; top: -400px; animation-duration: 140s; }
.hero-ambient .blob {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  background: radial-gradient(circle, var(--glacz-200), transparent 65%);
  right: -120px; top: 80px;
  animation: drift 24s ease-in-out infinite;
}
.hero-ambient .blob.b {
  width: 380px; height: 380px;
  left: -80px; top: 40%;
  background: radial-gradient(circle, var(--ice), transparent 70%);
  animation-delay: -8s;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(-40px, 30px); }
}

/* ---------- Word reveal cascade ---------- */
.word-cascade > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: wordUp 1100ms var(--ease-out) forwards;
}
.word-cascade > span.italic-accent {
  font-style: italic;
  color: var(--glacz-700);
  font-weight: 800;
}
@keyframes wordUp {
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 6px 10px; border-radius: 3px;
}
.chip.ice { background: var(--ice); color: var(--glacz-900); }
.chip.dark { background: var(--ink-900); color: var(--paper); }
.chip.outline { background: transparent; border: 1px solid var(--border); color: var(--fg-2); }
.chip.outline.dark-mode { border-color: rgba(246,245,242,0.2); color: rgba(246,245,242,0.78); }
.chip.glacz { background: var(--glacz-700); color: var(--paper); }

/* ---------- Buttons (extras, layering on _shared.css) ---------- */
.btn { letter-spacing: 0.01em; }
.btn.lg { padding: 17px 24px; font-size: 15px; }
.btn.xl { padding: 20px 28px; font-size: 16px; border-radius: 8px; }
.btn .arrow { transition: transform 280ms var(--ease-out); display: inline-block; }
.btn:hover .arrow { transform: translateX(5px); }

/* ---------- Hairline divider ---------- */
.hairline { height: 1px; background: var(--border); width: 100%; }
.section.dark .hairline { background: rgba(246,245,242,0.16); }

/* ---------- Cards ---------- */
.card-lift {
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
  border-radius: 16px;
}
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* ---------- Marquee logos ---------- */
.marquee-wrap {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee {
  display: flex; gap: 64px;
  animation: marquee 60s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee.reverse { animation-direction: reverse; animation-duration: 72s; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Process timeline progress line ---------- */
.process-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  transform: translateY(-50%);
}
.process-line.dark { background: rgba(246,245,242,0.16); }

/* ---------- Inputs ---------- */
.field-input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 15px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-900);
  outline: none;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  width: 100%;
  box-sizing: border-box;
}
.field-input:focus {
  border-color: var(--ink-900);
  box-shadow: 0 0 0 3px rgba(26,107,82,0.16);
}
.field-input::placeholder { color: var(--fg-3); }
.field-textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field-label {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-3);
}
.field { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Pill chip toggle ---------- */
.pill-chip {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-900);
  transition: all 200ms var(--ease-out);
}
.pill-chip:hover { border-color: var(--ink-900); }
.pill-chip.on {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}

/* ---------- Square chip toggle ---------- */
.sq-chip {
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-900);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 200ms var(--ease-out);
}
.sq-chip:hover { border-color: var(--ink-900); }
.sq-chip.on {
  background: var(--ice);
  color: var(--glacz-900);
  border-color: var(--glacz-700);
}

/* ---------- Count-up sizing ---------- */
.t-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 6vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.t-num .unit { color: var(--glacz-700); font-weight: 700; }
.section.dark .t-num .unit { color: var(--glacz-200); }

/* ---------- Floating gridlines for tech feel ---------- */
.tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,15,20,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,15,20,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(80% 60% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, black 30%, transparent 80%);
}
.section.dark .tech-grid {
  background-image:
    linear-gradient(rgba(246,245,242,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,245,242,0.06) 1px, transparent 1px);
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; left: 0; top: 0; right: 0;
  height: 2px; z-index: 100; pointer-events: none;
}
.scroll-progress .bar {
  height: 100%; width: 0%;
  background: var(--glacz-700);
  transition: width 90ms linear;
}

/* ---------- Underline-grow link ---------- */
.link-grow {
  position: relative; cursor: pointer; text-decoration: none;
  color: inherit; font-weight: 500;
}
.link-grow::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px;
  width: 0; background: currentColor;
  transition: width 320ms var(--ease-out);
}
.link-grow:hover::after { width: 100%; }

/* ---------- Masonry helpers ---------- */
.masonry {
  column-gap: 24px;
}
.masonry > * { break-inside: avoid; margin-bottom: 24px; }

/* ---------- Generic plate aspect ratios ---------- */
.ar-4-3 { aspect-ratio: 4/3; }
.ar-4-5 { aspect-ratio: 4/5; }
.ar-1-1 { aspect-ratio: 1/1; }
.ar-3-2 { aspect-ratio: 3/2; }
.ar-16-10 { aspect-ratio: 16/10; }
.ar-16-9 { aspect-ratio: 16/9; }

/* ---------- Brand grid logo cell ---------- */
.brand-cell {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--slate-500);
  transition: all 280ms var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.brand-cell:hover {
  color: var(--ink-900);
  border-color: var(--ink-900);
  background: var(--white);
  transform: translateY(-2px);
}
.brand-cell:hover .brand-logo-img {
  filter: grayscale(0%) opacity(0.9);
}
.brand-cell::before {
  content: "";
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}

/* ---------- Process node ---------- */
.process-node {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink-900);
  position: relative;
  z-index: 2;
  transition: all 320ms var(--ease-out);
}
.process-node.active {
  background: var(--glacz-700);
  border-color: var(--glacz-700);
  box-shadow: 0 0 0 6px rgba(26,107,82,0.16);
}

/* ---------- Tabs ---------- */
.tab {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 12px 0;
  cursor: pointer;
  color: var(--fg-3);
  border-bottom: 1.5px solid transparent;
  transition: all 220ms var(--ease-out);
}
.tab:hover { color: var(--ink-900); }
.tab.on { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.section.dark .tab { color: rgba(246,245,242,0.55); }
.section.dark .tab:hover { color: var(--paper); }
.section.dark .tab.on { color: var(--paper); border-bottom-color: var(--paper); }

/* ---------- Floating geometric shapes for hero ---------- */
.float-shape {
  position: absolute;
  border: 1px solid rgba(11,15,20,0.1);
  border-radius: 2px;
  animation: floatY 8s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

/* ---------- Stat card ---------- */
.stat-card {
  border-top: 1px solid var(--border);
  padding-top: 22px;
}
.section.dark .stat-card { border-top-color: rgba(246,245,242,0.16); }

/* ---------- Mobile spacing ---------- */
@media (max-width: 900px) {
  .section { padding: 80px 0; }
  .section.tall { padding: 96px 0; }
}
@media (max-width: 720px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .section { padding: 64px 0; }
}

/* ---------- Sidebar filter row ---------- */
.filter-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-900);
  transition: background 180ms var(--ease-out);
}
.filter-row:hover { background: var(--slate-50); }
.filter-row.on { background: var(--ink-900); color: var(--paper); }
.filter-row .count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px;
  color: inherit; opacity: 0.6;
}

/* ---------- Carousel arrow ---------- */
.carousel-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 220ms var(--ease-out);
}
.carousel-arrow:hover { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.carousel-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Aurora gradient stripe (used sparingly) ---------- */
.aurora {
  position: absolute;
  height: 2px; left: 0; right: 0;
  background: linear-gradient(90deg, transparent, var(--glacz-700) 30%, var(--glacz-500) 50%, var(--glacz-700) 70%, transparent);
  opacity: 0.6;
}

/* ---------- Inquiry priority badge ---------- */
.priority-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--ice);
  color: var(--glacz-900);
}
.priority-badge.priority {
  background: var(--glacz-700);
  color: var(--paper);
}

/* ---------- File drop ---------- */
.drop-zone {
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  background: var(--paper);
  transition: all 220ms var(--ease-out);
  cursor: pointer;
}
.drop-zone:hover, .drop-zone.drag {
  border-color: var(--glacz-700);
  background: var(--ice-2);
}

/* ---------- Star rating dots used for project metrics ---------- */
.dot-row { display: inline-flex; gap: 4px; }
.dot-row .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate-300);
}
.dot-row .d.on { background: var(--glacz-700); }