/* 2026 layer: View Transitions, scroll-driven, @property, popover-friendly */

@view-transition {
  navigation: auto;
}

@property --heat-pulse {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.35;
}

html {
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

h1,
h2,
.page-hero h1 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.brand {
  view-transition-name: forge-brand;
}

.hero__shot {
  view-transition-name: forge-hero;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(forge-hero) {
  animation: plate-out 480ms cubic-bezier(0.6, 0, 0.4, 1) both;
}

::view-transition-new(forge-hero) {
  animation: plate-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes plate-out {
  to {
    clip-path: inset(0 0 100% 0);
    filter: brightness(2.2) saturate(1.4);
  }
}

@keyframes plate-in {
  from {
    clip-path: inset(100% 0 0 0);
    filter: brightness(2.2) saturate(1.4);
  }
}

.heat-progress {
  position: fixed;
  top: 0;
  left: var(--rail);
  right: 0;
  height: 2px;
  z-index: 60;
  transform-origin: 0 50%;
  background: var(--heat);
  animation: heat-fill linear;
  animation-timeline: scroll();
}

@keyframes heat-fill {
  from {
    transform: scaleX(0.02);
  }
  to {
    transform: scaleX(1);
  }
}

.sparks {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 65;
}

.hero h1 {
  clip-path: inset(0 0 0 0);
  animation: stamp-press 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes stamp-press {
  from {
    clip-path: inset(100% 0 0 0);
    letter-spacing: 0.12em;
    filter: blur(4px);
  }
  to {
    clip-path: inset(0 0 0 0);
    letter-spacing: -0.02em;
    filter: blur(0);
  }
}

.hero__plate {
  animation: plate-tag 700ms 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes plate-tag {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.btn--heat {
  position: relative;
  overflow: hidden;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--heat::after {
  content: "";
  position: absolute;
  inset: auto 0 -40% 0;
  height: 70%;
  background: color-mix(in srgb, white 22%, var(--heat));
  animation: slag-flow 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes slag-flow {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.15;
  }
  50% {
    transform: translateY(-18px);
    opacity: 0.4;
  }
}

.card {
  animation: none;
  content-visibility: visible;
  clip-path: inset(14% 0 0 0);
  filter: brightness(0.65);
  transition: clip-path 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.card.is-forged {
  clip-path: inset(0);
  filter: none;
}

.card img {
  transform: scale(1.04);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover img {
  transform: scale(1.12);
}

@keyframes plate-lift {
  from {
    clip-path: inset(18% 0 0 0);
    filter: brightness(0.55);
  }
  to {
    clip-path: inset(0);
    filter: brightness(1);
  }
}

.steps article {
  opacity: 0.45;
  transform: translateY(10px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.steps article.is-forged {
  opacity: 1;
  transform: none;
}

.gallery__item {
  overflow: hidden;
  clip-path: inset(12% 0 0 0);
  filter: brightness(0.7);
  transition: clip-path 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery__item.is-forged {
  clip-path: inset(0);
  filter: none;
}

.gallery img {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery__item:hover img {
  transform: scale(1.08);
}

.stats b {
  filter: blur(0);
  color: var(--brass);
}

.stats b.is-forged {
  animation: numeral-heat 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes numeral-heat {
  from {
    color: var(--ash);
    filter: blur(6px);
  }
  to {
    color: var(--brass);
    filter: blur(0);
  }
}

.rail__marks {
  animation: rail-tick linear;
  animation-timeline: scroll();
  background-position: 0 0;
}

@keyframes rail-tick {
  to {
    background-position: 0 240px;
  }
}

.scroll-iron {
  position: fixed;
  left: 8px;
  top: 12vh;
  height: 76vh;
  width: 36px;
  z-index: 41;
  pointer-events: none;
}

.scroll-iron path {
  fill: none;
  stroke: var(--heat);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: iron-draw linear;
  animation-timeline: scroll();
}

@keyframes iron-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.form.is-sent .ok {
  animation: stamp-press 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (max-width: 900px) {
  .heat-progress {
    left: 0;
  }

  .scroll-iron {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heat-progress,
  .hero h1,
  .hero__plate,
  .stats b.is-forged,
  .rail__marks,
  .scroll-iron path,
  .btn--heat::after,
  .form.is-sent .ok,
  .ask,
  .consent {
    animation: none;
    transition: none;
  }

  .card,
  .gallery__item,
  .steps article {
    clip-path: none;
    filter: none;
    opacity: 1;
    transform: none;
  }

  .card img,
  .gallery img {
    transform: none;
    filter: none;
  }

  .sparks,
  .scroll-iron {
    display: none;
  }
}