*{box-sizing:border-box}
:root{
  --bg:#040404;
  --panel:#090909;
  --red:#ff1616;
  --red2:#b90000;
  --white:#f3f3f1;
  --muted:#999;
  --line:rgba(255,255,255,.1);
}
html{scroll-behavior:smooth}
body{
  margin:0;background:#030303;color:var(--white);
  font-family:Inter,Arial,sans-serif;overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
.noise{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topbar{
  height:74px;position:fixed;left:0;right:0;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,4vw,68px);
  background:rgba(3,3,3,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  min-width:46px;height:46px;display:grid;place-items:center;padding:0 8px;
  border:1px solid rgba(255,22,22,.45);background:#080808;
  font:700 17px Oswald;letter-spacing:-.04em;color:#fff;
  box-shadow:0 0 24px rgba(255,22,22,.14), inset 0 0 15px rgba(255,22,22,.08);
}
.brand-copy{display:flex;flex-direction:column}
.brand-copy strong{text-transform:uppercase;letter-spacing:.07em;font-size:15px}
.brand-copy small{font-size:9px;color:var(--red);letter-spacing:.38em;margin-top:4px}
.future-nav{display:flex;gap:30px;align-items:center;font-size:10px;font-weight:800;letter-spacing:.12em;color:#6f6f6f}
.future-nav .active{color:#fff}
.future-nav span{cursor:default}
.nav-discord{
  padding:12px 18px;border:1px solid var(--red);
  font-size:11px;font-weight:900;letter-spacing:.1em;
  box-shadow:0 0 24px rgba(255,22,22,.16);
  transition:.2s ease;background:rgba(255,22,22,.035)
}
.nav-discord:hover{background:var(--red);color:#050505;box-shadow:0 0 32px rgba(255,22,22,.35)}

.hero{
  min-height:100vh;position:relative;display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(430px,.96fr);
  align-items:center;gap:20px;padding:110px clamp(24px,5.3vw,90px) 60px;
  overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 74% 46%,rgba(255,0,0,.11),transparent 26%),
    radial-gradient(circle at 46% 72%,rgba(255,0,0,.05),transparent 31%),
    #030303;
}
.market-grid{
  position:absolute;inset:0;z-index:-4;opacity:.3;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,transparent 3%,black 18%,black 82%,transparent);
}
.hero:before,.hero:after{
  content:"";position:absolute;z-index:-2;opacity:.27;pointer-events:none;
}
.hero:before{
  left:-4%;right:42%;bottom:8%;height:55%;
  background:
   linear-gradient(157deg,transparent 0 12%,var(--red) 12.2% 12.5%,transparent 12.8% 27%,var(--red) 27.2% 27.5%,transparent 27.8% 42%,var(--red) 42.2% 42.5%,transparent 42.8% 58%,var(--red) 58.2% 58.5%,transparent 58.8%);
}
.hero:after{
  right:-4%;top:14%;width:42%;height:58%;
  background:
   linear-gradient(164deg,transparent 0 10%,var(--red) 10.3% 10.6%,transparent 10.9% 27%,var(--red) 27.3% 27.6%,transparent 27.9% 45%,var(--red) 45.3% 45.6%,transparent 45.9%);
}
.red-glow{
  position:absolute;right:7%;top:24%;width:440px;height:440px;border-radius:50%;
  background:#d00000;filter:blur(160px);opacity:.12;z-index:-2
}
.hero-copy-wrap{position:relative;z-index:5;max-width:820px}
.eyebrow{
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
  text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:#b8b8b8
}
.eyebrow span{display:block;width:38px;height:2px;background:var(--red);box-shadow:0 0 12px var(--red)}
h1,h2,h3{font-family:Oswald,Inter,sans-serif;text-transform:uppercase;margin:0}
h1{
  font-size:clamp(59px,7.4vw,126px);line-height:.88;letter-spacing:-.055em;
  text-shadow:0 6px 30px rgba(0,0,0,.7)
}
h1 span{color:#fff}
h1 em{font-style:normal;color:var(--red);text-shadow:0 0 34px rgba(255,22,22,.2)}
.hero-copy{
  max-width:670px;margin:28px 0 0;font-size:clamp(15px,1.2vw,18px);
  color:#b5b5b5;line-height:1.7
}
.focus-line{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:24px;
  font:700 10px Inter;letter-spacing:.15em;color:#d7d7d7
}
.focus-line i{width:3px;height:13px;background:var(--red);display:block}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{
  min-height:54px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;transition:.22s ease
}
.btn-primary{
  background:linear-gradient(180deg,#ff2626,#d90000);border-color:#ff3030;color:#fff;
  box-shadow:0 0 22px rgba(255,0,0,.28),inset 0 0 18px rgba(255,255,255,.07)
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 35px rgba(255,0,0,.3)}
.btn-secondary{background:rgba(255,255,255,.025)}
.btn-secondary:hover{border-color:#fff}
.discord-mark{font-size:18px}
.invite-link{
  display:inline-block;margin-top:17px;color:var(--red);font-weight:800;font-size:13px;letter-spacing:.03em
}
.market-strip{
  display:flex;margin-top:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:760px
}
.market-strip div{padding:16px 28px 16px 0;margin-right:30px;display:flex;flex-direction:column;gap:6px}
.market-strip small{font-size:8px;letter-spacing:.2em;color:#777}
.market-strip strong{font-size:11px;letter-spacing:.07em}

.bear-stage{
  height:min(76vh,760px);position:relative;display:flex;align-items:center;justify-content:center;
  z-index:2;min-height:520px
}
.bear-stage img{
  width:min(100%,720px);height:auto;display:block;position:relative;z-index:2;
  filter:drop-shadow(0 0 30px rgba(255,0,0,.18));
  mask-image:linear-gradient(to bottom,black 0%,black 78%,transparent 100%);
}
.bear-aura{
  position:absolute;width:70%;aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,0,0,.28),rgba(255,0,0,.05) 45%,transparent 68%);
  filter:blur(28px)
}
.live-stamp{
  position:absolute;right:1%;bottom:8%;z-index:5;display:flex;flex-direction:column;
  align-items:flex-end;transform:rotate(-3deg)
}
.live-stamp strong{
  font:700 clamp(34px,4vw,70px) Oswald;color:#fff;line-height:.9;
  text-shadow:4px 4px 0 #111,0 0 12px rgba(255,255,255,.12)
}
.live-stamp strong::after{content:".";color:var(--red)}
.live-stamp span{
  margin-top:10px;padding:8px 16px;border:1px solid var(--red);background:rgba(0,0,0,.75);
  font:700 11px Inter;letter-spacing:.18em;color:#fff;box-shadow:0 0 18px rgba(255,0,0,.2)
}

.manifesto{
  max-width:1240px;margin:0 auto;padding:95px clamp(24px,5vw,70px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative
}
.manifesto:after{
  content:"MTP";position:absolute;right:2%;bottom:-38px;font:700 clamp(100px,14vw,210px) Oswald;
  color:rgba(255,255,255,.025);pointer-events:none
}
.section-kicker{font-size:10px;letter-spacing:.25em;font-weight:900;color:var(--red);margin-bottom:16px}
.manifesto h2{font-size:clamp(44px,5.7vw,82px);line-height:.98;letter-spacing:-.04em}
.manifesto h2 span{color:#727272}
.manifesto p{max-width:700px;color:#999;line-height:1.8;font-size:16px;margin:24px 0 0}

.pillars{
  max-width:1380px;margin:auto;padding:90px clamp(24px,5vw,70px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px
}
.pillars article{
  min-height:240px;padding:34px 30px;border:1px solid var(--line);background:
  linear-gradient(145deg,rgba(255,22,22,.035),rgba(255,255,255,.01));
  position:relative;overflow:hidden
}
.pillars article:after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--red),transparent 65%)
}
.num{font:700 12px Oswald;color:var(--red);letter-spacing:.16em}
.pillars h3{font-size:28px;margin-top:24px}
.pillars p{color:#909090;line-height:1.7;max-width:330px}

.cta{
  margin:0 clamp(24px,5vw,70px) 90px;padding:clamp(36px,5vw,62px);
  display:flex;justify-content:space-between;align-items:center;gap:35px;
  border:1px solid var(--line);
  background:linear-gradient(95deg,rgba(255,22,22,.08),rgba(255,22,22,.015) 45%,rgba(255,255,255,.01));
}
.cta h2{font-size:clamp(35px,4.5vw,63px);letter-spacing:-.03em}
.cta p{color:#8e8e8e}
.btn-large{min-width:260px;min-height:61px}

footer{
  border-top:1px solid var(--line);padding:28px clamp(24px,5vw,70px);
  display:grid;grid-template-columns:1fr 1.4fr auto;gap:24px;align-items:center;
  font-size:10px;color:#666;background:#030303
}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand div{display:flex;flex-direction:column;gap:4px}
.footer-brand strong{color:#d6d6d6;font-size:12px}
.footer-brand small{color:#666}

@media(max-width:1080px){
  .future-nav{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:120px}
  .bear-stage{height:650px;margin-top:-40px}
  .bear-stage img{max-width:720px}
  .live-stamp{right:8%;bottom:10%}
}
@media(max-width:760px){
  .topbar{height:66px;padding:0 16px}
  .brand-copy{display:none}
  .brand-mark{height:40px;min-width:43px;font-size:14px}
  .nav-discord{font-size:9px;padding:10px 12px}
  .hero{padding:100px 18px 45px}
  h1{font-size:clamp(48px,15.5vw,76px)}
  .hero-copy{font-size:14px}
  .bear-stage{height:480px;min-height:430px;margin-top:-10px}
  .bear-stage img{width:112%;max-width:none}
  .live-stamp{right:0;bottom:3%}
  .live-stamp strong{font-size:38px}
  .market-strip{display:grid;grid-template-columns:1fr}
  .market-strip div{margin:0;border-bottom:1px solid var(--line)}
  .pillars{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  footer{grid-template-columns:1fr}
}


/* =========================
   GOAT V2 — Motion / Energy
   ========================= */

.hero{perspective:1200px}

.hero-brand-lockup{
  display:flex;align-items:center;gap:15px;margin-bottom:18px
}
.mtp-slash{
  position:relative;
  font:900 clamp(28px,2.6vw,44px) Oswald, sans-serif;
  font-style:italic;
  letter-spacing:-.08em;
  color:#fff;
  text-shadow:
    3px 0 0 var(--red),
    0 0 18px rgba(255,0,0,.28);
  transform:skewX(-8deg);
}
.mtp-slash::after{
  content:"";position:absolute;left:-4px;right:-8px;bottom:-6px;height:3px;
  background:linear-gradient(90deg,var(--red),transparent);
  box-shadow:0 0 10px rgba(255,0,0,.45)
}
.hero-brand-lockup .eyebrow{margin:0}

.lightning{
  position:absolute;z-index:-1;pointer-events:none;opacity:.14;
  filter:drop-shadow(0 0 15px var(--red));
  mix-blend-mode:screen;
}
.lightning::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(105deg,transparent 0 35%,rgba(255,255,255,.9) 35.5% 36.1%,transparent 36.6% 49%,rgba(255,20,20,.95) 49.5% 50.2%,transparent 50.8% 62%,rgba(255,255,255,.85) 62.4% 63%,transparent 63.6%);
}
.lightning-a{
  width:38%;height:52%;right:10%;top:14%;transform:rotate(-7deg);
  animation:lightningFlash 6.5s infinite steps(1,end)
}
.lightning-b{
  width:28%;height:42%;right:32%;bottom:8%;transform:rotate(14deg);
  animation:lightningFlash 8s 2.5s infinite steps(1,end)
}
@keyframes lightningFlash{
  0%,90%,94%,100%{opacity:.03}
  91%{opacity:.36}
  92%{opacity:.08}
  93%{opacity:.24}
}

.red-glow{
  animation:redPulse 4.8s ease-in-out infinite;
}
@keyframes redPulse{
  0%,100%{opacity:.10;transform:scale(.96)}
  50%{opacity:.19;transform:scale(1.06)}
}

/* animated candle groups */
.market-candles{
  position:absolute;z-index:-1;bottom:10%;width:24%;height:48%;
  opacity:.18;pointer-events:none
}
.candles-left{left:-2%}
.candles-right{right:-1%;transform:scaleX(-1)}
.wick{
  position:absolute;width:10px;border-radius:1px;
  animation:candleFloat 5.4s ease-in-out infinite;
}
.wick::before{
  content:"";position:absolute;left:50%;top:-22px;width:1px;height:calc(100% + 44px);
  transform:translateX(-50%);background:currentColor;opacity:.9
}
.wick.up{background:#2eff7d;color:#2eff7d}
.wick.down{background:var(--red);color:var(--red)}
.c01{left:7%;bottom:6%;height:23%;animation-delay:.1s}
.c02{left:18%;bottom:15%;height:31%;animation-delay:.8s}
.c03{left:29%;bottom:25%;height:19%;animation-delay:1.1s}
.c04{left:41%;bottom:31%;height:35%;animation-delay:.3s}
.c05{left:53%;bottom:42%;height:27%;animation-delay:1.5s}
.c06{left:65%;bottom:49%;height:34%;animation-delay:.6s}
.c07{left:77%;bottom:59%;height:22%;animation-delay:1.8s}
.c08{left:89%;bottom:68%;height:31%;animation-delay:1.2s}
.c11{left:7%;bottom:10%;height:22%;animation-delay:.4s}
.c12{left:18%;bottom:17%;height:34%;animation-delay:1.4s}
.c13{left:29%;bottom:29%;height:24%;animation-delay:.2s}
.c14{left:41%;bottom:37%;height:29%;animation-delay:1s}
.c15{left:53%;bottom:48%;height:38%;animation-delay:.7s}
.c16{left:65%;bottom:56%;height:23%;animation-delay:1.7s}
.c17{left:77%;bottom:63%;height:31%;animation-delay:.5s}
.c18{left:89%;bottom:73%;height:25%;animation-delay:1.3s}
@keyframes candleFloat{
  0%,100%{transform:translateY(0);opacity:.65}
  50%{transform:translateY(-10px);opacity:1}
}

/* stronger bear treatment */
.bear-stage{
  transform-style:preserve-3d;
  animation:bearDrift 7s ease-in-out infinite;
}
@keyframes bearDrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}
.bear-stage::after{
  content:"";position:absolute;left:12%;right:12%;bottom:8%;height:18%;
  background:radial-gradient(ellipse,rgba(255,0,0,.23),transparent 70%);
  filter:blur(25px);z-index:0;animation:underGlow 4s ease-in-out infinite
}
@keyframes underGlow{
  0%,100%{opacity:.45;transform:scale(.92)}
  50%{opacity:.9;transform:scale(1.06)}
}
.bear-stage img{
  transition:filter .35s ease,transform .35s ease;
  filter:
    contrast(1.06)
    saturate(1.08)
    drop-shadow(0 0 25px rgba(255,0,0,.22))
    drop-shadow(0 14px 28px rgba(0,0,0,.7));
}
.bear-stage:hover img{
  transform:scale(1.018);
  filter:
    contrast(1.1)
    saturate(1.12)
    drop-shadow(0 0 36px rgba(255,0,0,.32))
    drop-shadow(0 18px 34px rgba(0,0,0,.75));
}

.live-badge{
  position:absolute;left:7%;top:7%;z-index:6;
  display:flex;align-items:center;gap:7px;
  padding:8px 12px;border:1px solid rgba(255,25,25,.55);
  background:rgba(0,0,0,.65);backdrop-filter:blur(8px);
  box-shadow:0 0 22px rgba(255,0,0,.16)
}
.live-badge b{
  font:900 12px Oswald;letter-spacing:.08em;color:#fff
}
.live-badge span{
  font-size:9px;font-weight:900;letter-spacing:.19em;color:var(--red)
}
.live-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 12px var(--red);animation:statusPulse 1.5s infinite
}
@keyframes statusPulse{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}

/* GOAT Discord button */
.btn-primary{
  position:relative;overflow:hidden;
}
.btn-primary::before{
  content:"";position:absolute;top:-50%;left:-20%;width:35%;height:200%;
  transform:rotate(18deg) translateX(-220%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transition:transform .55s ease;
}
.btn-primary:hover::before{
  transform:rotate(18deg) translateX(420%);
}
.btn-primary::after{
  content:"";position:absolute;inset:-2px;border:1px solid rgba(255,255,255,.18);
  pointer-events:none;opacity:.45
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:
    0 0 22px rgba(255,0,0,.45),
    0 0 48px rgba(255,0,0,.18),
    inset 0 0 18px rgba(255,255,255,.1);
}
.cta-arrow{
  font-size:18px;transition:transform .2s ease
}
.btn-primary:hover .cta-arrow{transform:translateX(5px)}
.actions .btn-primary{
  animation:ctaPulse 3.8s ease-in-out infinite
}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 22px rgba(255,0,0,.24)}
  50%{box-shadow:0 0 34px rgba(255,0,0,.43),0 0 70px rgba(255,0,0,.12)}
}

/* top bar harder / cleaner */
.topbar{
  box-shadow:0 10px 40px rgba(0,0,0,.45)
}
.nav-discord{
  position:relative;overflow:hidden;
}
.nav-discord::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--red);box-shadow:0 0 12px var(--red)
}

/* slight section reveal polish */
.manifesto,.pillars article,.cta{
  opacity:0;transform:translateY(18px);
  transition:opacity .65s ease,transform .65s ease
}
.reveal-visible{
  opacity:1 !important;transform:translateY(0) !important;
}

/* reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}


/* =========================
   GOAT V3 — Bear Blend Pass
   ========================= */

body.preload .bear-stage{
  opacity:0;
}
body.ready .bear-stage{
  opacity:1;
}

.hero{
  overflow:hidden;
}

.hero::before{
  opacity:.20;
}
.hero::after{
  opacity:.22;
}

/* make hero feel more atmospheric */
.hero-copy-wrap{
  position:relative;
  z-index:8;
}
.hero-copy-wrap::after{
  content:"";
  position:absolute;
  right:-8%;
  top:22%;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,0,0,.14), transparent 68%);
  filter:blur(40px);
  pointer-events:none;
}

.bear-stage{
  position:relative;
  isolation:isolate;
  overflow:visible;
  opacity:1;
  transition:opacity .55s ease;
}

.bear-image-wrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  animation:bearArrival 1.8s cubic-bezier(.18,.82,.18,1) .12s both;
  filter:drop-shadow(0 0 40px rgba(255,0,0,.10));
}

.bear-image-wrap::before{
  content:"";
  position:absolute;
  inset:12% 14% 12% 14%;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,35,35,.18), transparent 42%),
    radial-gradient(circle at 50% 52%, rgba(255,0,0,.10), transparent 62%);
  filter:blur(30px);
  z-index:0;
  animation:auraBeat 4s ease-in-out infinite;
}

.bear-stage img{
  position:relative;
  z-index:2;
  width:min(104%,760px);
  max-width:none;
  height:auto;
  display:block;
  filter:
    contrast(1.08)
    saturate(1.06)
    brightness(.98)
    drop-shadow(0 0 24px rgba(255,0,0,.12))
    drop-shadow(0 14px 30px rgba(0,0,0,.72));
  mix-blend-mode:screen;
  opacity:.94;
  mask-image:
    radial-gradient(circle at 50% 40%, rgba(0,0,0,1) 0 40%, rgba(0,0,0,.98) 49%, rgba(0,0,0,.84) 62%, rgba(0,0,0,.40) 76%, transparent 92%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.92) 11%, rgba(0,0,0,1) 32%, rgba(0,0,0,.84) 75%, transparent 100%);
  -webkit-mask-image:
    radial-gradient(circle at 50% 40%, rgba(0,0,0,1) 0 40%, rgba(0,0,0,.98) 49%, rgba(0,0,0,.84) 62%, rgba(0,0,0,.40) 76%, transparent 92%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.92) 11%, rgba(0,0,0,1) 32%, rgba(0,0,0,.84) 75%, transparent 100%);
}

