/* StonkFun arrow accents — decoration only.
   Kept OUT of body text, heading glyphs, odds tables, nameplates. */

/* --- Hero corner marks (large + faint, outside copy) --- */
.hero{position:relative;isolation:isolate}
.hero-arrows{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
.hero-arrows .ha{
  position:absolute;display:block;
  background:url(/stonk-mark.svg) center/contain no-repeat;
  opacity:.09;filter:saturate(.85);
}
.hero-arrows .ha-tl{left:-28px;top:-6px;width:150px;height:146px;transform:rotate(-12deg)}
.hero-arrows .ha-tr{right:42%;top:-36px;width:100px;height:98px;opacity:.06;transform:rotate(16deg)}
.hero-arrows .ha-bl{left:-24px;bottom:40px;width:80px;height:78px;opacity:.05;transform:rotate(8deg)}
.hero-arrows .ha-br{right:-16px;bottom:12%;width:160px;height:156px;opacity:.1;transform:rotate(22deg)}
.hero-copy,.hero-art{position:relative;z-index:1}
.facts,.lede,.eyebrow,h1{background-image:none!important}
/* keep the existing small motif even fainter so copy stays crisp */
.hero-motif{opacity:.05!important}

/* --- Section dividers (between sections, not over text) --- */
.sf-divider{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:-8px auto 22px;height:28px;pointer-events:none;
}
.sf-divider i{
  display:block;width:22px;height:22px;
  background:url(/stonk-mark.svg) center/contain no-repeat;
  opacity:.28;
}
.sf-divider i:nth-child(1){transform:rotate(-14deg) scale(.9);opacity:.18}
.sf-divider i:nth-child(2){width:28px;height:28px;opacity:.34}
.sf-divider i:nth-child(3){transform:rotate(14deg) scale(.9);opacity:.18}

/* --- Small arrow beside section headings (to the left, not behind glyphs) --- */
h2.sf-hd{
  display:flex;align-items:center;gap:12px;
  background:none!important;
}
h2.sf-hd::before{
  content:"";flex:0 0 auto;width:22px;height:22px;
  background:url(/stonk-mark.svg) center/contain no-repeat;
  opacity:.55;transform:translateY(1px);
}
/* odds / vault / plates: never wash a mark under tables or cards */
.odds-card,.odds-wrap,table,.bp-table,.plate,.result-panel,.fair-box,.faq,.holdings,.hold,.stat{
  background-image:none!important;
}

/* --- Button accents: ghost + solid already use .sf-ico; ensure sizing --- */
.btn .sf-ico{width:15px;height:15px;opacity:.95}
.btn.ghost .sf-ico{opacity:.75;filter:brightness(1.15)}

/* --- Pack open stage: edge pattern + drifting marks --- */
.open-stage{
  /* corner-only edge pattern — middle stays clear for reel + best-pull */
  background-image:
    url(/stonk-arrow-edge.svg),
    radial-gradient(ellipse at 50% 28%,rgba(105,170,193,.08),transparent 55%)!important;
  background-size:280px 280px, auto!important;
  background-repeat:no-repeat, no-repeat!important;
  background-position:left top, 50% 28%!important;
  /* paint a second corner via pseudo */
}
.open-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    url(/stonk-arrow-edge.svg) right bottom / 260px 260px no-repeat,
    url(/stonk-mark.svg) calc(100% - 18px) 18px / 56px 54px no-repeat;
  opacity:.14;
}
.open-stage::after{
  content:"";position:absolute;left:18px;bottom:18px;width:48px;height:46px;
  background:url(/stonk-mark.svg) center/contain no-repeat;
  opacity:.1;pointer-events:none;z-index:0;transform:rotate(-18deg);
}
.open-stage > *:not(.stage-arrows){position:relative;z-index:1}
.open-stage > .stage-arrows{z-index:0}
.stage-arrows{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.stage-arrows .sa{
  position:absolute;width:36px;height:35px;
  background:url(/stonk-mark.svg) center/contain no-repeat;
  opacity:0; /* animated in when stage visible */
}
.open-stage:not([hidden]) .stage-arrows .sa{opacity:.14;animation:sf-drift 9s ease-in-out infinite}
.stage-arrows .s1{left:8%;top:18%;animation-delay:0s;transform:rotate(-20deg)}
.stage-arrows .s2{right:10%;top:22%;width:44px;height:42px;animation-delay:-2s;transform:rotate(14deg);opacity:.1}
.stage-arrows .s3{left:14%;bottom:28%;width:30px;height:29px;animation-delay:-4s;transform:rotate(8deg)}
.stage-arrows .s4{right:16%;bottom:22%;width:40px;height:38px;animation-delay:-1.5s;transform:rotate(-12deg)}
.stage-arrows .s5{left:46%;top:8%;width:26px;height:25px;animation-delay:-3.2s;transform:rotate(22deg);opacity:.1}
@keyframes sf-drift{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg));opacity:.12}
  50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) + 8deg));opacity:.2}
}
/* reel area: a couple of soft marks behind the track only (not on plates) */
.reel-wrap::before{
  content:"";position:absolute;left:4%;top:12%;width:70px;height:68px;
  background:url(/stonk-mark.svg) center/contain no-repeat;
  opacity:.08;pointer-events:none;z-index:0;transform:rotate(-24deg);
}
.reel-wrap::after{
  content:"";position:absolute;right:5%;bottom:10%;width:64px;height:62px;
  background:url(/stonk-mark.svg) center/contain no-repeat;
  opacity:.07;pointer-events:none;z-index:0;transform:rotate(18deg);
}

/* pack grid accent — one faint mark in the packs section corner, away from cards */
#packs.sec{position:relative}
#packs.sec::after{
  content:"";position:absolute;right:-8px;top:72px;width:100px;height:98px;
  background:url(/stonk-mark.svg) center/contain no-repeat;
  opacity:.06;pointer-events:none;z-index:0;transform:rotate(28deg);
}

@media(max-width:860px){
  .hero-arrows .ha-tl{width:100px;height:98px;opacity:.08}
  .hero-arrows .ha-br{width:110px;height:108px}
  .hero-arrows .ha-tr,.hero-arrows .ha-bl{display:none}
  .sf-divider{gap:12px;margin-bottom:16px}
  h2.sf-hd::before{width:18px;height:18px}
  .open-stage{background-size:180px 180px, auto!important}
  .stage-arrows .s5{display:none}
}

@media(prefers-reduced-motion:reduce){
  .open-stage:not([hidden]) .stage-arrows .sa{animation:none!important;opacity:.1}
}