/* =========================================================
   JASON DUVAL / $JASON
   Single-page fan concept. Leonida sunset grade.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  /* GTA VI grade (carried over from the dossier build) */
  --pink:      #ff4f93;
  --magenta:   #e8367f;
  --orange:    #ff8a3d;
  --amber:     #ffc46b;
  --cyan:      #5ce1ff;
  --blue:      #3aa9ff;
  --violet:    #7b2f8f;

  /* surfaces */
  --night:     #12061c;
  --night-2:   #1c0a26;
  --ink:       #0a0410;
  --cream:     #fdf2e6;
  --muted:     rgba(253,242,230,.62);

  /* type */
  --f-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-mono: 'DM Mono', ui-monospace, monospace;

  --fs-hero: clamp(4rem, 15vw, 12rem);
  --fs-xl:   clamp(2rem, 5.5vw, 3.75rem);
  --fs-lg:   clamp(1.35rem, 2.6vw, 1.9rem);
  --fs-body: clamp(1rem, 1.2vw, 1.125rem);

  --nav-h: 53px;
  --pad: clamp(20px, 5vw, 56px);
  --shell: 1080px;
  --sec-y: clamp(64px, 8vw, 108px);

  --line: rgba(255,255,255,.14);
  --radius: 6px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100%;
  position:relative; /* containing block for .sky and the footer glow */
  background:var(--night);
  color:var(--cream);
  font-family:var(--f-cond);
  font-size:var(--fs-body);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer }
h1,h2,h3,p,dl,dd,figure,ol,ul{ margin:0 }
ol,ul{ padding:0; list-style:none }

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

.skip-link{
  position:fixed; left:12px; top:-100px; z-index:60;
  background:var(--cream); color:var(--ink);
  padding:12px 16px; border-radius:var(--radius);
  font:500 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
}
.skip-link:focus{ top:12px }

/* =========================================================
   BACKGROUND: the sunset as a horizon band, not a full-page wash

   A fixed full-viewport gradient puts bright orange behind every section and
   there is no scrim that survives that without muting the colour entirely.
   So the sunset runs once, over the hero, and resolves back into night. The
   band scrolls with the page; body copy below it sits on --night.
   ========================================================= */
.sky{
  position:absolute; top:0; left:0; right:0; z-index:-1;
  height:clamp(760px, 118svh, 1240px);
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    #12061c   0%,
    #200a2f  16%,
    #4a1350  33%,
    #932a72  49%,
    #e8367f  62%,
    #ff7a45  73%,
    #ffc46b  80%,
    #6d1c46  90%,
    var(--night) 100%
  );
}

/* the sun: a soft disc sitting on the horizon line of the band */
.sky .sun{
  position:absolute;
  left:50%; top:80%;
  width:min(78vmin, 720px); aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,224,160,.92) 0%,
    rgba(255,170,95,.62) 34%,
    rgba(255,95,120,.24) 58%,
    rgba(255,95,120,0) 72%);
}

/* dark ground under the nav and behind the hero copy, so cream type keeps
   contrast no matter where the band lands on a given viewport height */
.sky .haze{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,4,16,.88) 0%, rgba(10,4,16,.5) 22%, rgba(10,4,16,0) 46%),
    radial-gradient(58% 42% at 50% 40%, rgba(10,4,16,.55), transparent 72%);
}

/* Horizon silhouette. Bottom edge sits just under the bright line of the band,
   so the sunset reads behind the palms. Anchored to the band, never the
   viewport: on a short screen a viewport-anchored version rides down over the
   story cards. */
.horizon{
  position:absolute;
  left:0; right:0; top:84%;
  translate:0 -100%;
}
.horizon svg{
  width:100%;
  /* The artwork is deliberately wider than a normal viewport. Phones and
     laptops crop its outer scenery; wide displays reveal it at a natural scale. */
  height:clamp(150px, 24vw, 300px);
  display:block;
}
.hz-city{ fill:rgba(10,4,16,.72) }
.hz-land{ fill:var(--ink) }
/* The fronds carry their own body now, so no stroke padding. A hairline stroke
   only keeps the joins from thinning out at small render sizes. */
