/* ==========================================================================
   Lazzuli Tech — base.css
   Design tokens, reset, typography and shared components.
   Everything reused by more than one section lives here.
   ========================================================================== */

:root{
  /* ---- colour ---- */
  --ink:#050912;          /* page background — near-black lapis            */
  --lapis:#0C1730;        /* raised surface                                */
  --gold:#B4915C;         /* single accent — use sparingly                 */
  --gold-hi:#D0B583;      /* gold at small sizes, where contrast drops     */
  --ivory:#F1EEE5;        /* primary text                                  */
  --muted:#A6B0C6;        /* body text                                     */
  --dim:#78839C;          /* labels, meta                                  */
  --blue:#4A7BFF;

  /* ---- lines ---- */
  --hair:rgba(180,145,92,.22);        /* gold hairline  */
  --hair-cool:rgba(150,170,220,.13);  /* neutral hairline */

  /* ---- atmosphere (overridden per breakpoint, see below) ---- */
  --glow:.3;
  --glow-blur:80px;
  --scrim:.42;

  /* ---- type ---- */
  --f-display:'Fraunces',Georgia,serif;
  --f-body:'Space Grotesk',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- layout ---- */
  --wrap:1140px;
  --pad:32px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
/* overflow-x:clip (not hidden) — hidden on the root turns the page into a
   scroll container and breaks position:sticky; clip does not. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;background:var(--ink);color:var(--ivory);
  font-family:var(--f-body);font-weight:400;line-height:1.7;
  overflow-x:clip;max-width:100%;
}
h1,h2,h3,h4,p,ul,li,figure{margin:0;padding:0;}
ul{list-style:none;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%;}
.section{position:relative;z-index:3;padding:126px 0;}

/* ==========================================================================
   Typography
   ========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-mono);font-weight:500;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);
  margin-bottom:26px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold);opacity:.7;}
.eyebrow--plain::before{display:none;}

.h2{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(30px,4.6vw,58px);line-height:1.06;letter-spacing:-.026em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.it{font-style:italic;color:var(--gold-hi);}

.lead{
  color:var(--muted);font-size:clamp(15.5px,1.35vw,17.5px);
  line-height:1.75;max-width:52ch;
}

/* Line-mask reveal. Padding + negative margin keeps descenders (y, p, g)
   from being clipped by the overflow that creates the mask. */
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;}
.ln > span{display:block;transform:translateY(108%);transition:transform 1.3s var(--ease);}
.is-in .ln > span{transform:none;}
.is-in .ln:nth-child(2) > span{transition-delay:.13s;}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:16px 32px;border-radius:100px;
  font-family:var(--f-mono);font-weight:500;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--hair);color:var(--ivory);
  transition:background .55s var(--ease),color .55s var(--ease),
             border-color .55s var(--ease),transform .55s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn i{font-style:normal;transition:transform .45s var(--ease);}
.btn:hover i{transform:translateX(5px);}
.btn--solid{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.btn--solid:hover{background:transparent;color:var(--gold-hi);}
.btn--ghost{background:rgba(5,9,18,.62);}
.btn--ghost:hover{background:rgba(180,145,92,.14);border-color:var(--gold);}

/* ==========================================================================
   Atmosphere — the rising-light system
   Kept in its own clipped layer so it never traps position:sticky children.
   Intensity is scaled per breakpoint at the bottom of this file.
   ========================================================================== */
.atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.atmos__field{position:absolute;inset:-16vw -8vw;opacity:var(--glow);}
.atmos__field span{
  position:absolute;border-radius:50%;display:block;opacity:0;
  filter:blur(var(--glow-blur));will-change:transform,opacity;
}
.atmos__scrim{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 72% 62% at 50% 50%,
    rgba(5,9,18,var(--scrim)),rgba(5,9,18,.18) 66%,transparent 82%);
}

/* three light colours, used across all sections */
.g-blue{background:radial-gradient(circle,rgba(74,123,255,.95),rgba(46,79,204,.4) 46%,transparent 68%);}
.g-violet{background:radial-gradient(circle,rgba(101,107,255,.88),rgba(64,60,208,.34) 46%,transparent 70%);}
.g-gold{background:radial-gradient(circle,rgba(208,181,131,.32),transparent 68%);}

@keyframes riseA{
  0%  {transform:translate3d(-16vw,42vw,0) scale(.7);opacity:0;}
  14% {opacity:.9;}
  50% {transform:translate3d(6vw,2vw,0) scale(1.16);opacity:1;}
  84% {opacity:.55;}
  100%{transform:translate3d(24vw,-36vw,0) scale(1.46);opacity:0;}
}
@keyframes riseB{
  0%  {transform:translate3d(18vw,40vw,0) scale(.74);opacity:0;}
  16% {opacity:.88;}
  52% {transform:translate3d(-8vw,0,0) scale(1.2);opacity:1;}
  86% {opacity:.5;}
  100%{transform:translate3d(-28vw,-38vw,0) scale(1.42);opacity:0;}
}
@keyframes riseC{
  0%  {transform:translate3d(-22vw,38vw,0) scale(.8);opacity:0;}
  20% {opacity:.8;}
  55% {transform:translate3d(12vw,-2vw,0) scale(1.26);opacity:1;}
  100%{transform:translate3d(36vw,-40vw,0) scale(1.5);opacity:0;}
}

/* ==========================================================================
   Circuit divider — the logo's trace, used as a section rule.
   Deliberately rare: only between Work/Band and above the footer.
   ========================================================================== */
.trace{position:relative;z-index:3;display:block;width:100%;height:24px;}
.trace path{fill:none;stroke:var(--gold);stroke-width:.8;opacity:.4;}
.trace circle{fill:var(--gold);opacity:.58;}

/* ==========================================================================
   Scroll reveal
   .rv is set by JS to .is-in when the element enters the viewport.
   ========================================================================== */
.rv{
  opacity:0;transform:translateY(22px);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease);
}
.rv.is-in{opacity:1;transform:none;}
/* handed back to the CPU renderer once the entrance finishes, so text
   isn't left rasterised inside a stale GPU layer */
.rv.is-done{transform:none;transition:none;will-change:auto;}

/* ==========================================================================
   Atmosphere intensity by viewport width.
   Blobs are sized in vw, so a wide monitor otherwise blows out the colour.
   ========================================================================== */
@media(min-width:900px){:root{--glow:.24;--glow-blur:94px;--scrim:.46;}}
@media(min-width:1280px){:root{--glow:.19;--glow-blur:108px;--scrim:.5;}}
@media(min-width:1700px){:root{--glow:.15;--glow-blur:120px;--scrim:.52;}}

@media(max-width:900px){
  :root{--pad:24px;}
  .section{padding:96px 0;}
}
@media(max-width:620px){
  :root{--pad:20px;--glow-blur:44px;--glow:.32;}
  .section{padding:88px 0;}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .atmos__field span{animation:none;opacity:.55;transform:none;}
  .rv{opacity:1;transform:none;}
  .ln > span{transform:none;}
}