.bear-stage:hover img{
  transform:scale(1.02);
  opacity:.98;
  filter:
    contrast(1.12)
    saturate(1.10)
    brightness(1.02)
    drop-shadow(0 0 32px rgba(255,0,0,.18))
    drop-shadow(0 18px 34px rgba(0,0,0,.76));
}

.bear-fog{
  position:absolute;
  left:0; right:0;
  margin:auto;
  pointer-events:none;
  border-radius:50%;
}

.bear-fog-back{
  z-index:1;
  width:82%;
  height:64%;
  bottom:12%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,35,35,.18), rgba(255,0,0,.10) 28%, rgba(0,0,0,0) 64%),
    radial-gradient(circle at 50% 68%, rgba(255,255,255,.05), rgba(0,0,0,0) 44%);
  filter:blur(36px);
  animation:fogDrift 8s ease-in-out infinite;
}

.bear-fog-front{
  z-index:4;
  width:86%;
  height:28%;
  bottom:2%;
  background:
    linear-gradient(to top, rgba(0,0,0,.84), rgba(0,0,0,.44) 36%, rgba(255,0,0,.06) 58%, transparent 100%),
    radial-gradient(circle at 30% 80%, rgba(255,0,0,.12), transparent 28%),
    radial-gradient(circle at 70% 76%, rgba(255,0,0,.10), transparent 26%);
  filter:blur(18px);
  animation:fogDriftFront 6s ease-in-out infinite;
}

