/* Haunted Visions store: "Apparition".
   Near-black, one violet accent, Cormorant Garamond at wide tracking,
   hairlines instead of boxes, cold blue smoke drifting behind everything.
   Phone first: 390px is the primary layout. */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal; font-weight:300 400; font-display:swap;
  src:url(/assets/fonts/cormorant-garamond.woff2) format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic; font-weight:300; font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-italic.woff2) format("woff2");
}
:root{
  --bg:#030303; --bg-deep:#020202;
  --text:rgba(240,238,235,.86); --text-strong:rgba(240,238,235,.94);
  --muted:rgba(240,238,235,.58); --muted-2:rgba(240,238,235,.44); --muted-3:rgba(240,238,235,.32);
  --line:rgba(176,206,236,.15); --line-hi:rgba(176,206,236,.28);
  --hairline:rgba(176,206,236,.11);
  --accent:#a78bfa; --accent-hover:#c4b5fd;
  --focus:rgba(167,139,250,.60);
  --danger:#f0a3a3;
  --font-display:"Cormorant Garamond",Garamond,Georgia,serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --media-bg:#020202;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:14px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.wrap{width:min(1080px,100% - 48px); margin-inline:auto}
.wrap--narrow{width:min(760px,100% - 48px)}
@media (max-width:640px){ .wrap,.wrap--narrow{width:calc(100% - 32px)} }
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.caps{font-size:10px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-2)}

/* Top bar */
.bar{position:relative; z-index:2}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px}
.brand{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-display); font-size:15px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--text-strong);
}
.brand:hover{color:var(--accent)}
.nav{display:flex; gap:4px}
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
.nav a:hover,.nav a[aria-current]{color:var(--accent)}
.brand{white-space:nowrap}
@media (max-width:480px){ .brand{letter-spacing:.2em; font-size:13.5px} .nav a{padding:0 8px; letter-spacing:.2em} }
@media (max-width:360px){ .brand{letter-spacing:.14em; font-size:12.5px} .nav a{padding:0 6px; letter-spacing:.14em} }

/* Masthead (store) */
.mast{padding:clamp(26px,5vw,56px) 0 clamp(22px,3.6vw,40px); text-align:center; position:relative; z-index:1}
.mark{
  margin:0; font-family:var(--font-display); font-weight:300;
  font-size:clamp(30px,5.6vw,58px); line-height:1.2;
  letter-spacing:clamp(.16em,3vw,.42em); text-indent:clamp(.16em,3vw,.42em);
  text-transform:uppercase; color:var(--text-strong); text-wrap:balance;
}
.tagline{
  margin:12px auto 0; max-width:40ch; font-family:var(--font-display);
  font-weight:300; font-style:italic; font-size:clamp(17px,2.2vw,21px);
  line-height:1.55; color:var(--muted); text-wrap:pretty;
}

/* Hero */
.hero{position:relative; z-index:1; background:var(--media-bg); overflow:hidden}
.hero video,.hero img{
  width:100%; height:clamp(280px,42vw,520px); object-fit:cover;
  filter:saturate(.86) contrast(1.06) brightness(.94);
}
.hero--store video,.hero--store img{height:clamp(300px,44vw,560px); filter:saturate(.86) contrast(1.06) brightness(.9)}
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 68% at 50% 44%, rgba(3,3,3,0) 0%, rgba(3,3,3,.52) 62%, rgba(3,3,3,.97) 100%);
}
.hero__foot{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:0 20px clamp(18px,4.4vw,56px); text-align:center;
}
.title{
  margin:0; font-family:var(--font-display); font-weight:300;
  font-size:clamp(26px,5.4vw,52px); line-height:1.1;
  letter-spacing:clamp(.12em,2.6vw,.3em); text-indent:clamp(.12em,2.6vw,.3em);
  text-transform:uppercase; color:rgba(240,238,235,.96); text-wrap:balance;
}
.hero__meta{letter-spacing:.28em; color:rgba(240,238,235,.5)}
.enter{
  display:inline-flex; align-items:center; min-height:46px; padding:0 34px;
  border:1px solid rgba(240,238,235,.40);
  font-size:10px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:var(--text-strong); transition:border-color .2s ease, color .2s ease;
}
.enter:hover{border-color:var(--accent); color:var(--accent)}
.hero--product video,.hero--product img{height:clamp(280px,36vw,460px)}
/* A product hero on a phone is short so the price and buy button sit above the fold. */
@media (max-width:640px){
  .hero--product video,.hero--product img{height:auto; aspect-ratio:16/9}
  .hero--product .hero__foot{padding-bottom:14px; gap:6px}
  .hero--product .title{font-size:25px}
  .hero--product .hero__meta{font-size:9px}
}

