html { scroll-behavior: smooth; }
body { background-color: #F1E6D2; }

.grain { position: relative; }
.grain::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal-left.in { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal-right.in { opacity: 1; transform: translateX(0); }

.path-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1); }
.path-line.in { stroke-dashoffset: 0; }

.timeline-fill { transform: scaleY(0); transform-origin: top; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.timeline-fill.in { transform: scaleY(1); }

.hero-mask { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%); }
.page-mask { clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%); }
@media (max-width: 767px){
  .hero-mask, .page-mask { clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); }
}

::selection { background: #C8302A; color: #FAF5EA; }

.nav-link { position: relative; }
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.nav-link:hover::after, .nav-link.active::after{ transform: scaleX(1); }
.nav-link.active{ color: #B8502E; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .path-line, .timeline-fill { transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
}