.bear-vignette{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%, transparent 0 36%, rgba(0,0,0,.06) 55%, rgba(0,0,0,.24) 70%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.62) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.34), transparent 24%, transparent 72%, rgba(0,0,0,.48));
  mix-blend-mode:multiply;
}

.bear-shockwave{
  position:absolute;
  inset:auto;
  width:68%;
  aspect-ratio:1;
  left:16%;
  top:16%;
  z-index:0;
  border-radius:50%;
  border:1px solid rgba(255,0,0,.18);
  box-shadow:
    0 0 0 18px rgba(255,0,0,.025),
    0 0 0 44px rgba(255,0,0,.018);
  filter:blur(1px);
  animation:shockwave 3.6s ease-out infinite;
}

.live-stamp{
  z-index:8;
  animation:stampEaseIn 1.5s ease .6s both;
}

.live-badge{
  z-index:9;
  animation:badgeFade .95s ease .55s both;
}

@keyframes bearArrival{
  0%{
    opacity:0;
    transform:translateY(42px) scale(.82);
    filter:blur(18px) drop-shadow(0 0 0 rgba(255,0,0,0));
  }
  45%{
    opacity:.58;
    transform:translateY(10px) scale(.93);
    filter:blur(7px) drop-shadow(0 0 10px rgba(255,0,0,.10));
  }
  72%{
    opacity:.90;
    transform:translateY(-4px) scale(1.01);
    filter:blur(1px) drop-shadow(0 0 18px rgba(255,0,0,.14));
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0) drop-shadow(0 0 18px rgba(255,0,0,.12));
  }
}