/* Headings */
h2,.h2{
  margin:0 0 clamp(20px,3vw,32px); font-family:var(--font-display);
  font-weight:400; font-size:15px; letter-spacing:.44em; text-indent:.44em;
  text-transform:uppercase; color:var(--muted); text-align:center;
}
main{position:relative; z-index:1}

/* Format picker + buy */
.choose{padding:clamp(18px,3vw,32px) 0 clamp(30px,4vw,48px); text-align:center}
.choose h2{margin-bottom:12px}
@media (max-width:640px){ .choose{padding-top:14px} .choose h2{margin-bottom:10px; font-size:13px} }
.seg{display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:520px; margin:0 auto}
.seg__opt{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-height:44px; padding:11px 8px 10px; border:1px solid var(--line);
  background:rgba(240,238,235,.02); cursor:pointer; user-select:none;
  transition:border-color .2s ease, background .2s ease;
}
.seg__opt:hover{border-color:var(--line-hi)}
.seg__opt[aria-checked="true"]{border-color:rgba(167,139,250,.62); background:rgba(167,139,250,.07)}
.seg__opt[aria-disabled="true"]{cursor:not-allowed; opacity:.5}
.seg__name{
  font-family:var(--font-display); font-size:21px; font-weight:400; line-height:1.3;
  letter-spacing:.16em; text-indent:.16em; text-transform:uppercase; color:var(--text-strong);
}
.seg__price{font-family:var(--font-display); font-size:20px; font-weight:400; line-height:1.3; color:var(--accent)}
.seg__was{margin-right:.35em; color:var(--muted-2); text-decoration:line-through}
.seg__hint{font-size:9px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2)}
.seg__opt[aria-disabled="true"] .seg__hint{color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:12px 30px; cursor:pointer;
  border:1px solid rgba(240,238,235,.42); background:none;
  font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--text-strong);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn[disabled]{cursor:not-allowed; opacity:.55}
.btn--buy{
  width:100%; max-width:520px; margin:12px auto 0; display:flex;
  border-color:rgba(167,139,250,.7); background:rgba(167,139,250,.12); color:var(--text-strong);
}
.btn--buy:hover:not([disabled]){border-color:var(--accent-hover); background:rgba(167,139,250,.2); color:#fff}
.btn--small{min-height:44px; padding:10px 18px; font-size:10px}
.err{min-height:0; margin:10px auto 0; max-width:48ch; font-size:13px; color:var(--danger)}
.err:empty{display:none}
.choose__note{margin:14px auto 0; max-width:48ch; font-size:13px; line-height:1.68; color:var(--muted-2); text-wrap:pretty}
.secure{margin:10px 0 0; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-3)}

/* Bundle value */
.value{margin:22px 0 4px}
.value[hidden]{display:none}
.value__lead{
  display:block; font-family:var(--font-display); font-weight:300;
  font-size:clamp(32px,5vw,48px); line-height:1.1; letter-spacing:.1em; text-indent:.1em;
  text-transform:uppercase; color:var(--accent);
}
.value__math{display:block; margin:8px auto 0; max-width:34ch;
  font-family:var(--font-display); font-weight:300; font-size:clamp(17px,2.3vw,21px);
  line-height:1.5; color:var(--muted); text-wrap:balance}
.value__math b{font-weight:400; color:var(--text-strong)}
.value__math s{color:var(--muted-2)}

/* Pitch */
.pitchwrap{padding:0 0 clamp(40px,5.4vw,66px); text-align:center}
.pitch{
  margin:0 auto; max-width:46ch; font-family:var(--font-display);
  font-weight:300; font-size:clamp(18px,2.3vw,22px); line-height:1.62;
  color:var(--muted); text-wrap:pretty;
}

