html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  opacity: 0;
  transition: opacity .6s ease;
}
body.loaded { opacity: 1; }

.blob {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M45,-53C59,-45,71,-33,75,-18C79,-3,75,15,65,29C55,43,39,53,22,60C5,67,-14,71,-31,65C-48,59,-63,43,-70,24C-77,5,-76,-17,-66,-33C-56,-49,-37,-59,-18,-63C1,-67,23,-61,45,-53Z' transform='translate(100 100)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='black' d='M45,-53C59,-45,71,-33,75,-18C79,-3,75,15,65,29C55,43,39,53,22,60C5,67,-14,71,-31,65C-48,59,-63,43,-70,24C-77,5,-76,-17,-66,-33C-56,-49,-37,-59,-18,-63C1,-67,23,-61,45,-53Z' transform='translate(100 100)'/></svg>");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  animation: blob-float 7s ease-in-out infinite;
}
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8px, 10px) scale(1.05); }
}

/* scroll progress bar */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #F26B1D, #ffb385);
  z-index: 60; transition: width .1s linear;
}

/* scroll-reveal states */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .8s ease, transform .8s ease; }
.reveal-scale.in-view { opacity: 1; transform: scale(1); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .8s ease, transform .8s ease; }
.reveal-left.in-view { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal-right.in-view { opacity: 1; transform: translateX(0); }

/* clip-path image wipe reveal */
.clip-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65,0,.35,1); }
.clip-reveal.in-view { clip-path: inset(0 0 0 0); }

#site-header { transition: box-shadow .3s ease, background-color .3s ease; }
#site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
#site-header.scrolled .nav-inner { padding-top: 0.85rem; padding-bottom: 0.85rem; }

.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0%; height: 2px;
  background: #F26B1D; transition: width .3s ease;
}
.nav-link.active::after, .nav-link:hover::after { width: 100%; }
.nav-link.active { color: #F26B1D; }

#back-to-top { opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
#back-to-top.show { opacity: 1; pointer-events: auto; }

/* hamburger -> close icon animation */
.hamburger-bar { transition: transform .3s ease, opacity .3s ease; }
#menu-btn.open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menu-btn.open .hamburger-bar:nth-child(2) { opacity: 0; }
#menu-btn.open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile menu open state */
#mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }
#mobile-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* magnetic buttons */
.magnetic { transition: transform .15s ease-out, box-shadow .25s ease; will-change: transform; }
.magnetic:hover { box-shadow: 0 10px 24px rgba(242,107,29,0.35); }
.magnetic span.shine {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;
}
.magnetic span.shine::before {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.magnetic:hover span.shine::before { left: 125%; }

/* tilt on hover for showcase images */
.tilt { transition: transform .25s ease-out, box-shadow .25s ease-out; transform-style: preserve-3d; will-change: transform; }

/* dot nav */
#dot-nav a { transition: transform .25s ease, background-color .25s ease; }
#dot-nav a.active { transform: scale(1.4); background-color: #F26B1D; }
#dot-nav .dot-label {
  opacity: 0; transform: translateX(6px); transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; white-space: nowrap;
}
#dot-nav li:hover .dot-label { opacity: 1; transform: translateX(0); }

/* hero staggered lines */
.hero-line { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.hero-line.in { opacity: 1; transform: translateY(0); }

#hero-img { will-change: transform; }