@keyframes auraBeat{
  0%,100%{transform:scale(.97); opacity:.65}
  50%{transform:scale(1.03); opacity:1}
}

@keyframes fogDrift{
  0%,100%{transform:translateY(0) scale(1); opacity:.85}
  50%{transform:translateY(-8px) scale(1.03); opacity:1}
}

@keyframes fogDriftFront{
  0%,100%{transform:translateY(0); opacity:.80}
  50%{transform:translateY(6px); opacity:1}
}

@keyframes shockwave{
  0%{
    transform:scale(.78);
    opacity:.0;
  }
  12%{
    opacity:.22;
  }
  70%{
    transform:scale(1.12);
    opacity:.08;
  }
  100%{
    transform:scale(1.22);
    opacity:0;
  }
}

@keyframes stampEaseIn{
  0%{opacity:0; transform:translateY(24px) rotate(-3deg)}
  100%{opacity:1; transform:translateY(0) rotate(-3deg)}
}

@keyframes badgeFade{
  0%{opacity:0; transform:translateY(-10px)}
  100%{opacity:1; transform:translateY(0)}
}

/* So the bear feels integrated with the rock base */
.bear-stage::before{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  bottom:0;
  height:26%;
  z-index:3;
  background:
    linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.54) 35%, rgba(255,0,0,.05) 64%, transparent 100%);
  filter:blur(8px);
  pointer-events:none;
}

