/* Greenswarn Packaging — base tokens, reset, type system */

:root{
  /* palette — "Safety Amber Industrial": warehouse signage over neutral charcoal */
  --canvas:#121212;
  --panel:#1a1a1a;
  --panel-2:#211e18;
  --accent:#e8a23a;
  --accent-hover:#f2b158;
  --accent-ink:#16130c;
  --accent-muted:#e8a23a26;
  --kraft:#7fb28c;
  --steel:#3f6b4a;
  --text-primary:#f5f5f0;
  --text-secondary:#9a9a92;
  --line:#2a2a25;

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --ease-out:cubic-bezier(.16,.8,.28,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --font-display:'Chakra Petch',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:.01em;
}

p{margin:0 0 1em;color:var(--text-secondary)}

.mono{font-family:var(--font-mono);letter-spacing:.02em}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}

.skip-link{
  position:absolute;left:-999px;top:0;
  background:var(--accent);color:var(--accent-ink);padding:12px 20px;
  z-index:1000;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

section{padding:120px 0}
@media (max-width:720px){section{padding:72px 0}}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kraft);
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";width:24px;height:1px;background:var(--kraft);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent);
  font-weight:600;
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:.92rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s var(--ease-out),transform .25s var(--ease-out),border-color .25s var(--ease-out);
  text-shadow:none;
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px)}
.btn.ghost{
  background:transparent;color:var(--text-primary);border-color:var(--line);
}
.btn.ghost:hover{border-color:var(--kraft);color:var(--kraft)}
@media (pointer:coarse){.btn{min-height:44px}}

.chip{
  background:rgba(8,8,15,.55);
  border:1px solid rgba(96,96,126,.3);
  border-radius:10px;
  backdrop-filter:blur(10px);
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--text-primary);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* die-line corner marks — the site's signature motif */
.dieline{position:relative}
.dieline::before,.dieline::after{
  content:"";position:absolute;width:18px;height:18px;
  border:1.5px solid var(--kraft);opacity:.55;
  transition:opacity .4s var(--ease-out);
}
.dieline::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.dieline::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.dieline:hover::before,.dieline:hover::after{opacity:1}

/* entrance choreography */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}
.stagger .reveal:nth-child(1){transition-delay:0ms}
.stagger .reveal:nth-child(2){transition-delay:90ms}
.stagger .reveal:nth-child(3){transition-delay:180ms}
.stagger .reveal:nth-child(4){transition-delay:270ms}
.stagger .reveal:nth-child(5){transition-delay:360ms}
.stagger .reveal:nth-child(6){transition-delay:450ms}
.stagger.in .reveal{transition-delay:0ms !important}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}