/* ============================================================
   SITE.CSS — shared chrome for every page
   Tokens, reset, buttons, header, footer, loader, reveal.
   Page-specific layout lives in home.css / gallery.css /
   services.css / work.css, which are loaded AFTER this file.
   ============================================================ */

:root {
  --bg:      #16140F;
  --panel:   #1F1C16;
  --panel-2: #262219;
  --text:    #F2EFE6;
  --muted:   #9A9284;
  --amber:   #E8823D;
  --teal:    #3D6E77;
  --line:    #3A362C;
  --wa:      #25D366;
  --shadow:  0 8px 32px rgba(0,0,0,.55);
  --radius:  14px;
  --maxw:    1180px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
::selection { background:var(--amber); color:#16140F; }

:where(a,button,input,textarea,select,[tabindex]):focus-visible {
  outline:2px solid var(--amber); outline-offset:3px; border-radius:4px;
}

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.mono { font-family:'JetBrains Mono',ui-monospace,monospace; }

.eyebrow {
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber);
}

section { padding:84px 0; }
.sec-head { margin-bottom:40px; }
.sec-head h2 {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.05;
  text-transform:uppercase; letter-spacing:.01em; margin-top:10px;
}
.sec-head p { color:var(--muted); max-width:56ch; margin-top:14px; }

/* ---------- SKIP LINK ---------- */
.skip {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:#16140F; padding:12px 20px;
  border-radius:0 0 10px 0; font-weight:600;
}
.skip:focus { left:0; }

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; transition:transform .15s ease, background .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--amber); color:#16140F; }
.btn-primary:hover { background:#f0904e; }
.btn-ghost { border-color:var(--line); color:var(--text); }
.btn-ghost:hover { border-color:var(--amber); color:var(--amber); }
.btn-wa { background:var(--wa); color:#06301A; }
.btn-wa:hover { background:#3ade7a; }

/* ---------- INTRO LOADER ----------
   Film leader countdown. Clears on window.load with a short
   floor so it never flashes, and a hard cap so a slow
   connection never traps anyone. Skipped for reduced motion. */
.loader {
  position:fixed; inset:0; z-index:200;
  background:var(--bg); display:grid; place-items:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.loader.done { opacity:0; visibility:hidden; }
.loader-inner { display:grid; place-items:center; gap:22px; text-align:center; }
.leader {
  position:relative; width:108px; height:108px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line);
}
/* sweeping arm */
.leader::before {
  content:''; position:absolute; inset:-1px; border-radius:50%;
  background:conic-gradient(var(--amber) 0turn, rgba(232,130,61,0) .55turn, rgba(232,130,61,0) 1turn);
  -webkit-mask:radial-gradient(circle, transparent 52px, #000 53px);
          mask:radial-gradient(circle, transparent 52px, #000 53px);
  animation:sweep 1.05s linear infinite;
}
/* cross-hairs, like a film leader */
.leader::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px));
  border-radius:50%;
}
.leader span {
  position:relative; z-index:2;
  font-family:'Anton','Arial Narrow',sans-serif; font-size:2.4rem;
  color:var(--text); line-height:1;
  background:var(--bg); width:52px; height:52px;
  display:grid; place-items:center; border-radius:50%;
}
@keyframes sweep { to { transform:rotate(1turn); } }

.loader-label {
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted);
}
.loader-bar {
  width:150px; height:2px; background:var(--line); overflow:hidden; border-radius:2px;
}
.loader-bar i {
  display:block; height:100%; width:40%; background:var(--amber);
  animation:barslide 1.1s ease-in-out infinite;
}
@keyframes barslide {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(320%); }
}