/* tighten mobile blend */
@media(max-width:1080px){
  .bear-stage{
    margin-top:-18px;
  }
  .bear-stage img{
    width:min(112%,820px);
  }
  .bear-shockwave{
    width:74%;
    left:13%;
    top:18%;
  }
}

@media(max-width:760px){
  .bear-stage{
    height:500px;
    min-height:450px;
    margin-top:-14px;
  }
  .bear-stage img{
    width:124%;
  }
  .bear-fog-back{
    width:110%;
    height:70%;
  }
  .bear-fog-front{
    width:118%;
    bottom:3%;
  }
  .bear-shockwave{
    width:86%;
    left:7%;
    top:22%;
  }
  .live-stamp{
    right:2%;
    bottom:4%;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .bear-image-wrap,
  .bear-fog-back,
  .bear-fog-front,
  .bear-shockwave,
  .live-stamp,
  .live-badge{
    animation:none !important;
  }
}


/* =========================
   GOAT V4 — Injected Bear
   The bear is now part of the hero itself,
   not a separate image element.
   ========================= */

.bear-integrated{
  position:relative;
  isolation:isolate;
  overflow:visible;
  min-height:540px;
}

/* Main injected artwork layer */
.bear-bg-layer{
  position:absolute;
  inset:-4% -8% -3% -8%;
  z-index:2;
  pointer-events:none;

  background-image:
    linear-gradient(to bottom,
      rgba(3,3,3,.46) 0%,
      rgba(3,3,3,.10) 18%,
      rgba(3,3,3,0) 38%,
      rgba(3,3,3,.02) 60%,
      rgba(3,3,3,.45) 82%,
      rgba(3,3,3,.95) 100%
    ),
    radial-gradient(circle at 50% 42%,
      rgba(255,0,0,.10) 0%,
      rgba(255,0,0,.04) 31%,
      rgba(0,0,0,0) 61%
    ),
    url("mtpockets-bear.png");

  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center,center,center 43%;
  background-size:cover,cover,96% auto;

  filter:
    contrast(1.07)
    saturate(1.07)
    brightness(.96)
    drop-shadow(0 0 26px rgba(255,0,0,.15));

  opacity:.96;

  /* dissolve the artwork directly into the hero */
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 42%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,.92) 58%,
      rgba(0,0,0,.62) 70%,
      rgba(0,0,0,.24) 82%,
      transparent 96%
    );
  mask-image:
    radial-gradient(ellipse at 50% 42%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,.92) 58%,
      rgba(0,0,0,.62) 70%,
      rgba(0,0,0,.24) 82%,
      transparent 96%
    );

  animation:backgroundBearReveal 1.8s cubic-bezier(.16,.84,.18,1) .12s both;
}