/* Specs */
.specs{padding:0 0 clamp(40px,5.4vw,70px)}
.dl{display:grid; grid-template-columns:1fr 1fr; column-gap:64px; margin:0}
@media (max-width:560px){ .dl{grid-template-columns:1fr} }
.dl > div{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--hairline)}
.dl dt{font-size:9.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2)}
.dl dd{margin:0; font-family:var(--font-display); font-size:19px; font-weight:400; color:var(--text-strong); text-align:right}
.dl dd a{border-bottom:1px solid var(--line-hi)}
.dl dd a:hover{color:var(--accent)}

/* Collections (store) */
.bundles{padding:clamp(40px,6vw,78px) 0 clamp(44px,6.6vw,84px)}
.bgrid{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:rgba(176,206,236,.10)}
.bcard{background:var(--bg)}
.bcard a{display:flex; flex-direction:column; height:100%}
.bcard__img{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--media-bg)}
.bcard__img img{width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(1.06) brightness(.9)}
.bcard__img::after{content:""; position:absolute; inset:0; background:radial-gradient(84% 84% at 50% 44%, rgba(3,3,3,0) 30%, rgba(3,3,3,.78) 100%)}
.bcard__body{display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 18px 28px; text-align:center; flex:1}
.bcard__title{font-family:var(--font-display); font-size:24px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; line-height:1.24; color:var(--text-strong)}
.bcard__meta{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted-2)}
.bcard__theme{font-family:var(--font-display); font-size:16.5px; font-weight:300; font-style:italic; line-height:1.5; color:var(--muted); text-wrap:pretty}
.bcard__prices{margin-top:auto; display:flex; gap:18px; justify-content:center; align-items:baseline; padding-top:4px}
.bcard__price{display:flex; flex-direction:column; align-items:center; gap:0}
.bcard__price b{font-family:var(--font-display); font-size:25px; font-weight:400; color:var(--accent); line-height:1.2}
.bcard__price s{font-size:10px; color:var(--muted-3)}
.bcard__price span{font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2)}
.bcard__save{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.bcard a:hover .bcard__title{color:var(--accent)}

/* Loop grid */
.loops{padding:clamp(16px,3vw,32px) 0 0}
.shead{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 clamp(22px,3vw,40px)}
.shead h2{margin:0; text-align:left}
.shead p{margin:0; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-3)}
.shead--mid{justify-content:center}
.tools{display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0 auto clamp(30px,4vw,48px); padding-bottom:6px; max-width:420px; border-bottom:1px solid var(--line)}
.tools:focus-within{border-bottom-color:var(--line-hi)}
.tools svg{flex:none; color:var(--muted-3)}
.tools input{flex:1; min-width:0; min-height:44px; border:0; background:none; outline:none;
  color:var(--text); font-family:var(--font-display); font-size:18px; letter-spacing:.04em; text-align:center}
.tools input::placeholder{color:var(--muted-3); font-style:italic}
.grid{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:clamp(26px,3.4vw,44px) clamp(16px,2.4vw,30px)}
@media (max-width:520px){ .grid{grid-template-columns:1fr 1fr; gap:24px 14px} }
.card a{display:flex; flex-direction:column; gap:12px; height:100%}
.card__img{position:relative; display:block; aspect-ratio:1; filter:saturate(.86) contrast(1.06) brightness(.92); transition:filter .35s ease}
.card__img::after{content:""; position:absolute; inset:0; background:radial-gradient(72% 72% at 50% 46%, rgba(3,3,3,0) 34%, rgba(3,3,3,.82) 100%); transition:opacity .35s ease}
.card a:hover .card__img{filter:saturate(.94) contrast(1.04) brightness(1.02)}
.card a:hover .card__img::after{opacity:.45}
.card__body{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.card__title{font-family:var(--font-display); font-size:17px; font-weight:400; letter-spacing:.16em; text-indent:.16em; text-transform:uppercase; line-height:1.3; color:rgba(240,238,235,.78)}
.card a:hover .card__title{color:var(--text-strong)}
.card__price{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2)}
.card[hidden]{display:none}
.empty{padding:48px 0; text-align:center; font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--muted-2)}
@media (prefers-reduced-motion:reduce){ .card__img,.card__img::after{transition:none} }

/* Sprite thumbnails (positions appended at build) */
.sprite{display:block; width:100%; aspect-ratio:1; background:var(--media-bg) url(/assets/loops-sprite.jpg) no-repeat}

