/* ──────────────────────────────────────────────
   Life Street — Shared chrome
   Single source of truth for design tokens, ambient
   background, custom cursor, loader, scroll progress
   bar, reveal animations, skip-to-content link, and
   the global prefers-reduced-motion override.

   Include AFTER the page <style> block in <head>:
     <link rel="stylesheet" href="assets/ls.css">

   Page-specific styles (nav variations, hero, sections)
   continue to live inline in each HTML file for now —
   migrate them here as time allows.
   ────────────────────────────────────────────── */

/* ── Design tokens ── */
:root{
  --lime:#BCD85F;
  --green:#7EA411;
  --green-deep:#4A7B2A;
  --moss:#DCE8CF;
  --taupe:#A8A39B;
  --grey:#58595B;
  --white:#FFFFFF;
  --off-white:#F7F9F4;
  --dark:#1C2B10;
  --dark-mid:#243515;
  --black:#111111;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

/* ── Skip-to-content link (WCAG 2.4.1) ── */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--dark);color:var(--lime);
  padding:.85rem 1.4rem;font-weight:700;
  font-family:'Roboto',sans-serif;
  font-size:.85rem;letter-spacing:.02em;
  border-radius:0 0 6px 0;text-decoration:none;
  z-index:10000;
}
.skip-link:focus{left:0;outline:2px solid var(--lime);outline-offset:2px}

/* ── Visible focus indicator (WCAG 2.4.7) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:2px;
}

/* ── Scroll progress bar ── */
#pbar{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(to right,var(--lime),var(--green));z-index:9999;transition:width .08s linear;pointer-events:none}

/* Custom cursor and loader were removed — system cursor used everywhere. */

/* ── Ambient drifting glows + grain (used on many pages) ── */
.ls-ambient::before{
  content:'';position:fixed;inset:-20vh -10vw;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 55vh at 12% 18%, rgba(188,216,95,.18), transparent 60%),
    radial-gradient(55vw 50vh at 88% 42%, rgba(74,123,42,.14), transparent 62%),
    radial-gradient(70vw 65vh at 40% 88%, rgba(28,43,16,.10), transparent 65%);
  animation:ambientDrift 28s ease-in-out infinite alternate;
  filter:blur(4px);
}
.ls-ambient::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@keyframes ambientDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-4vw,-3vh,0) scale(1.08)}
  100%{transform:translate3d(3vw,2vh,0) scale(1.04)}
}

/* ── Reveal-on-scroll utilities ── */
.r{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rl{opacity:0;transform:translateX(-36px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rr{opacity:0;transform:translateX(36px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.r.v,.rl.v,.rr.v{opacity:1;transform:translate(0)}
.d1{transition-delay:.10s}
.d2{transition-delay:.22s}
.d3{transition-delay:.34s}
.d4{transition-delay:.46s}
.d5{transition-delay:.58s}

/* ── Generic fade-up keyframe used by hero animations ── */
@keyframes fu{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ──────────────────────────────────────────────
   prefers-reduced-motion (WCAG 2.3.3 + user respect)
   Disables ambient drift, custom cursor animation,
   reveal slides, hero motion, and any decorative
   animation on the site. Keeps content visible in
   its final state.
   ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  /* Pin reveal classes to their final, visible state */
  .r,.rl,.rr{opacity:1 !important;transform:none !important}

  /* (Custom cursor removed) */

  /* Still pulses, drifts and glows that aren't in transitions */
  .ls-ambient::before{animation:none !important;transform:none !important}
  body::before, body::after{animation:none !important}

  /* Common decorative animations seen on the LS site */
  #hero .hero-spotlight,
  .hero-sphere,
  .word-cycle,
  .hi-cycle .hi-word,
  .hc-cycle .hc-word,
  .arc-card,
  .pixel-image .pi-piece,
  .lwt-circle .ring,
  .lwt-line > span,
  .pq-mark::after{
    animation:none !important;
    transform:none !important;
  }
}


/* Global paragraph override removed — each section controls its own body copy sizes */


/* nav active state */
.nav-links a.active{ color: var(--green) !important; }
.nav-links a.active::after{ width: 100% !important; }


/* ── Nav (shared across pages) ── */
/* ── Nav ── */nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; padding: 0 5vw; height: 72px; display: flex; align-items: center; justify-content: space-between; transition: background .5s var(--ease-out),backdrop-filter .5s; } /* scrolled: soft frosted fade, no hard edges */nav.scrolled { background: linear-gradient(to bottom,rgba(255,255,255,.82) 0%,rgba(255,255,255,.55) 70%,rgba(255,255,255,0) 100%); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: none; mask-image: linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%); height: 92px; padding-bottom: 20px; } .nav-logo img { height: 72px; transform: translateY(8px); transition: opacity .3s; } .nav-logo img:hover { opacity: .8; } .nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; } .nav-links a { font-size: .875rem; font-weight: 500; color: var(--grey); letter-spacing: .02em; position: relative; transition: color .25s; } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: var(--green); transition: width .3s var(--ease-out); } .nav-links a:hover { color: var(--green); } .nav-links a:hover::after { width: 100%; } .nav-cta { background: transparent; color: var(--grey)!important; padding: 0; border-radius: 0; font-weight: 500; letter-spacing: .02em; } .nav-cta::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: var(--green); transition: width .3s var(--ease-out); } .nav-cta:hover { background: transparent!important; color: var(--green)!important; transform: none!important; box-shadow: none!important; } .nav-cta:hover::after, .nav-cta.active::after { width: 100%; } 


/* ── Mobile nav hamburger ── */.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; z-index: 600; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--grey); border-radius: 2px; transition: transform .35s var(--ease-out),opacity .3s; } .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width:768px){ .nav-burger {  display: flex; }  .nav-links {  position: fixed;  inset: 0 0 0 30%;  height: 100vh;  height: 100dvh;  flex-direction: column;  gap: 0;  background: rgba(255,255,255,.97);  backdrop-filter: blur(16px);  -webkit-backdrop-filter: blur(16px);  padding: 100px 2rem 3rem;  box-shadow: -4px 0 40px rgba(28,43,16,.12);  transform: translateX(100%);  transition: transform .45s var(--ease-out);  z-index: 550; }  .nav-links.is-open {  transform: translateX(0); }  .nav-links li {  border-bottom: 1px solid rgba(28,43,16,.07);  padding: 0; }  .nav-links a {  display: block;  padding: 1rem 0;  font-size: 1.1rem;  font-weight: 500; }  .nav-links a::after {  bottom: 0; }  nav {  padding: 0 5vw; } }

/* ── Mobile nav overrides (logo size + scrolled state legibility) ── */
@media(max-width:768px){
  /* Smaller logo on mobile — 72px is too tall for a 72px nav bar */
  .nav-logo img{height:36px!important;transform:none!important}
  /* Scrolled nav on mobile: solid frosted white, remove fade-to-transparent mask
     so the logo and burger remain clearly visible regardless of background content */
  nav.scrolled{
    background:rgba(255,255,255,.95)!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
    height:72px!important;
    padding-bottom:0!important;
  }
}