/* Extra dark blend over edges to make it feel embedded */
.bear-integrated::before{
  content:"";
  position:absolute;
  inset:-7%;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(3,3,3,.84) 0%,
      rgba(3,3,3,.28) 16%,
      transparent 34%,
      transparent 67%,
      rgba(3,3,3,.30) 86%,
      rgba(3,3,3,.86) 100%
    ),
    linear-gradient(to bottom,
      rgba(3,3,3,.68) 0%,
      transparent 19%,
      transparent 69%,
      rgba(3,3,3,.82) 100%
    );
}

/* Red energy is now in front of and behind the image */
.bear-integrated::after{
  content:"";
  position:absolute;
  inset:7% 7% 10%;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(circle at 49% 44%, rgba(255,25,25,.18), transparent 33%),
    radial-gradient(circle at 52% 54%, rgba(255,0,0,.10), transparent 56%);
  filter:blur(18px);
  mix-blend-mode:screen;
  animation:integratedGlow 4s ease-in-out infinite;
}

.bear-fog-back{
  z-index:1;
  width:94%;
  height:75%;
  bottom:5%;
}

.bear-fog-front{
  z-index:6;
  width:104%;
  height:31%;
  bottom:-1%;
}

.bear-vignette{
  z-index:7;
}

.bear-shockwave{
  z-index:1;
}