/* ---------- HEADER ---------- */
header {
  position:sticky; top:0; z-index:60;
  /* no backdrop-filter: blurring whatever scrolls behind the header costs a
     full re-blur every frame, and behind the hero video that is every
     frame. Measured as the single biggest scroll cost on the homepage. */
  background:rgba(22,20,15,.93);
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
header.scrolled { border-bottom-color:var(--line); }
.nav {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  /* padding-block, not the shorthand: `padding:14px 0` here would wipe
     .wrap's 24px side padding and push the brand and burger hard against
     the screen edge on anything narrower than the 1180px max-width. */
  padding-block:14px;
}
.brand .name {
  display:block; font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:1.05rem; letter-spacing:.06em;
}
.brand .role {
  display:block; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.navlinks { display:flex; align-items:center; gap:28px; }
.navlinks a { font-size:.9rem; color:var(--muted); transition:color .2s ease; }
.navlinks a:hover, .navlinks a.active { color:var(--text); }
.navlinks a.active { color:var(--amber); }
.nav-cta { display:flex; align-items:center; gap:12px; }
.nav-cta .btn { padding:10px 18px; font-size:.85rem; }
.menu-btn { display:none; background:none; border:0; padding:8px; color:var(--text); }
.menu-btn span { display:block; width:22px; height:2px; background:currentColor; margin:4px 0; transition:.2s; }

/* ---------- REVEAL ----------
   Elements rise into place as they enter. Siblings in a grid are staggered
   by site.js (--d). Section headings wipe up from a mask. */
.reveal { opacity:0; transform:translateY(26px);
  transition:opacity .8s ease, transform .9s cubic-bezier(.2,.75,.2,1);
  transition-delay:var(--d, 0s); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { --d:.08s; } .reveal.d2 { --d:.16s; } .reveal.d3 { --d:.24s; } .reveal.d4 { --d:.32s; }
.sec-head.reveal h2 { clip-path:inset(0 0 100% 0); transform:translateY(.35em);
  transition:clip-path 1s cubic-bezier(.2,.75,.2,1) .12s, transform 1s cubic-bezier(.2,.75,.2,1) .12s; }
.sec-head.reveal.in h2 { clip-path:inset(0 0 -10% 0); transform:none; }

/* ---------- SCROLL PROGRESS ----------
   A thin amber line under the header, like a playhead on a timeline. */
.progress {
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--amber); transform-origin:0 50%; transform:scaleX(0);
  pointer-events:none; will-change:transform;
}

/* ---------- MOTION SWITCH (footer) ---------- */
.motion-switch {
  background:none; border:1px solid var(--line); color:var(--muted);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; border-radius:999px;
}
.motion-switch:hover { color:var(--amber); border-color:var(--amber); }
.motion-switch b { color:var(--text); font-weight:500; }

/* ---------- PAGE TRANSITIONS ----------
   Cross-document view transitions: a short fade-and-lift between pages in
   browsers that support it (Chrome, Edge, Opera, Safari 18.2+). Others just
   navigate normally. */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:vt-out .28s ease both; }
::view-transition-new(root) { animation:vt-in .42s cubic-bezier(.2,.75,.2,1) both; }
@keyframes vt-out { to { opacity:0; transform:translateY(-12px); } }
@keyframes vt-in  { from { opacity:0; transform:translateY(16px); } }

/* ---------- FLOATING WHATSAPP ---------- */
.wa-float {
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:flex; align-items:center; gap:10px;
  background:var(--wa); color:#06301A; font-weight:700; font-size:.9rem;
  padding:14px 20px; border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.45); transition:transform .18s ease;
}
.wa-float:hover { transform:translateY(-3px); }
.wa-float svg { width:20px; height:20px; fill:currentColor; }

/* ---------- FOOTER ---------- */
footer { border-top:1px solid var(--line); padding:44px 0 34px; }
.foot-grid { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.foot-grid a { color:var(--muted); font-size:.88rem; }
.foot-grid a:hover { color:var(--amber); }
.foot-col h4 {
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.foot-col ul { list-style:none; display:grid; gap:8px; }
.copy { margin-top:34px; padding-top:20px; border-top:1px solid var(--line);
        color:var(--muted); font-size:.8rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- SHARED RESPONSIVE ---------- */
@media (max-width:820px) {
  .navlinks { display:none; }
  .navlinks.open {
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:8px 24px 18px;
  }
  .navlinks.open a { padding:12px 0; width:100%; border-bottom:1px solid var(--line); }
  .menu-btn { display:block; }
  header { position:sticky; }
  .nav { position:relative; }
  .nav-cta .btn { display:none; }
}
@media (max-width:680px) {
  section { padding:60px 0; }
  .wa-float { padding:13px 17px; font-size:.85rem; right:14px; bottom:14px; }
}
@media (max-width:420px) {
  .brand .role { display:none; }
}

/* ---------- REDUCED MOTION ----------
   "Reduce", not "remove". html[data-motion] is set by site.js from the
   system setting, or from the footer switch if the visitor used it —
   Windows reports reduced motion whenever "Animation effects" is off, and
   plenty of people turn that off for speed, not because motion bothers
   them. In reduced mode things still fade in, but nothing slides, zooms,
   parallaxes or follows the pointer, and the loader is skipped. */
html[data-motion="reduced"] { scroll-behavior:auto; }
html[data-motion="reduced"] .reveal,
html[data-motion="reduced"] .sec-head.reveal h2 { transform:none !important; clip-path:none !important; }
html[data-motion="reduced"] .btn:hover { transform:none; }
html[data-motion="reduced"] .loader { display:none !important; }
html[data-motion="reduced"] .leader::before,
html[data-motion="reduced"] .loader-bar i { animation:none; }
html[data-motion="reduced"]::view-transition-old(root) { animation:vt-fade .22s ease reverse both; }
html[data-motion="reduced"]::view-transition-new(root) { animation:vt-fade .3s ease both; }
@keyframes vt-fade { from { opacity:0; } }