/* Bundle members */
.members{padding:0 0 clamp(40px,5.4vw,70px)}
.mgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:720px){ .mgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:480px){ .mgrid{grid-template-columns:repeat(2,1fr)} }
.mcell{display:flex; flex-direction:column; border:1px solid var(--line); background:rgba(240,238,235,.02); transition:border-color .2s ease}
.mcell:hover{border-color:var(--line-hi)}
.mcell > span:last-child{padding:8px 10px; font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); line-height:1.4}
.mcell small{display:block; margin-top:2px; letter-spacing:.1em; color:var(--muted-3)}

/* "Also in" cross-sell */
.also{padding:0 0 clamp(40px,5.4vw,70px)}
.also__list{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--hairline)}
.also__list a{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:56px; padding:10px 4px; background:var(--bg)}
.also__list a:hover .also__name{color:var(--accent)}
.also__name{font-family:var(--font-display); font-size:20px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-strong)}
.also__meta{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); text-align:right}

/* Prose pages (legal, thanks, library) */
.page{padding:clamp(26px,5vw,60px) 0 clamp(40px,6vw,80px)}
.page h1{margin:0 0 26px; font-family:var(--font-display); font-weight:300; font-size:clamp(30px,5vw,46px);
  line-height:1.15; letter-spacing:.2em; text-transform:uppercase; color:var(--text-strong); text-align:center}
.page .lede{margin:-16px auto 34px; max-width:44ch; text-align:center; font-family:var(--font-display);
  font-style:italic; font-weight:300; font-size:19px; line-height:1.55; color:var(--muted)}
.prose h2{text-align:left; text-indent:0; margin:34px 0 10px; font-size:13px; letter-spacing:.3em; color:var(--text)}
.prose p,.prose li{color:var(--muted); font-size:14.5px; line-height:1.75}
.prose ul{padding-left:20px}
.prose a{color:var(--accent); border-bottom:1px solid rgba(167,139,250,.35)}
.prose strong{color:var(--text-strong); font-weight:600}
.updated{margin-top:40px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-3)}

/* Forms */
.form{display:flex; flex-direction:column; gap:12px; max-width:420px; margin:0 auto}
.field{width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--line-hi); background:rgba(240,238,235,.03);
  color:var(--text-strong); font-family:var(--font-body); font-size:16px; border-radius:0}
.field:focus{outline:none; border-color:var(--accent)}
.form .btn{width:100%}
.ok{margin:12px auto 0; max-width:44ch; text-align:center; color:var(--text); font-size:14px}
.ok:empty{display:none}
.panel{max-width:520px; margin:0 auto; padding:26px 22px; border:1px solid var(--line); background:rgba(3,3,3,.72); text-align:center}
.panel p{margin:0 0 14px; color:var(--muted)}
.panel p:last-child{margin-bottom:0}
.panel .big{font-family:var(--font-display); font-size:22px; color:var(--text-strong)}
.items{list-style:none; margin:18px 0 0; padding:0; text-align:left}
.items li{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--hairline)}
.items li span:last-child{color:var(--muted-2); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.center{text-align:center}
.linkish{color:var(--accent); border-bottom:1px solid rgba(167,139,250,.35); background:none; border-top:0; border-left:0; border-right:0; padding:0; cursor:pointer; font:inherit}
.spin{display:inline-block; font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--muted-2)}

/* Library */
.lib{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--hairline)}
.lib__row{display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; padding:14px 0; background:var(--bg)}
.lib__row .sprite{width:72px}
.lib__title{font-family:var(--font-display); font-size:19px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-strong); line-height:1.3}
.lib__title a:hover{color:var(--accent)}
.lib__btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.lib__btns .btn{padding:8px 14px; min-height:44px; letter-spacing:.2em}
.lib__btns small{display:block; font-size:9px; letter-spacing:.1em; color:var(--muted-2); margin-left:8px}
.lib__err{grid-column:1 / -1; font-size:12.5px; color:var(--danger)}
.lib__err:empty{display:none}
.lib__head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 18px}
.lib__who{font-size:12px; color:var(--muted-2); word-break:break-all}