.live-stamp,
.live-badge{
  z-index:10;
}

/* Remove previous standalone-image-specific behavior */
.bear-stage img,
.bear-image-wrap{
  display:none !important;
}

/* Instead of floating independently, move the integrated background very subtly */
.bear-integrated{
  animation:none !important;
  transform:none !important;
}

.bear-integrated:hover .bear-bg-layer{
  filter:
    contrast(1.10)
    saturate(1.10)
    brightness(1)
    drop-shadow(0 0 34px rgba(255,0,0,.19));
}

@keyframes backgroundBearReveal{
  0%{
    opacity:0;
    transform:scale(1.09);
    filter:
      blur(15px)
      contrast(1.02)
      saturate(.85)
      brightness(.60);
  }
  35%{
    opacity:.30;
    transform:scale(1.06);
    filter:
      blur(10px)
      contrast(1.04)
      saturate(.92)
      brightness(.72);
  }
  68%{
    opacity:.78;
    transform:scale(1.025);
    filter:
      blur(3px)
      contrast(1.06)
      saturate(1.03)
      brightness(.90);
  }
  100%{
    opacity:.96;
    transform:scale(1);
    filter:
      blur(0)
      contrast(1.07)
      saturate(1.07)
      brightness(.96)
      drop-shadow(0 0 26px rgba(255,0,0,.15));
  }
}

