/* ==========================================================================
   JOOS Metallveredelung - Landing Page
   Palette sampled directly from the real company logo:
   yellow #FFD400, charcoal gradient #3a3a3a → #6e6e6e
   ========================================================================== */

:root{
  --bg: #FAFAF8;
  --bg-alt: #F1F2F0;
  --surface: #FFFFFF;
  --ink: #1E2124;
  --ink-soft: #565B60;
  --ink-faint: #82868A;
  --line: #E3E4E0;
  --line-strong: #D2D4CF;

  --yellow: #FFD400;
  --yellow-deep: #B98F00;
  --yellow-tint: #FFF6D2;

  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 10px;

  --font-display: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --shadow-sm: 0 1px 2px rgba(30,33,36,.06), 0 1px 1px rgba(30,33,36,.04);
  --shadow-md: 0 12px 32px -12px rgba(30,33,36,.18);
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 92px; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

p{ margin: 0; }

a{ color: inherit; text-decoration: none; }

.wrap{
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 40px;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  z-index: 100;
}
.skip-link:focus{ left: 0; }

/* ---------------------------------- Buttons ---------------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 18px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
  cursor: pointer;
}
.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary{
  background: var(--yellow);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{
  background: #ffdd33;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-ghost{
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover{
  background: var(--surface);
  border-color: var(--ink);
}

.btn-small{ padding: 11px 22px; font-size: 17px; }

/* ---------------------------------- Header ---------------------------------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 32px;
}

.brand{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-logo{ height: 56px; width: auto; }
.brand-logo--footer{ height: 44px; }

.main-nav{
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}
.main-nav a{
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color .2s var(--ease);
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--yellow);
  transition: right .25s var(--ease);
}
.main-nav a:hover::after{ right: 0; }

/* ---------------------------------- Hero ---------------------------------- */

.hero{
  position: relative;
  min-height: 800px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 40px;
  background: #F2F2F2;
}

/* Pre-composed visual (photo, diagonal seam and glass bar baked in
   by design), anchored to the right. Text never enters this box, so
   the internal diagonal geometry is free to do whatever it wants. */
.hero-visual{
  position: absolute;
  inset: 0;
  left: 48%;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2d30, #15171a);
}
.hero-visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.hero-inner{
  position: relative;
  z-index: 4;
  width: 100%;
  padding-left: max(40px, calc((100vw - 1240px) / 2 + 40px));
  box-sizing: border-box;
}

.hero-copy{ max-width: 520px; }

.hero h1{
  font-size: 47px;
  line-height: 1.18;
}
.hero h1 .accent{ color: var(--yellow-deep); }

.hero-rule{
  display: block;
  width: 56px;
  height: 3px;
  background: var(--yellow);
  margin-top: 20px;
  border-radius: 2px;
}

.hero-sub{
  margin-top: 22px;
  max-width: 46ch;
  font-size: 20.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.hero-cta{
  display: flex;
  gap: 14px;
  margin-top: 32px;
}

.hero-stats{
  list-style: none;
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line-strong);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-stats li{
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-stats i{ font-size: 24px; color: var(--yellow-deep); flex-shrink: 0; }
.hero-stat-label{
  display: flex;
  flex-direction: column;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.hero-stats b{ font-family: var(--font-mono); font-size: 18px; color: var(--ink); font-weight: 600; }

/* Shared placeholder for photo slots awaiting real assets */
.photo-placeholder{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.45);
  font-size: 15px;
}
.photo-placeholder i{ font-size: 33.5px; }

/* ---------------------------------- Sections ---------------------------------- */

.section{ padding-block: 120px; }
.section--alt{ background: var(--bg-alt); }

/* Recurring atmosphere: the same diagonal beam and glass sheen from
   the hero, echoed faintly through later sections to tie the page
   together. Sits behind the content, clipped to the section. */
#unternehmen, #qualitaet{ position: relative; overflow: hidden; }
#unternehmen > .wrap, #qualitaet > .wrap{ position: relative; z-index: 1; }

.section-shine{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.section-shine::before{
  content: "";
  position: absolute;
  top: -20%;
  left: 56%;
  width: 1px;
  height: 145%;
  background: linear-gradient(180deg, transparent 0%, rgba(255,212,0,.55) 18%, rgba(255,212,0,.4) 65%, transparent 100%);
  box-shadow: 0 0 16px 1px rgba(255,212,0,.25);
  transform: rotate(11deg);
  transform-origin: top;
}
.section-shine::after{
  content: "";
  position: absolute;
  top: -25%;
  left: 60%;
  width: 24%;
  height: 155%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.5) 45%, rgba(255,212,0,.1) 60%, transparent 80%);
  transform: rotate(11deg);
  transform-origin: top;
  filter: blur(3px);
}

.section-head{
  max-width: 62ch;
  margin-bottom: 56px;
  position: relative;
}
.section-head h2{
  font-size: 43px;
  line-height: 1.15;
}
.section-head h2 .accent{ color: var(--yellow-deep); }
.section-head p{
  margin-top: 16px;
  font-size: 20.5px;
  color: var(--ink-soft);
}

.kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  margin-bottom: 14px;
}
.kicker::after{
  content: "";
  width: 30px;
  height: 1px;
  background: var(--yellow-deep);
}

.verfahren-section{ position: relative; overflow: hidden; }
.section-watermark{
  position: absolute;
  top: -20px;
  right: 0;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 264px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  pointer-events: none;
  user-select: none;
}
.verfahren-section .wrap{ position: relative; z-index: 1; }

/* ---------------------------------- Bento (Verfahren) ---------------------------------- */
/* Asymmetric bento: one tall flagship tile, two wide tiles, three
   normal tiles -- a 3x3 unit grid with no leftover cells. Every card
   is a full-bleed photo with the copy floating over a bottom scrim,
   the same language as the reference boards. */

.bento{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 260px);
  gap: 28px;
  margin-bottom: 28px;
}

