/* Hood Morning — heaven.xyz-style looping video background + liquid glass */

/* ============================================================
   DESIGN v3 — "MORNING EDITION": editorial-brutalist on a dawn sky
   rollback:  git reset --hard design-v1 && git push -f origin main
   ============================================================ */
:root{
  --hm-display:'Unbounded','Geist','Geist Fallback',system-ui,sans-serif;
  --hm-body:'Hanken Grotesk','Geist','Geist Fallback',system-ui,sans-serif;
  --hm-serif-2:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --hm-mono-2:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ink-2:#0d1a12;
  --paper:#fbf7ec;
}

/* ---- type ---- */
body{ font-family:var(--hm-body) !important; letter-spacing:-.004em; }
h1,h2{
  font-family:var(--hm-display) !important;
  font-weight:800 !important;
  letter-spacing:-.045em !important;
  line-height:.92 !important;
  text-transform:uppercase;
}
h3{ font-family:var(--hm-display) !important; font-weight:600 !important; letter-spacing:-.03em; text-transform:uppercase; font-size:1.05em; }
.font-serif{
  font-family:var(--hm-serif-2) !important;
  font-weight:400 !important; font-style:italic !important;
  text-transform:none !important; letter-spacing:normal !important;
  font-optical-sizing:auto;
}
.micro{
  font-family:var(--hm-mono-2) !important;
  letter-spacing:.18em !important; font-weight:700 !important; font-size:10.5px !important;
}
.hm-kbd,.hm-mono{ font-family:var(--hm-mono-2) !important; }
.hm-kbd{ border-radius:0; padding:.05em .35em; border:1.5px solid var(--ink-2); background:var(--hm-lime); color:var(--ink-2); }

/* ---- panels become paper "clippings": sharp, ruled, hard lime shadow ---- */
.glass{
  background:var(--paper) !important;
  border:2px solid var(--ink-2) !important;
  border-radius:2px !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:7px 7px 0 rgba(13,26,18,.92) !important;
}
.hm-round,#hm-chart-slot,#say-hm > .glass,footer .glass,
.glass[class*="rounded-[28px]"],.glass[class*="rounded-2xl"]{ border-radius:2px !important; }
#hm-chart-slot{ background:var(--paper) !important; }
/* nested cards inside a section grid: lighter — hairline only, no double shadow */
.hm-cols3 .glass, .hm-cols2 .glass, .hm-badges, #badges .glass,
.glass .glass{ box-shadow:4px 4px 0 rgba(13,26,18,.92) !important; }

/* ---- buttons: hard-edged press-buttons ---- */
.pill{
  border-radius:2px !important;
  border:2px solid var(--ink-2) !important;
  background:var(--paper) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:3px 3px 0 var(--ink-2) !important;
  transition:transform .08s, box-shadow .08s !important;
  text-transform:uppercase; font-family:var(--hm-mono-2); letter-spacing:.04em; font-weight:700;
}
.pill:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink-2) !important; }
.pill-lime{ background:var(--hm-lime) !important; color:var(--ink-2) !important; box-shadow:3px 3px 0 var(--ink-2) !important; }
.pill-off{ opacity:.45 !important; cursor:not-allowed !important; pointer-events:none !important; box-shadow:none !important; transform:none !important; }
.hm-hdr-actions::before,.hm-hdr-actions::after{ display:none !important; }

/* ---- header nav: a ruled index bar ---- */
header nav.glass{
  border-radius:2px !important; border:2px solid var(--ink-2) !important;
  background:var(--paper) !important; box-shadow:3px 3px 0 var(--ink-2) !important;
  padding:2px !important;
}
header nav a{ border-radius:0 !important; text-transform:uppercase; font-family:var(--hm-mono-2); font-size:11px; letter-spacing:.06em; }
header nav a:hover{ background:var(--hm-lime) !important; color:var(--ink-2) !important; }

/* ---- EDITORIAL section headers: rule + oversized index numeral ---- */
main{ counter-reset:hmsec; }
.micro:has(+ h2){
  counter-increment:hmsec;
  display:block; position:relative;
  margin-top:3rem !important; padding-top:1.35rem;
  border-top:3px solid currentColor;
  font-size:11px !important;
}
.micro:has(+ h2)::before{
  content:counter(hmsec,decimal-leading-zero);
  position:absolute; right:0; top:.7rem;
  font-family:var(--hm-display); font-weight:800;
  font-size:clamp(2.2rem,6vw,3.6rem); line-height:.8;
  color:transparent; -webkit-text-stroke:2px currentColor;
  opacity:.85;
}
.micro:has(+ h2) + h2{
  border-bottom:1px solid currentColor;
  padding-bottom:.45rem; margin-bottom:.2rem;
}