@keyframes integratedGlow{
  0%,100%{opacity:.55;transform:scale(.97)}
  50%{opacity:1;transform:scale(1.04)}
}

/* Desktop integration */
@media(min-width:1081px){
  .bear-integrated{
    margin-left:-4%;
    margin-right:-3%;
  }
  .bear-bg-layer{
    background-size:cover,cover,102% auto;
    background-position:center,center,center 44%;
  }
}

/* Tablet integration */
@media(max-width:1080px){
  .bear-integrated{
    height:660px;
    min-height:600px;
    margin-top:-8px;
  }
  .bear-bg-layer{
    inset:-2% -10% -4%;
    background-size:cover,cover,106% auto;
    background-position:center,center,center 45%;
  }
}

/* Mobile integration */
@media(max-width:760px){
  .bear-integrated{
    height:520px;
    min-height:480px;
    margin-top:-6px;
  }

  .bear-bg-layer{
    inset:-3% -20% -6%;
    background-size:cover,cover,122% auto;
    background-position:center,center,center 46%;
  }

  .bear-integrated::before{
    background:
      linear-gradient(90deg,
        rgba(3,3,3,.76) 0%,
        rgba(3,3,3,.20) 12%,
        transparent 31%,
        transparent 70%,
        rgba(3,3,3,.20) 88%,
        rgba(3,3,3,.78) 100%
      ),
      linear-gradient(to bottom,
        rgba(3,3,3,.58) 0%,
        transparent 20%,
        transparent 66%,
        rgba(3,3,3,.86) 100%
      );
  }
}