html { scroll-behavior: smooth; }

/* The reveal-left/right elements sit at translateX(±40px) until they scroll
   into view, which overflows narrow screens. clip (not hidden) contains it
   without creating a scroll container, so the sticky header keeps working and
   overflow-y stays visible. Needs to be on both, or it propagates to the root. */
html, body { overflow-x: clip; }

body {
  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; }

/* ---- Fluid page shells ---------------------------------------------------
   One place to tune horizontal rhythm for the nav, hero and every section.
   Padding grows with the viewport instead of stepping at breakpoints, and so
   does max-width now (clamp() off 100vw instead of fixed px per breakpoint) —
   stepped buckets left the container flat until the next jump, which is what
   ballooned the side gutters around ~2560px into a dead ~320px margin. */
.shell,
.shell-narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 5rem);
}
.shell { max-width: clamp(1600px, calc(100vw - 8rem), 2400px); }
.shell-narrow { max-width: clamp(1152px, calc(100vw - 15rem), 1600px); }

/* Hero fills the first screen so the orange SCROLL DOWN bar lands on the fold.
   --header-h mirrors the sticky nav's resting size (py-6 + logo h-9/h-11). */
:root { --header-h: 5.25rem; }
@media (min-width: 768px) { :root { --header-h: 5.75rem; } }
.hero-fill { min-height: calc(100vh - var(--header-h)); }
@supports (height: 100svh) {
  .hero-fill { min-height: calc(100svh - var(--header-h)); }
}

/* Hero copy scales with the viewport. The 9vh ceiling on the title is what
   keeps short/landscape screens usable: there, width alone would size the
   headline far too large to fit above the scroll bar. */
.hero-copy { max-width: clamp(20rem, 46vw, 58rem); }
.hero-title {
  font-size: min(clamp(2rem, 4.6vw, 5.5rem), 9vh);
  line-height: 1.05;
}
.hero-sub {
  font-size: clamp(0.95rem, 1.15vw, 1.5rem);
  max-width: clamp(18rem, 26vw, 34rem);
  margin-top: clamp(0.75rem, 2.5vh, 1.5rem);
}
.hero-cta { margin-top: clamp(1rem, 3.5vh, 2rem); }

/* ---- Type scale for large/4K displays ------------------------------------
   Tailwind's responsive classes on nav/footer/section copy top out at the
   `md`/`lg` breakpoint (768-1024px) and never grow again. Meanwhile .shell/
   .shell-narrow above keep widening at 1800/2400/3000px, so on a large or
   4K display that text is frozen at tablet size inside an increasingly
   wide container — it reads smaller and the page's visual hierarchy
   flattens out. These rules pick up at the same breakpoints as the shell
   and keep nav links, section headings/copy, buttons and footer text
   growing in step with it. */
@media (min-width: 1800px) {
  .nav-inner .nav-link,
  .hero-cta,
  #brochure a { font-size: 0.9375rem; }
  #about h2 { font-size: 4.125rem; }
  #about p.font-heading { font-size: 1.6875rem; }
  #about p.reveal { font-size: 1.1875rem; }
  section.bg-keramik-orange h2 { font-size: 3.375rem; }
  section.bg-keramik-orange p { font-size: 1.1875rem; }
  #brochure h2 { font-size: 2.5rem; }
  footer .text-sm { font-size: 0.9375rem; }
  footer .text-xs { font-size: 0.8125rem; }
  footer .font-bold { font-size: 1.0625rem; }
}
@media (min-width: 2400px) {
  .nav-inner .nav-link,
  .hero-cta,
  #brochure a { font-size: 1rem; }
  #about h2 { font-size: 4.5rem; }
  #about p.font-heading { font-size: 1.8125rem; }
  #about p.reveal { font-size: 1.25rem; }
  section.bg-keramik-orange h2 { font-size: 3.75rem; }
  section.bg-keramik-orange p { font-size: 1.25rem; }
  #brochure h2 { font-size: 2.75rem; }
  footer .text-sm { font-size: 1rem; }
  footer .text-xs { font-size: 0.875rem; }
  footer .font-bold { font-size: 1.125rem; }
}
@media (min-width: 3000px) {
  .nav-inner .nav-link,
  .hero-cta,
  #brochure a { font-size: 1.0625rem; }
  #about h2 { font-size: 4.875rem; }
  #about p.font-heading { font-size: 1.9375rem; }
  #about p.reveal { font-size: 1.3125rem; }
  section.bg-keramik-orange h2 { font-size: 4.125rem; }
  section.bg-keramik-orange p { font-size: 1.3125rem; }
  #brochure h2 { font-size: 3rem; }
  footer .text-sm { font-size: 1.0625rem; }
  footer .text-xs { font-size: 0.9375rem; }
  footer .font-bold { font-size: 1.1875rem; }
}