.hz-palms{
  fill:var(--ink);
  stroke:var(--ink);
  stroke-width:.8;
  stroke-linejoin:round;
}
.hz-palms-compact{ display:none }

.sky .grain{
  position:absolute; inset:0;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Below the band the page would otherwise be flat near-black for thousands of
   pixels. This fixed layer keeps the grade present the whole way down. Kept
   low enough that every surface on top of it still clears contrast. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(48% 38% at 4% 26%,  rgba(232,54,127,.20), transparent 64%),
    radial-gradient(44% 36% at 98% 58%, rgba(58,169,255,.14), transparent 64%),
    radial-gradient(52% 34% at 42% 96%, rgba(255,138,61,.14), transparent 66%);
}

/* and a warmer pool under the footer, so the page closes on the sunset
   instead of just running out of colour */
body::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; z-index:-1;
  height:min(760px, 62vh);
  pointer-events:none;
  background:
    radial-gradient(72% 100% at 50% 116%, rgba(232,54,127,.34), transparent 66%),
    radial-gradient(46% 74% at 50% 122%, rgba(255,138,61,.3), transparent 68%);
}

/* =========================================================
   NAV
   ========================================================= */
.bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:var(--nav-h);
  padding:14px var(--pad);
  background:linear-gradient(180deg, rgba(10,4,16,.82), rgba(10,4,16,0));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.bar-mark{
  font:800 clamp(15px, 2.2vw, 18px)/1 var(--f-cond);
  letter-spacing:.14em; text-transform:uppercase;
}

