/* ===== BASE ===== */
body {
  color: #111111;
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== HEADER GLASS ===== */
.site-header {
  background: color-mix(in oklab, #ffffff 88%, transparent);
}

/* ===== NAV UNDERLINE ===== */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: #111111;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.nav a:hover::after,
.nav a.active::after { transform: scaleX(1); }

/* ===== TICKER ===== */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-track { animation: ticker 60s linear infinite; }

/* ===== HERO CAROUSEL ===== */
.hero-slide {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(.4,0,.2,1);
}
.hero-slide.active { opacity: 1; }

/* ===== HERO OVERLAY GRADIENT ===== */
.hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
}

/* ===== CARD IMAGE: OVERLAY + HOVER ZOOM ===== */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}
.card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1), filter .8s ease;
  filter: saturate(.92);
}
.section-card:hover .card-image img,
.work-card:hover .card-image img { transform: scale(1.04); filter: saturate(1); }

/* ===== CARD ARROW ===== */
.card-arrow { transition: color .3s ease, transform .3s ease; }
.section-card:hover .card-arrow { transform: translateX(6px); color: #111111; }

/* ===== CTA BUTTON ===== */
.cta-button { transition: background .4s ease, color .4s ease, padding .4s ease; }
.cta-button:hover { background: #111111; color: #ffffff; padding-right: 40px; }
.cta-button .cta-arrow { transition: transform .4s ease; display: inline-block; }
.cta-button:hover .cta-arrow { transform: translateX(6px); }

/* ===== SUBMIT BUTTON ===== */
.submit-button { transition: background .4s ease, color .4s ease, padding .4s ease; }
.submit-button:hover { background: #111111; color: #ffffff; padding-right: 40px; }
.submit-button .arr { transition: transform .4s ease; display: inline-block; }
.submit-button:hover .arr { transform: translateX(6px); }
.submit-button:disabled { opacity: .35; cursor: not-allowed; }
.submit-button:disabled:hover { background: transparent; color: #111111; padding-right: 32px; }
.submit-button:disabled:hover .arr { transform: none; }

/* ===== FOOTER LINKS ===== */
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== PAGER HOVER ===== */
.pager-link { transition: background .4s ease; }
.pager-link:hover { background: #fafaf8; }

/* ===== GALLERY FIGURE HOVER ===== */
.gallery-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.gallery-figure:hover img { transform: scale(1.03); }

/* ===== HERO ARROWS (Realisation) ===== */
.hero-arrow {
  transition: background .25s ease, border-color .25s ease, transform .35s ease;
}
.hero-arrow:hover { background: rgba(0,0,0,.45); border-color: #fff; }
.hero-arrow.prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-arrow.next:hover { transform: translateY(-50%) translateX(3px); }

/* ===== HERO DOTS ===== */
.hero-dots button {
  width: 8px; height: 8px;
  border-radius: 50%; border: 0; padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,.35);
  transition: background .25s ease, transform .25s ease;
}
.hero-dots button.active { background: #fff; transform: scale(1.25); }

/* ===== FORM CHIP BUTTONS ===== */
.chip { transition: background .25s ease, color .25s ease, border-color .25s ease; }
.chip.active { background: #111111; color: #fff; border-color: #111111; }

/* ===== REVEAL ON SCROLL ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ===== SELECTION ===== */
::selection { background: #111; color: #fff; }