/* ---- the WIRE: a live ticker crawl fixed to the bottom ---- */
.hm-wire{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  height:32px; display:flex; align-items:center; overflow:hidden;
  background:var(--ink-2); color:var(--paper);
  border-top:2px solid var(--hm-lime);
  font-family:var(--hm-mono-2); font-size:12px; letter-spacing:.02em;
}
.hm-wire::before{
  content:"hm  wire"; flex:0 0 auto; align-self:stretch;
  display:flex; align-items:center; padding:0 12px;
  background:var(--hm-lime); color:var(--ink-2); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
}
.hm-wire-track{ display:flex; gap:2.4rem; white-space:nowrap; padding-left:2.4rem;
  animation:hm-wire 42s linear infinite; }
.hm-wire:hover .hm-wire-track{ animation-play-state:paused; }
.hm-wire-track b{ color:var(--hm-lime); }
@keyframes hm-wire{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
body{ padding-bottom:32px; }
@media (prefers-reduced-motion:reduce){ .hm-wire-track{ animation:none; } .hm-wire{ overflow-x:auto; } }

/* ---- green glow that follows the cursor ---- */
.hm-cursor{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,-200px),
    rgba(163,230,53,.30), rgba(140,200,20,.12) 42%, transparent 72%);
}
@media (prefers-reduced-motion:reduce), (pointer:coarse){ .hm-cursor{ display:none; } }
/* end DESIGN v3 ============================================= */


/* --- background: heaven.xyz's own looping grain video --- */
.sky{
  position:fixed !important; inset:0 !important; z-index:-2 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  background:#f4dcb0 !important;   /* warm fallback before the video paints */
}
/* the original drifting cloud PNGs don't fit the heaven look — hide them */
div.pointer-events-none.fixed.inset-0{ display:none !important; }
/* light warm scrim: evens out the video without darkening it much */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(26,18,8,.10) 0%, rgba(22,15,7,.16) 55%, rgba(26,18,9,.24) 100%),
    radial-gradient(100% 70% at 50% 4%, rgba(255,238,205,.18), rgba(255,238,205,0) 70%);
}