.proc--hartverchromen{ grid-column: 1; grid-row: 1 / 3; }
.proc--verzinken{ grid-column: 2 / 4; grid-row: 1; }
.proc--zink-nickel{ grid-column: 2; grid-row: 2; }
.proc--glanzverchromen{ grid-column: 3; grid-row: 2; }
.proc--vernickeln{ grid-column: 1 / 3; grid-row: 3; }
.proc--schleifen{ grid-column: 3; grid-row: 3; }

.proc-card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, #2a2d30, #15171a);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.proc-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.proc-card:hover .proc-bg{ transform: scale(1.06); }

.proc-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .6s var(--ease);
}
.proc-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15,17,19,0) 30%, rgba(15,17,19,.45) 62%, rgba(15,17,19,.88) 100%);
}

.proc-content{
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.proc-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: rgba(15,17,19,.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--yellow);
}
.proc-badge i{ font-size: 20.5px; }

.proc-copy h3{ font-size: 23px; color: #fff; margin-bottom: 8px; }
.proc-copy p{ color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.55; max-width: 46ch; }
.proc--hartverchromen .proc-copy p,
.proc--verzinken .proc-copy p,
.proc--vernickeln .proc-copy p{ max-width: 34ch; }

.proc-features{
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.proc-feature{
  background: var(--surface);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proc-feature i{ font-size: 26.5px; color: var(--yellow-deep); }
.proc-feature h4{ font-family: var(--font-display); font-weight: 600; font-size: 18.5px; color: var(--ink); }
.proc-feature p{ font-size: 16px; color: var(--ink-soft); line-height: 1.5; }

/* ---------------------------------- Unternehmen ---------------------------------- */

.unternehmen-grid{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.unternehmen-photo{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.unternehmen-photo img{ display: block; width: 100%; }
.photo-caption{
  margin-top: 14px;
  font-size: 16px;
  color: var(--ink-faint);
}

.timeline{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.timeline::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--line-strong);
}
.timeline li{
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 20px;
  padding: 20px 0 20px 30px;
  border-bottom: 1px solid var(--line);
}
.timeline li:first-child{ padding-top: 2px; }
.timeline li:last-child{ border-bottom: none; padding-bottom: 2px; }
.tl-dot{
  position: absolute;
  left: 0;
  top: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--yellow-deep);
  z-index: 1;
}
.timeline li:first-child .tl-dot{ top: 6px; }
.tl-year{
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--yellow-deep);
  font-size: 18px;
}
.tl-text{ color: var(--ink-soft); font-size: 18.5px; }

/* ---------------------------------- Feature panels (Qualität) ---------------------------------- */

.feature-panels{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.feature-panel{
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.9 / 1;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: #EDEDED;
}

/* The photo already has its own light zone baked in on the left --
   matching the card's aspect ratio to the source image means it
   shows in full, uncropped, so that zone is never cut away. */
.feature-visual{
  position: absolute;
  inset: 0;
}
.feature-visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s var(--ease);
}
.feature-panel:hover .feature-visual img{ transform: scale(1.05); }
.feature-visual .photo-placeholder{ color: rgba(30,33,36,.35); }
/* Scrim so the copy stays readable regardless of how bright the
   photo gets underneath it. */
.feature-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(237,237,237,.92) 0%,
    rgba(237,237,237,.85) 30%,
    rgba(237,237,237,.4) 42%,
    transparent 54%);
}