.bar-nav{ display:flex; gap:clamp(14px, 3vw, 28px) }
.bar-nav a{
  font:500 12px/1 var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.bar-nav a:hover{ color:var(--cream); border-bottom-color:var(--amber) }

/* =========================================================
   SHELL
   ========================================================= */
main{
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{ padding-block:var(--sec-y) }

.sec-title{
  display:flex; align-items:baseline; gap:14px;
  font:800 var(--fs-xl)/1 var(--f-cond);
  letter-spacing:-.01em; text-transform:uppercase;
  margin-bottom:clamp(28px, 4vw, 48px);
}
.sec-title em{
  font:500 13px/1 var(--f-mono);
  font-style:normal; letter-spacing:.2em;
  color:var(--amber);
  translate:0 -.55em;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:calc(100svh - var(--nav-h));
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(40px, 8vw, 88px);
  text-align:center;
}

.hero-name{
  margin-block:0;
  font:900 var(--fs-hero)/.84 var(--f-cond);
  letter-spacing:-.03em; text-transform:uppercase;
  display:flex; flex-direction:column;
  text-shadow:0 8px 60px rgba(10,4,16,.5);
}
.hero-name span:last-child{
  color:transparent;
  -webkit-text-stroke:2px var(--cream);
}
@supports not (-webkit-text-stroke: 2px var(--cream)){
  .hero-name span:last-child{ color:var(--cream) }
}

.hero-line{
  margin-top:clamp(20px, 3vw, 30px);
  font-size:var(--fs-lg);
  font-weight:500;
  line-height:1.25;
  color:rgba(253,242,230,.86);
}

/* The ticker can land anywhere on the sunset band depending on viewport
   height, so it carries its own dark ground instead of trusting the sky. */
.hero-ticker{
  align-self:center;
  margin-top:clamp(24px, 4vw, 38px);
  padding:12px 26px 11px;
  border:1px solid rgba(255,196,107,.5);
  border-radius:999px;
  background:rgba(10,4,16,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  font:500 clamp(14px, 2.2vw, 18px)/1 var(--f-mono);
  letter-spacing:.3em; text-indent:.3em;
  color:var(--amber);
}
.hero-ticker span{ opacity:.6 }

.hero-cta{
  margin-top:clamp(26px, 4vw, 40px);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 26px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(10,4,16,.55);
  font:500 12px/1 var(--f-mono);
  letter-spacing:.18em; text-transform:uppercase;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:transform .18s, background .18s, border-color .18s;
}
.btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.4) }
.btn:active{ transform:translateY(0) }

.btn-solid{
  background:var(--cream);
  border-color:var(--cream);
  color:var(--ink);
}
.btn-solid:hover{ background:#fff; border-color:#fff }

/* =========================================================
   PORTRAIT
   ========================================================= */
.portrait-wrap{ display:flex; justify-content:center; padding-block:clamp(8px, 2vw, 24px) }

.portrait{
  width:min(420px, 100%);
  text-align:center;
}

.portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  border-radius:var(--radius);
  object-fit:cover;
  box-shadow:0 30px 80px rgba(10,4,16,.55);
}

.portrait figcaption{
  margin-top:14px;
  font:500 11px/1.4 var(--f-mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}

/* =========================================================
   MARQUEE
   Breaks out of the centred shell to run edge to edge. body has
   overflow-x:hidden, so the scrollbar width this borrows is clipped rather
   than turning into a horizontal scroll.
   ========================================================= */
.marquee{
  margin-inline:calc(50% - 50vw);
  overflow:hidden;
  border-block:1px solid var(--line);
  background:rgba(10,4,16,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track{
  display:flex; align-items:center;
  width:max-content;
  padding-block:14px;
  animation:marquee 38s linear infinite;
}

/* The track holds the content twice, so shifting it by half its own width
   lands exactly on the start of the second copy. Seamless, no gap. */
@keyframes marquee{
  from{ translate:0 0 }
  to{ translate:-50% 0 }
}

.marquee-track span{
  font:800 clamp(1rem, 2vw, 1.45rem)/1 var(--f-cond);
  letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
  color:rgba(253,242,230,.82);
}
.marquee-track span:nth-child(4n+3){ color:var(--amber) }

.marquee-track i{
  flex:0 0 auto;
  width:6px; height:6px;
  margin-inline:clamp(18px, 3vw, 34px);
  border-radius:50%;
  background:var(--magenta);
}

/* =========================================================
   STORY
   ========================================================= */
.beats{
  display:grid; gap:2px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--line);
}

.beat{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 20px;
  padding:clamp(24px, 3.4vw, 36px);
  background:rgba(10,4,16,.46);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .25s;
}
.beat:hover{ background:rgba(10,4,16,.6) }

.beat-no{
  grid-row:1 / span 2;
  min-width:34px;
  font:500 12px/1 var(--f-mono);
  letter-spacing:.14em;
  color:var(--amber);
  padding-top:.45em;
}

.beat h3{
  font:800 var(--fs-lg)/1.1 var(--f-cond);
  letter-spacing:.01em; text-transform:uppercase;
}

.beat p{
  max-width:62ch;
  color:rgba(253,242,230,.78);
}

.beats-note{
  margin-top:20px;
  font:500 11px/1.6 var(--f-mono);
  letter-spacing:.1em;
  color:var(--muted);
}

/* =========================================================
   TOKEN
   ========================================================= */
.token-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(10,4,16,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:clamp(24px, 3.6vw, 40px);
}

.token-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:22px;
  padding-bottom:clamp(24px, 3vw, 32px);
  border-bottom:1px solid var(--line);
}

.token-grid dt{
  font:500 10px/1 var(--f-mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.token-grid dd{
  font:800 clamp(1.25rem, 2.6vw, 1.7rem)/1 var(--f-cond);
  letter-spacing:.02em; text-transform:uppercase;
}

/* The official stonks.fun mark scales off the value's own font size, so it
   tracks the clamp() instead of needing its own breakpoint. */
.dd-mark{ display:flex; align-items:center; gap:10px }
.dd-mark .stonks-mark{
  width:1.42em; height:1.42em;
  object-fit:contain;
  flex:0 0 auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 9px rgba(80,255,25,.34));
}

.heat{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  padding-block:clamp(20px, 2.6vw, 26px);
  border-bottom:1px solid var(--line);
}

.heat-label{
  font:500 10px/1 var(--f-mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}

.heat-stars{ display:flex; gap:6px }
.heat-stars svg{
  width:20px; height:20px;
  fill:none;
  stroke:rgba(253,242,230,.34);
  stroke-width:1.4;
}
.heat-stars svg.is-on{
  fill:var(--amber);
  stroke:var(--amber);
  filter:drop-shadow(0 0 8px rgba(255,196,107,.45));
}

.heat-note{
  font:500 10px/1 var(--f-mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--pink);
}

.ca{ padding-block:clamp(24px, 3vw, 32px) }

.ca-label{
  font:500 10px/1 var(--f-mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}

.ca-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(0,0,0,.34);
}

.ca-row code{
  flex:1 1 260px;
  min-width:0;
  font:400 clamp(12px, 1.5vw, 14px)/1.4 var(--f-mono);
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  color:var(--amber);
}

.btn-copy{ min-height:40px; padding:0 18px; flex:0 0 auto }
.btn-copy.is-done{ background:var(--amber); border-color:var(--amber); color:var(--ink) }

[data-pending]{ letter-spacing:.12em !important; color:var(--muted) !important }
.btn-placeholder{
  border-style:dashed;
  color:var(--muted);
  cursor:not-allowed;
}
.btn-placeholder:hover{
  transform:none;
  border-color:rgba(255,255,255,.24);
}

.ca-note{
  margin-top:12px;
  font:500 11px/1.6 var(--f-mono);
  letter-spacing:.08em;
  color:var(--muted);
}

.token-cta{ display:flex; flex-wrap:wrap; gap:12px }

/* =========================================================
   HOW TO BUY
   ========================================================= */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(228px, 1fr));
  gap:14px;
}

.step{
  padding:clamp(22px, 2.8vw, 30px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(10,4,16,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .2s, border-color .2s;
}
.step:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.32) }

.step-no{
  display:inline-block;
  margin-bottom:14px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,196,107,.14);
  font:500 11px/1 var(--f-mono);
  letter-spacing:.16em;
  color:var(--amber);
}

.step h3{
  margin-bottom:8px;
  font:800 1.4rem/1.15 var(--f-cond);
  letter-spacing:.02em; text-transform:uppercase;
}

.step p{ color:rgba(253,242,230,.76) }

.warn{
  margin-top:18px;
  padding:18px 20px;
  border:1px solid rgba(255,79,147,.42);
  border-left:3px solid var(--pink);
  border-radius:var(--radius);
  background:rgba(232,54,127,.09);
  font-size:.98rem;
  color:rgba(253,242,230,.86);
}
.warn strong{
  color:var(--pink);
  font-weight:600;
  letter-spacing:.04em;
}

/* =========================================================
   SOCIALS
   ========================================================= */
.socials{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:14px;
}

.social{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:4px 16px;
  padding:clamp(20px, 2.6vw, 26px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(10,4,16,.46);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .2s, background .2s, border-color .2s;
}
.social:hover{
  transform:translateY(-3px);
  background:rgba(10,4,16,.62);
  border-color:rgba(255,255,255,.34);
}

.social svg{
  grid-row:1 / span 2;
  width:26px; height:26px;
  fill:var(--cream);
}

.social-name{
  font:800 1.35rem/1 var(--f-cond);
  letter-spacing:.04em; text-transform:uppercase;
}
.social-handle{
  font:500 11px/1 var(--f-mono);
  letter-spacing:.14em;
  color:var(--muted);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:relative;
  max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(44px, 6vw, 72px) var(--pad) clamp(40px, 6vw, 64px);
  border-top:1px solid var(--line);
}

.foot-top{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px, 4vw, 48px);
  padding-bottom:clamp(30px, 4vw, 44px);
}

.foot-name{
  font:800 clamp(1.15rem, 2.4vw, 1.5rem)/1 var(--f-cond);
  letter-spacing:.14em; text-transform:uppercase;
}
.foot-name span{ color:var(--amber) }

.foot-tag{
  margin-top:12px;
  max-width:34ch;
  color:rgba(253,242,230,.66);
}

.foot-status{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:18px;
  padding:8px 14px;
  border:1px solid rgba(92,225,255,.36);
  border-radius:999px;
  background:rgba(92,225,255,.08);
  font:500 10px/1 var(--f-mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan);
}
.foot-status i{
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
}

.foot-col h2{
  margin-bottom:16px;
  font:500 10px/1 var(--f-mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.foot-col ul{ display:grid; gap:11px }
.foot-col a{
  font:600 15px/1 var(--f-cond);
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(253,242,230,.8);
  transition:color .2s;
}
.foot-col a:hover{ color:var(--amber) }

.foot-ca{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(0,0,0,.34);
}
.foot-ca > span{
  font:500 10px/1 var(--f-mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.foot-ca code{
  flex:1 1 240px;
  min-width:0;
  font:400 12px/1.4 var(--f-mono);
  overflow-wrap:anywhere;
  color:var(--amber);
}

.foot-legal-wrap{
  display:grid; gap:12px;
  padding-block:clamp(28px, 3.6vw, 40px);
}

.foot-legal{
  max-width:88ch;
  font:400 12px/1.75 var(--f-mono);
  letter-spacing:.01em;
  color:rgba(253,242,230,.5);
}
.foot-legal strong{
  color:rgba(253,242,230,.78);
  font-weight:500;
}

.foot-base{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:14px;
  padding-top:clamp(22px, 3vw, 28px);
  border-top:1px solid var(--line);
}

.foot-copy{
  font:400 11px/1.5 var(--f-mono);
  letter-spacing:.04em;
  color:rgba(253,242,230,.42);
}

.foot-credit{
  font:500 11px/1 var(--f-mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.foot-credit a{
  color:var(--cream);
  border-bottom:1px solid var(--amber);
  padding-bottom:2px;
}

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:24px; z-index:80;
  translate:-50% 12px;
  padding:12px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(10,4,16,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font:500 11px/1 var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase;
  opacity:0; pointer-events:none;
  transition:opacity .22s, translate .22s;
}
.toast.is-on{ opacity:1; translate:-50% 0 }

/* =========================================================
   REVEAL (ships visible; JS opts in)
   ========================================================= */
.js .reveal{
  opacity:0;
  translate:0 30px;
  scale:.985;
  filter:blur(5px);
  transition:opacity .7s ease, translate .7s ease, scale .7s ease, filter .7s ease;
}
.js .reveal.is-in{ opacity:1; translate:0 0; scale:1; filter:blur(0) }

/* =========================================================
   MOTION + INTERACTION
   Motion is progressive enhancement: JS opts in only when reduced motion is
   not requested, so the page remains fully visible and usable without it.
   ========================================================= */
.scroll-progress{
  position:fixed; inset:0 0 auto; z-index:90;
  height:2px;
  pointer-events:none;
  background:rgba(255,255,255,.04);
}
.scroll-progress span{
  display:block;
  width:100%; height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg, var(--pink), var(--amber), var(--cyan));
  box-shadow:0 0 16px rgba(255,79,147,.58);
  will-change:transform;
}

.pointer-glow{
  position:fixed; left:0; top:0; z-index:35;
  width:420px; height:420px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translate3d(calc(var(--pointer-x, -500px) - 50%), calc(var(--pointer-y, -500px) - 50%), 0);
  background:radial-gradient(circle, rgba(255,196,107,.11), rgba(232,54,127,.055) 34%, transparent 68%);
  mix-blend-mode:screen;
  transition:opacity .35s;
  will-change:transform;
}
.has-pointer .pointer-glow{ opacity:1 }

.bar{
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.bar.is-scrolled{
  background:rgba(10,4,16,.82);
  border-bottom-color:rgba(255,255,255,.1);
  box-shadow:0 12px 32px rgba(10,4,16,.22);
}
.bar-nav a.is-active{
  color:var(--cream);
  border-bottom-color:var(--amber);
  text-shadow:0 0 18px rgba(255,196,107,.35);
}

.sky .sun{
  transform:translate3d(0, var(--sun-shift, 0px), 0);
  will-change:transform, filter;
}
.sky .haze{
  transform:translate3d(0, var(--haze-shift, 0px), 0) scale(1.025);
  transform-origin:50% 28%;
  will-change:transform;
}
.horizon{
  transform:translate3d(0, var(--horizon-shift, 0px), 0);
  will-change:transform;
}

.hero-name{
  transform:perspective(850px) rotateX(var(--hero-rotate-x, 0deg)) rotateY(var(--hero-rotate-y, 0deg)) translate3d(var(--hero-shift-x, 0px), var(--hero-shift-y, 0px), 0);
  transform-style:preserve-3d;
  transition:transform .22s ease-out;
  will-change:transform;
}

.motion-ready .hero-name span,
.motion-ready .hero-line,
.motion-ready .hero-ticker,
.motion-ready .hero-cta{
  animation:heroEnter .82s cubic-bezier(.2,.8,.2,1) both;
}
.motion-ready .hero-name span:first-child{ animation-delay:.12s }
.motion-ready .hero-name span:last-child{ animation-delay:.22s }
.motion-ready .hero-line{ animation-delay:.32s }
.motion-ready .hero-ticker{ animation-delay:.42s }
.motion-ready .hero-cta{ animation-delay:.5s }

.motion-ready .sky .sun{ animation:sunBreathe 7s ease-in-out infinite }
.motion-ready .sky .grain{ animation:grainShift .42s steps(2,end) infinite }
.motion-ready .hero-ticker{ box-shadow:0 0 0 rgba(255,196,107,0); animation-name:heroEnter, tickerPulse; animation-duration:.82s, 3.6s; animation-delay:.42s, 1.4s; animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out; animation-fill-mode:both; animation-iteration-count:1, infinite }
.motion-ready .heat-stars svg.is-on{ animation:starHeat 2.8s ease-in-out infinite }
.motion-ready .heat-stars svg.is-on:nth-child(2){ animation-delay:.18s }
.motion-ready .heat-stars svg.is-on:nth-child(3){ animation-delay:.36s }
.motion-ready .foot-status i{ animation:portraitScan 11s linear infinite }

@keyframes heroEnter{
  from{ opacity:0; translate:0 30px; filter:blur(7px) }
  to{ opacity:1; translate:0 0; filter:blur(0) }
}
@keyframes sunBreathe{
  0%,100%{ filter:saturate(1) brightness(1) }
  50%{ filter:saturate(1.12) brightness(1.08) }
}
@keyframes grainShift{
  0%{ background-position:0 0 }
  25%{ background-position:3px -2px }
  50%{ background-position:-2px 3px }
  75%{ background-position:2px 1px }
  100%{ background-position:0 0 }
}
@keyframes tickerPulse{
  0%,100%{ box-shadow:0 0 0 rgba(255,196,107,0) }
  50%{ box-shadow:0 0 30px rgba(255,196,107,.13) }
}
@keyframes starHeat{
  0%,100%{ scale:1; filter:drop-shadow(0 0 8px rgba(255,196,107,.45)) }
  50%{ scale:1.12; filter:drop-shadow(0 0 15px rgba(255,196,107,.72)) }
}
@keyframes portraitScan{
  from{ background-position:0 0, 0 0 }
  to{ background-position:96px -96px, 0 0 }
}

.marquee:hover .marquee-track{ animation-play-state:paused }

.btn{
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:'';
  position:absolute; inset:-40% auto -40% -50%;
  width:34%;
  pointer-events:none;
  transform:skewX(-18deg) translateX(-250%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transition:transform .55s ease;
}
.btn:hover::after,
.btn:focus-visible::after{ transform:skewX(-18deg) translateX(520%) }
.btn-copy.is-done{ animation:copyPop .38s ease }
@keyframes copyPop{
  0%{ scale:1 }
  45%{ scale:1.08 }
  100%{ scale:1 }
}

.sec-title::after{
  content:'';
  flex:1 1 auto;
  height:1px;
  margin-left:clamp(4px, 2vw, 18px);
  background:linear-gradient(90deg, rgba(255,196,107,.62), rgba(255,255,255,.1), transparent);
  transform-origin:left center;
}
.js .sec-title.reveal::after{
  transform:scaleX(0);
  transition:transform .9s .18s cubic-bezier(.2,.8,.2,1);
}
.js .sec-title.reveal.is-in::after{ transform:scaleX(1) }

.interactive-card{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --lift:0px;
  position:relative;
  overflow:hidden;
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transform-style:preserve-3d;
  transition:transform .16s ease-out, box-shadow .24s, background .24s, border-color .24s;
  will-change:transform;
}
.interactive-card::after{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(280px circle at var(--card-glow-x, 50%) var(--card-glow-y, 50%), rgba(255,196,107,.14), rgba(232,54,127,.045) 38%, transparent 72%);
  transition:opacity .25s;
}
.interactive-card > *{ position:relative; z-index:1 }
.interactive-card.is-hovered{
  --lift:-4px;
  border-color:rgba(255,255,255,.34);
  box-shadow:0 24px 58px rgba(10,4,16,.28);
}
.interactive-card.is-hovered::after{ opacity:1 }
.step.interactive-card:hover,
.social.interactive-card:hover{ transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift)) }

.social svg{ transition:translate .25s, scale .25s, filter .25s }
.social:hover svg,
.social:focus-visible svg{
  translate:3px -3px;
  scale:1.08;
  filter:drop-shadow(0 0 10px rgba(255,196,107,.3));
}

/* =========================================================
   BREAKPOINTS (mobile first: only add)
   ========================================================= */
/* Five nav items do not fit a phone, so the row scrolls sideways instead of
   wrapping under the wordmark. Scrollbar hidden, swipe still works. */
@media (max-width:720px){
  .pointer-glow{ display:none }
  .bar{ gap:12px }
  .bar-nav{
    gap:16px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .bar-nav::-webkit-scrollbar{ display:none }
  .bar-nav a{ font-size:11px; letter-spacing:.1em; white-space:nowrap }
}

@media (max-width:759px){
  .foot-top{ grid-template-columns:1fr 1fr }
  .foot-brand{ grid-column:1 / -1 }
}

@media (max-width:560px){
  .token-grid{ grid-template-columns:1fr }
  .bar-mark{ font-size:14px; letter-spacing:.1em }
}

@media (min-width:760px){
  .beat{ grid-template-columns:64px 1fr; gap:8px 28px }
  .portrait{ width:min(460px, 100%) }
  .foot-top{ grid-template-columns:1.6fr 1fr 1fr }
}

/* Keep the 3200:392 horizon ratio on very wide monitors. Without this extra
   height, `slice` would enlarge the silhouettes and crop the palm crowns. */
@media (min-width:1920px){
  .horizon svg{ height:min(480px, max(300px, 12.25vw)) }
}

/* Panoramic browser windows are much wider than they are tall. Scale each
   palm around its own base so the silhouettes stay below the hero copy. */
@media (min-aspect-ratio:2/1) and (min-width:1400px){
  .hz-palms-default{ display:none }
  .hz-palms-compact{ display:inline }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; translate:0 0; scale:1; filter:none }
  .pointer-glow{ display:none }
  .sky .sun,
  .sky .haze,
  .horizon,
  .hero-name{ transform:none }

  /* The blanket rule above would collapse the marquee's duration instead of
     stopping it, leaving the track parked at its -50% end state. Stop it
     outright and put it back at the start. */
  .marquee-track{
    animation:none !important;
    translate:0 0;
  }
}