/* Footer */
footer{position:relative; z-index:1; padding:clamp(40px,6vw,72px) 0 clamp(30px,4.6vw,48px); margin-top:clamp(20px,4vw,48px); border-top:1px solid var(--hairline)}
.foot{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center}
.foot__links{display:flex; flex-wrap:wrap; justify-content:center; gap:0 6px}
.foot__links a{display:inline-flex; align-items:center; min-height:44px; padding:0 8px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2)}
.foot__links a:hover{color:var(--accent)}
.foot small{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-3)}
.foot__mail{font-size:12px; color:var(--muted-2)}
.foot__mail:hover{color:var(--accent)}

/* Atmosphere: three drifting smoke tiles plus one violet bloom, CSS only. */
.fog{
  position:fixed; inset:-14%; z-index:0; pointer-events:none; contain:strict;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 4%, #000 0, #000 34%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.28) 100%);
  mask-image:radial-gradient(115% 85% at 50% 4%, #000 0, #000 34%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.28) 100%);
}
.fog i{position:absolute; inset:0; display:block; will-change:transform; mix-blend-mode:screen}
.fog i:nth-of-type(1){background-image:url(/assets/smoke-a.png); background-size:1500px 1500px; opacity:.30; animation:nz0 42s ease-in-out infinite}
.fog i:nth-of-type(2){background-image:url(/assets/smoke-b.png); background-size:820px 820px; opacity:.26; animation:nz1 27s ease-in-out infinite}
.fog i:nth-of-type(3){background-image:url(/assets/smoke-c.png); background-size:380px 380px; opacity:.18; animation:nz2 17s ease-in-out infinite}
@keyframes nz0{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-6%,4%,0) scale(1.14)}}
@keyframes nz1{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(7%,-5%,0) scale(1.2)}}
@keyframes nz2{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-5%,-6%,0) scale(1.1)}}
.fog u{
  position:absolute; left:6%; top:-14%; width:58vmax; height:48vmax; display:block;
  border-radius:58% 42% 63% 37% / 47% 58% 42% 53%; filter:blur(66px);
  background:radial-gradient(closest-side, rgba(186,166,250,.15) 0%, rgba(0,0,0,0) 74%);
  mix-blend-mode:screen; will-change:transform; animation:vio 34s ease-in-out infinite;
}
@keyframes vio{0%,100%{transform:translate3d(0,0,0) rotate(0deg)} 50%{transform:translate3d(20vmax,9vmax,0) rotate(36deg)}}
@media (max-width:640px){ .fog i:nth-of-type(3){display:none} }
@media (prefers-reduced-motion:reduce){ .fog i,.fog u{animation:none !important} }

.sprite{background-size:600% 500%}
.sp-wraith{background-position:0.0000% 0.0000%}
.sp-banshee{background-position:20.0000% 0.0000%}
.sp-spectre{background-position:40.0000% 0.0000%}
.sp-glowingeye{background-position:60.0000% 0.0000%}
.sp-inquisition{background-position:80.0000% 0.0000%}
.sp-purpletentacles{background-position:100.0000% 0.0000%}
.sp-incubus{background-position:0.0000% 25.0000%}
.sp-zombieherd{background-position:20.0000% 25.0000%}
.sp-clutter{background-position:40.0000% 25.0000%}
.sp-shadowarms{background-position:60.0000% 25.0000%}
.sp-bride{background-position:80.0000% 25.0000%}
.sp-revenant{background-position:100.0000% 25.0000%}
.sp-skullarmy{background-position:0.0000% 50.0000%}
.sp-eyeballchaos{background-position:20.0000% 50.0000%}
.sp-crypt{background-position:40.0000% 50.0000%}
.sp-redtentacles{background-position:60.0000% 50.0000%}
.sp-watchers{background-position:80.0000% 50.0000%}
.sp-crawl{background-position:100.0000% 50.0000%}
.sp-cyberskull{background-position:0.0000% 75.0000%}
.sp-grasp{background-position:20.0000% 75.0000%}
.sp-legion{background-position:40.0000% 75.0000%}
.sp-metalgoldskulls{background-position:60.0000% 75.0000%}
.sp-shroud{background-position:80.0000% 75.0000%}
.sp-skullembers{background-position:100.0000% 75.0000%}
.sp-static{background-position:0.0000% 100.0000%}
.sp-greententacles{background-position:20.0000% 100.0000%}
.sp-greytentacles{background-position:40.0000% 100.0000%}
.sp-vividskull{background-position:60.0000% 100.0000%}