/* --- liquid glass (warm frost) --- */
:root{
  --hm-lime:#b7f24a;
  --hm-lime-deep:#4f8c00;
}
.glass{
  -webkit-backdrop-filter:blur(20px) saturate(125%) !important;
  backdrop-filter:blur(20px) saturate(125%) !important;
  background:linear-gradient(158deg, rgba(255,253,248,.90), rgba(255,247,233,.82) 60%, rgba(255,251,243,.88)) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:
    0 34px 80px rgba(120,80,20,.20),
    0 3px 10px rgba(120,80,20,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -26px 44px rgba(230,190,120,.10) !important;
}
.pill{
  -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
  backdrop-filter:blur(14px) saturate(140%) !important;
  background:linear-gradient(160deg, rgba(255,253,248,.95), rgba(255,246,230,.82)) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 12px 30px rgba(120,80,20,.16), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.pill-lime{
  background:linear-gradient(160deg, #c6ff5c, #9fe000) !important;
  border-color:rgba(255,255,255,.7) !important;
  color:#123105 !important;
  box-shadow:0 14px 34px rgba(110,170,0,.4), inset 0 1px 0 rgba(255,255,255,.75) !important;
}

::selection{ background:var(--hm-lime); color:#123105; }

/* strong dark halo so white text survives both the gold and the dark frames of the video */
.on-sky{
  text-shadow:
    0 1px 3px rgba(15,10,4,.65),
    0 2px 14px rgba(15,10,4,.5),
    0 0 36px rgba(15,10,4,.35) !important;
}

/* streak flame pulse */
@keyframes hm-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.hm-flame{ display:inline-block; animation:hm-pulse 1.8s ease-in-out infinite; }

/* hero: one centred block, even on any screen */
.hm-hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:clamp(6rem,15vh,9.5rem) 1rem clamp(2.5rem,7vh,4.5rem);
}
.hm-hero > div{ width:100%; }
.hm-wordmark{ width:clamp(240px,74vw,560px) !important; height:auto; margin-inline:auto; transition:transform .3s cubic-bezier(.2,.8,.2,1); transform-origin:center; will-change:transform; }
.hm-wordmark:hover{ transform:scale(1.045); }
@media (prefers-reduced-motion:reduce){ .hm-wordmark{ transition:none; } .hm-wordmark:hover{ transform:none; } }

/* floating icons behind the hero wordmark */
.hm-floaties{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hm-floaties img{
  position:absolute; user-select:none; will-change:transform;
  filter:drop-shadow(0 22px 38px rgba(20,60,15,.30));
}
.hm-floaties .f1{ width:clamp(58px,9vw,116px);  left:2%;   top:22%; --rot:-7deg;  animation:hm-float 5.6s ease-in-out infinite; }
.hm-floaties .f2{ width:clamp(88px,14vw,172px); right:0%;  top:44%; --rot:8deg;   animation:hm-float 7.4s ease-in-out -1.8s infinite; }
.hm-floaties .f3{ width:clamp(42px,6.5vw,82px); left:4%;   top:48%; --rot:-3deg;  animation:hm-float 6.4s ease-in-out -3.2s infinite; }
@keyframes hm-float{
  0%,100%{ transform:translateY(0)     rotate(var(--rot,-5deg)); }
  50%    { transform:translateY(-15px) rotate(var(--rot,-5deg)); }
}
@media (prefers-reduced-motion:reduce){ .hm-floaties img{ animation:none !important; } }
@media (max-width:640px){
  .hm-floaties .f1{ top:13%; left:-3% }
  .hm-floaties .f2{ top:40%; right:-6% }
  .hm-floaties .f3{ top:26%; left:auto; right:2% }
}

/* --- the timeline: auto-scrolling tweet marquee --- */
.hm-marquee{ overflow:hidden; padding:6px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.hm-track{ display:flex; gap:16px; width:max-content; padding:0 8px;
  animation:hm-slide 90s linear infinite; }
.hm-marquee:hover .hm-track,
.hm-marquee:focus-within .hm-track{ animation-play-state:paused; }
@keyframes hm-slide{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .hm-track{ animation:none; } .hm-marquee{ overflow-x:auto; } }

.hm-tweet{ flex:0 0 auto; width:300px; padding:15px 16px; border-radius:18px;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .18s, box-shadow .18s; }
.hm-tweet:hover{ transform:translateY(-4px); box-shadow:0 30px 60px rgba(20,60,15,.24); }
.hm-tweet .r{ display:flex; align-items:center; gap:10px; }
.hm-av{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px;
  box-shadow:0 3px 8px rgba(10,40,20,.18); background:#8a94a6; }
.hm-nm{ font-weight:700; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:3px; line-height:1.15; }
.hm-vf{ color:#1d9bf0; font-size:12px; flex:0 0 auto; }
.hm-hd{ font-size:12px; color:#5b7789; line-height:1.15; }
.hm-x{ margin-left:auto; font-weight:800; font-size:14px; color:#5b7789; opacity:.75; }
.hm-rt{ font-size:11.5px; color:#5b7789; margin-top:9px; }
.hm-bd{ margin:9px 0 4px; font-size:15px; line-height:1.42; color:var(--ink); flex:1 0 auto; }
.hm-bd b{ font-weight:700; }
.hm-mt{ font-size:11.5px; color:#5b7789; display:flex; gap:13px; align-items:center; padding-top:9px; margin-top:6px; border-top:1px solid rgba(11,26,43,.08); }

/* --- helpers for the rebuilt home page --- */
.hm-mono{ font-family:var(--font-mono); }

/* show only on >= 640px (compiled Tailwind lacks sm:inline-flex) */
.hm-sm-only{ display:none !important; }
@media(min-width:640px){ .hm-sm-only{ display:inline-flex !important; } }

/* soft grainy white blur behind the header action buttons */
.hm-hdr-actions{ position:relative; padding:7px 9px; border-radius:999px; isolation:isolate; }
.hm-hdr-actions::before{
  content:""; position:absolute; inset:-2px -4px; z-index:-1; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.40));
  -webkit-backdrop-filter:blur(12px) saturate(135%);
          backdrop-filter:blur(12px) saturate(135%);
  box-shadow:0 8px 26px rgba(20,40,20,.14);
}
.hm-hdr-actions::after{
  content:""; position:absolute; inset:-2px -4px; z-index:-1; border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:140px 140px; opacity:.3; mix-blend-mode:soft-light;
}

/* desktop nav: dead-centre on screen, independent of logo / buttons width */
@media(min-width:1024px){
  header > div{ position:relative; }
  .hm-nav-center{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
  }
}

/* mobile menu: a centred card when open */
#hm-menu:not([hidden]){
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:1rem; margin:0 !important; max-width:none !important;
  background:rgba(20,30,20,.28);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
#hm-menu:not([hidden]) > div{
  width:min(90vw, 320px);
  padding:.75rem !important;
  text-align:center;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 40px 90px rgba(15,25,15,.35) !important;
}
#hm-menu:not([hidden]) > div a{ text-align:center; }
.hm-kbd{
  font-family:var(--font-mono); font-weight:700; color:#123105;
  background:rgba(159,224,0,.28); border:1px solid rgba(90,150,0,.35);
  border-radius:6px; padding:.08em .4em; font-size:.9em;
}
.hm-grad-text{
  background:linear-gradient(180deg,#8fd400,#5f9e00 60%,#3f7300);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}