.feature-content{
  position: relative;
  z-index: 1;
  max-width: 37%;
  height: 100%;
  padding: 26px 16px 26px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
/* Icon is absolutely positioned rather than a flex sibling --
   flexbox was refusing to let the heading text wrap in this engine
   even with min-width:0 and flex-basis:0. */
.feature-heading{
  position: relative;
  padding-left: 32px;
  min-height: 24px;
}
.feature-heading i{
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 22px;
  color: var(--yellow-deep);
}
.feature-panel h3{ font-size: 20px; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
.mini-rule{
  display: block;
  width: 32px;
  height: 2px;
  background: var(--yellow);
  margin: 10px 0 10px;
  border-radius: 2px;
}
.feature-panel p{ color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; }

/* ---------------------------------- Process (Ablauf) ---------------------------------- */

.process{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.process::before{
  content: "";
  position: absolute;
  top: 20px;
  left: calc(12.5% + 20px);
  right: calc(12.5% + 20px);
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) .2s;
}
.process.in-view::before{ transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .process::before{ transform: scaleX(1); transition: none; }
}
.process li{
  position: relative;
  padding-inline: 24px;
  border-left: 1px solid var(--line);
}
.process li:first-child{ border-left: none; padding-inline-start: 0; }
.process-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.process h3{ font-size: 21.5px; margin-bottom: 8px; }
.process p{ color: var(--ink-soft); font-size: 17.5px; }

/* ---------------------------------- Anwendungen ---------------------------------- */

.anwendungen-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 56px;
  align-items: start;
}
.anwendungen h2{ font-size: 38.5px; margin-bottom: 20px; max-width: 20ch; }
.anwendungen p{ color: var(--ink-soft); font-size: 20px; max-width: 56ch; }

.tag-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
}
.tag-list li{
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 17.5px;
  font-weight: 500;
}

/* ---------------------------------- Karriere ---------------------------------- */

.karriere-top{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 64px;
  align-items: center;
}

.karriere-copy{ max-width: 420px; }
.karriere-copy h2{ font-size: 38px; line-height: 1.15; margin-top: 16px; }
.karriere-sub{
  margin-top: 26px;
  color: var(--ink-soft);
  font-size: 18.5px;
  line-height: 1.6;
}
.karriere-copy .btn{ margin-top: 32px; }

.job-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.job-card{
  position: relative;
  aspect-ratio: .72 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, #2a2d30, #15171a);
}
.job-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.job-card:hover .job-bg{ transform: scale(1.06); }
.job-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,17,19,0) 32%, rgba(15,17,19,.6) 66%, rgba(15,17,19,.92) 100%);
}
.job-badge{
  position: absolute;
  top: 24px;
  left: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(20,22,24,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-badge i{ font-size: 24px; color: var(--yellow); }
.job-content{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px;
  z-index: 1;
}
.job-content h3{ font-size: 21px; color: #fff; line-height: 1.25; }
.job-content .mini-rule{ margin: 14px 0; }
.job-content p{ color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; }
.job-arrow{ font-size: 20px; color: var(--yellow); }

.karriere-features{
  list-style: none;
  margin: 64px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.karriere-features li{
  display: flex;
  align-items: center;
  gap: 14px;
}
.karriere-features i{ font-size: 30px; color: var(--yellow-deep); flex-shrink: 0; }
.karriere-features span{ font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }

/* ---------------------------------- Kontakt ---------------------------------- */

.kontakt-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.kontakt-copy h2{
  font-size: 41px;
  line-height: 1.2;
  margin-bottom: 36px;
}

.kontakt-details{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 0 0 28px;
}
.kontakt-details dt{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.kontakt-details dt i{ color: var(--yellow-deep); font-size: 19px; }
.kontakt-details dd{
  margin: 0;
  font-size: 18.5px;
  line-height: 1.5;
}
.kontakt-details a:hover{ color: var(--yellow-deep); }

.anfahrt-note{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17.5px;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.anfahrt-note i{ color: var(--yellow-deep); font-size: 20.5px; }

.kontakt-map{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3.4;
}
.kontakt-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.15) contrast(1.02);
}

/* ---------------------------------- Footer ---------------------------------- */

.site-footer{
  background: var(--ink);
  color: #C7CACC;
  padding-top: 72px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid #33373A;
}
.footer-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-brand p{ font-size: 17px; line-height: 1.6; }

.footer-grid h4{
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  margin-bottom: 16px;
}
.footer-grid p{ font-size: 17.5px; line-height: 1.7; margin-bottom: 4px; }
.footer-grid a:hover{ color: var(--yellow); }

.footer-bottom{
  padding-block: 24px;
  font-size: 15.5px;
  color: #82868A;
}

/* ---------------------------------- Scroll effects ---------------------------------- */

/* Entrance reveals. Direction is picked per element via the
   data-reveal value; stagger comes from a --reveal-i index the
   script assigns per sibling group, so groups cascade in instead of
   popping together. */
[data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal="left"]{ transform: translateX(-36px); }
[data-reveal="right"]{ transform: translateX(36px); }
[data-reveal="scale"]{ transform: translateY(18px) scale(.92); }

[data-reveal].is-visible{
  opacity: 1;
  transform: none;
}

/* Header gains depth once the page has scrolled past the top. */
.site-header{ transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.site-header.is-scrolled{
  box-shadow: 0 8px 24px -16px rgba(20,22,24,.25);
}

/* Active section highlight in the primary nav. */
.main-nav a.is-active{ color: var(--ink); }
.main-nav a.is-active::after{ right: 0; }

/* Count-up numerals (hero stats). Width is reserved via the final
   digit count so the layout never jumps as the number ticks up. */
.count-up{ font-variant-numeric: tabular-nums; }

/* Subtle scroll-linked image settle, native CSS only: as a photo
   scrolls up into view it eases from a slight zoom down to rest.
   Silently absent in browsers without scroll-driven animation
   support -- the image just sits still, which is fine. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .scroll-zoom{
      animation: scroll-zoom-settle linear;
      animation-timeline: view();
      animation-range: entry;
    }
    @keyframes scroll-zoom-settle{
      from{ transform: scale(1.1); }
      to{ transform: scale(1); }
    }
  }
}

/* Thin fixed bar tracking how far down the page the reader is.
   Native CSS scroll-driven animation where supported; a small JS
   fallback (rAF-batched, no per-frame layout work) covers the rest. */
.scroll-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 70;
  pointer-events: none;
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .scroll-progress{
      animation: scroll-progress-scale linear;
      animation-timeline: scroll(root);
    }
    @keyframes scroll-progress-scale{
      from{ transform: scaleX(0); }
      to{ transform: scaleX(1); }
    }
  }
}

/* Back-to-top button, revealed once the reader has scrolled past
   the very top of the page (same sentinel as the header shadow). */
.back-to-top{
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.back-to-top i{ font-size: 20px; }
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover{ background: var(--yellow); color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .site-header{ transition: none; }
  .back-to-top{ transition: opacity .01s, transform .01s; }
}