/* ============================================================
   THE ARCHIVE - token system
   bg-void #0a0908 | bg-surface #151313 | bg-raised #1d1a1f
   bone #e9e3d4 | bone-dim #9c958a
   blood #b3122c | blood-bright #e2273f
   fog #5d6b6e | gold #c9a227 | violet (entity) #5c3a66
   ============================================================ */

@font-face {
  font-family: 'Nightscary';
  src: url('assets/Title Fonts/Nightscary.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root{
  --void:#0a0908;
  --surface:#141217;
  --raised:#1c1820;
  --raised-2:#241f29;
  --line: rgba(233,227,212,.09);
  --bone:#e9e3d4;
  --bone-dim:#9c958a;
  --blood:#9c1428;
  --blood-bright:#e2273f;
  --fog:#5d7177;
  --gold:#c9a227;
  --violet:#6a3f74;
  --display: 'Cinzel', serif;
  --display-horror: 'Nosifer', cursive;
  --display-gothic: 'Graveyard', cursive;
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --radius: 3px;
  --ease: cubic-bezier(.22,.9,.32,1);
  --horror-red:#8b0000;
  --ghost-white:rgba(255,255,255,0.03);
  --shadow-deep:rgba(0,0,0,0.8);
  --entity-glow:rgba(92,58,102,0.4);
}

[data-theme="light"]{
  --void:#f5f3f0;
  --surface:#e8e4df;
  --raised:#f0ece7;
  --raised-2:#e5e0d8;
  --line: rgba(0,0,0,.12);
  --bone:#1a1816;
  --bone-dim:#4a4540;
  --blood:#8b1a2a;
  --blood-bright:#c41e3a;
  --fog:#4a5a5e;
  --gold:#a0801a;
  --violet:#5a3a65;
  --horror-red:#6b0000;
  --ghost-white:rgba(0,0,0,0.02);
  --shadow-deep:rgba(0,0,0,0.15);
  --entity-glow:rgba(92,58,102,0.25);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
[hidden]{ display:none !important; }
::selection{ background:var(--blood); color:var(--bone); }

body{
  margin:0;
  background:transparent;
  color:var(--bone);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

[data-theme="light"] body{
  background:transparent;
}

/* Horror ambient effects */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.1) 2px,
    rgba(0,0,0,0.1) 4px
  );
  pointer-events:none;
  z-index:999;
  opacity:0.3;
}

[data-theme="light"] body::before{
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  opacity:0.15;
}

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

:focus-visible{ outline:2px solid var(--blood-bright); outline-offset:2px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--blood); color:#fff;
  padding:.6em 1em; z-index:999;
}
.skip-link:focus{ left:0; }

/* ---------------- atmosphere layers ---------------- */
#fog-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:screen;
}
.grain{
  position:fixed; inset:-100%; width:300%; height:300%; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.045; animation: grain-shift 1.4s steps(3) infinite;
}

[data-theme="light"] .grain{
  opacity:.02;
}
@keyframes grain-shift{
  0%{ transform:translate(0,0); } 33%{ transform:translate(-2%,1%); } 66%{ transform:translate(1%,-2%); } 100%{ transform:translate(0,0); }
}
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  box-shadow: inset 0 0 22vw rgba(0,0,0,.85);
}

[data-theme="light"] .vignette{
  box-shadow: inset 0 0 22vw rgba(0,0,0,.25);
}

/* Blood drip effect */

@keyframes drip{
  0%{ height:0; opacity:1; }
  70%{ height:100vh; opacity:0.8; }
  100%{ height:100vh; opacity:0; }
}

/* Entity pulse effect */
.entity-pulse{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at 50% 50%, var(--entity-glow), transparent 70%);
  animation: entity-pulse 8s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes entity-pulse{
  0%,100%{ opacity:0.3; transform:scale(1); }
  50%{ opacity:0.6; transform:scale(1.1); }
}

/* Scratch marks overlay */
.scratch-marks{
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(139,0,0,0.1) 49%, rgba(139,0,0,0.1) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(139,0,0,0.1) 49%, rgba(139,0,0,0.1) 51%, transparent 52%);
  background-size:100px 100px;
  pointer-events:none;
  z-index:0;
  opacity:0.3;
}

/* ---------------- header ---------------- */
.site-head{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding: 0 20px 28px; margin-top: -45px;
}

.title-fill {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 6vw, 4rem);
}

@keyframes bloodPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 1.5px rgba(0,0,0,.9))
      drop-shadow(0 5px 2px rgba(0,0,0,.8))
      drop-shadow(0 0 18px rgba(255,40,40,.45));
  }
  50% {
    filter:
      drop-shadow(0 0 1.5px rgba(0,0,0,.9))
      drop-shadow(0 5px 2px rgba(0,0,0,.8))
      drop-shadow(0 0 27px rgba(255,40,40,.65));
  }
}

.title-fill.blood {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ff5c5c 0%, #c81e1e 45%, #4a0000 100%);
  background-blend-mode: overlay, normal;
  background-size: 180px 180px, auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: #c81e1e; /* fallback for browsers without background-clip: text */
  -webkit-text-fill-color: transparent;
  animation: bloodPulse 4.5s ease-in-out infinite;
}
.title-fill.blood::before,
.title-fill.blood::after {
  content: '';
  position: absolute;
  width: .08em;
  border-radius: 0 0 40% 40%;
  background: linear-gradient(180deg, #c81e1e, #3d0000);
}
.title-fill.blood::before { left: 26%; bottom: -.22em; height: .25em; }
.title-fill.blood::after  { left: 63%; bottom: -.33em; height: .39em; }

@media (prefers-reduced-motion: reduce) {
  .title-fill.blood {
    animation: none;
    filter:
      drop-shadow(0 0 1.5px rgba(0,0,0,.9))
      drop-shadow(0 5px 2px rgba(0,0,0,.8))
      drop-shadow(0 0 22px rgba(255,40,40,.55));
  }
}
.emblem{
  position:relative;
  width:192px; height:192px; margin-bottom:76px; opacity:.95;
  display:flex; align-items:center; justify-content:center;
}
/* the little six-point mark sits as a molten "core" at the centre of the claws - fixed size, doesn't scale with the rest */
.entity-core{
  position:relative; z-index:3;
  width:42px; height:42px; fill:none; stroke:var(--blood-bright); stroke-width:2.4;
  filter:drop-shadow(0 0 8px rgba(226,39,63,.55));
  animation: emblem-heartbeat 3.4s cubic-bezier(.45,0,.2,1) infinite,
             emblem-flicker 3.4s ease-in-out infinite;
  transform-origin:50% 50%;
}
/* the reaching, hooked talons */
.entity-claws{
  position:absolute; inset:-116px;
  width:calc(100% + 232px); height:calc(100% + 232px);
  z-index:2; overflow:visible; pointer-events:none;
}










/* bleeding void glow breathing behind the whole mark */
.emblem::before{
  content:'';
  position:absolute; inset:-30%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(226,20,20,.5) 0%, rgba(120,0,0,.24) 42%, transparent 72%);
  filter: blur(32px);
  z-index:1;
  animation: emblem-void-pulse 3.4s ease-in-out infinite;
  pointer-events:none;
}
/* slow blood drip bleeding from the lower point */
.emblem::after{
  content:'';
  position:absolute; left:50%; bottom:8px;
  width:6px; height:0;
  background: linear-gradient(180deg, rgba(200,10,10,.95), rgba(90,0,0,0));
  border-radius:0 0 6px 6px;
  transform: translateX(-50%);
  z-index:3;
  filter: drop-shadow(0 0 8px rgba(226,39,63,.8));
  animation: emblem-drip 3.4s ease-in infinite;
  pointer-events:none;
}
.emblem:hover .entity-core{ animation-duration: 1.5s, 1.5s; }

.emblem:hover::before{ animation-duration: 1.5s; }
.emblem:hover::after{ animation-duration: 1.5s; }

/* Double-thump heartbeat with a twitching, dreadful wobble */
@keyframes emblem-heartbeat{
  0%   { transform:scale(1) rotate(0deg); }
  8%   { transform:scale(1.16) rotate(-3deg); }
  16%  { transform:scale(0.94) rotate(2deg); }
  24%  { transform:scale(1.22) rotate(-2deg); }
  34%  { transform:scale(1) rotate(0deg); }
  70%  { transform:scale(1.06) rotate(1.5deg); }
  78%  { transform:scale(0.98) rotate(-1deg); }
  100% { transform:scale(1) rotate(0deg); }
}
@keyframes emblem-flicker{
  0%,100% { stroke:var(--blood-bright); filter:drop-shadow(0 0 8px rgba(226,39,63,.55)); opacity:.9; }
  24%     { stroke:#ff2a2a; filter:drop-shadow(0 0 22px rgba(255,20,20,.95)); opacity:1; }
  27%     { stroke:#3d0000; filter:drop-shadow(0 0 2px rgba(226,39,63,.3)); opacity:.6; }
  30%     { stroke:#ff2a2a; filter:drop-shadow(0 0 22px rgba(255,20,20,.95)); opacity:1; }
  70%     { stroke:var(--blood-bright); filter:drop-shadow(0 0 12px rgba(226,39,63,.7)); opacity:.95; }
}
@keyframes emblem-void-pulse{
  0%,100% { transform:scale(.75); opacity:.35; }
  24%     { transform:scale(1.35); opacity:.9; }
  34%     { transform:scale(.95); opacity:.55; }
  70%     { transform:scale(1.15); opacity:.7; }
}
@keyframes emblem-drip{
  0%, 55%  { height:0; opacity:0; }
  65%      { height:20px; opacity:1; }
  85%      { height:44px; opacity:.8; }
  95%      { height:52px; opacity:0; }
  100%     { height:0; opacity:0; }
}
/* claws slowly reach outward from the fog, twitch, and pull back - each keeps its own base angle via --base-rot */
@keyframes claw-reach{
  0%,100% { transform: rotate(var(--base-rot)) scale(0.92); }
  30%     { transform: rotate(calc(var(--base-rot) - 2deg)) scale(1.06); }
  45%     { transform: rotate(calc(var(--base-rot) + 1.5deg)) scale(0.98); }
  65%     { transform: rotate(calc(var(--base-rot) - 1deg)) scale(1.1); }
  82%     { transform: rotate(calc(var(--base-rot) + 0.5deg)) scale(1); }
}
@keyframes crack-flicker{
  0%,100% { opacity:.4; stroke-width:1.4; }
  22%     { opacity:1; stroke-width:2; }
  40%     { opacity:.25; stroke-width:1.2; }
  60%     { opacity:.85; stroke-width:1.8; }
  78%     { opacity:.5; stroke-width:1.4; }
}
@media (prefers-reduced-motion: reduce){

}

.wordmark{
  font-family:'Nightscary', cursive; margin:0; line-height:1;
  font-size:clamp(2.6rem, 9vw, 5.2rem); letter-spacing:.06em;
  display:flex; gap:.3ch; flex-wrap:wrap; justify-content:center;
  position:relative;
  animation: wordmark-flicker 8s ease-in-out infinite;
}
@keyframes wordmark-flicker{
  0%,100%{ opacity:1; filter:brightness(1); }
  94%{ opacity:1; filter:brightness(1); }
  95%{ opacity:0.92; filter:brightness(1.15); }
  96%{ opacity:1; filter:brightness(1); }
  97%{ opacity:0.96; filter:brightness(0.92); }
  98%{ opacity:1; filter:brightness(1); }
}
.wordmark::before{
  content:"";
  position:absolute;
  inset:-20px;
  background:radial-gradient(ellipse at center, rgba(226,39,63,0.2), transparent 70%);
  animation: wordmark-glow 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes wordmark-glow{
  0%,100%{ opacity:0.5; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}
.wordmark .w1{
  font-weight:900;
  background: linear-gradient(180deg, #FFF0B3 0%, #C2912C 50%, #2D1E05 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 8px rgba(255,224,102,0.4),
    0 0 60px rgba(97,65,11,0.25),
    3px 3px 0 rgba(255,255,255,0.8),
    -3px -3px 0 rgba(31,19,0,0.9);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.9));
  position:relative;
  animation: w1-pulse 6s ease-in-out infinite;
}
@keyframes w1-pulse{
  0%,100%{ text-shadow: 0 0 8px rgba(255,224,102,0.4), 0 0 60px rgba(97,65,11,0.25), 3px 3px 0 rgba(255,255,255,0.8), -3px -3px 0 rgba(31,19,0,0.9); }
  50%{ text-shadow: 0 0 10px rgba(255,224,102,0.5), 0 0 70px rgba(97,65,11,0.3), 3px 3px 0 rgba(255,255,255,0.85), -3px -3px 0 rgba(31,19,0,0.95); }
}
.wordmark .w2{
  font-weight:900;
  background: linear-gradient(180deg, #FFF0B3 0%, #C2912C 50%, #2D1E05 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 10px rgba(255,224,102,0.4),
    0 0 70px rgba(97,65,11,0.25),
    3px 3px 0 rgba(255,255,255,0.8),
    -3px -3px 0 rgba(31,19,0,0.9);
  filter: drop-shadow(0 12px 35px rgba(0,0,0,0.9));
  position:relative;
  animation: w2-pulse 6s ease-in-out infinite;
}
@keyframes w2-pulse{
  0%,100%{ text-shadow: 0 0 10px rgba(255,224,102,0.4), 0 0 70px rgba(97,65,11,0.25), 3px 3px 0 rgba(255,255,255,0.8), -3px -3px 0 rgba(31,19,0,0.9); }
  50%{ text-shadow: 0 0 12px rgba(255,224,102,0.5), 0 0 80px rgba(97,65,11,0.3), 3px 3px 0 rgba(255,255,255,0.85), -3px -3px 0 rgba(31,19,0,0.95); }
}
@keyframes wordmark-bleed{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.1); }
}
.wordmark .w2::after{
  content:""; position:absolute; left:0; right:0; bottom:-.16em; height:.05em;
  background:linear-gradient(90deg, transparent, var(--blood-bright), transparent);
  animation: underglow 3.2s ease-in-out infinite;
}
@keyframes underglow{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

.tagline{
  font-family:var(--serif); font-style:italic; font-size:1.18rem; color:var(--bone-dim);
  margin:14px 0 30px; max-width:46ch;
  position:relative;
  text-shadow:0 0 15px rgba(0,0,0,0.5);
  animation: tagline-fade 6s ease-in-out infinite;
}
@keyframes tagline-fade{
  0%,100%{ opacity:0.85; }
  50%{ opacity:1; }
}
.tagline::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--blood-bright), transparent);
}

.tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  padding:6px; border:1px solid var(--line); border-radius:999px;
  background:rgba(20,18,23,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  position:relative;
}
.tabs::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(45deg, transparent, rgba(226,39,63,0.1), transparent);
  animation: tab-shimmer 6s linear infinite;
}
@keyframes tab-shimmer{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}
.tab{
  font-family:var(--display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-dim); background:transparent; border:none; border-radius:999px;
  padding:10px 18px; cursor:pointer; transition: color .25s var(--ease), background .25s var(--ease), transform .2s;
  position:relative;
  z-index:1;
  text-decoration:none;
  display:inline-block;
}
.tab:hover{
  color:var(--bone);
  transform:translateY(-2px);
  text-shadow:0 0 8px rgba(226,39,63,0.5);
}
.tab.is-active{
  color:var(--void); background:var(--blood-bright);
  box-shadow:0 0 18px rgba(226,39,63,.45), 0 0 30px rgba(226,39,63,0.2);
  animation: tab-pulse 2s ease-in-out infinite;
}
@keyframes tab-pulse{
  0%,100%{ box-shadow:0 0 18px rgba(226,39,63,.45), 0 0 30px rgba(226,39,63,0.2); }
  50%{ box-shadow:0 0 25px rgba(226,39,63,.6), 0 0 40px rgba(226,39,63,0.3); }
}

.toolbar{
  margin-top:22px; width:100%; max-width:560px;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.search-wrap{
  position:relative; width:100%; z-index:10;
}
.search-ic{ position:absolute; left:14px; top:50%; translate:0 -50%; width:16px; height:16px; stroke:var(--bone-dim); fill:none; stroke-width:2; pointer-events:none; transition:stroke .3s; z-index:11; }
#search{
  width:100%; background:rgba(20,18,23,0.85); border:1px solid var(--line); color:var(--bone);
  font-family:var(--sans); font-size:.95rem; padding:13px 16px 13px 40px; border-radius:var(--radius);
  transition: border-color .2s, box-shadow .2s, background .3s, backdrop-filter .3s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#search::placeholder{ color:var(--bone-dim); }
#search:focus{
  border-color:var(--blood);
  box-shadow:0 0 0 3px rgba(156,20,40,.18), 0 0 20px rgba(226,39,63,0.15);
  outline:none;
  background:rgba(28,24,32,0.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#search:focus + .search-ic{ stroke:var(--blood-bright); }

.filter-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bone-dim); background:var(--surface); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; cursor:pointer; transition:.2s var(--ease);
  position:relative;
  overflow:hidden;
}
.chip::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(45deg, transparent, rgba(255,255,255,0.05), transparent);
  transform:translateX(-100%);
  transition:transform .3s;
}
.chip:hover{
  color:var(--bone);
  border-color:var(--bone-dim);
  transform:translateY(-2px);
}
.chip:hover::before{ transform:translateX(100%); }
.chip.is-active{
  color:var(--gold); border-color:var(--gold);
  background:rgba(201,162,39,.08);
  box-shadow:0 0 10px rgba(201,162,39,0.3);
  animation: chip-glow 2s ease-in-out infinite;
}
@keyframes chip-glow{
  0%,100%{ box-shadow:0 0 10px rgba(201,162,39,0.3); }
  50%{ box-shadow:0 0 15px rgba(201,162,39,0.5); }
}

/* ---------------- main / grid ---------------- */
#main{ position:relative; z-index:3; max-width:100%; margin:0 auto; padding:30px 20px 40px; }
.count-line{ font-family:var(--mono); font-size:.74rem; color:var(--bone-dim); letter-spacing:.05em; margin-bottom:18px; padding-left:2px; }
.empty-state{ text-align:center; color:var(--bone-dim); font-family:var(--serif); font-size:1.2rem; padding:60px 0; }

/* Navigation header */
.site-head{
  position:relative;
  z-index:50;
  background:rgba(10,9,8,0.95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

[data-theme="light"] .site-head{
  background:rgba(245,243,240,0.95);
}

/* Light theme: nav pill + search bar were still using the dark-theme's
   near-black translucent background, so bone-dim text read as dim/blurry
   against it. Give them a proper light backdrop instead. */
[data-theme="light"] .tabs{
  background:rgba(255,255,255,.72);
  border-color:rgba(0,0,0,.14);
}
[data-theme="light"] .tab{ color:var(--bone-dim); }
[data-theme="light"] .tab:hover{ color:var(--bone); text-shadow:none; }
[data-theme="light"] #search{
  background:rgba(255,255,255,.88);
  color:var(--bone);
}
[data-theme="light"] #search:focus{
  background:rgba(255,255,255,.97);
}
[data-theme="light"] #search::placeholder{ color:var(--bone-dim); }
[data-theme="light"] .search-ic{ stroke:var(--bone-dim); }
[data-theme="light"] .tab-random{ color:var(--blood-bright); background:rgba(226,39,63,0.10); border:1px solid rgba(226,39,63,0.45); display:inline-flex; align-items:center; margin-left:6px; }
.tab-random:hover{ background:rgba(226,39,63,0.22); border-color:var(--blood-bright); color:#fff; box-shadow:0 0 14px rgba(226,39,63,0.35); }
[data-theme="light"] .tab-random:hover{
  color:var(--blood-bright);
  border-color:var(--blood);
}


.hero-section{
  text-align:center;
  padding:80px 20px 60px;
}
.hero-section h2{
  font-family:var(--display);
  font-size:clamp(2.5rem, 8vw, 4rem);
  font-weight:900;
  color:var(--bone);
  margin:0 0 16px;
  letter-spacing:0.1em;
}
.hero-section p{
  font-family:var(--serif);
  font-size:1.3rem;
  color:var(--bone-dim);
  max-width:600px;
  margin:0 auto 40px;
}

/* Category grid */
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* Glitch effect for titles */
.glitch-text{
  position:relative;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch-text::before,
.glitch-text::after{
  content:attr(data-text);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.glitch-text::before{
  left:2px;
  text-shadow:-1px 0 #ff00c1;
  clip:rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch-text::after{
  left:-2px;
  text-shadow:-1px 0 #00fff9;
  clip:rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim{
  0%{ clip:rect(31px, 9999px, 94px, 0); }
  5%{ clip:rect(70px, 9999px, 11px, 0); }
  10%{ clip:rect(26px, 9999px, 83px, 0); }
  15%{ clip:rect(54px, 9999px, 48px, 0); }
  20%{ clip:rect(14px, 9999px, 69px, 0); }
  25%{ clip:rect(39px, 9999px, 2px, 0); }
  30%{ clip:rect(62px, 9999px, 75px, 0); }
  35%{ clip:rect(85px, 9999px, 19px, 0); }
  40%{ clip:rect(8px, 9999px, 51px, 0); }
  45%{ clip:rect(43px, 9999px, 33px, 0); }
  50%{ clip:rect(57px, 9999px, 93px, 0); }
  55%{ clip:rect(22px, 9999px, 67px, 0); }
  60%{ clip:rect(76px, 9999px, 4px, 0); }
  65%{ clip:rect(35px, 9999px, 88px, 0); }
  70%{ clip:rect(91px, 9999px, 17px, 0); }
  75%{ clip:rect(12px, 9999px, 45px, 0); }
  80%{ clip:rect(64px, 9999px, 78px, 0); }
  85%{ clip:rect(29px, 9999px, 56px, 0); }
  90%{ clip:rect(47px, 9999px, 23px, 0); }
  95%{ clip:rect(81px, 9999px, 9px, 0); }
  100%{ clip:rect(3px, 9999px, 72px, 0); }
}
@keyframes glitch-anim2{
  0%{ clip:rect(65px, 9999px, 100px, 0); }
  5%{ clip:rect(52px, 9999px, 74px, 0); }
  10%{ clip:rect(79px, 9999px, 85px, 0); }
  15%{ clip:rect(23px, 9999px, 18px, 0); }
  20%{ clip:rect(88px, 9999px, 46px, 0); }
  25%{ clip:rect(37px, 9999px, 3px, 0); }
  30%{ clip:rect(14px, 9999px, 69px, 0); }
  35%{ clip:rect(95px, 9999px, 27px, 0); }
  40%{ clip:rect(41px, 9999px, 62px, 0); }
  45%{ clip:rect(7px, 9999px, 91px, 0); }
  50%{ clip:rect(56px, 9999px, 34px, 0); }
  55%{ clip:rect(82px, 9999px, 13px, 0); }
  60%{ clip:rect(28px, 9999px, 77px, 0); }
  65%{ clip:rect(49px, 9999px, 58px, 0); }
  70%{ clip:rect(16px, 9999px, 95px, 0); }
  75%{ clip:rect(73px, 9999px, 21px, 0); }
  80%{ clip:rect(31px, 9999px, 84px, 0); }
  85%{ clip:rect(67px, 9999px, 42px, 0); }
  90%{ clip:rect(9px, 9999px, 76px, 0); }
  95%{ clip:rect(54px, 9999px, 19px, 0); }
  100%{ clip:rect(38px, 9999px, 63px, 0); }
}
@keyframes glitch-skew{
  0%{ transform:skew(0deg); }
  20%{ transform:skew(0deg); }
  21%{ transform:skew(1deg); }
  22%{ transform:skew(0deg); }
  40%{ transform:skew(0deg); }
  41%{ transform:skew(-1deg); }
  42%{ transform:skew(0deg); }
  60%{ transform:skew(0deg); }
  61%{ transform:skew(0.5deg); }
  62%{ transform:skew(0deg); }
  80%{ transform:skew(0deg); }
  81%{ transform:skew(-0.5deg); }
  82%{ transform:skew(0deg); }
  100%{ transform:skew(0deg); }
}

/* Scroll animations */
.scroll-animate{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.scroll-animate.is-visible{
  opacity:1;
  transform:translateY(0);
}
.scroll-animate-left{
  opacity:0;
  transform:translateX(-50px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.scroll-animate-left.is-visible{
  opacity:1;
  transform:translateX(0);
}
.scroll-animate-right{
  opacity:0;
  transform:translateX(50px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.scroll-animate-right.is-visible{
  opacity:1;
  transform:translateX(0);
}
.scroll-animate-scale{
  opacity:0;
  transform:scale(0.8);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.scroll-animate-scale.is-visible{
  opacity:1;
  transform:scale(1);
}
.scroll-animate-fade{
  opacity:0;
  transition:opacity 0.8s var(--ease);
}
.scroll-animate-fade.is-visible{
  opacity:1;
}

/* Blood drip animation */




@keyframes blood-drop{
  0%, 80%{ opacity:0; transform:translateX(-50%) translateY(0); }
  85%{ opacity:1; transform:translateX(-50%) translateY(0); }
  100%{ opacity:0; transform:translateX(-50%) translateY(120px); }
}

/* Fog particle effect */
.fog-particle{
  position:absolute;
  background:radial-gradient(circle, rgba(93,107,110,0.3) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation: fog-float 20s infinite linear;
}
.fog-particle:nth-child(1){ width:100px; height:100px; top:10%; left:10%; animation-delay:0s; animation-duration:25s; }
.fog-particle:nth-child(2){ width:150px; height:150px; top:30%; left:60%; animation-delay:5s; animation-duration:30s; }
.fog-particle:nth-child(3){ width:80px; height:80px; top:60%; left:20%; animation-delay:10s; animation-duration:20s; }
.fog-particle:nth-child(4){ width:120px; height:120px; top:80%; left:70%; animation-delay:15s; animation-duration:28s; }
.fog-particle:nth-child(5){ width:90px; height:90px; top:40%; left:40%; animation-delay:8s; animation-duration:22s; }
@keyframes fog-float{
  0%{ transform:translate(0, 0) scale(1); opacity:0.3; }
  25%{ transform:translate(100px, -50px) scale(1.2); opacity:0.5; }
  50%{ transform:translate(200px, 0) scale(1); opacity:0.3; }
  75%{ transform:translate(100px, 50px) scale(0.8); opacity:0.4; }
  100%{ transform:translate(0, 0) scale(1); opacity:0.3; }
}
.fog-container{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}

/* Socials Section */
.socials-section{
  margin-top:8px; padding-top:16px;
  border-top:1px solid var(--line);
}
.socials-title{
  font-family:var(--display);
  font-size:1.2rem;
  color:var(--bone);
  text-align:center;
  margin:0 0 20px 0;
  letter-spacing:0.15em;
}
.socials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.social-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:8px;
  text-decoration:none;
  color:var(--bone);
  transition:all 0.3s var(--ease);
}
.social-link:hover{
  background:var(--raised-2);
  border-color:var(--blood-bright);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(226,39,63,0.2);
}
.social-icon{
  font-size:1.5rem;
  flex-shrink:0;
}
.social-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.social-name{
  font-weight:600;
  font-size:0.95rem;
  color:var(--bone);
}
.social-desc{
  font-size:0.75rem;
  color:var(--bone-dim);
}
.social-arrow{
  font-size:1.2rem;
  color:var(--blood-bright);
  flex-shrink:0;
}
@media (max-width:768px){
  .socials-grid{
    grid-template-columns:1fr;
  }
}

.category-card{
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:8px;
  padding:32px;
  text-decoration:none;
  color:var(--bone);
  transition:all 0.3s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.category-card:hover{
  border-color:var(--blood);
  transform:translateY(-8px);
  box-shadow:0 14px 34px -10px rgba(156,20,40,.45), 0 0 0 1px rgba(226,39,63,.25), 0 0 40px rgba(226,39,63,0.1);
}
.category-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(226,39,63,0.1), transparent 70%);
  opacity:0;
  transition:opacity 0.3s ease;
}
.category-card:hover::before{
  opacity:1;
}

.category-icon{
  font-size:3rem;
  margin-bottom:16px;
}

.category-card h3{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:700;
  margin:0 0 8px;
  color:var(--bone);
}

.category-card p{
  font-family:var(--sans);
  font-size:0.9rem;
  color:var(--bone-dim);
  margin:0;
  line-height:1.5;
}

.category-card.mori-card{
  border-color:var(--blood);
}
.category-card.mori-card:hover{
  border-color:var(--blood-bright);
  box-shadow:0 14px 34px -10px rgba(226,39,63,.6), 0 0 0 1px rgba(226,39,63,.4), 0 0 50px rgba(226,39,63,0.2);
}

/* Loading skeletons */
.skel{
  background:linear-gradient(90deg, var(--raised) 25%, var(--line) 50%, var(--raised) 75%);
  background-size:200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}
@keyframes skeleton-loading{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* Theme toggle button */
.theme-toggle{
  width:44px;
  height:44px;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  transition:all 0.3s ease;
  position:relative;
}
.theme-toggle:hover{
  border-color:var(--blood);
  box-shadow:0 0 15px rgba(226,39,63,0.3);
}
.theme-icon-sun,
.theme-icon-moon{
  width:20px;
  height:20px;
  stroke:var(--bone);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:all 0.3s ease;
  position:absolute;
}
.theme-icon-moon{
  opacity:0;
  transform:rotate(-90deg) scale(0.5);
}
[data-theme="light"] .theme-icon-sun{
  opacity:0;
  transform:rotate(90deg) scale(0.5);
}
[data-theme="light"] .theme-icon-moon{
  opacity:1;
  transform:rotate(0) scale(1);
}

/* Theme toggle at top of page */
.theme-toggle-top{
  position:fixed;
  top:20px;
  right:20px;
  z-index:100;
}

/* Randomizer button */
.randomizer-btn{
  width:44px;
  height:44px;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  transition:all 0.3s ease;
  margin-right:8px;
}
.randomizer-btn:hover{
  border-color:var(--blood);
  box-shadow:0 0 15px rgba(226,39,63,0.3);
  transform:rotate(180deg);
}
.randomizer-btn svg{
  width:20px;
  height:20px;
  stroke:var(--bone);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Bookmark button on cards */
.bookmark-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  background:rgba(10,9,8,0.8);
  border:1px solid var(--line);
  border-radius:4px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  transition:all 0.3s ease;
  z-index:4;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.bookmark-btn:hover{ background:rgba(10,9,8,0.9); border-color:var(--gold); }
.bookmark-btn svg{
  width:16px;
  height:16px;
  stroke:var(--bone);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:all 0.3s ease;
}
.bookmark-btn.is-bookmarked svg{ stroke:var(--gold); fill:var(--gold); }
.bookmark-btn.is-bookmarked{ background:rgba(10,9,8,0.85); border-color:var(--gold); }

/* Advanced filter button */
.advanced-filter-btn{
  width:44px;
  height:44px;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  transition:all 0.3s ease;
  margin-right:8px;
}
.advanced-filter-btn:hover{
  border-color:var(--blood);
  box-shadow:0 0 15px rgba(226,39,63,0.3);
}
.advanced-filter-btn svg{
  width:20px;
  height:20px;
  stroke:var(--bone);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Advanced filters panel */
.advanced-filters{
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px;
  margin-top:16px;
  animation: slide-down 0.3s ease;
}
@keyframes slide-down{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:translateY(0); }
}
.filter-section h4{
  font-family:var(--display);
  font-size:1rem;
  color:var(--bone);
  margin:0 0 12px 0;
  text-transform:uppercase;
  letter-spacing:0.1em;
}
#advanced-filter-content{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
}
.filter-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.filter-group label{
  font-family:var(--sans);
  font-size:0.85rem;
  color:var(--bone-dim);
}
.filter-group select,
.filter-group input{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:4px;
  padding:8px 12px;
  color:var(--bone);
  font-family:var(--sans);
  font-size:0.9rem;
}
.filter-group select:focus,
.filter-group input:focus{
  outline:none;
  border-color:var(--blood);
  box-shadow:0 0 10px rgba(226,39,63,0.2);
}


.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width:560px){ .grid{ grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap:20px; } }
@media (min-width:1000px){ .grid{ grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap:22px; } }

/* Grouped layout for addons */
.group-header{
  font-family:var(--display);
  font-size:1.4rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--bone);
  margin:40px 0 20px;
  padding:0 20px 12px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.group-header::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:20px;
  width:80px;
  height:2px;
  background:linear-gradient(90deg, var(--blood-bright), transparent);
}

/* Collapsible sections */
.collapsible-header{
  cursor:pointer;
  -webkit-user-select:none; user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-right:20px;
  transition:all 0.3s ease;
}
.collapsible-header:hover{
  color:var(--blood-bright);
}
.group-title{
  flex:1;
}
.collapse-arrow{
  font-size:0.8rem;
  transition:transform 0.3s ease;
  color:var(--bone-dim);
}
.collapsible-content{
  transition:all 0.3s ease;
  overflow:hidden;
}

/* Video background */
.video-bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
  pointer-events:none;
}
.addons-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:12px;
  margin-bottom:40px;
  padding:0 20px;
  max-width:100%;
  box-sizing:border-box;
  width:100%;
}
.addons-grid .card{
  aspect-ratio: 1/1;
  min-height:200px;
}
.addons-grid .card img{
  object-fit:contain;
  padding:0;
  background:var(--surface);
  width:100%;
  height:100%;
  transform:scale(1.5);
}
@media (max-width:1400px){
  .addons-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width:1100px){
  .addons-grid{
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
  }
}
@media (max-width:768px){
  .addons-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:8px;
    padding:0 12px;
    min-height:180px;
  }
}
@media (max-width:480px){
  .addons-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:6px;
    padding:0 8px;
    min-height:160px;
  }
}
.offerings-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  margin-bottom:40px;
  padding:0 20px;
  max-width:100%;
  box-sizing:border-box;
  width:100%;
}
.offerings-grid .card{
  aspect-ratio: 1/1;
  min-height:250px;
}
.offerings-grid .card img{
  object-fit:contain;
  padding:0;
  background:var(--surface);
  width:100%;
  height:100%;
  transform:scale(1.5);
}
@media (max-width:1200px){
  .offerings-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width:768px){
  .offerings-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:8px;
    padding:0 12px;
    min-height:225px;
  }
}
@media (max-width:480px){
  .offerings-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:6px;
    padding:0 8px;
    min-height:200px;
  }
}
.perks-row-grid{
  display:flex;
  flex-direction:column;
  gap:40px;
  padding:0 20px;
  max-width:100%;
  box-sizing:border-box;
  width:100%;
}
.perks-row{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
}
.perks-col{
  display:flex;
  flex-direction:column;
}
.perks-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-bottom:0;
  padding:0;
}
.perks-grid .card{
  aspect-ratio: 1/1;
  min-height:200px;
}
.perks-grid .card img{
  object-fit:contain;
  padding:0;
  background:var(--surface);
  width:100%;
  height:100%;
  transform:scale(1.5);
}
.perks-grid .card .icon-pad{ padding:0; height:92%; padding-top:55px; }
.perks-grid .card .meta{ padding:2px 8px 4px; }
@media (max-width:1100px){
  .perks-row{
    grid-template-columns: 1fr;
  }
  .perks-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width:768px){
  .perks-row{
    grid-template-columns: 1fr;
    gap:16px;
  }
  .perks-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:8px;
  }
  .perks-grid .card{
    min-height:180px;
  }
}
@media (max-width:480px){
  .perks-row{
    grid-template-columns: 1fr;
    gap:12px;
  }
  .perks-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:6px;
  }
  .perks-grid .card{
    min-height:160px;
  }
}

/* ---- card ---- */
.card{
  --rx:0deg; --ry:0deg;
  position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden;
  background:var(--raised); border:1px solid var(--line); cursor:pointer;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition: transform .4s var(--ease), border-color .35s, box-shadow .35s;
  animation: card-in .6s var(--ease) backwards;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
@keyframes card-in{ from{ opacity:0; transform:translateY(14px) scale(.97);} to{ opacity:1; transform:translateY(0) scale(1);} }
.card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:saturate(.86) brightness(.78) contrast(1.05);
  transition: filter .4s var(--ease), transform .6s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,8,0) 35%, rgba(10,9,8,.92) 100%);
}
.card::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:6px;
  box-shadow: inset 0 0 0 1px rgba(226,39,63,0);
  transition: box-shadow .35s var(--ease);
}
.card:hover{
  border-color: var(--blood);
  box-shadow:0 14px 34px -10px rgba(156,20,40,.45), 0 0 0 1px rgba(226,39,63,.25), 0 0 40px rgba(226,39,63,0.1);
  z-index:10;
  animation: card-shimmer 1.5s ease-in-out;
}
.card:hover::after{ box-shadow: inset 0 0 0 1px rgba(226,39,63,.5); }
.card:hover img{
  filter:saturate(1) brightness(.88) contrast(1.08);
  transform:scale(1.045);
}
.card:focus-visible{ 
  border-color:var(--blood-bright);
  outline:2px solid var(--blood-bright);
  outline-offset:2px;
  box-shadow:0 0 20px rgba(226,39,63,0.4);
}

/* Enhanced focus indicators for all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
.chip:focus-visible{
  outline:2px solid var(--blood-bright);
  outline-offset:2px;
  box-shadow:0 0 15px rgba(226,39,63,0.3);
}

.tab:focus-visible{
  outline:2px solid var(--blood-bright);
  outline-offset:-2px;
  box-shadow:0 0 15px rgba(226,39,63,0.3);
}

/* Card blood splatter effect on hover */
.card::before{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,9,8,0) 35%, rgba(10,9,8,.92) 100%),
    radial-gradient(circle at 80% 20%, rgba(226,39,63,0) 0%, transparent 50%);
  transition: background .4s;
}
.card:hover::before{
  background:
    linear-gradient(180deg, rgba(10,9,8,0) 35%, rgba(10,9,8,.92) 100%),
    radial-gradient(circle at 80% 20%, rgba(226,39,63,0.15) 0%, transparent 50%);
}

.card .icon-pad{ padding:18%; display:flex; align-items:center; justify-content:center; height:100%; }
.card .icon-pad img{ position:static; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.addons-grid .card .icon-pad{ padding:0; height:92%; padding-top:55px; }
.addons-grid .card .meta{ padding:2px 8px 4px; }
.offerings-grid .card .icon-pad{ padding:0; height:92%; padding-top:55px; }
.offerings-grid .card .meta{ padding:2px 8px 4px; }

.card .meta{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:10px 11px 11px;
}
.card .rarity-tag{
  position:absolute; top:8px; left:8px; z-index:3;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:3px; background:rgba(10,9,8,.65); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border:1px solid var(--line); color:var(--bone-dim);
  transition: all .3s;
}
.card:hover .rarity-tag{
  background:rgba(10,9,8,.85);
  border-color:var(--blood);
  transform:scale(1.05);
}
.card .licensed-tag{
  position:absolute; top:8px; right:8px; z-index:3; width:8px; height:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 8px var(--gold);
  animation: licensed-pulse 2s ease-in-out infinite;
}
@keyframes licensed-pulse{
  0%,100%{ box-shadow:0 0 8px var(--gold); }
  50%{ box-shadow:0 0 15px var(--gold), 0 0 25px rgba(201,162,39,0.5); }
}
.card .name{
  font-family:var(--display); font-size:.78rem; font-weight:700; letter-spacing:.02em;
  color:var(--bone); line-height:1.25; margin:0 0 2px;
  text-shadow:0 0 3px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,.8), 0 2px 4px rgba(0,0,0,.6);
  transition: color .3s, text-shadow .3s;
}
.card:hover .name{
  color:var(--blood-bright);
  text-shadow:0 0 10px rgba(226,39,63,0.8), 0 2px 6px rgba(0,0,0,.8);
}
.card .sub{
  font-family:var(--mono); font-size:.62rem; color:var(--bone-dim); text-transform:uppercase; letter-spacing:.04em;
  transition: color .3s;
}
.card:hover .sub{ color:var(--bone); }

/* skeleton */
.card.skel{ background:linear-gradient(100deg, var(--raised) 30%, var(--raised-2) 50%, var(--raised) 70%); background-size:240% 100%; animation: shimmer 1.6s ease-in-out infinite; cursor:default; }
@keyframes shimmer{ 0%{ background-position:200% 0;} 100%{ background-position:-40% 0;} }

.sentinel{ height:1px; }

/* ---------------- footer ---------------- */
.site-foot{ position:relative; z-index:3; text-align:center; padding:10px 20px 40px; color:var(--bone-dim); font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; }
.site-foot::before{
  content:"";
  display:block;
  width:60px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--blood-bright), transparent);
  margin:0 auto 20px;
}

/* ================= overlay / sheet ================= */
.overlay{ position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; }
@media (min-width:760px){ .overlay{ align-items:center; padding:34px; } }
.overlay-bg{
  position:absolute; inset:0; background:rgba(6,5,5,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:fade-in .25s var(--ease);
}
.overlay-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(226,39,63,0.1), transparent 70%);
  animation: overlay-pulse 4s ease-in-out infinite;
}
@keyframes overlay-pulse{
  0%,100%{ opacity:0.3; }
  50%{ opacity:0.6; }
}
@keyframes fade-in{ from{opacity:0;} to{opacity:1;} }

.sheet{
  position:relative; z-index:1; width:100%; max-width:880px; max-height:92vh; overflow-y:auto;
  background:linear-gradient(180deg, rgba(28,24,32,0.95) 0%, rgba(20,18,23,0.95) 100%);
  border:1px solid var(--line); border-bottom:none;
  border-radius:18px 18px 0 0;
  animation: sheet-up .42s var(--ease);
  scrollbar-width: thin; scrollbar-color: var(--blood) var(--surface);
  box-shadow:0 0 60px rgba(0,0,0,0.8), 0 0 100px rgba(226,39,63,0.1);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
}
@media (min-width:760px){ .sheet{ border-radius:14px; border-bottom:1px solid var(--line); animation:sheet-pop .35s var(--ease); } }
@keyframes sheet-up{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
@keyframes sheet-pop{ from{ opacity:0; transform:scale(.94) translateY(18px);} to{ opacity:1; transform:scale(1) translateY(0);} }

.sheet-close{
  position:sticky; top:14px; float:right; margin:14px 14px 0 0; z-index:5;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:rgba(10,9,8,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--bone); cursor:pointer;
  font-size:.85rem; transition:.2s;
  animation: pulse-glow-anim 2s ease-in-out infinite;
}
.sheet-close:hover{
  background:var(--blood);
  border-color:var(--blood);
  transform:rotate(90deg);
  box-shadow:0 0 15px rgba(226,39,63,0.5);
}

.sheet-inner{ padding:0 0 40px; }

/* detail hero */
.d-hero{ position:relative; width:100%; aspect-ratio:16/8; overflow:hidden; }
.d-hero img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition: transform 10s ease-out;
}
.sheet:hover .d-hero img{ transform:scale(1.05); }
.d-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,8,0) 40%, var(--surface) 100%);
}
.d-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 30%, rgba(226,39,63,0.1), transparent 60%);
  animation: hero-pulse 6s ease-in-out infinite;
}
@keyframes hero-pulse{
  0%,100%{ opacity:0.3; }
  50%{ opacity:0.6; }
}
.d-hero-icon{ aspect-ratio:16/7; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, var(--raised-2), var(--surface)); }
.d-hero-icon img{ width:80%; max-width:400px; object-fit:contain; filter:drop-shadow(0 14px 30px rgba(0,0,0,.6)); animation: float-icon 5s ease-in-out infinite; }
@keyframes float-icon{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

.d-head{ padding:0 28px; margin-top:-54px; position:relative; z-index:2; }
.d-eyebrow{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blood-bright);
  margin:0 0 6px;
  text-shadow:0 0 8px rgba(226,39,63,0.4);
  animation: eyebrow-flicker 4s ease-in-out infinite;
}
@keyframes eyebrow-flicker{
  0%,100%{ opacity:1; }
  92%{ opacity:1; }
  93%{ opacity:0.8; }
  94%{ opacity:1; }
  96%{ opacity:0.9; }
  97%{ opacity:1; }
}
.d-title{
  font-family:var(--display);
  font-size:clamp(1.5rem,4vw,2.3rem);
  margin:0 0 4px;
  line-height:1.1;
  background:linear-gradient(180deg, var(--bone) 0%, var(--bone-dim) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 0 30px rgba(226,39,63,0.3);
  position:relative;
}
.d-title::before{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  background:linear-gradient(180deg, var(--blood-bright) 0%, var(--blood) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:0;
  animation: title-bleed 8s ease-in-out infinite;
}
@keyframes title-bleed{
  0%,100%{ opacity:0; transform:translateY(0); }
  50%{ opacity:0.3; transform:translateY(2px); }
}
.d-subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--bone-dim);
  margin:0 0 18px;
  text-shadow:0 0 10px rgba(0,0,0,0.5);
  position:relative;
}
.d-subtitle::after{
  content:"";
  position:absolute;
  bottom:-4px;
  left:0;
  width:60px;
  height:1px;
  background:linear-gradient(90deg, var(--blood), transparent);
}

.d-stats{ display:flex; flex-wrap:wrap; gap:10px; padding:0 28px 22px; }
.stat{
  font-family:var(--mono); font-size:.68rem; color:var(--bone-dim); background:var(--surface);
  border:1px solid var(--line); border-radius:6px; padding:8px 12px; min-width:84px;
  transition: all .3s;
}
.stat:hover{
  border-color:var(--blood);
  background:var(--raised);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.stat b{ display:block; font-family:var(--sans); font-size:.84rem; color:var(--bone); font-weight:600; margin-top:2px; }

.d-section{ padding:24px 28px; border-top:1px solid var(--line); position:relative; }
.d-section::before{
  content:"";
  position:absolute;
  top:0;
  left:28px;
  right:28px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--blood-bright), transparent);
  opacity:0.3;
}
.d-section h3{
  font-family:var(--display); font-size:.95rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone); margin:0 0 14px; display:flex; align-items:center; gap:10px;
  position:relative;
  text-shadow:0 0 15px rgba(226,39,63,0.3);
  transition:all .3s;
}
.d-section h3::before{
  content:"";
  width:18px;
  height:1px;
  background:linear-gradient(90deg, var(--blood-bright), transparent);
  animation: section-line-pulse 3s ease-in-out infinite;
}
@keyframes section-line-pulse{
  0%,100%{ opacity:0.5; width:18px; }
  50%{ opacity:1; width:24px; }
}
.d-section h3:hover{
  color:var(--blood-bright);
  text-shadow:0 0 20px rgba(226,39,63,0.5);
  transform:translateX(4px);
}
.d-section p{ font-family:var(--serif); font-size:1.08rem; line-height:1.65; color:var(--bone-dim); margin:0 0 12px; }
.d-section p:last-child{ margin-bottom:0; }
.power-name{
  color:var(--gold);
  font-family:var(--sans);
  font-weight:600;
  font-size:.95rem;
  margin-bottom:6px;
  display:block;
  text-shadow:0 0 10px rgba(201,162,39,0.3);
  animation: power-name-glow 3s ease-in-out infinite;
}
@keyframes power-name-glow{
  0%,100%{ text-shadow:0 0 10px rgba(201,162,39,0.3); }
  50%{ text-shadow:0 0 20px rgba(201,162,39,0.6), 0 0 30px rgba(201,162,39,0.3); }
}
.power-block{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.power-block::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--blood-bright), transparent);
}
.power-desc{
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.75;
  color:var(--bone-dim);
  margin-top:12px;
}
.power-desc br{
  display:block;
  margin:8px 0;
  content:"";
}
/* formatBody() structured power/lore markup */
.power-desc p{
  margin:0 0 10px;
}
.power-desc p:last-child{
  margin-bottom:0;
}
.power-desc .body-head{
  margin:16px 0 6px;
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--bone-dim);
}
.power-desc .body-head:first-child{
  margin-top:0;
}
.power-desc .body-head .sp-label{
  color:var(--gold);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-right:2px;
}
.power-desc .body-list{
  margin:6px 0 12px;
  padding-left:0;
  list-style:none;
}
.power-desc .body-list li{
  position:relative;
  padding-left:20px;
  margin:4px 0;
  line-height:1.6;
}
.power-desc .body-list li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.65em;
  width:6px;
  height:6px;
  background:var(--blood-bright);
  transform:rotate(45deg);
}
.realm-link{
  background:var(--raised);
  border:1px solid var(--blood);
  color:var(--blood-bright);
  font-family:var(--sans);
  font-weight:600;
  font-size:.85rem;
  padding:10px 18px;
  border-radius:6px;
  cursor:pointer;
  transition:all .3s;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.realm-link:hover{
  background:var(--blood);
  color:var(--bone);
  box-shadow:0 0 20px rgba(226,39,63,0.4);
  transform:translateY(-2px);
}

/* sub-item rows (addons/perks) */
.sub-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:14px; }
@media (max-width:900px){
  .sub-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:600px){
  .sub-grid{ grid-template-columns: repeat(2, 1fr); }
}
.sub-item{
  display:flex; flex-direction:column; gap:8px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:8px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  position:relative;
  overflow:hidden;
}
.sub-item img{ width:100%; aspect-ratio:1/1; object-fit:contain; align-self:center; }
.sub-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, transparent, rgba(226,39,63,0.05), transparent);
  opacity:0;
  transition: opacity .3s;
}
.sub-item:hover{
  border-color:var(--blood);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.4), 0 0 15px rgba(226,39,63,0.1);
}
.sub-item:hover::before{ opacity:1; }
.sub-item img{
  width:100%; height:120px; object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
  transition: transform .3s, filter .3s;
  object-position:center;
}
.sub-item .clickable-perk{
  cursor:pointer;
}
.sub-item .clickable-perk:hover{
  filter:drop-shadow(0 6px 12px rgba(226,39,63,0.5));
}
.sub-item:hover img{ transform:scale(1.05); filter:drop-shadow(0 6px 12px rgba(226,39,63,0.3)); }
.sub-item .si-name{ font-weight:600; font-size:.84rem; margin:0 0 3px; transition: color .3s; text-align:center; }
.sub-item:hover .si-name{ color:var(--blood-bright); }
.sub-item .si-rarity{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; display:inline-block; text-align:center; }
.sub-item .si-desc{ font-size:.74rem; color:var(--bone-dim); line-height:1.45; margin:0; text-align:center; display:-webkit-box; -webkit-line-clamp:6; line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.sub-item:hover .si-desc{ -webkit-line-clamp:unset; line-clamp:unset; }

.rar-Common{ color:#9c958a; } .rar-Uncommon{ color:#7fae6e; } .rar-Rare{ color:#5c9ad6; }
.rar-Very-Rare{ color:#a06ad6; } .rar-Ultra-Rare{ color:#a06ad6; } .rar-Iridescent{ color:#e2273f; }

/* mori gallery */
.mori-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.mori-card{
  position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--raised);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.mori-card:hover{
  transform:scale(1.01);
  border-color:var(--blood);
  box-shadow:0 8px 20px rgba(0,0,0,0.5), 0 0 15px rgba(226,39,63,0.2);
  animation: bloodBurst 0.5s ease-out;
}
.mori-card img{ width:100%; height:auto; display:block; transition: filter .3s; }
.mori-card:hover img{ filter:contrast(1.1) saturate(1.1); }
.mori-card .mc-label{
  position:absolute; left:8px; top:8px; font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.05em;
  background:rgba(10,9,8,.65); padding:3px 8px; border-radius:3px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.1);
}

.mature-gate{
  position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--blood);
  display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--raised);
  transition: all .3s;
}
.mature-gate::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(226,39,63,0.2), transparent 70%);
  animation: mature-pulse 3s ease-in-out infinite;
}
@keyframes mature-pulse{
  0%,100%{ opacity:0.3; }
  50%{ opacity:0.6; }
}
.mature-gate img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(22px) brightness(.4) saturate(1.3); transform:scale(1.15);
  transition: filter .5s, transform .5s;
}
.mature-gate:hover img{ filter:blur(15px) brightness(.5) saturate(1.4); }
.mature-gate .mg-label{
  position:relative; z-index:1; text-align:center; font-family:var(--mono); font-size:1rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bone); padding:12px 20px; border:1px solid var(--blood-bright); border-radius:999px;
  background:rgba(10,9,8,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition: all .3s;
}
.mature-gate:hover .mg-label{
  background:var(--blood);
  box-shadow:0 0 20px rgba(226,39,63,0.5);
  transform:scale(1.05);
}
.mature-gate.revealed img{ filter:none; transform:none; }
.mature-gate.revealed{ cursor:default; }
.mature-gate.revealed::before{ display:none; }

.lore-q{ position:relative; padding-left:18px; border-left:2px solid var(--blood); }
.lore-q::before{
  content:"";
  position:absolute;
  left:-6px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, var(--blood-bright), var(--blood));
  animation: lore-glow 3s ease-in-out infinite;
}
@keyframes lore-glow{
  0%,100%{ opacity:0.5; }
  50%{ opacity:1; }
}

.realm-link{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:8px;
  color:var(--bone); text-decoration:none; font-size:.84rem; background:var(--surface);
  transition:.2s;
  position:relative;
  overflow:hidden;
}
.realm-link::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(45deg, transparent, rgba(226,39,63,0.1), transparent);
  transform:translateX(-100%);
  transition:transform .3s;
}
.realm-link:hover{
  border-color:var(--blood);
  transform:translateX(4px);
}
.realm-link:hover::before{ transform:translateX(100%); }

/* Lobby image styling */
.d-lobby{
  width:100%;
  max-width:600px;
  margin:0 auto;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
}
.d-lobby img{
  width:100%;
  height:auto;
  max-height:400px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

/* Additional horror effects */
.glitch-effect{
  position:relative;
}
.glitch-effect::before,
.glitch-effect::after{
  content:attr(data-text);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.glitch-effect::before{
  left:2px;
  text-shadow:-1px 0 var(--blood);
  clip:rect(24px, 550px, 90px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}
.glitch-effect::after{
  left:-2px;
  text-shadow:-1px 0 var(--fog);
  clip:rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim{
  0%{ clip:rect(14px, 9999px, 127px, 0); }
  5%{ clip:rect(69px, 9999px, 19px, 0); }
  10%{ clip:rect(6px, 9999px, 83px, 0); }
  15%{ clip:rect(148px, 9999px, 39px, 0); }
  20%{ clip:rect(69px, 9999px, 6px, 0); }
  25%{ clip:rect(7px, 9999px, 144px, 0); }
  30%{ clip:rect(93px, 9999px, 11px, 0); }
  35%{ clip:rect(10px, 9999px, 136px, 0); }
  40%{ clip:rect(143px, 9999px, 4px, 0); }
  45%{ clip:rect(26px, 9999px, 94px, 0); }
  50%{ clip:rect(1px, 9999px, 148px, 0); }
  55%{ clip:rect(149px, 9999px, 59px, 0); }
  60%{ clip:rect(66px, 9999px, 22px, 0); }
  65%{ clip:rect(109px, 9999px, 7px, 0); }
  70%{ clip:rect(142px, 9999px, 85px, 0); }
  75%{ clip:rect(36px, 9999px, 147px, 0); }
  80%{ clip:rect(3px, 9999px, 63px, 0); }
  85%{ clip:rect(96px, 9999px, 12px, 0); }
  90%{ clip:rect(149px, 9999px, 143px, 0); }
  95%{ clip:rect(59px, 9999px, 66px, 0); }
  100%{ clip:rect(83px, 9999px, 28px, 0); }
}

/* Flickering text effect */
.flicker{
  animation: flicker 4s infinite;
}
@keyframes flicker{
  0%,100%{ opacity:1; }
  3%{ opacity:0.4; }
  6%{ opacity:1; }
  7%{ opacity:0.4; }
  8%{ opacity:1; }
  9%{ opacity:1; }
  10%{ opacity:0.1; }
  11%{ opacity:1; }
  23%{ opacity:1; }
  24%{ opacity:0.5; }
  25%{ opacity:0.1; }
  26%{ opacity:1; }
  27%{ opacity:0.1; }
  28%{ opacity:0.5; }
  29%{ opacity:1; }
  30%{ opacity:1; }
  37%{ opacity:1; }
  38%{ opacity:0.1; }
  39%{ opacity:0.5; }
  40%{ opacity:1; }
  41%{ opacity:1; }
  42%{ opacity:1; }
  43%{ opacity:0.1; }
  44%{ opacity:1; }
  50%{ opacity:1; }
  51%{ opacity:0.1; }
  52%{ opacity:1; }
  53%{ opacity:1; }
  54%{ opacity:1; }
  55%{ opacity:0.5; }
  56%{ opacity:1; }
  57%{ opacity:1; }
  58%{ opacity:1; }
  59%{ opacity:0.1; }
  60%{ opacity:1; }
  63%{ opacity:1; }
  64%{ opacity:0.1; }
  65%{ opacity:1; }
  66%{ opacity:1; }
  67%{ opacity:0.5; }
  68%{ opacity:1; }
  69%{ opacity:1; }
  70%{ opacity:1; }
  71%{ opacity:0.1; }
  72%{ opacity:1; }
  73%{ opacity:1; }
  74%{ opacity:1; }
  75%{ opacity:0.1; }
  76%{ opacity:1; }
  77%{ opacity:1; }
  78%{ opacity:1; }
  79%{ opacity:0.1; }
  80%{ opacity:1; }
  81%{ opacity:1; }
  82%{ opacity:1; }
  83%{ opacity:0.1; }
  84%{ opacity:1; }
  85%{ opacity:1; }
  86%{ opacity:1; }
  87%{ opacity:0.1; }
  88%{ opacity:1; }
  89%{ opacity:1; }
  90%{ opacity:1; }
  91%{ opacity:0.1; }
  92%{ opacity:1; }
  93%{ opacity:1; }
  94%{ opacity:1; }
  95%{ opacity:0.1; }
  96%{ opacity:1; }
  97%{ opacity:1; }
  98%{ opacity:1; }
  99%{ opacity:0.1; }
  100%{ opacity:1; }
}

/* Blood splatter decoration */
.blood-splatter{
  position:absolute;
  width:100px;
  height:100px;
  background:radial-gradient(ellipse at center, var(--blood) 0%, transparent 70%);
  opacity:0.1;
  pointer-events:none;
  animation: splatter-pulse 5s ease-in-out infinite;
}
@keyframes splatter-pulse{
  0%,100%{ transform:scale(1); opacity:0.1; }
  50%{ transform:scale(1.2); opacity:0.15; }
}

/* Floating particles */
.floating-particle{
  position:fixed;
  width:2px;
  height:2px;
  background:var(--bone-dim);
  border-radius:50%;
  pointer-events:none;
  animation: float-particle 15s linear infinite;
  opacity:0.3;
}
@keyframes float-particle{
  0%{ transform:translateY(100vh) rotate(0deg); opacity:0; }
  10%{ opacity:0.3; }
  90%{ opacity:0.3; }
  100%{ transform:translateY(-100vh) rotate(720deg); opacity:0; }
}

/* Scanline effect */
.scanlines::after{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0.1)
  );
  background-size:100% 4px;
  pointer-events:none;
  z-index:998;
  opacity:0.15;
}

/* Heartbeat effect */
.heartbeat{
  animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.1); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.1); }
  70%{ transform:scale(1); }
}

/* Responsive overrides */
@media (max-width:560px){
  .d-head, .d-stats, .d-section{ padding-left:18px; padding-right:18px; }
  .site-head{ padding:46px 16px 22px; }
  .wordmark{ font-size:clamp(2rem, 12vw, 3.5rem); }
  .tabs{ padding:4px; }
  .tab{ padding:8px 14px; font-size:.65rem; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:14px; }
  .sub-grid{ grid-template-columns: 1fr; }
  .mori-grid{ grid-template-columns: 1fr; }
}

@media (max-width:400px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .card .name{ font-size:.7rem; }
  .card .sub{ font-size:.55rem; }
}

/* Dark mode optimization */
@media (prefers-color-scheme: dark){
  :root{
    --void:#050404;
    --surface:#0f0d10;
    --raised:#141214;
  }
}

/* High contrast mode */
@media (prefers-contrast: high){
  :root{
    --line: rgba(233,227,212,.2);
    --bone-dim:#b8b0a0;
  }
  .card{ border-width:2px; }
  .tab{ border:1px solid var(--line); }
}

/* ================= Lightbox ================= */
.lightbox{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  animation: fade-in .3s var(--ease);
}
.lightbox-bg{
  position:absolute; inset:0; background:rgba(6,5,5,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.lightbox-img{
  position:relative; z-index:1; max-width:90vw; max-height:90vh; object-fit:contain;
  border-radius:8px; box-shadow:0 0 60px rgba(0,0,0,0.9), 0 0 100px rgba(226,39,63,0.2);
  animation: lightbox-pop .4s var(--ease);
}
@keyframes lightbox-pop{
  from{ opacity:0; transform:scale(.9); }
  to{ opacity:1; transform:scale(1); }
}
.lightbox-close{
  position:absolute; top:20px; right:20px; z-index:2;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:rgba(10,9,8,.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--bone); cursor:pointer;
  font-size:1.1rem; transition:.2s;
}
.lightbox-close:hover{
  background:var(--blood);
  border-color:var(--blood);
  transform:rotate(90deg);
  box-shadow:0 0 20px rgba(226,39,63,0.5);
}

/* Expandable image cursor */
.expandable-img{
  cursor:zoom-in;
  transition: transform .3s var(--ease);
}
.expandable-img:hover{
  transform:scale(1.02);
}

/* Enhanced horror effects */
.card{
  position:relative;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, transparent 40%, rgba(226,39,63,0.05) 50%, transparent 60%);
  opacity:0;
  transition:opacity .4s;
  z-index:2;
  pointer-events:none;
}
.card:hover::before{
  opacity:1;
  animation: card-shimmer 1.5s ease-in-out;
}
@keyframes card-shimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}

/* Enhanced glitch effect on hover for titles */
.d-title:hover{
  animation: title-glitch-hover 0.3s ease-in-out;
}
@keyframes title-glitch-hover{
  0%{ transform:translate(0); }
  20%{ transform:translate(-2px, 1px); }
  40%{ transform:translate(2px, -1px); }
  60%{ transform:translate(-1px, 2px); }
  80%{ transform:translate(1px, -2px); }
  100%{ transform:translate(0); }
}

/* Blood drip animation on scroll */


/* Enhanced hover effects for navigation */
.nav-back{
  position:relative;
  overflow:hidden;
}
.nav-back::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform:translateX(-100%);
  transition:transform .4s;
}
.nav-back:hover::before{
  transform:translateX(100%);
}

/* Pulse animation for category titles */
.category-title{
  animation: category-pulse 4s ease-in-out infinite;
}
@keyframes category-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.85; }
}

/* Enhanced card entrance animation */
.card{
  animation: card-entrance 0.6s var(--ease) backwards;
}
@keyframes card-entrance{
  from{
    opacity:0;
    transform:translateY(30px) scale(0.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Floating blood particles */
.blood-particle{
  position:fixed;
  width:3px;
  height:3px;
  background:var(--blood);
  border-radius:50%;
  pointer-events:none;
  animation: blood-fall 8s linear infinite;
  opacity:0.4;
}
@keyframes blood-fall{
  0%{ transform:translateY(-10vh) rotate(0deg); opacity:0; }
  10%{ opacity:0.4; }
  90%{ opacity:0.4; }
  100%{ transform:translateY(110vh) rotate(360deg); opacity:0; }
}

/* Scratch mark reveal effect */
.scratch-reveal{
  position:relative;
  overflow:hidden;
}
.scratch-reveal::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(45deg, transparent 48%, rgba(139,0,0,0.2) 49%, rgba(139,0,0,0.2) 51%, transparent 52%);
  background-size:20px 20px;
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.scratch-reveal:hover::after{
  opacity:1;
  animation: scratch-move 0.5s linear infinite;
}
@keyframes scratch-move{
  0%{ background-position:0 0; }
  100%{ background-position:20px 20px; }
}

/* Enhanced button hover effects */
.tab, .chip{
  position:relative;
  overflow:hidden;
}
.tab::after, .chip::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(255,255,255,0.1), transparent 70%);
  opacity:0;
  transition:opacity .3s;
}
.tab:hover::after, .chip:hover::after{
  opacity:1;
}

/* Text shadow glow on hover */
.card .name{
  transition: all .3s;
}
.card:hover .name{
  text-shadow:0 0 20px rgba(226,39,63,0.8), 0 0 40px rgba(226,39,63,0.4);
}

/* Enhanced scrollbar */
.sheet::-webkit-scrollbar{
  width:8px;
}
.sheet::-webkit-scrollbar-track{
  background:var(--surface);
}
.sheet::-webkit-scrollbar-thumb{
  background:var(--blood);
  border-radius:4px;
}
.sheet::-webkit-scrollbar-thumb:hover{
  background:var(--blood-bright);
}

/* Page transition effect */
.page-transition{
  animation: page-fade-in 0.5s var(--ease);
}
@keyframes page-fade-in{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Enhanced mori card hover */
.mori-card{
  position:relative;
  overflow:hidden;
}
.mori-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, transparent 40%, rgba(139,0,0,0.3) 100%);
  opacity:0;
  transition:opacity .3s;
}
.mori-card:hover::before{
  opacity:1;
}

/* Vignette pulse on detail view */
.sheet:hover .vignette{
  animation: vignette-pulse 4s ease-in-out infinite;
}
@keyframes vignette-pulse{
  0%,100%{ opacity:0.85; }
  50%{ opacity:0.95; }
}

/* ==================== ENHANCED HORROR CSS EFFECTS ==================== */

/* 1. Blood drip text effect */
.blood-text{
  color:var(--blood);
  text-shadow:0 0 10px var(--blood), 0 0 20px var(--blood-bright);
  animation: blood-drip-text 3s ease-in-out infinite;
}


/* 2. Shaking effect on hover */
.shake-hover:hover{
  animation: shake 0.5s ease-in-out;
}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  10%,30%,50%,70%,90%{ transform:translateX(-2px); }
  20%,40%,60%,80%{ transform:translateX(2px); }
}

/* 3. Pulse glow effect */
.pulse-glow{
  animation: pulse-glow-anim 2s ease-in-out infinite;
}
@keyframes pulse-glow-anim{
  0%,100%{ box-shadow:0 0 5px var(--blood-bright); }
  50%{ box-shadow:0 0 20px var(--blood-bright), 0 0 30px var(--blood); }
}

/* 4. Fade in up animation */
.fade-in-up{
  animation: fadeInUp 0.6s ease-out forwards;
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}

/* 5. Fade in down animation */
.fade-in-down{
  animation: fadeInDown 0.6s ease-out forwards;
}
@keyframes fadeInDown{
  from{ opacity:0; transform:translateY(-30px); }
  to{ opacity:1; transform:translateY(0); }
}

/* 6. Scale in animation */
.scale-in{
  animation: scaleIn 0.5s ease-out forwards;
}
@keyframes scaleIn{
  from{ opacity:0; transform:scale(0.8); }
  to{ opacity:1; transform:scale(1); }
}

/* 7. Rotate in animation */
.rotate-in{
  animation: rotateIn 0.6s ease-out forwards;
}
@keyframes rotateIn{
  from{ opacity:0; transform:rotate(-180deg) scale(0.5); }
  to{ opacity:1; transform:rotate(0) scale(1); }
}

/* 8. Bounce effect */
.bounce{
  animation: bounce 1s ease infinite;
}
@keyframes bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

/* 9. Swing effect */
.swing{
  animation: swing 2s ease-in-out infinite;
}
@keyframes swing{
  0%,100%{ transform:rotate(0deg); }
  25%{ transform:rotate(5deg); }
  75%{ transform:rotate(-5deg); }
}

/* 10. Wobble effect */
.wobble{
  animation: wobble 1s ease-in-out infinite;
}
@keyframes wobble{
  0%,100%{ transform:translateX(0); }
  15%{ transform:translateX(-10px) rotate(-5deg); }
  30%{ transform:translateX(8px) rotate(3deg); }
  45%{ transform:translateX(-6px) rotate(-3deg); }
  60%{ transform:translateX(4px) rotate(2deg); }
  75%{ transform:translateX(-2px) rotate(-1deg); }
}

/* 11. Float effect */
.float{
  animation: float 3s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-20px); }
}

/* 12. Sink effect */
.sink{
  animation: sink 3s ease-in-out infinite;
}
@keyframes sink{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(20px); }
}

/* 13. Flash effect */
.flash{
  animation: flash 1s ease-in-out infinite;
}
@keyframes flash{
  0%,50%,100%{ opacity:1; }
  25%,75%{ opacity:0.3; }
}

/* 14. Blink effect */
.blink{
  animation: blink 1.5s step-end infinite;
}
@keyframes blink{
  0%,100%{ opacity:1; }
  50%{ opacity:0; }
}

/* 15. Glow pulse */
.glow-pulse{
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ filter:drop-shadow(0 0 5px var(--blood-bright)); }
  50%{ filter:drop-shadow(0 0 20px var(--blood-bright)) drop-shadow(0 0 30px var(--blood)); }
}

/* 16. Neon flicker */
.neon-flicker{
  animation: neonFlicker 3s infinite;
}
@keyframes neonFlicker{
  0%,19%,21%,23%,25%,54%,56%,100%{ text-shadow:0 0 5px var(--blood-bright), 0 0 10px var(--blood-bright), 0 0 20px var(--blood); opacity:1; }
  20%,24%,55%{ text-shadow:none; opacity:0.5; }
}

/* 17. Horror glitch text */
.horror-glitch{
  position:relative;
}
.horror-glitch::before,
.horror-glitch::after{
  content:attr(data-text);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.horror-glitch::before{
  left:2px;
  text-shadow:-2px 0 var(--blood);
  clip:rect(24px, 550px, 90px, 0);
  animation: glitch-1 2s infinite linear alternate-reverse;
}
.horror-glitch::after{
  left:-2px;
  text-shadow:2px 0 var(--fog);
  clip:rect(85px, 550px, 140px, 0);
  animation: glitch-2 2s infinite linear alternate-reverse;
}
@keyframes glitch-1{
  0%{ clip:rect(20px, 9999px, 10px, 0); }
  20%{ clip:rect(60px, 9999px, 80px, 0); }
  40%{ clip:rect(30px, 9999px, 50px, 0); }
  60%{ clip:rect(90px, 9999px, 20px, 0); }
  80%{ clip:rect(10px, 9999px, 70px, 0); }
  100%{ clip:rect(50px, 9999px, 40px, 0); }
}
@keyframes glitch-2{
  0%{ clip:rect(80px, 9999px, 30px, 0); }
  20%{ clip:rect(10px, 9999px, 60px, 0); }
  40%{ clip:rect(70px, 9999px, 20px, 0); }
  60%{ clip:rect(30px, 9999px, 90px, 0); }
  80%{ clip:rect(50px, 9999px, 10px, 0); }
  100%{ clip:rect(20px, 9999px, 80px, 0); }
}

/* 18. Blood smear effect */
.blood-smear{
  position:relative;
  overflow:hidden;
}
.blood-smear::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(156,20,40,0.3), transparent);
  animation: bloodSmear 3s ease-in-out infinite;
}
@keyframes bloodSmear{
  0%{ left:-100%; }
  50%,100%{ left:100%; }
}

/* 19. Fog reveal effect */
.fog-reveal{
  position:relative;
  overflow:hidden;
}
.fog-reveal::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, transparent 30%, rgba(93,113,118,0.8) 100%);
  animation: fogReveal 4s ease-in-out infinite;
}
@keyframes fogReveal{
  0%,100%{ opacity:0.3; }
  50%{ opacity:0.7; }
}

/* 20. Entity whisper effect */
.entity-whisper{
  animation: entityWhisper 5s ease-in-out infinite;
}
@keyframes entityWhisper{
  0%,100%{ filter:blur(0px); opacity:1; }
  50%{ filter:blur(2px); opacity:0.7; }
}

/* 21. Heartbeat scale */
.heartbeat-scale{
  animation: heartbeatScale 1.5s ease-in-out infinite;
}
@keyframes heartbeatScale{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.05); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.05); }
  70%{ transform:scale(1); }
}

/* 22. Terror radius pulse */
.terror-pulse{
  animation: terrorPulse 2s ease-in-out infinite;
}
@keyframes terrorPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(226,39,63,0.7); }
  50%{ box-shadow:0 0 0 20px rgba(226,39,63,0); }
}

/* 23. Scratch reveal on hover */
.scratch-reveal-hover{
  position:relative;
  overflow:hidden;
}
.scratch-reveal-hover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(45deg, transparent 48%, rgba(139,0,0,0.3) 49%, rgba(139,0,0,0.3) 51%, transparent 52%);
  background-size:30px 30px;
  opacity:0;
  transition:opacity 0.3s;
}
.scratch-reveal-hover:hover::after{
  opacity:1;
  animation: scratchMove 0.3s linear infinite;
}
@keyframes scratchMove{
  0%{ background-position:0 0; }
  100%{ background-position:30px 30px; }
}

/* 24. Blood pool effect */
.blood-pool{
  position:relative;
}
.blood-pool::before{
  content:"";
  position:absolute;
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:10px;
  background:radial-gradient(ellipse, rgba(156,20,40,0.4) 0%, transparent 70%);
  filter:blur(5px);
  animation: bloodPool 3s ease-in-out infinite;
}
@keyframes bloodPool{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:0.4; }
  50%{ transform:translateX(-50%) scale(1.2); opacity:0.6; }
}

/* 25. Shadow creep effect */
.shadow-creep{
  position:relative;
}
.shadow-creep::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:20px;
  background:linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  animation: shadowCreep 4s ease-in-out infinite;
}
@keyframes shadowCreep{
  0%,100%{ height:20px; opacity:0.5; }
  50%{ height:40px; opacity:0.8; }
}

/* 26. Candle flicker */
.candle-flicker{
  animation: candleFlicker 0.5s ease-in-out infinite alternate;
}
@keyframes candleFlicker{
  0%{ opacity:0.9; transform:scale(1); }
  25%{ opacity:1; transform:scale(1.02); }
  50%{ opacity:0.85; transform:scale(0.98); }
  75%{ opacity:0.95; transform:scale(1.01); }
  100%{ opacity:0.9; transform:scale(1); }
}

/* 27. Ghost fade */
.ghost-fade{
  animation: ghostFade 4s ease-in-out infinite;
}
@keyframes ghostFade{
  0%,100%{ opacity:0.6; filter:blur(1px); }
  50%{ opacity:0.9; filter:blur(0px); }
}

/* 28. Phantom shift */
.phantom-shift{
  animation: phantomShift 6s ease-in-out infinite;
}
@keyframes phantomShift{
  0%,100%{ transform:translateX(0); opacity:0.7; }
  25%{ transform:translateX(-5px); opacity:0.5; }
  75%{ transform:translateX(5px); opacity:0.5; }
}

/* 29. Nightmare shake */
.nightmare-shake{
  animation: nightmareShake 0.3s ease-in-out infinite;
}
@keyframes nightmareShake{
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-1px,-1px); }
  20%{ transform:translate(1px,1px); }
  30%{ transform:translate(-1px,1px); }
  40%{ transform:translate(1px,-1px); }
  50%{ transform:translate(-1px,0); }
  60%{ transform:translate(1px,0); }
  70%{ transform:translate(0,-1px); }
  80%{ transform:translate(0,1px); }
  90%{ transform:translate(0,0); }
}

/* 30. Blood drip border */


@keyframes borderDrip{
  0%{ height:0; top:-2px; }
  50%{ height:15px; top:-2px; }
  100%{ height:0; top:13px; }
}

/* 31. Entity gaze */
.entity-gaze{
  animation: entityGaze 5s ease-in-out infinite;
}
@keyframes entityGaze{
  0%,100%{ box-shadow:inset 0 0 50px rgba(92,58,102,0.2); }
  50%{ box-shadow:inset 0 0 100px rgba(92,58,102,0.5); }
}

/* 32. Fog drift */
.fog-drift{
  animation: fogDrift 10s linear infinite;
}
@keyframes fogDrift{
  0%{ background-position:0 0; }
  100%{ background-position:1000px 0; }
}

/* 33. Blood splatter burst */
.blood-burst:hover{
  animation: bloodBurst 0.5s ease-out;
}
@keyframes bloodBurst{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}

/* 34. Horror zoom */
.horror-zoom:hover{
  animation: horrorZoom 0.3s ease-out;
}
@keyframes horrorZoom{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}

/* 35. Darken on hover */
.darken-hover:hover{
  filter:brightness(0.7);
  transition:filter 0.3s;
}

/* 36. Red tint on hover */
.red-tint-hover:hover{
  filter:sepia(1) saturate(3) hue-rotate(-50deg);
  transition:filter 0.3s;
}

/* 37. Invert on hover */
.invert-hover:hover{
  filter:invert(1);
  transition:filter 0.3s;
}

/* 38. Grayscale to color */
.gray-to-color{
  filter:grayscale(1);
  transition:filter 0.5s;
}
.gray-to-color:hover{
  filter:grayscale(0);
}

/* 39. Blur to sharp */
.blur-to-sharp{
  filter:blur(5px);
  transition:filter 0.5s;
}
.blur-to-sharp:hover{
  filter:blur(0);
}

/* 40. Rotate hover */
.rotate-hover:hover{
  transform:rotate(5deg);
  transition:transform 0.3s;
}

/* 41. Skew hover */
.skew-hover:hover{
  transform:skewX(-5deg);
  transition:transform 0.3s;
}

/* 42. Flip horizontal */
.flip-horizontal:hover{
  transform:scaleX(-1);
  transition:transform 0.5s;
}

/* 43. Flip vertical */
.flip-vertical:hover{
  transform:scaleY(-1);
  transition:transform 0.5s;
}

/* 44. 3D rotate */
.rotate-3d:hover{
  transform:rotateY(180deg);
  transition:transform 0.8s;
  transform-style:preserve-3d;
}

/* 45. Perspective tilt */
.perspective-tilt{
  perspective:1000px;
}
.perspective-tilt:hover{
  transform:rotateX(10deg) rotateY(10deg);
  transition:transform 0.3s;
}

/* 46. Elastic bounce */
.elastic-bounce:hover{
  animation: elasticBounce 0.8s ease;
}
@keyframes elasticBounce{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.25); }
  50%{ transform:scale(0.9); }
  70%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}

/* 47. Jello effect */
.jello:hover{
  animation: jello 0.9s both;
}
@keyframes jello{
  0%{ transform:scale3d(1,1,1); }
  30%{ transform:scale3d(1.25,0.75,1); }
  40%{ transform:scale3d(0.75,1.25,1); }
  50%{ transform:scale3d(1.15,0.85,1); }
  65%{ transform:scale3d(0.95,1.05,1); }
  75%{ transform:scale3d(1.05,0.95,1); }
  100%{ transform:scale3d(1,1,1); }
}

/* 48. Rubber band */
.rubber-band:hover{
  animation: rubberBand 1s;
}
@keyframes rubberBand{
  0%{ transform:scale3d(1,1,1); }
  30%{ transform:scale3d(1.25,0.75,1); }
  40%{ transform:scale3d(0.75,1.25,1); }
  50%{ transform:scale3d(1.15,0.85,1); }
  65%{ transform:scale3d(0.95,1.05,1); }
  75%{ transform:scale3d(1.05,0.95,1); }
  100%{ transform:scale3d(1,1,1); }
}

/* 49. Heartbeat icon */
.heartbeat-icon{
  animation: heartbeatIcon 1.5s ease-in-out infinite;
}
@keyframes heartbeatIcon{
  0%{ transform:scale(1); }
  14%{ transform:scale(1.3); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.3); }
  70%{ transform:scale(1); }
}

/* 50. Pulse ring */
.pulse-ring{
  position:relative;
}
.pulse-ring::before{
  content:"";
  position:absolute;
  inset:-10px;
  border:2px solid var(--blood);
  border-radius:inherit;
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{
  0%{ transform:scale(0.8); opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}

/* 51. Ripple effect */
.ripple{
  position:relative;
  overflow:hidden;
}
.ripple::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  pointer-events:none;
  background-image:radial-gradient(circle, var(--blood-bright) 10%, transparent 10.01%);
  background-repeat:no-repeat;
  background-position:50%;
  transform:scale(10,10);
  opacity:0;
  transition:opacity 0.5s, transform 0.5s;
}
.ripple:active::after{
  transform:scale(0,0);
  opacity:0.3;
  transition:0s;
}

/* 52. Underline expand */
.underline-expand{
  position:relative;
}
.underline-expand::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:var(--blood-bright);
  transition:width 0.3s;
}
.underline-expand:hover::after{
  width:100%;
}

/* 53. Overline expand */
.overline-expand{
  position:relative;
}
.overline-expand::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:2px;
  background:var(--blood-bright);
  transition:width 0.3s;
}
.overline-expand:hover::before{
  width:100%;
}

/* 54. Border glow */
.border-glow{
  transition:border-color 0.3s, box-shadow 0.3s;
}
.border-glow:hover{
  border-color:var(--blood-bright);
  box-shadow:0 0 15px var(--blood-bright);
}

/* 55. Text glow */
.text-glow{
  transition:text-shadow 0.3s;
}
.text-glow:hover{
  text-shadow:0 0 10px var(--blood-bright), 0 0 20px var(--blood);
}

/* 56. Background shift */
.bg-shift{
  transition:background 0.5s;
}
.bg-shift:hover{
  background:var(--raised-2);
}

/* 57. Color cycle */
.color-cycle{
  animation: colorCycle 5s linear infinite;
}
@keyframes colorCycle{
  0%{ color:var(--bone); }
  25%{ color:var(--blood-bright); }
  50%{ color:var(--gold); }
  75%{ color:var(--fog); }
  100%{ color:var(--bone); }
}

/* 58. Hue rotate */
.hue-rotate{
  animation: hueRotate 10s linear infinite;
}
@keyframes hueRotate{
  0%{ filter:hue-rotate(0deg); }
  100%{ filter:hue-rotate(360deg); }
}

/* 59. Saturate pulse */
.saturate-pulse{
  animation: saturatePulse 3s ease-in-out infinite;
}
@keyframes saturatePulse{
  0%,100%{ filter:saturate(1); }
  50%{ filter:saturate(1.5); }
}

/* 60. Contrast pulse */
.contrast-pulse{
  animation: contrastPulse 3s ease-in-out infinite;
}
@keyframes contrastPulse{
  0%,100%{ filter:contrast(1); }
  50%{ filter:contrast(1.3); }
}

/* 61. Brightness pulse */
.brightness-pulse{
  animation: brightnessPulse 4s ease-in-out infinite;
}
@keyframes brightnessPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.2); }
}

/* 62. Sepia fade */
.sepia-fade{
  animation: sepiaFade 5s ease-in-out infinite;
}
@keyframes sepiaFade{
  0%,100%{ filter:sepia(0); }
  50%{ filter:sepia(0.5); }
}

/* 63. Blur pulse */
.blur-pulse{
  animation: blurPulse 4s ease-in-out infinite;
}
@keyframes blurPulse{
  0%,100%{ filter:blur(0); }
  50%{ filter:blur(2px); }
}

/* 64. Drop shadow pulse */
.shadow-pulse{
  animation: shadowPulse 2s ease-in-out infinite;
}
@keyframes shadowPulse{
  0%,100%{ box-shadow:0 5px 15px rgba(0,0,0,0.3); }
  50%{ box-shadow:0 10px 30px rgba(226,39,63,0.5); }
}

/* 65. Inner shadow pulse */
.inner-shadow-pulse{
  animation: innerShadowPulse 3s ease-in-out infinite;
}
@keyframes innerShadowPulse{
  0%,100%{ box-shadow:inset 0 0 10px rgba(0,0,0,0.5); }
  50%{ box-shadow:inset 0 0 20px rgba(226,39,63,0.3); }
}

/* 66. Text stroke */
.text-stroke{
  -webkit-text-stroke:1px var(--blood);
  color:transparent;
  transition:all 0.3s;
}
.text-stroke:hover{
  -webkit-text-stroke:0;
  color:var(--bone);
}

/* 67. Text fill */
.text-fill{
  background:linear-gradient(90deg, var(--bone), var(--blood-bright));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:all 0.3s;
}
.text-fill:hover{
  background:none;
  color:var(--bone);
}

/* 68. Letter spacing pulse */
.letter-pulse{
  animation: letterPulse 2s ease-in-out infinite;
}
@keyframes letterPulse{
  0%,100%{ letter-spacing:normal; }
  50%{ letter-spacing:0.1em; }
}

/* 69. Word spacing pulse */
.word-pulse{
  animation: wordPulse 2s ease-in-out infinite;
}
@keyframes wordPulse{
  0%,100%{ word-spacing:normal; }
  50%{ word-spacing:0.3em; }
}

/* 70. Line height pulse */
.line-pulse{
  animation: linePulse 3s ease-in-out infinite;
}
@keyframes linePulse{
  0%,100%{ line-height:normal; }
  50%{ line-height:1.8; }
}

/* 71. Font size pulse */
.font-pulse{
  animation: fontPulse 4s ease-in-out infinite;
}
@keyframes fontPulse{
  0%,100%{ font-size:1em; }
  50%{ font-size:1.1em; }
}

/* 72. Font weight pulse */
.weight-pulse{
  animation: weightPulse 3s ease-in-out infinite;
}
@keyframes weightPulse{
  0%,100%{ font-weight:400; }
  50%{ font-weight:700; }
}

/* 73. Opacity pulse */
.opacity-pulse{
  animation: opacityPulse 2s ease-in-out infinite;
}
@keyframes opacityPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.5; }
}

/* 74. Visibility blink */
.visibility-blink{
  animation: visibilityBlink 1s step-end infinite;
}
@keyframes visibilityBlink{
  0%,100%{ visibility:visible; }
  50%{ visibility:hidden; }
}

/* 75. Z-index lift */
.z-lift:hover{
  z-index:100;
  transform:scale(1.05);
  transition:all 0.3s;
}

/* 76. Cursor pointer */
.cursor-pointer{
  cursor:pointer;
}

/* 77. Cursor crosshair */
.cursor-crosshair{
  cursor:crosshair;
}

/* 78. Cursor not-allowed */
.cursor-not-allowed{
  cursor:not-allowed;
}

/* 79. Cursor help */
.cursor-help{
  cursor:help;
}

/* 80. Cursor wait */
.cursor-wait{
  cursor:wait;
}

/* 81. User select none */
.user-select-none{
  -webkit-user-select:none; user-select:none;
}

/* 82. User select all */
.user-select-all{
  -webkit-user-select:all; user-select:all;
}

/* 83. User select text */
.user-select-text{
  -webkit-user-select:text; user-select:text;
}

/* 84. Pointer events none */
.pointer-none{
  pointer-events:none;
}

/* 85. Pointer events auto */
.pointer-auto{
  pointer-events:auto;
}

/* 86. Touch action manipulation */
.touch-manipulation{
  touch-action:manipulation;
}

/* 87. Touch action none */
.touch-none{
  touch-action:none;
}

/* 88. Will change transform */
.will-transform{
  will-change:transform;
}

/* 89. Will change opacity */
.will-opacity{
  will-change:opacity;
}

/* 90. Backface visible */
.backface-visible{
  backface-visibility:visible;
}

/* 91. Backface hidden */
.backface-hidden{
  backface-visibility:hidden;
}

/* 92. Perspective origin */
.perspective-origin{
  perspective-origin:center;
}

/* 93. Transform origin center */
.transform-center{
  transform-origin:center;
}

/* 94. Transform origin top */
.transform-top{
  transform-origin:top;
}

/* 95. Transform origin bottom */
.transform-bottom{
  transform-origin:bottom;
}

/* 96. Transform origin left */
.transform-left{
  transform-origin:left;
}

/* 97. Transform origin right */
.transform-right{
  transform-origin:right;
}

/* 98. Overflow hidden */
.overflow-hidden{
  overflow:hidden;
}

/* 99. Overflow visible */
.overflow-visible{
  overflow:visible;
}

/* 100. Overflow scroll */
.overflow-scroll{
  overflow:scroll;
}

/* 101. Overflow auto */
.overflow-auto{
  overflow:auto;
}

/* 102. Position relative */
.pos-relative{
  position:relative;
}

/* 103. Position absolute */
.pos-absolute{
  position:absolute;
}

/* 104. Position fixed */
.pos-fixed{
  position:fixed;
}

/* 105. Position sticky */
.pos-sticky{
  position:sticky;
}

/* 106. Display flex */
.display-flex{
  display:flex;
}

/* 107. Display grid */
.display-grid{
  display:grid;
}

/* 108. Display block */
.display-block{
  display:block;
}

/* 109. Display inline */
.display-inline{
  display:inline;
}

/* 110. Display inline-block */
.display-inline-block{
  display:inline-block;
}

/* 111. Display none */
.display-none{
  display:none;
}

/* 112. Flex direction column */
.flex-col{
  flex-direction:column;
}

/* 113. Flex direction row */
.flex-row{
  flex-direction:row;
}

/* 114. Flex wrap */
.flex-wrap{
  flex-wrap:wrap;
}

/* 115. Flex nowrap */
.flex-nowrap{
  flex-wrap:nowrap;
}

/* 116. Justify center */
.justify-center{
  justify-content:center;
}

/* 117. Justify start */
.justify-start{
  justify-content:flex-start;
}

/* 118. Justify end */
.justify-end{
  justify-content:flex-end;
}

/* 119. Justify between */
.justify-between{
  justify-content:space-between;
}

/* 120. Justify around */
.justify-around{
  justify-content:space-around;
}

/* 121. Align center */
.align-center{
  align-items:center;
}

/* 122. Align start */
.align-start{
  align-items:flex-start;
}

/* 123. Align end */
.align-end{
  align-items:flex-end;
}

/* 124. Align stretch */
.align-stretch{
  align-items:stretch;
}

/* 125. Grid center */
.grid-center{
  place-items:center;
}

/* 126. Grid gap */
.grid-gap{
  gap:1rem;
}

/* 127. Grid gap small */
.grid-gap-sm{
  gap:0.5rem;
}

/* 128. Grid gap large */
.grid-gap-lg{
  gap:2rem;
}

/* 129. Margin auto */
.margin-auto{
  margin:auto;
}

/* 130. Margin 0 */
.margin-0{
  margin:0;
}

/* 131. Margin small */
.margin-sm{
  margin:0.5rem;
}

/* 132. Margin medium */
.margin-md{
  margin:1rem;
}

/* 133. Margin large */
.margin-lg{
  margin:2rem;
}

/* 134. Padding 0 */
.padding-0{
  padding:0;
}

/* 135. Padding small */
.padding-sm{
  padding:0.5rem;
}

/* 136. Padding medium */
.padding-md{
  padding:1rem;
}

/* 137. Padding large */
.padding-lg{
  padding:2rem;
}

/* 138. Width 100 */
.width-100{
  width:100%;
}

/* 139. Height 100 */
.height-100{
  height:100%;
}

/* 140. Min width 100 */
.min-width-100{
  min-width:100%;
}

/* 141. Min height 100 */
.min-height-100{
  min-height:100%;
}

/* 142. Max width 100 */
.max-width-100{
  max-width:100%;
}

/* 143. Max height 100 */
.max-height-100{
  max-height:100%;
}

/* 144. Text center */
.text-center{
  text-align:center;
}

/* 145. Text left */
.text-left{
  text-align:left;
}

/* 146. Text right */
.text-right{
  text-align:right;
}

/* 147. Text justify */
.text-justify{
  text-align:justify;
}

/* 148. Font bold */
.font-bold{
  font-weight:700;
}

/* 149. Font normal */
.font-normal{
  font-weight:400;
}

/* 150. Font italic */
.font-italic{
  font-style:italic;
}

/* 151. Uppercase */
.uppercase{
  text-transform:uppercase;
}

/* 152. Lowercase */
.lowercase{
  text-transform:lowercase;
}

/* 153. Capitalize */
.capitalize{
  text-transform:capitalize;
}

/* 154. Truncate */
.truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 155. Line clamp 2 */
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 156. Line clamp 3 */
.line-clamp-3{
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 157. No wrap */
.no-wrap{
  white-space:nowrap;
}

/* 158. Break words */
.break-words{
  word-wrap:break-word;
}

/* 159. Break all */
.break-all{
  word-break:break-all;
}

/* 160. Round */
.round{
  border-radius:50%;
}

/* 161. Round small */
.round-sm{
  border-radius:0.25rem;
}

/* 162. Round medium */
.round-md{
  border-radius:0.5rem;
}

/* 163. Round large */
.round-lg{
  border-radius:1rem;
}

/* 164. Shadow small */
.shadow-sm{
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
}

/* 165. Shadow medium */
.shadow-md{
  box-shadow:0 4px 6px rgba(0,0,0,0.2);
}

/* 166. Shadow large */
.shadow-lg{
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

/* 167. Shadow none */
.shadow-none{
  box-shadow:none;
}

/* 168. Border solid */
.border-solid{
  border-style:solid;
}

/* 169. Border dashed */
.border-dashed{
  border-style:dashed;
}

/* 170. Border dotted */
.border-dotted{
  border-style:dotted;
}

/* 171. Border none */
.border-none{
  border:none;
}

/* 172. Border 0 */
.border-0{
  border-width:0;
}

/* 173. Border 1 */
.border-1{
  border-width:1px;
}

/* 174. Border 2 */
.border-2{
  border-width:2px;
}

/* ============================================================
   HORROR CSS EFFECTS - 200 EFFECTS IN 50 BATCHES
   ============================================================ */

/* Batch 1: Blood drip animation */




/* Batch 1: Flickering neon text */
.flicker-neon{
  animation: flicker-neon-anim 3s ease-in-out infinite;
}
@keyframes flicker-neon-anim{
  0%,100%{ opacity:1; }
  92%{ opacity:1; }
  93%{ opacity:0.8; }
  94%{ opacity:1; }
  96%{ opacity:0.9; }
  97%{ opacity:1; }
}

/* Batch 1: Glitch text effect */
.glitch-text{
  position:relative;
  animation: glitch-anim 2s infinite;
}
@keyframes glitch-anim{
  0%,100%{ transform:translate(0); }
  20%{ transform:translate(-2px,2px); }
  40%{ transform:translate(-2px,-2px); }
  60%{ transform:translate(2px,2px); }
  80%{ transform:translate(2px,-2px); }
}

/* Batch 1: Smoke/fog overlay */
.smoke-overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(45deg, rgba(93,113,119,0.1), transparent, rgba(93,113,119,0.1));
  animation: smoke-drift 20s linear infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes smoke-drift{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}

/* Batch 2: Heartbeat pulse */
.heartbeat-pulse{
  animation: heartbeat-anim 1.5s ease-in-out infinite;
}
@keyframes heartbeat-anim{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.05); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.05); }
  70%{ transform:scale(1); }
}

/* Batch 2: Scratch marks reveal */
.scratch-marks{
  position:relative;
}
.scratch-marks::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(226,39,63,0.1) 10px, rgba(226,39,63,0.1) 11px);
  animation: scratch-reveal 8s ease-in-out infinite;
}
@keyframes scratch-reveal{
  0%,100%{ opacity:0; }
  50%{ opacity:1; }
}

/* Batch 2: Vignette breathing */
.vignette-breathe{
  position:fixed;
  inset:0;
  box-shadow:inset 0 0 30vw rgba(0,0,0,0.85);
  animation: vignette-breathe-anim 6s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes vignette-breathe-anim{
  0%,100%{ box-shadow:inset 0 0 30vw rgba(0,0,0,0.85); }
  50%{ box-shadow:inset 0 0 40vw rgba(0,0,0,0.95); }
}

/* Batch 2: Film grain noise */
.film-grain{
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)' opacity='0.4'/></svg>");
  opacity:0.05;
  animation: grain-shift 0.5s steps(5) infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes grain-shift{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-5%,5%); }
  50%{ transform:translate(5%,5%); }
  75%{ transform:translate(5%,-5%); }
  100%{ transform:translate(0,0); }
}

/* Batch 3: Shadow elongation */
.shadow-elongate{
  transition:box-shadow 0.3s;
}
.shadow-elongate:hover{
  box-shadow:0 20px 40px rgba(0,0,0,0.6);
}

/* Batch 3: Blood splatter on hover */
.blood-splatter:hover{
  position:relative;
}
.blood-splatter:hover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(226,39,63,0.3), transparent 70%);
  animation: splatter-burst 0.5s ease-out;
}
@keyframes splatter-burst{
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(2); opacity:0; }
}

/* Batch 3: Ghost trail effect */
.ghost-trail{
  position:relative;
}
.ghost-trail::before,
.ghost-trail::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacity 0.3s;
}
.ghost-trail:hover::before{
  opacity:0.3;
  transform:translateX(-3px);
  transition-delay:0.05s;
}
.ghost-trail:hover::after{
  opacity:0.3;
  transform:translateX(-6px);
  transition-delay:0.1s;
}

/* Batch 3: Typewriter horror */
.typewriter-horror{
  overflow:hidden;
  border-right:2px solid var(--blood);
  white-space:nowrap;
  animation: typing 3s steps(40) forwards, blink 0.75s step-end infinite;
}
@keyframes typing{
  from{ width:0; }
  to{ width:100%; }
}
@keyframes blink{
  50%{ border-color:transparent; }
}

/* Batch 4: Entity purple glow */
.entity-glow{
  box-shadow:0 0 20px rgba(106,63,116,0.4);
  animation: entity-pulse 4s ease-in-out infinite;
}
@keyframes entity-pulse{
  0%,100%{ box-shadow:0 0 20px rgba(106,63,116,0.4); }
  50%{ box-shadow:0 0 40px rgba(106,63,116,0.7); }
}

/* Batch 4: Fog drift */
.fog-drift{
  background:linear-gradient(90deg, transparent, rgba(93,113,119,0.2), transparent);
  background-size:200% 100%;
  animation: fog-move 15s linear infinite;
}
@keyframes fog-move{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* Batch 4: Static interference */
.static-interference{
  position:relative;
}
.static-interference::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
  animation: static-flicker 0.1s steps(2) infinite;
  pointer-events:none;
}
@keyframes static-flicker{
  0%,100%{ opacity:0.3; }
  50%{ opacity:0.5; }
}

/* Batch 4: Breathing border */
.breathing-border{
  border:1px solid var(--blood);
  animation: border-breathe 3s ease-in-out infinite;
}
@keyframes border-breathe{
  0%,100%{ border-width:1px; }
  50%{ border-width:2px; }
}

/* Batch 5: Shake on hover */
.shake-hover:hover{
  animation: shake-anim 0.5s ease-in-out;
}
@keyframes shake-anim{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

/* Batch 5: Invert colors flash */
.invert-flash:hover{
  animation: invert-anim 0.3s ease-in-out;
}
@keyframes invert-anim{
  0%,100%{ filter:invert(0); }
  50%{ filter:invert(1); }
}

/* Batch 5: Blur focus effect */
.blur-focus{
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  transition:backdrop-filter 0.3s;
}
.blur-focus:hover{
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}

/* Batch 5: Red flash transition */
.red-flash{
  animation: red-flash-anim 5s ease-in-out infinite;
}
@keyframes red-flash-anim{
  0%,95%,100%{ background-color:transparent; }
  96%{ background-color:rgba(226,39,63,0.3); }
  97%{ background-color:transparent; }
}

/* Batch 6: Floating particles */
.floating-particles{
  position:relative;
  overflow:hidden;
}
.floating-particles::before{
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  background:rgba(226,39,63,0.5);
  border-radius:50%;
  animation: particle-float 10s linear infinite;
  box-shadow:20px 30px 0 rgba(226,39,63,0.3), -20px 60px 0 rgba(226,39,63,0.4), 40px 90px 0 rgba(226,39,63,0.2);
}
@keyframes particle-float{
  0%{ transform:translateY(100vh) rotate(0deg); }
  100%{ transform:translateY(-100vh) rotate(360deg); }
}

/* Batch 6: Text shadow creep */
.text-shadow-creep{
  text-shadow:2px 2px 4px rgba(0,0,0,0.5);
  animation: shadow-creep 4s ease-in-out infinite;
}
@keyframes shadow-creep{
  0%,100%{ text-shadow:2px 2px 4px rgba(0,0,0,0.5); }
  50%{ text-shadow:4px 4px 8px rgba(226,39,63,0.5); }
}

/* Batch 6: Border glow pulse */
.border-glow-pulse{
  border:1px solid var(--blood);
  animation: border-glow 3s ease-in-out infinite;
}
@keyframes border-glow{
  0%,100%{ box-shadow:0 0 5px rgba(226,39,63,0.3); }
  50%{ box-shadow:0 0 20px rgba(226,39,63,0.6); }
}

/* Batch 6: Skew tilt effect */
.skew-tilt:hover{
  transform:skewX(-2deg) skewY(1deg);
  transition:transform 0.3s;
}

/* Batch 7: Fade to black */
.fade-black{
  animation: fade-to-black 8s ease-in-out infinite;
}
@keyframes fade-to-black{
  0%,90%,100%{ background-color:var(--void); }
  95%{ background-color:#000; }
}

/* Batch 7: Blood seep */
.blood-seep{
  position:relative;
  overflow:hidden;
}
.blood-seep::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(180deg, transparent, rgba(226,39,63,0.3));
  animation: blood-seep-anim 6s ease-in-out infinite;
}
@keyframes blood-seep-anim{
  0%,100%{ height:0; }
  50%{ height:30%; }
}

/* Batch 7: Lightning flash */
.lightning-flash{
  animation: lightning-anim 10s ease-in-out infinite;
}
@keyframes lightning-anim{
  0%,89%,91%,93%,95%,100%{ filter:brightness(1); }
  90%,92%,94%{ filter:brightness(2); }
}

/* Batch 7: Mirror crack */
.mirror-crack{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: crack-anim 8s ease-in-out infinite;
}
@keyframes crack-anim{
  0%,95%,100%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  96%{ clip-path:polygon(0 0, 52% 0, 48% 100%, 0 100%); }
  97%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Batch 8: Whisper text */
.whisper-text{
  opacity:0.7;
  animation: whisper-anim 4s ease-in-out infinite;
}
@keyframes whisper-anim{
  0%,100%{ opacity:0.7; filter:blur(0px); }
  50%{ opacity:0.4; filter:blur(1px); }
}

/* Batch 8: Creepy crawl */
.creepy-crawl{
  background-image:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(226,39,63,0.05) 10px, rgba(226,39,63,0.05) 20px);
  background-size:40px 40px;
  animation: crawl-anim 20s linear infinite;
}
@keyframes crawl-anim{
  0%{ background-position:0 0; }
  100%{ background-position:400px 400px; }
}

/* Batch 8: Heartbeat background */
.heartbeat-bg{
  animation: heartbeat-bg-anim 1.5s ease-in-out infinite;
}
@keyframes heartbeat-bg-anim{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.02); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.02); }
  70%{ transform:scale(1); }
}

/* Batch 8: Flicker candle */
.flicker-candle{
  animation: candle-anim 0.5s ease-in-out infinite alternate;
}
@keyframes candle-anim{
  0%{ filter:brightness(0.9) contrast(1); }
  100%{ filter:brightness(1.1) contrast(1.1); }
}

/* Batch 9: Ghost fade in */
.ghost-fade-in{
  animation: ghost-fade-anim 5s ease-in-out infinite;
}
@keyframes ghost-fade-anim{
  0%,100%{ opacity:0; transform:translateY(20px); }
  50%{ opacity:0.6; transform:translateY(0); }
}

/* Batch 9: Blood drip cursor */
.blood-cursor{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='5' fill='%23e2273f'/></svg>"), auto;
}

/* Batch 9: Parallax horror */
.parallax-horror{
  transform-style:preserve-3d;
  perspective:1000px;
}
.parallax-horror > *{
  transform:translateZ(0);
  transition:transform 0.3s;
}

/* Batch 9: Distortion hover */
.distortion-hover:hover{
  transform:perspective(500px) rotateX(5deg) rotateY(5deg);
  transition:transform 0.3s;
}

/* Batch 10: Static burst */
.static-burst{
  animation: static-burst-anim 8s ease-in-out infinite;
}
@keyframes static-burst-anim{
  0%,94%,100%{ filter:none; }
  95%{ filter:contrast(1.5) brightness(1.2); }
  96%{ filter:none; }
}

/* Batch 10: Red vignette */
.red-vignette{
  position:fixed;
  inset:0;
  box-shadow:inset 0 0 50vw rgba(226,39,63,0.2);
  pointer-events:none;
  z-index:2;
}

/* Batch 10: Text scramble */
.text-scramble{
  animation: scramble-anim 0.1s steps(1) infinite;
}
@keyframes scramble-anim{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(1px); }
  50%{ transform:translateX(-1px); }
  75%{ transform:translateX(1px); }
  100%{ transform:translateX(0); }
}

/* Batch 10: Shadow monster */
.shadow-monster{
  position:relative;
}
.shadow-monster::after{
  content:"";
  position:absolute;
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:40px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.8), transparent);
  filter:blur(20px);
  animation: monster-shadow 4s ease-in-out infinite;
}

/* 175. Border 4 */
.border-4{
  border-width:4px;
}

/* 176. Background transparent */
.bg-transparent{
  background:transparent;
}

/* Batch 11: Breathing darkness */
.breathing-darkness{
  animation: breathe-dark 10s ease-in-out infinite;
}
@keyframes breathe-dark{
  0%,100%{ background-color:var(--void); }
  50%{ background-color:#050404; }
}

/* Batch 11: Flicker switch */
.flicker-switch{
  animation: switch-flicker 4s ease-in-out infinite;
}
@keyframes switch-flicker{
  0%,100%{ filter:brightness(1); }
  95%{ filter:brightness(1); }
  96%{ filter:brightness(0.2); }
  97%{ filter:brightness(1); }
  98%{ filter:brightness(0.5); }
  99%{ filter:brightness(1); }
}

/* Batch 11: Blood smear */
.blood-smear{
  position:relative;
  overflow:hidden;
}
.blood-smear::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(45deg, transparent, rgba(226,39,63,0.2), transparent);
  transform:rotate(-45deg);
  animation: smear-rotate 8s linear infinite;
}
@keyframes smear-rotate{
  0%{ transform:rotate(-45deg) translateY(-100%); }
  100%{ transform:rotate(-45deg) translateY(100%); }
}

/* Batch 11: Ghost whisper */
.ghost-whisper{
  text-shadow:0 0 10px rgba(226,39,63,0.3);
  animation: ghost-whisper-anim 6s ease-in-out infinite;
}
@keyframes ghost-whisper-anim{
  0%,100%{ text-shadow:0 0 10px rgba(226,39,63,0.3); }
  50%{ text-shadow:0 0 20px rgba(226,39,63,0.6), 0 0 30px rgba(226,39,63,0.3); }
}

/* Batch 12: Creepy crawlies */
.creepy-crawlies{
  position:relative;
  overflow:hidden;
}
.creepy-crawlies::before{
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  background:rgba(226,39,63,0.5);
  border-radius:50%;
  animation: crawlie-move 15s linear infinite;
  box-shadow:50px 100px 0 rgba(226,39,63,0.4), -30px 150px 0 rgba(226,39,63,0.3), 80px 200px 0 rgba(226,39,63,0.5);
}
@keyframes crawlie-move{
  0%{ transform:translate(0, 0); }
  25%{ transform:translate(100px, 50px); }
  50%{ transform:translate(50px, 150px); }
  75%{ transform:translate(-50px, 100px); }
  100%{ transform:translate(0, 0); }
}

/* Batch 12: Heartbeat border */
.heartbeat-border{
  border:2px solid var(--blood);
  animation: heartbeat-border-anim 1.5s ease-in-out infinite;
}
@keyframes heartbeat-border-anim{
  0%,100%{ border-width:2px; }
  14%{ border-width:3px; }
  28%{ border-width:2px; }
  42%{ border-width:3px; }
  70%{ border-width:2px; }
}

/* Batch 12: Static noise */
.static-noise{
  position:relative;
}
.static-noise::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/></svg>");
  animation: static-noise-anim 0.2s steps(4) infinite;
  pointer-events:none;
}
@keyframes static-noise-anim{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-2%,2%); }
  50%{ transform:translate(2%,2%); }
  75%{ transform:translate(2%,-2%); }
  100%{ transform:translate(0,0); }
}

/* Batch 12: Blood pool */
.blood-pool{
  position:relative;
  overflow:hidden;
}
.blood-pool::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  background:radial-gradient(circle, rgba(226,39,63,0.4), transparent 70%);
  border-radius:50%;
  animation: blood-pool-anim 8s ease-in-out infinite;
}
@keyframes blood-pool-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:200px; height:100px; }
}

/* Batch 13: Flicker neon extended */
.flicker-neon-extended{
  animation: flicker-extended 5s ease-in-out infinite;
}
@keyframes flicker-extended{
  0%,100%{ opacity:1; text-shadow:0 0 10px currentColor; }
  90%{ opacity:1; text-shadow:0 0 10px currentColor; }
  91%{ opacity:0.8; text-shadow:0 0 5px currentColor; }
  92%{ opacity:1; text-shadow:0 0 10px currentColor; }
  93%{ opacity:0.9; text-shadow:0 0 8px currentColor; }
  94%{ opacity:1; text-shadow:0 0 10px currentColor; }
  95%{ opacity:0.7; text-shadow:0 0 3px currentColor; }
  96%{ opacity:1; text-shadow:0 0 10px currentColor; }
}

/* Batch 13: Ghost trail extended */
.ghost-trail-extended{
  position:relative;
}
.ghost-trail-extended::before,
.ghost-trail-extended::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacity 0.3s, transform 0.3s;
}
.ghost-trail-extended:hover::before{
  opacity:0.4;
  transform:translateX(-4px) translateY(2px);
  transition-delay:0.05s;
}
.ghost-trail-extended:hover::after{
  opacity:0.3;
  transform:translateX(-8px) translateY(4px);
  transition-delay:0.1s;
}

/* Batch 13: Horror shake */
.horror-shake{
  animation: horror-shake-anim 0.8s ease-in-out infinite;
}
@keyframes horror-shake-anim{
  0%,100%{ transform:translate(0) rotate(0deg); }
  25%{ transform:translate(-3px, 3px) rotate(-1deg); }
  50%{ transform:translate(3px, -3px) rotate(1deg); }
  75%{ transform:translate(-3px, -3px) rotate(-1deg); }
}

/* Batch 13: Red flash extended */
.red-flash-extended{
  animation: red-flash-extended-anim 12s ease-in-out infinite;
}
@keyframes red-flash-extended-anim{
  0%,97%,100%{ background-color:transparent; }
  98%{ background-color:rgba(226,39,63,0.4); }
  99%{ background-color:transparent; }
}

/* Batch 14: Fog reveal */
.fog-reveal{
  position:relative;
  overflow:hidden;
}
.fog-reveal::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(93,113,119,0.3), transparent);
  animation: fog-reveal-anim 10s ease-in-out infinite;
}
@keyframes fog-reveal-anim{
  0%,100%{ transform:translateX(-100%); }
  50%{ transform:translateX(100%); }
}

/* Batch 14: Blood splatter multiple */
.blood-splatter-multiple:hover{
  position:relative;
}
.blood-splatter-multiple:hover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(226,39,63,0.3), transparent 50%), radial-gradient(circle at 70% 60%, rgba(226,39,63,0.2), transparent 40%);
  animation: splatter-multiple 0.6s ease-out;
}
@keyframes splatter-multiple{
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(2.5); opacity:0; }
}

/* Batch 14: Static glitch */
.static-glitch{
  animation: static-glitch-anim 6s ease-in-out infinite;
}
@keyframes static-glitch-anim{
  0%,94%,100%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  95%{ clip-path:polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
  96%{ clip-path:polygon(0 0, 100% 5%, 100% 100%, 5% 100%); }
  97%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Batch 14: Heartbeat text */
.heartbeat-text{
  animation: heartbeat-text-anim 1.5s ease-in-out infinite;
}
@keyframes heartbeat-text-anim{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.08); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.08); }
  70%{ transform:scale(1); }
}

/* Batch 15: Ghost float */
.ghost-float{
  animation: ghost-float-anim 6s ease-in-out infinite;
}
@keyframes ghost-float-anim{
  0%,100%{ transform:translateY(0); opacity:0.6; }
  50%{ transform:translateY(-15px); opacity:0.8; }
}

/* Batch 15: Blood seep extended */
.blood-seep-extended{
  position:relative;
  overflow:hidden;
}
.blood-seep-extended::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(180deg, transparent, rgba(226,39,63,0.4), rgba(226,39,63,0.2));
  animation: blood-seep-extended-anim 10s ease-in-out infinite;
}
@keyframes blood-seep-extended-anim{
  0%,100%{ height:0; }
  50%{ height:40%; }
}

/* Batch 15: Flicker light */
.flicker-light{
  animation: flicker-light-anim 3s ease-in-out infinite;
}
@keyframes flicker-light-anim{
  0%,100%{ filter:brightness(1); }
  95%{ filter:brightness(1); }
  96%{ filter:brightness(0.7); }
  97%{ filter:brightness(1.2); }
  98%{ filter:brightness(0.9); }
  99%{ filter:brightness(1); }
}

/* Batch 15: Creepy shadow */
.creepy-shadow{
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  animation: creepy-shadow-anim 5s ease-in-out infinite;
}
@keyframes creepy-shadow-anim{
  0%,100%{ box-shadow:0 10px 30px rgba(0,0,0,0.5); }
  50%{ box-shadow:0 15px 40px rgba(226,39,63,0.3); }
}

/* Batch 16: Static overlay */
.static-overlay{
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);
  animation: static-overlay-anim 0.15s steps(3) infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes static-overlay-anim{
  0%{ opacity:0.3; }
  50%{ opacity:0.5; }
  100%{ opacity:0.3; }
}

/* Batch 16: Blood drip extended */





/* Batch 16: Ghost appear */
.ghost-appear{
  animation: ghost-appear-anim 8s ease-in-out infinite;
}
@keyframes ghost-appear-anim{
  0%,100%{ opacity:0; transform:scale(0.9); }
  50%{ opacity:0.7; transform:scale(1); }
}

/* Batch 16: Horror pulse */
.horror-pulse{
  animation: horror-pulse-anim 4s ease-in-out infinite;
}
@keyframes horror-pulse-anim{
  0%,100%{ box-shadow:0 0 10px rgba(226,39,63,0.3); }
  50%{ box-shadow:0 0 30px rgba(226,39,63,0.6), 0 0 50px rgba(226,39,63,0.3); }
}

/* Batch 17: Flicker candle extended */
.flicker-candle-extended{
  animation: candle-extended-anim 0.8s ease-in-out infinite alternate;
}
@keyframes candle-extended-anim{
  0%{ filter:brightness(0.85) contrast(0.95); }
  100%{ filter:brightness(1.15) contrast(1.15); }
}

/* Batch 17: Blood splat */
.blood-splat{
  position:relative;
}
.blood-splat::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:0;
  height:0;
  background:radial-gradient(circle, rgba(226,39,63,0.5), transparent 60%);
  border-radius:50%;
  animation: blood-splat-anim 6s ease-in-out infinite;
}
@keyframes blood-splat-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:150px; height:150px; }
}

/* Batch 17: Ghost fade */
.ghost-fade{
  animation: ghost-fade-anim 7s ease-in-out infinite;
}
@keyframes ghost-fade-anim{
  0%,100%{ opacity:0.3; filter:blur(2px); }
  50%{ opacity:0.8; filter:blur(0px); }
}

/* Batch 17: Static burst */
.static-burst-extended{
  animation: static-burst-extended-anim 10s ease-in-out infinite;
}
@keyframes static-burst-extended-anim{
  0%,93%,100%{ filter:none; }
  94%{ filter:contrast(2) brightness(1.3) saturate(1.2); }
  95%{ filter:none; }
}

/* Batch 18: Heartbeat extended */
.heartbeat-extended{
  animation: heartbeat-extended-anim 2s ease-in-out infinite;
}
@keyframes heartbeat-extended-anim{
  0%,100%{ transform:scale(1); }
  10%{ transform:scale(1.06); }
  20%{ transform:scale(1); }
  30%{ transform:scale(1.06); }
  40%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
  60%{ transform:scale(1); }
}

/* Batch 18: Blood seep corner */
.blood-seep-corner{
  position:relative;
  overflow:hidden;
}
.blood-seep-corner::after{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:0;
  background:linear-gradient(225deg, transparent, rgba(226,39,63,0.3));
  animation: blood-seep-corner-anim 8s ease-in-out infinite;
}
@keyframes blood-seep-corner-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:150px; height:150px; }
}

/* Batch 18: Ghost whisper extended */
.ghost-whisper-extended{
  text-shadow:0 0 15px rgba(226,39,63,0.4);
  animation: ghost-whisper-extended-anim 8s ease-in-out infinite;
}
@keyframes ghost-whisper-extended-anim{
  0%,100%{ text-shadow:0 0 15px rgba(226,39,63,0.4); opacity:0.7; }
  50%{ text-shadow:0 0 25px rgba(226,39,63,0.7), 0 0 40px rgba(226,39,63,0.4); opacity:0.9; }
}

/* Batch 18: Flicker neon color */
.flicker-neon-color{
  animation: flicker-neon-color-anim 4s ease-in-out infinite;
}
@keyframes flicker-neon-color-anim{
  0%,100%{ color:var(--bone); text-shadow:0 0 10px var(--blood); }
  90%{ color:var(--bone); text-shadow:0 0 10px var(--blood); }
  91%{ color:var(--blood-bright); text-shadow:0 0 20px var(--blood-bright); }
  92%{ color:var(--bone); text-shadow:0 0 10px var(--blood); }
  93%{ color:var(--blood-bright); text-shadow:0 0 15px var(--blood-bright); }
  94%{ color:var(--bone); text-shadow:0 0 10px var(--blood); }
}

/* Batch 19: Creepy crawl extended */
.creepy-crawl-extended{
  background-image:repeating-linear-gradient(60deg, transparent, transparent 15px, rgba(226,39,63,0.08) 15px, rgba(226,39,63,0.08) 30px);
  background-size:60px 60px;
  animation: crawl-extended-anim 25s linear infinite;
}
@keyframes crawl-extended-anim{
  0%{ background-position:0 0; }
  100%{ background-position:600px 600px; }
}

/* Batch 19: Blood drip corner */




/* Batch 19: Ghost trail multiple */
.ghost-trail-multiple{
  position:relative;
}
.ghost-trail-multiple::before,
.ghost-trail-multiple::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacity 0.4s, transform 0.4s;
}
.ghost-trail-multiple:hover::before{
  opacity:0.35;
  transform:translateX(-5px) translateY(3px);
  transition-delay:0.08s;
}
.ghost-trail-multiple:hover::after{
  opacity:0.25;
  transform:translateX(-10px) translateY(6px);
  transition-delay:0.15s;
}

/* Batch 19: Static noise extended */
.static-noise-extended{
  position:relative;
}
.static-noise-extended::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.35'/></svg>");
  animation: static-noise-extended-anim 0.15s steps(5) infinite;
  pointer-events:none;
}
@keyframes static-noise-extended-anim{
  0%{ transform:translate(0,0); }
  20%{ transform:translate(-3%,3%); }
  40%{ transform:translate(3%,3%); }
  60%{ transform:translate(3%,-3%); }
  80%{ transform:translate(-3%,-3%); }
  100%{ transform:translate(0,0); }
}

/* Batch 20: Heartbeat border extended */
.heartbeat-border-extended{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-anim 2s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 5px rgba(226,39,63,0.3); }
  10%{ border-width:3px; box-shadow:0 0 15px rgba(226,39,63,0.5); }
  20%{ border-width:2px; box-shadow:0 0 5px rgba(226,39,63,0.3); }
  30%{ border-width:3px; box-shadow:0 0 15px rgba(226,39,63,0.5); }
  40%{ border-width:2px; box-shadow:0 0 5px rgba(226,39,63,0.3); }
}

/* Batch 20: Blood splatter radial */
.blood-splatter-radial:hover{
  position:relative;
}
.blood-splatter-radial:hover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(226,39,63,0.4), transparent 60%), radial-gradient(circle at 20% 80%, rgba(226,39,63,0.3), transparent 50%), radial-gradient(circle at 80% 20%, rgba(226,39,63,0.3), transparent 50%);
  animation: splatter-radial 0.7s ease-out;
}
@keyframes splatter-radial{
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(3); opacity:0; }
}

/* Batch 20: Ghost float extended */
.ghost-float-extended{
  animation: ghost-float-extended-anim 8s ease-in-out infinite;
}
@keyframes ghost-float-extended-anim{
  0%,100%{ transform:translateY(0) translateX(0); opacity:0.5; }
  25%{ transform:translateY(-10px) translateX(5px); opacity:0.7; }
  50%{ transform:translateY(-20px) translateX(0); opacity:0.8; }
  75%{ transform:translateY(-10px) translateX(-5px); opacity:0.7; }
}

/* Batch 20: Flicker light extended */
.flicker-light-extended{
  animation: flicker-light-extended-anim 4s ease-in-out infinite;
}
@keyframes flicker-light-extended-anim{
  0%,100%{ filter:brightness(1) contrast(1); }
  94%{ filter:brightness(1) contrast(1); }
  95%{ filter:brightness(0.6) contrast(0.8); }
  96%{ filter:brightness(1.3) contrast(1.2); }
  97%{ filter:brightness(0.8) contrast(0.9); }
  98%{ filter:brightness(1) contrast(1); }
}

/* 177. Background current */
.bg-current{
  background:currentColor;
}

/* 178. Object cover */
.object-cover{
  object-fit:cover;
}

/* Batch 21: Horror shake extended */
.horror-shake-extended{
  animation: horror-shake-extended-anim 1s ease-in-out infinite;
}
@keyframes horror-shake-extended-anim{
  0%,100%{ transform:translate(0) rotate(0deg); }
  20%{ transform:translate(-4px, 4px) rotate(-2deg); }
  40%{ transform:translate(4px, -4px) rotate(2deg); }
  60%{ transform:translate(-4px, -4px) rotate(-2deg); }
  80%{ transform:translate(4px, 4px) rotate(2deg); }
}

/* Batch 21: Blood seep extended 2 */
.blood-seep-extended-2{
  position:relative;
  overflow:hidden;
}
.blood-seep-extended-2::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(180deg, rgba(226,39,63,0.3), transparent, rgba(226,39,63,0.2));
  animation: blood-seep-extended-2-anim 12s ease-in-out infinite;
}
@keyframes blood-seep-extended-2-anim{
  0%,100%{ height:0; }
  50%{ height:50%; }
}

/* Batch 21: Ghost appear extended */
.ghost-appear-extended{
  animation: ghost-appear-extended-anim 10s ease-in-out infinite;
}
@keyframes ghost-appear-extended-anim{
  0%,100%{ opacity:0; transform:scale(0.85) translateY(10px); }
  50%{ opacity:0.8; transform:scale(1) translateY(0); }
}

/* Batch 21: Static glitch extended */
.static-glitch-extended{
  animation: static-glitch-extended-anim 8s ease-in-out infinite;
}
@keyframes static-glitch-extended-anim{
  0%,92%,100%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  93%{ clip-path:polygon(0 8%, 100% 0, 100% 92%, 0 100%); }
  94%{ clip-path:polygon(0 0, 100% 8%, 100% 100%, 8% 100%); }
  95%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Batch 22: Heartbeat text extended */
.heartbeat-text-extended{
  animation: heartbeat-text-extended-anim 2s ease-in-out infinite;
}
@keyframes heartbeat-text-extended-anim{
  0%,100%{ transform:scale(1); }
  12%{ transform:scale(1.1); }
  24%{ transform:scale(1); }
  36%{ transform:scale(1.1); }
  48%{ transform:scale(1); }
  60%{ transform:scale(1.1); }
  72%{ transform:scale(1); }
}

/* Batch 22: Blood drip extended 2 */





/* Batch 22: Ghost whisper extended 2 */
.ghost-whisper-extended-2{
  text-shadow:0 0 20px rgba(226,39,63,0.5);
  animation: ghost-whisper-extended-2-anim 10s ease-in-out infinite;
}
@keyframes ghost-whisper-extended-2-anim{
  0%,100%{ text-shadow:0 0 20px rgba(226,39,63,0.5); opacity:0.6; }
  50%{ text-shadow:0 0 35px rgba(226,39,63,0.8), 0 0 50px rgba(226,39,63,0.5); opacity:1; }
}

/* Batch 22: Flicker neon extended 2 */
.flicker-neon-extended-2{
  animation: flicker-extended-2-anim 6s ease-in-out infinite;
}
@keyframes flicker-extended-2-anim{
  0%,100%{ opacity:1; text-shadow:0 0 15px currentColor; }
  88%{ opacity:1; text-shadow:0 0 15px currentColor; }
  89%{ opacity:0.75; text-shadow:0 0 8px currentColor; }
  90%{ opacity:1; text-shadow:0 0 15px currentColor; }
  91%{ opacity:0.85; text-shadow:0 0 12px currentColor; }
  92%{ opacity:1; text-shadow:0 0 15px currentColor; }
  93%{ opacity:0.65; text-shadow:0 0 5px currentColor; }
  94%{ opacity:1; text-shadow:0 0 15px currentColor; }
}

/* Batch 23: Creepy shadow extended */
.creepy-shadow-extended{
  box-shadow:0 15px 40px rgba(0,0,0,0.6);
  animation: creepy-shadow-extended-anim 6s ease-in-out infinite;
}
@keyframes creepy-shadow-extended-anim{
  0%,100%{ box-shadow:0 15px 40px rgba(0,0,0,0.6); }
  50%{ box-shadow:0 20px 50px rgba(226,39,63,0.4); }
}

/* Batch 23: Blood splat extended */
.blood-splat-extended{
  position:relative;
}
.blood-splat-extended::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:0;
  height:0;
  background:radial-gradient(circle, rgba(226,39,63,0.6), transparent 65%);
  border-radius:50%;
  animation: blood-splat-extended-anim 8s ease-in-out infinite;
}
@keyframes blood-splat-extended-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:200px; height:200px; }
}

/* Batch 23: Ghost fade extended */
.ghost-fade-extended{
  animation: ghost-fade-extended-anim 9s ease-in-out infinite;
}
@keyframes ghost-fade-extended-anim{
  0%,100%{ opacity:0.25; filter:blur(3px); }
  50%{ opacity:0.85; filter:blur(0px); }
}

/* Batch 23: Static burst extended 2 */
.static-burst-extended-2{
  animation: static-burst-extended-2-anim 12s ease-in-out infinite;
}
@keyframes static-burst-extended-2-anim{
  0%,92%,100%{ filter:none; }
  93%{ filter:contrast(2.5) brightness(1.4) saturate(1.3); }
  94%{ filter:none; }
}

/* Batch 24: Heartbeat extended 2 */
.heartbeat-extended-2{
  animation: heartbeat-extended-2-anim 2.5s ease-in-out infinite;
}
@keyframes heartbeat-extended-2-anim{
  0%,100%{ transform:scale(1); }
  8%{ transform:scale(1.08); }
  16%{ transform:scale(1); }
  24%{ transform:scale(1.08); }
  32%{ transform:scale(1); }
  40%{ transform:scale(1.08); }
  48%{ transform:scale(1); }
  56%{ transform:scale(1.08); }
  64%{ transform:scale(1); }
}

/* Batch 24: Blood seep corner extended */
.blood-seep-corner-extended{
  position:relative;
  overflow:hidden;
}
.blood-seep-corner-extended::after{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:0;
  background:linear-gradient(225deg, transparent, rgba(226,39,63,0.4), rgba(226,39,63,0.2));
  animation: blood-seep-corner-extended-anim 10s ease-in-out infinite;
}
@keyframes blood-seep-corner-extended-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:200px; height:200px; }
}

/* Batch 24: Ghost trail extended 2 */
.ghost-trail-extended-2{
  position:relative;
}
.ghost-trail-extended-2::before,
.ghost-trail-extended-2::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacity 0.5s, transform 0.5s;
}
.ghost-trail-extended-2:hover::before{
  opacity:0.45;
  transform:translateX(-6px) translateY(4px);
  transition-delay:0.1s;
}
.ghost-trail-extended-2:hover::after{
  opacity:0.35;
  transform:translateX(-12px) translateY(8px);
  transition-delay:0.2s;
}

/* Batch 24: Flicker light extended 2 */
.flicker-light-extended-2{
  animation: flicker-light-extended-2-anim 5s ease-in-out infinite;
}
@keyframes flicker-light-extended-2-anim{
  0%,100%{ filter:brightness(1) contrast(1); }
  93%{ filter:brightness(1) contrast(1); }
  94%{ filter:brightness(0.5) contrast(0.7); }
  95%{ filter:brightness(1.4) contrast(1.3); }
  96%{ filter:brightness(0.7) contrast(0.8); }
  97%{ filter:brightness(1) contrast(1); }
}

/* Batch 25: Horror pulse extended */
.horror-pulse-extended{
  animation: horror-pulse-extended-anim 5s ease-in-out infinite;
}
@keyframes horror-pulse-extended-anim{
  0%,100%{ box-shadow:0 0 15px rgba(226,39,63,0.4); }
  50%{ box-shadow:0 0 40px rgba(226,39,63,0.7), 0 0 60px rgba(226,39,63,0.4); }
}

/* Batch 25: Blood drip corner extended */




/* Batch 25: Ghost float extended 2 */
.ghost-float-extended-2{
  animation: ghost-float-extended-2-anim 10s ease-in-out infinite;
}
@keyframes ghost-float-extended-2-anim{
  0%,100%{ transform:translateY(0) translateX(0); opacity:0.45; }
  20%{ transform:translateY(-12px) translateX(8px); opacity:0.65; }
  40%{ transform:translateY(-25px) translateX(0); opacity:0.8; }
  60%{ transform:translateY(-12px) translateX(-8px); opacity:0.65; }
  80%{ transform:translateY(0) translateX(0); opacity:0.45; }
}

/* Batch 25: Static noise extended 2 */
.static-noise-extended-2{
  position:relative;
}
.static-noise-extended-2::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n3'><feTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n3)' opacity='0.4'/></svg>");
  animation: static-noise-extended-2-anim 0.12s steps(6) infinite;
  pointer-events:none;
}
@keyframes static-noise-extended-2-anim{
  0%{ transform:translate(0,0); }
  16.66%{ transform:translate(-4%,4%); }
  33.33%{ transform:translate(4%,4%); }
  50%{ transform:translate(4%,-4%); }
  66.66%{ transform:translate(-4%,-4%); }
  83.33%{ transform:translate(0,0); }
  100%{ transform:translate(0,0); }
}

/* Batch 26: Heartbeat border extended 2 */
.heartbeat-border-extended-2{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-2-anim 2.5s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-2-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 8px rgba(226,39,63,0.4); }
  8%{ border-width:4px; box-shadow:0 0 20px rgba(226,39,63,0.6); }
  16%{ border-width:2px; box-shadow:0 0 8px rgba(226,39,63,0.4); }
  24%{ border-width:4px; box-shadow:0 0 20px rgba(226,39,63,0.6); }
  32%{ border-width:2px; box-shadow:0 0 8px rgba(226,39,63,0.4); }
  40%{ border-width:4px; box-shadow:0 0 20px rgba(226,39,63,0.6); }
  48%{ border-width:2px; box-shadow:0 0 8px rgba(226,39,63,0.4); }
}

/* Batch 26: Blood splatter radial extended */
.blood-splatter-radial-extended:hover{
  position:relative;
}
.blood-splatter-radial-extended:hover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(226,39,63,0.5), transparent 65%), radial-gradient(circle at 15% 85%, rgba(226,39,63,0.4), transparent 55%), radial-gradient(circle at 85% 15%, rgba(226,39,63,0.4), transparent 55%), radial-gradient(circle at 85% 85%, rgba(226,39,63,0.3), transparent 45%);
  animation: splatter-radial-extended 0.8s ease-out;
}
@keyframes splatter-radial-extended{
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(3.5); opacity:0; }
}

/* Batch 26: Ghost appear extended 2 */
.ghost-appear-extended-2{
  animation: ghost-appear-extended-2-anim 12s ease-in-out infinite;
}
@keyframes ghost-appear-extended-2-anim{
  0%,100%{ opacity:0; transform:scale(0.8) translateY(15px); }
  50%{ opacity:0.85; transform:scale(1.05) translateY(0); }
}

/* Batch 26: Flicker neon color extended */
.flicker-neon-color-extended{
  animation: flicker-neon-color-extended-anim 5s ease-in-out infinite;
}
@keyframes flicker-neon-color-extended-anim{
  0%,100%{ color:var(--bone); text-shadow:0 0 15px var(--blood); }
  88%{ color:var(--bone); text-shadow:0 0 15px var(--blood); }
  89%{ color:var(--blood-bright); text-shadow:0 0 25px var(--blood-bright); }
  90%{ color:var(--bone); text-shadow:0 0 15px var(--blood); }
  91%{ color:var(--blood-bright); text-shadow:0 0 20px var(--blood-bright); }
  92%{ color:var(--bone); text-shadow:0 0 15px var(--blood); }
  93%{ color:var(--blood-bright); text-shadow:0 0 30px var(--blood-bright); }
  94%{ color:var(--bone); text-shadow:0 0 15px var(--blood); }
}

/* Batch 27: Creepy crawl extended 2 */
.creepy-crawl-extended-2{
  background-image:repeating-linear-gradient(75deg, transparent, transparent 20px, rgba(226,39,63,0.1) 20px, rgba(226,39,63,0.1) 40px);
  background-size:80px 80px;
  animation: crawl-extended-2-anim 30s linear infinite;
}
@keyframes crawl-extended-2-anim{
  0%{ background-position:0 0; }
  100%{ background-position:800px 800px; }
}

/* Batch 27: Blood seep multiple */
.blood-seep-multiple{
  position:relative;
  overflow:hidden;
}
.blood-seep-multiple::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(180deg, transparent, rgba(226,39,63,0.3), rgba(226,39,63,0.15), transparent);
  animation: blood-seep-multiple-anim 14s ease-in-out infinite;
}
.blood-seep-multiple::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(0deg, transparent, rgba(226,39,63,0.2), rgba(226,39,63,0.1), transparent);
  animation: blood-seep-multiple-anim-2 14s ease-in-out infinite;
}
@keyframes blood-seep-multiple-anim{
  0%,100%{ height:0; }
  50%{ height:35%; }
}
@keyframes blood-seep-multiple-anim-2{
  0%,100%{ height:0; }
  50%{ height:25%; }
}

/* Batch 27: Ghost whisper extended 3 */
.ghost-whisper-extended-3{
  text-shadow:0 0 25px rgba(226,39,63,0.6);
  animation: ghost-whisper-extended-3-anim 12s ease-in-out infinite;
}
@keyframes ghost-whisper-extended-3-anim{
  0%,100%{ text-shadow:0 0 25px rgba(226,39,63,0.6); opacity:0.55; }
  50%{ text-shadow:0 0 40px rgba(226,39,63,0.9), 0 0 60px rgba(226,39,63,0.6); opacity:1; }
}

/* Batch 27: Static glitch extended 2 */
.static-glitch-extended-2{
  animation: static-glitch-extended-2-anim 10s ease-in-out infinite;
}
@keyframes static-glitch-extended-2-anim{
  0%,90%,100%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  91%{ clip-path:polygon(0 10%, 100% 0, 100% 90%, 0 100%); }
  92%{ clip-path:polygon(0 0, 100% 10%, 100% 100%, 10% 100%); }
  93%{ clip-path:polygon(5% 0, 100% 0, 100% 100%, 0 95%); }
  94%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Batch 28: Heartbeat text extended 2 */
.heartbeat-text-extended-2{
  animation: heartbeat-text-extended-2-anim 2.5s ease-in-out infinite;
}
@keyframes heartbeat-text-extended-2-anim{
  0%,100%{ transform:scale(1); }
  10%{ transform:scale(1.12); }
  20%{ transform:scale(1); }
  30%{ transform:scale(1.12); }
  40%{ transform:scale(1); }
  50%{ transform:scale(1.12); }
  60%{ transform:scale(1); }
  70%{ transform:scale(1.12); }
  80%{ transform:scale(1); }
}

/* Batch 28: Blood drip multiple */







/* Batch 28: Ghost fade extended 2 */
.ghost-fade-extended-2{
  animation: ghost-fade-extended-2-anim 11s ease-in-out infinite;
}
@keyframes ghost-fade-extended-2-anim{
  0%,100%{ opacity:0.2; filter:blur(4px); }
  50%{ opacity:0.9; filter:blur(0px); }
}

/* Batch 28: Flicker light extended 3 */
.flicker-light-extended-3{
  animation: flicker-light-extended-3-anim 6s ease-in-out infinite;
}
@keyframes flicker-light-extended-3-anim{
  0%,100%{ filter:brightness(1) contrast(1) saturate(1); }
  92%{ filter:brightness(1) contrast(1) saturate(1); }
  93%{ filter:brightness(0.4) contrast(0.6) saturate(0.8); }
  94%{ filter:brightness(1.5) contrast(1.4) saturate(1.2); }
  95%{ filter:brightness(0.6) contrast(0.7) saturate(0.9); }
  96%{ filter:brightness(1) contrast(1) saturate(1); }
}

/* Batch 29: Horror shake extended 2 */
.horror-shake-extended-2{
  animation: horror-shake-extended-2-anim 1.2s ease-in-out infinite;
}
@keyframes horror-shake-extended-2-anim{
  0%,100%{ transform:translate(0) rotate(0deg); }
  16.66%{ transform:translate(-5px, 5px) rotate(-3deg); }
  33.33%{ transform:translate(5px, -5px) rotate(3deg); }
  50%{ transform:translate(-5px, -5px) rotate(-3deg); }
  66.66%{ transform:translate(5px, 5px) rotate(3deg); }
  83.33%{ transform:translate(-5px, 5px) rotate(-3deg); }
}

/* Batch 29: Blood splat extended 2 */
.blood-splat-extended-2{
  position:relative;
}
.blood-splat-extended-2::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:0;
  height:0;
  background:radial-gradient(circle, rgba(226,39,63,0.7), transparent 70%);
  border-radius:50%;
  animation: blood-splat-extended-2-anim 10s ease-in-out infinite;
}
@keyframes blood-splat-extended-2-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:250px; height:250px; }
}

/* Batch 29: Ghost float extended 3 */
.ghost-float-extended-3{
  animation: ghost-float-extended-3-anim 12s ease-in-out infinite;
}
@keyframes ghost-float-extended-3-anim{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0.4; }
  25%{ transform:translateY(-15px) translateX(10px) rotate(2deg); opacity:0.6; }
  50%{ transform:translateY(-30px) translateX(0) rotate(0deg); opacity:0.85; }
  75%{ transform:translateY(-15px) translateX(-10px) rotate(-2deg); opacity:0.6; }
}

/* Batch 29: Creepy shadow extended 2 */
.creepy-shadow-extended-2{
  box-shadow:0 20px 50px rgba(0,0,0,0.7);
  animation: creepy-shadow-extended-2-anim 7s ease-in-out infinite;
}
@keyframes creepy-shadow-extended-2-anim{
  0%,100%{ box-shadow:0 20px 50px rgba(0,0,0,0.7); }
  50%{ box-shadow:0 25px 60px rgba(226,39,63,0.5); }
}

/* Batch 30: Static burst extended 3 */
.static-burst-extended-3{
  animation: static-burst-extended-3-anim 14s ease-in-out infinite;
}
@keyframes static-burst-extended-3-anim{
  0%,91%,100%{ filter:none; }
  92%{ filter:contrast(3) brightness(1.5) saturate(1.4) hue-rotate(10deg); }
  93%{ filter:none; }
}

/* Batch 30: Blood seep corner extended 2 */
.blood-seep-corner-extended-2{
  position:relative;
  overflow:hidden;
}
.blood-seep-corner-extended-2::after{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:0;
  background:linear-gradient(225deg, transparent, rgba(226,39,63,0.5), rgba(226,39,63,0.3), transparent);
  animation: blood-seep-corner-extended-2-anim 12s ease-in-out infinite;
}
@keyframes blood-seep-corner-extended-2-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:250px; height:250px; }
}

/* Batch 30: Ghost trail extended 3 */
.ghost-trail-extended-3{
  position:relative;
}
.ghost-trail-extended-3::before,
.ghost-trail-extended-3::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacity 0.6s, transform 0.6s;
}
.ghost-trail-extended-3:hover::before{
  opacity:0.5;
  transform:translateX(-8px) translateY(6px);
  transition-delay:0.12s;
}
.ghost-trail-extended-3:hover::after{
  opacity:0.4;
  transform:translateX(-16px) translateY(12px);
  transition-delay:0.25s;
}

/* Batch 30: Heartbeat border extended 3 */
.heartbeat-border-extended-3{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-3-anim 3s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-3-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 10px rgba(226,39,63,0.5); }
  6.66%{ border-width:5px; box-shadow:0 0 25px rgba(226,39,63,0.7); }
  13.33%{ border-width:2px; box-shadow:0 0 10px rgba(226,39,63,0.5); }
  20%{ border-width:5px; box-shadow:0 0 25px rgba(226,39,63,0.7); }
  26.66%{ border-width:2px; box-shadow:0 0 10px rgba(226,39,63,0.5); }
  33.33%{ border-width:5px; box-shadow:0 0 25px rgba(226,39,63,0.7); }
  40%{ border-width:2px; box-shadow:0 0 10px rgba(226,39,63,0.5); }
}

/* 179. Object contain */
.object-contain{
  object-fit:contain;
}

/* 180. Object fill */
.object-fill{
  object-fit:fill;
}

/* Batch 31: Horror pulse extended 2 */
.horror-pulse-extended-2{
  animation: horror-pulse-extended-2-anim 6s ease-in-out infinite;
}
@keyframes horror-pulse-extended-2-anim{
  0%,100%{ box-shadow:0 0 20px rgba(226,39,63,0.5); }
  50%{ box-shadow:0 0 50px rgba(226,39,63,0.8), 0 0 80px rgba(226,39,63,0.5); }
}

/* Batch 31: Blood drip corner extended 2 */




/* Batch 31: Ghost float extended 4 */
.ghost-float-extended-4{
  animation: ghost-float-extended-4-anim 14s ease-in-out infinite;
}
@keyframes ghost-float-extended-4-anim{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0.35; }
  20%{ transform:translateY(-18px) translateX(12px) rotate(3deg); opacity:0.55; }
  40%{ transform:translateY(-35px) translateX(0) rotate(0deg); opacity:0.9; }
  60%{ transform:translateY(-18px) translateX(-12px) rotate(-3deg); opacity:0.55; }
  80%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0.35; }
}

/* Batch 31: Static noise extended 3 */
.static-noise-extended-3{
  position:relative;
}
.static-noise-extended-3::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='n4'><feTurbulence type='fractalNoise' baseFrequency='3' numOctaves='5'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n4)' opacity='0.45'/></svg>");
  animation: static-noise-extended-3-anim 0.1s steps(7) infinite;
  pointer-events:none;
}
@keyframes static-noise-extended-3-anim{
  0%{ transform:translate(0,0); }
  14.28%{ transform:translate(-5%,5%); }
  28.57%{ transform:translate(5%,5%); }
  42.85%{ transform:translate(5%,-5%); }
  57.14%{ transform:translate(-5%,-5%); }
  71.42%{ transform:translate(3%,3%); }
  85.71%{ transform:translate(0,0); }
  100%{ transform:translate(0,0); }
}

/* Batch 32: Heartbeat border extended 4 */
.heartbeat-border-extended-4{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-4-anim 3.5s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-4-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 12px rgba(226,39,63,0.6); }
  5.71%{ border-width:6px; box-shadow:0 0 30px rgba(226,39,63,0.8); }
  11.42%{ border-width:2px; box-shadow:0 0 12px rgba(226,39,63,0.6); }
  17.14%{ border-width:6px; box-shadow:0 0 30px rgba(226,39,63,0.8); }
  22.85%{ border-width:2px; box-shadow:0 0 12px rgba(226,39,63,0.6); }
  28.57%{ border-width:6px; box-shadow:0 0 30px rgba(226,39,63,0.8); }
  34.28%{ border-width:2px; box-shadow:0 0 12px rgba(226,39,63,0.6); }
  40%{ border-width:6px; box-shadow:0 0 30px rgba(226,39,63,0.8); }
  45.71%{ border-width:2px; box-shadow:0 0 12px rgba(226,39,63,0.6); }
}

/* Batch 32: Blood splatter radial extended 2 */
.blood-splatter-radial-extended-2:hover{
  position:relative;
}
.blood-splatter-radial-extended-2:hover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(226,39,63,0.6), transparent 70%), radial-gradient(circle at 10% 90%, rgba(226,39,63,0.5), transparent 60%), radial-gradient(circle at 90% 10%, rgba(226,39,63,0.5), transparent 60%), radial-gradient(circle at 90% 90%, rgba(226,39,63,0.4), transparent 50%), radial-gradient(circle at 10% 10%, rgba(226,39,63,0.3), transparent 40%);
  animation: splatter-radial-extended-2 0.9s ease-out;
}
@keyframes splatter-radial-extended-2{
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(4); opacity:0; }
}

/* Batch 32: Ghost appear extended 3 */
.ghost-appear-extended-3{
  animation: ghost-appear-extended-3-anim 14s ease-in-out infinite;
}
@keyframes ghost-appear-extended-3-anim{
  0%,100%{ opacity:0; transform:scale(0.75) translateY(20px) rotate(-5deg); }
  50%{ opacity:0.9; transform:scale(1.1) translateY(0) rotate(5deg); }
}

/* Batch 32: Flicker neon color extended 2 */
.flicker-neon-color-extended-2{
  animation: flicker-neon-color-extended-2-anim 6s ease-in-out infinite;
}
@keyframes flicker-neon-color-extended-2-anim{
  0%,100%{ color:var(--bone); text-shadow:0 0 20px var(--blood); }
  86%{ color:var(--bone); text-shadow:0 0 20px var(--blood); }
  87%{ color:var(--blood-bright); text-shadow:0 0 35px var(--blood-bright); }
  88%{ color:var(--bone); text-shadow:0 0 20px var(--blood); }
  89%{ color:var(--blood-bright); text-shadow:0 0 30px var(--blood-bright); }
  90%{ color:var(--bone); text-shadow:0 0 20px var(--blood); }
  91%{ color:var(--blood-bright); text-shadow:0 0 40px var(--blood-bright); }
  92%{ color:var(--bone); text-shadow:0 0 20px var(--blood); }
  93%{ color:var(--blood-bright); text-shadow:0 0 25px var(--blood-bright); }
  94%{ color:var(--bone); text-shadow:0 0 20px var(--blood); }
}

/* Batch 33: Creepy crawl extended 3 */
.creepy-crawl-extended-3{
  background-image:repeating-linear-gradient(80deg, transparent, transparent 25px, rgba(226,39,63,0.12) 25px, rgba(226,39,63,0.12) 50px);
  background-size:100px 100px;
  animation: crawl-extended-3-anim 35s linear infinite;
}
@keyframes crawl-extended-3-anim{
  0%{ background-position:0 0; }
  100%{ background-position:1000px 1000px; }
}

/* Batch 33: Blood seep multiple extended */
.blood-seep-multiple-extended{
  position:relative;
  overflow:hidden;
}
.blood-seep-multiple-extended::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(180deg, transparent, rgba(226,39,63,0.35), rgba(226,39,63,0.18), rgba(226,39,63,0.08), transparent);
  animation: blood-seep-multiple-extended-anim 16s ease-in-out infinite;
}
.blood-seep-multiple-extended::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(0deg, transparent, rgba(226,39,63,0.25), rgba(226,39,63,0.12), rgba(226,39,63,0.05), transparent);
  animation: blood-seep-multiple-extended-anim-2 16s ease-in-out infinite;
}
@keyframes blood-seep-multiple-extended-anim{
  0%,100%{ height:0; }
  50%{ height:40%; }
}
@keyframes blood-seep-multiple-extended-anim-2{
  0%,100%{ height:0; }
  50%{ height:30%; }
}

/* Batch 33: Ghost whisper extended 4 */
.ghost-whisper-extended-4{
  text-shadow:0 0 30px rgba(226,39,63,0.7);
  animation: ghost-whisper-extended-4-anim 14s ease-in-out infinite;
}
@keyframes ghost-whisper-extended-4-anim{
  0%,100%{ text-shadow:0 0 30px rgba(226,39,63,0.7); opacity:0.5; }
  50%{ text-shadow:0 0 50px rgba(226,39,63,1), 0 0 80px rgba(226,39,63,0.7); opacity:1; }
}

/* Batch 33: Static glitch extended 3 */
.static-glitch-extended-3{
  animation: static-glitch-extended-3-anim 12s ease-in-out infinite;
}
@keyframes static-glitch-extended-3-anim{
  0%,88%,100%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  89%{ clip-path:polygon(0 12%, 100% 0, 100% 88%, 0 100%); }
  90%{ clip-path:polygon(0 0, 100% 12%, 100% 100%, 12% 100%); }
  91%{ clip-path:polygon(8% 0, 100% 0, 100% 100%, 0 92%); }
  92%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Batch 34: Heartbeat text extended 3 */
.heartbeat-text-extended-3{
  animation: heartbeat-text-extended-3-anim 3s ease-in-out infinite;
}
@keyframes heartbeat-text-extended-3-anim{
  0%,100%{ transform:scale(1); }
  8.33%{ transform:scale(1.15); }
  16.66%{ transform:scale(1); }
  25%{ transform:scale(1.15); }
  33.33%{ transform:scale(1); }
  41.66%{ transform:scale(1.15); }
  50%{ transform:scale(1); }
  58.33%{ transform:scale(1.15); }
  66.66%{ transform:scale(1); }
  75%{ transform:scale(1.15); }
  83.33%{ transform:scale(1); }
}

/* Batch 34: Blood drip multiple extended */



.blood-drip-multiple-extended .extra-drip-2{
  content:"";
  position:absolute;
  top:0;
  left:80%;
  width:3px;
  height:0;
  background:linear-gradient(180deg, var(--blood-bright), transparent);
  animation: blood-drip-multiple-extended-anim 7s ease-in infinite;
}
@keyframes blood-drip-multiple-extended-anim{
  0%{ height:0; opacity:1; }
  75%{ height:160px; opacity:0.65; }
  100%{ height:180px; opacity:0; }
}
@keyframes blood-drip-multiple-extended-anim-2{
  0%{ height:0; opacity:1; }
  80%{ height:200px; opacity:0.75; }
  100%{ height:220px; opacity:0; }
}

/* Batch 34: Ghost fade extended 3 */
.ghost-fade-extended-3{
  animation: ghost-fade-extended-3-anim 13s ease-in-out infinite;
}
@keyframes ghost-fade-extended-3-anim{
  0%,100%{ opacity:0.15; filter:blur(5px); }
  50%{ opacity:0.95; filter:blur(0px); }
}

/* Batch 34: Flicker light extended 4 */
.flicker-light-extended-4{
  animation: flicker-light-extended-4-anim 7s ease-in-out infinite;
}
@keyframes flicker-light-extended-4-anim{
  0%,100%{ filter:brightness(1) contrast(1) saturate(1); }
  91%{ filter:brightness(1) contrast(1) saturate(1); }
  92%{ filter:brightness(0.3) contrast(0.5) saturate(0.7); }
  93%{ filter:brightness(1.6) contrast(1.5) saturate(1.3); }
  94%{ filter:brightness(0.5) contrast(0.6) saturate(0.8); }
  95%{ filter:brightness(1) contrast(1) saturate(1); }
}

/* Batch 35: Horror shake extended 3 */
.horror-shake-extended-3{
  animation: horror-shake-extended-3-anim 1.4s ease-in-out infinite;
}
@keyframes horror-shake-extended-3-anim{
  0%,100%{ transform:translate(0) rotate(0deg); }
  14.28%{ transform:translate(-6px, 6px) rotate(-4deg); }
  28.57%{ transform:translate(6px, -6px) rotate(4deg); }
  42.85%{ transform:translate(-6px, -6px) rotate(-4deg); }
  57.14%{ transform:translate(6px, 6px) rotate(4deg); }
  71.42%{ transform:translate(-6px, 6px) rotate(-4deg); }
  85.71%{ transform:translate(6px, -6px) rotate(4deg); }
}

/* Batch 35: Blood splat extended 3 */
.blood-splat-extended-3{
  position:relative;
}
.blood-splat-extended-3::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:0;
  height:0;
  background:radial-gradient(circle, rgba(226,39,63,0.8), transparent 75%);
  border-radius:50%;
  animation: blood-splat-extended-3-anim 12s ease-in-out infinite;
}
@keyframes blood-splat-extended-3-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:300px; height:300px; }
}

/* Batch 35: Ghost float extended 5 */
.ghost-float-extended-5{
  animation: ghost-float-extended-5-anim 16s ease-in-out infinite;
}
@keyframes ghost-float-extended-5-anim{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.3; }
  16.66%{ transform:translateY(-20px) translateX(15px) rotate(4deg) scale(1.05); opacity:0.5; }
  33.33%{ transform:translateY(-40px) translateX(0) rotate(0deg) scale(1.1); opacity:0.9; }
  50%{ transform:translateY(-20px) translateX(-15px) rotate(-4deg) scale(1.05); opacity:0.5; }
  66.66%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.3; }
}

/* Batch 35: Creepy shadow extended 3 */
.creepy-shadow-extended-3{
  box-shadow:0 25px 60px rgba(0,0,0,0.8);
  animation: creepy-shadow-extended-3-anim 8s ease-in-out infinite;
}
@keyframes creepy-shadow-extended-3-anim{
  0%,100%{ box-shadow:0 25px 60px rgba(0,0,0,0.8); }
  50%{ box-shadow:0 30px 70px rgba(226,39,63,0.6); }
}

/* Batch 36: Static burst extended 4 */
.static-burst-extended-4{
  animation: static-burst-extended-4-anim 16s ease-in-out infinite;
}
@keyframes static-burst-extended-4-anim{
  0%,90%,100%{ filter:none; }
  91%{ filter:contrast(3.5) brightness(1.6) saturate(1.5) hue-rotate(15deg); }
  92%{ filter:none; }
}

/* Batch 36: Blood seep corner extended 3 */
.blood-seep-corner-extended-3{
  position:relative;
  overflow:hidden;
}
.blood-seep-corner-extended-3::after{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:0;
  background:linear-gradient(225deg, transparent, rgba(226,39,63,0.6), rgba(226,39,63,0.35), rgba(226,39,63,0.15), transparent);
  animation: blood-seep-corner-extended-3-anim 14s ease-in-out infinite;
}
@keyframes blood-seep-corner-extended-3-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:300px; height:300px; }
}

/* Batch 36: Ghost trail extended 4 */
.ghost-trail-extended-4{
  position:relative;
}
.ghost-trail-extended-4::before,
.ghost-trail-extended-4::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacity 0.7s, transform 0.7s;
}
.ghost-trail-extended-4:hover::before{
  opacity:0.55;
  transform:translateX(-10px) translateY(8px);
  transition-delay:0.15s;
}
.ghost-trail-extended-4:hover::after{
  opacity:0.45;
  transform:translateX(-20px) translateY(16px);
  transition-delay:0.3s;
}

/* Batch 36: Heartbeat border extended 5 */
.heartbeat-border-extended-5{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-5-anim 4s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-5-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 15px rgba(226,39,63,0.7); }
  5%{ border-width:7px; box-shadow:0 0 35px rgba(226,39,63,0.9); }
  10%{ border-width:2px; box-shadow:0 0 15px rgba(226,39,63,0.7); }
  15%{ border-width:7px; box-shadow:0 0 35px rgba(226,39,63,0.9); }
  20%{ border-width:2px; box-shadow:0 0 15px rgba(226,39,63,0.7); }
  25%{ border-width:7px; box-shadow:0 0 35px rgba(226,39,63,0.9); }
  30%{ border-width:2px; box-shadow:0 0 15px rgba(226,39,63,0.7); }
  35%{ border-width:7px; box-shadow:0 0 35px rgba(226,39,63,0.9); }
  40%{ border-width:2px; box-shadow:0 0 15px rgba(226,39,63,0.7); }
  45%{ border-width:7px; box-shadow:0 0 35px rgba(226,39,63,0.9); }
  50%{ border-width:2px; box-shadow:0 0 15px rgba(226,39,63,0.7); }
}

/* Batch 37: Horror pulse extended 3 */
.horror-pulse-extended-3{
  animation: horror-pulse-extended-3-anim 7s ease-in-out infinite;
}
@keyframes horror-pulse-extended-3-anim{
  0%,100%{ box-shadow:0 0 25px rgba(226,39,63,0.6); }
  50%{ box-shadow:0 0 60px rgba(226,39,63,0.9), 0 0 100px rgba(226,39,63,0.6); }
}

/* Batch 37: Blood drip corner extended 3 */
.blood-drip-corner-extended-3{
  position:relative;
  overflow:hidden;
}
.blood-drip-corner-extended-3::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:5px;
  height:0;
  background:linear-gradient(180deg, var(--blood-bright), var(--blood), rgba(226,39,63,0.5), transparent);
  animation: blood-drip-corner-extended-3-anim 12s ease-in infinite;
}
@keyframes blood-drip-corner-extended-3-anim{
  0%{ height:0; opacity:1; }
  85%{ height:250px; opacity:0.55; }
  100%{ height:300px; opacity:0; }
}

/* Batch 37: Ghost float extended 6 */
.ghost-float-extended-6{
  animation: ghost-float-extended-6-anim 18s ease-in-out infinite;
}
@keyframes ghost-float-extended-6-anim{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.25; }
  14.28%{ transform:translateY(-22px) translateX(18px) rotate(5deg) scale(1.08); opacity:0.45; }
  28.57%{ transform:translateY(-45px) translateX(0) rotate(0deg) scale(1.15); opacity:0.95; }
  42.85%{ transform:translateY(-22px) translateX(-18px) rotate(-5deg) scale(1.08); opacity:0.45; }
  57.14%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.25; }
}

/* Batch 37: Static noise extended 4 */
.static-noise-extended-4{
  position:relative;
}
.static-noise-extended-4::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n5'><feTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='6'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n5)' opacity='0.5'/></svg>");
  animation: static-noise-extended-4-anim 0.08s steps(8) infinite;
  pointer-events:none;
}
@keyframes static-noise-extended-4-anim{
  0%{ transform:translate(0,0); }
  12.5%{ transform:translate(-6%,6%); }
  25%{ transform:translate(6%,6%); }
  37.5%{ transform:translate(6%,-6%); }
  50%{ transform:translate(-6%,-6%); }
  62.5%{ transform:translate(4%,4%); }
  75%{ transform:translate(-4%,4%); }
  87.5%{ transform:translate(0,0); }
  100%{ transform:translate(0,0); }
}

/* Batch 38: Heartbeat border extended 6 */
.heartbeat-border-extended-6{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-6-anim 4.5s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-6-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 18px rgba(226,39,63,0.8); }
  4.44%{ border-width:8px; box-shadow:0 0 40px rgba(226,39,63,1); }
  8.88%{ border-width:2px; box-shadow:0 0 18px rgba(226,39,63,0.8); }
  13.33%{ border-width:8px; box-shadow:0 0 40px rgba(226,39,63,1); }
  17.77%{ border-width:2px; box-shadow:0 0 18px rgba(226,39,63,0.8); }
  22.22%{ border-width:8px; box-shadow:0 0 40px rgba(226,39,63,1); }
  26.66%{ border-width:2px; box-shadow:0 0 18px rgba(226,39,63,0.8); }
  31.11%{ border-width:8px; box-shadow:0 0 40px rgba(226,39,63,1); }
  35.55%{ border-width:2px; box-shadow:0 0 18px rgba(226,39,63,0.8); }
  40%{ border-width:8px; box-shadow:0 0 40px rgba(226,39,63,1); }
  44.44%{ border-width:2px; box-shadow:0 0 18px rgba(226,39,63,0.8); }
  48.88%{ border-width:8px; box-shadow:0 0 40px rgba(226,39,63,1); }
  53.33%{ border-width:2px; box-shadow:0 0 18px rgba(226,39,63,0.8); }
}

/* Batch 38: Blood splatter radial extended 3 */
.blood-splatter-radial-extended-3:hover{
  position:relative;
}
.blood-splatter-radial-extended-3:hover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(226,39,63,0.7), transparent 75%), radial-gradient(circle at 5% 95%, rgba(226,39,63,0.6), transparent 65%), radial-gradient(circle at 95% 5%, rgba(226,39,63,0.6), transparent 65%), radial-gradient(circle at 95% 95%, rgba(226,39,63,0.5), transparent 55%), radial-gradient(circle at 5% 5%, rgba(226,39,63,0.4), transparent 45%), radial-gradient(circle at 50% 95%, rgba(226,39,63,0.3), transparent 40%);
  animation: splatter-radial-extended-3 1s ease-out;
}
@keyframes splatter-radial-extended-3{
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(4.5); opacity:0; }
}

/* Batch 38: Ghost appear extended 4 */
.ghost-appear-extended-4{
  animation: ghost-appear-extended-4-anim 16s ease-in-out infinite;
}
@keyframes ghost-appear-extended-4-anim{
  0%,100%{ opacity:0; transform:scale(0.7) translateY(25px) rotate(-8deg); }
  50%{ opacity:0.95; transform:scale(1.15) translateY(0) rotate(8deg); }
}

/* Batch 38: Flicker neon color extended 3 */
.flicker-neon-color-extended-3{
  animation: flicker-neon-color-extended-3-anim 7s ease-in-out infinite;
}
@keyframes flicker-neon-color-extended-3-anim{
  0%,100%{ color:var(--bone); text-shadow:0 0 25px var(--blood); }
  84%{ color:var(--bone); text-shadow:0 0 25px var(--blood); }
  85%{ color:var(--blood-bright); text-shadow:0 0 45px var(--blood-bright); }
  86%{ color:var(--bone); text-shadow:0 0 25px var(--blood); }
  87%{ color:var(--blood-bright); text-shadow:0 0 40px var(--blood-bright); }
  88%{ color:var(--bone); text-shadow:0 0 25px var(--blood); }
  89%{ color:var(--blood-bright); text-shadow:0 0 50px var(--blood-bright); }
  90%{ color:var(--bone); text-shadow:0 0 25px var(--blood); }
  91%{ color:var(--blood-bright); text-shadow:0 0 35px var(--blood-bright); }
  92%{ color:var(--bone); text-shadow:0 0 25px var(--blood); }
  93%{ color:var(--blood-bright); text-shadow:0 0 55px var(--blood-bright); }
  94%{ color:var(--bone); text-shadow:0 0 25px var(--blood); }
}

/* Batch 39: Creepy crawl extended 4 */
.creepy-crawl-extended-4{
  background-image:repeating-linear-gradient(85deg, transparent, transparent 30px, rgba(226,39,63,0.15) 30px, rgba(226,39,63,0.15) 60px);
  background-size:120px 120px;
  animation: crawl-extended-4-anim 40s linear infinite;
}
@keyframes crawl-extended-4-anim{
  0%{ background-position:0 0; }
  100%{ background-position:1200px 1200px; }
}

/* Batch 39: Blood seep multiple extended 2 */
.blood-seep-multiple-extended-2{
  position:relative;
  overflow:hidden;
}
.blood-seep-multiple-extended-2::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(180deg, transparent, rgba(226,39,63,0.4), rgba(226,39,63,0.2), rgba(226,39,63,0.1), rgba(226,39,63,0.05), transparent);
  animation: blood-seep-multiple-extended-2-anim 18s ease-in-out infinite;
}
.blood-seep-multiple-extended-2::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(0deg, transparent, rgba(226,39,63,0.3), rgba(226,39,63,0.15), rgba(226,39,63,0.08), rgba(226,39,63,0.03), transparent);
  animation: blood-seep-multiple-extended-2-anim-2 18s ease-in-out infinite;
}
@keyframes blood-seep-multiple-extended-2-anim{
  0%,100%{ height:0; }
  50%{ height:45%; }
}
@keyframes blood-seep-multiple-extended-2-anim-2{
  0%,100%{ height:0; }
  50%{ height:35%; }
}

/* Batch 39: Ghost whisper extended 5 */
.ghost-whisper-extended-5{
  text-shadow:0 0 35px rgba(226,39,63,0.8);
  animation: ghost-whisper-extended-5-anim 16s ease-in-out infinite;
}
@keyframes ghost-whisper-extended-5-anim{
  0%,100%{ text-shadow:0 0 35px rgba(226,39,63,0.8); opacity:0.45; }
  50%{ text-shadow:0 0 60px rgba(226,39,63,1), 0 0 100px rgba(226,39,63,0.8); opacity:1; }
}

/* Batch 39: Static glitch extended 4 */
.static-glitch-extended-4{
  animation: static-glitch-extended-4-anim 14s ease-in-out infinite;
}
@keyframes static-glitch-extended-4-anim{
  0%,86%,100%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  87%{ clip-path:polygon(0 15%, 100% 0, 100% 85%, 0 100%); }
  88%{ clip-path:polygon(0 0, 100% 15%, 100% 100%, 15% 100%); }
  89%{ clip-path:polygon(10% 0, 100% 0, 100% 100%, 0 90%); }
  90%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Batch 40: Heartbeat text extended 4 */
.heartbeat-text-extended-4{
  animation: heartbeat-text-extended-4-anim 3.5s ease-in-out infinite;
}
@keyframes heartbeat-text-extended-4-anim{
  0%,100%{ transform:scale(1); }
  7.14%{ transform:scale(1.18); }
  14.28%{ transform:scale(1); }
  21.42%{ transform:scale(1.18); }
  28.57%{ transform:scale(1); }
  35.71%{ transform:scale(1.18); }
  42.85%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
  57.14%{ transform:scale(1); }
  64.28%{ transform:scale(1.18); }
  71.42%{ transform:scale(1); }
  78.57%{ transform:scale(1.18); }
  85.71%{ transform:scale(1); }
}

/* Batch 40: Blood drip multiple extended 2 */
.blood-drip-multiple-extended-2{
  position:relative;
  overflow:hidden;
}
.blood-drip-multiple-extended-2::after{
  content:"";
  position:absolute;
  top:0;
  left:8%;
  width:5px;
  height:0;
  background:linear-gradient(180deg, var(--blood-bright), var(--blood), rgba(226,39,63,0.5), transparent);
  animation: blood-drip-multiple-extended-2-anim 7s ease-in infinite;
}
.blood-drip-multiple-extended-2::before{
  content:"";
  position:absolute;
  top:0;
  left:42%;
  width:6px;
  height:0;
  background:linear-gradient(180deg, var(--blood), var(--blood-bright), rgba(226,39,63,0.6), transparent);
  animation: blood-drip-multiple-extended-2-anim-2 9s ease-in infinite;
}
.blood-drip-multiple-extended-2 .extra-drip-3{
  content:"";
  position:absolute;
  top:0;
  left:78%;
  width:4px;
  height:0;
  background:linear-gradient(180deg, var(--blood-bright), rgba(226,39,63,0.5), transparent);
  animation: blood-drip-multiple-extended-2-anim 8s ease-in infinite;
}
@keyframes blood-drip-multiple-extended-2-anim{
  0%{ height:0; opacity:1; }
  80%{ height:180px; opacity:0.6; }
  100%{ height:200px; opacity:0; }
}
@keyframes blood-drip-multiple-extended-2-anim-2{
  0%{ height:0; opacity:1; }
  85%{ height:220px; opacity:0.7; }
  100%{ height:250px; opacity:0; }
}

/* Batch 40: Ghost fade extended 4 */
.ghost-fade-extended-4{
  animation: ghost-fade-extended-4-anim 15s ease-in-out infinite;
}
@keyframes ghost-fade-extended-4-anim{
  0%,100%{ opacity:0.1; filter:blur(6px); }
  50%{ opacity:1; filter:blur(0px); }
}

/* Batch 40: Flicker light extended 5 */
.flicker-light-extended-5{
  animation: flicker-light-extended-5-anim 8s ease-in-out infinite;
}
@keyframes flicker-light-extended-5-anim{
  0%,100%{ filter:brightness(1) contrast(1) saturate(1); }
  90%{ filter:brightness(1) contrast(1) saturate(1); }
  91%{ filter:brightness(0.2) contrast(0.4) saturate(0.6); }
  92%{ filter:brightness(1.8) contrast(1.6) saturate(1.4); }
  93%{ filter:brightness(0.4) contrast(0.5) saturate(0.7); }
  94%{ filter:brightness(1) contrast(1) saturate(1); }
}

/* 181. Transition all */
.transition-all{
  transition:all 0.3s ease;
}

/* 182. Transition colors */
.transition-colors{
  transition:color 0.3s ease, background-color 0.3s ease;
}

/* Batch 41: Horror shake extended 4 */
.horror-shake-extended-4{
  animation: horror-shake-extended-4-anim 1.6s ease-in-out infinite;
}
@keyframes horror-shake-extended-4-anim{
  0%,100%{ transform:translate(0) rotate(0deg); }
  12.5%{ transform:translate(-7px, 7px) rotate(-5deg); }
  25%{ transform:translate(7px, -7px) rotate(5deg); }
  37.5%{ transform:translate(-7px, -7px) rotate(-5deg); }
  50%{ transform:translate(7px, 7px) rotate(5deg); }
  62.5%{ transform:translate(-7px, 7px) rotate(-5deg); }
  75%{ transform:translate(7px, -7px) rotate(5deg); }
  87.5%{ transform:translate(-7px, 7px) rotate(-5deg); }
}

/* Batch 41: Blood splat extended 4 */
.blood-splat-extended-4{
  position:relative;
}
.blood-splat-extended-4::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:0;
  height:0;
  background:radial-gradient(circle, rgba(226,39,63,0.9), transparent 80%);
  border-radius:50%;
  animation: blood-splat-extended-4-anim 14s ease-in-out infinite;
}
@keyframes blood-splat-extended-4-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:350px; height:350px; }
}

/* Batch 41: Ghost float extended 7 */
.ghost-float-extended-7{
  animation: ghost-float-extended-7-anim 20s ease-in-out infinite;
}
@keyframes ghost-float-extended-7-anim{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.2; }
  12.5%{ transform:translateY(-25px) translateX(20px) rotate(6deg) scale(1.1); opacity:0.4; }
  25%{ transform:translateY(-50px) translateX(0) rotate(0deg) scale(1.2); opacity:1; }
  37.5%{ transform:translateY(-25px) translateX(-20px) rotate(-6deg) scale(1.1); opacity:0.4; }
  50%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.2; }
}

/* Batch 41: Creepy shadow extended 4 */
.creepy-shadow-extended-4{
  box-shadow:0 30px 70px rgba(0,0,0,0.9);
  animation: creepy-shadow-extended-4-anim 9s ease-in-out infinite;
}
@keyframes creepy-shadow-extended-4-anim{
  0%,100%{ box-shadow:0 30px 70px rgba(0,0,0,0.9); }
  50%{ box-shadow:0 35px 80px rgba(226,39,63,0.7); }
}

/* Batch 42: Static burst extended 5 */
.static-burst-extended-5{
  animation: static-burst-extended-5-anim 18s ease-in-out infinite;
}
@keyframes static-burst-extended-5-anim{
  0%,89%,100%{ filter:none; }
  90%{ filter:contrast(4) brightness(1.7) saturate(1.6) hue-rotate(20deg); }
  91%{ filter:none; }
}

/* Batch 42: Blood seep corner extended 4 */
.blood-seep-corner-extended-4{
  position:relative;
  overflow:hidden;
}
.blood-seep-corner-extended-4::after{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:0;
  background:linear-gradient(225deg, transparent, rgba(226,39,63,0.7), rgba(226,39,63,0.4), rgba(226,39,63,0.2), rgba(226,39,63,0.1), transparent);
  animation: blood-seep-corner-extended-4-anim 16s ease-in-out infinite;
}
@keyframes blood-seep-corner-extended-4-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:350px; height:350px; }
}

/* Batch 42: Ghost trail extended 5 */
.ghost-trail-extended-5{
  position:relative;
}
.ghost-trail-extended-5::before,
.ghost-trail-extended-5::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacity 0.8s, transform 0.8s;
}
.ghost-trail-extended-5:hover::before{
  opacity:0.6;
  transform:translateX(-12px) translateY(10px);
  transition-delay:0.18s;
}
.ghost-trail-extended-5:hover::after{
  opacity:0.5;
  transform:translateX(-24px) translateY(20px);
  transition-delay:0.35s;
}

/* Batch 42: Heartbeat border extended 7 */
.heartbeat-border-extended-7{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-7-anim 5s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-7-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 20px rgba(226,39,63,0.9); }
  4%{ border-width:9px; box-shadow:0 0 45px rgba(226,39,63,1); }
  8%{ border-width:2px; box-shadow:0 0 20px rgba(226,39,63,0.9); }
  12%{ border-width:9px; box-shadow:0 0 45px rgba(226,39,63,1); }
  16%{ border-width:2px; box-shadow:0 0 20px rgba(226,39,63,0.9); }
  20%{ border-width:9px; box-shadow:0 0 45px rgba(226,39,63,1); }
  24%{ border-width:2px; box-shadow:0 0 20px rgba(226,39,63,0.9); }
  28%{ border-width:9px; box-shadow:0 0 45px rgba(226,39,63,1); }
  32%{ border-width:2px; box-shadow:0 0 20px rgba(226,39,63,0.9); }
  36%{ border-width:9px; box-shadow:0 0 45px rgba(226,39,63,1); }
  40%{ border-width:2px; box-shadow:0 0 20px rgba(226,39,63,0.9); }
  44%{ border-width:9px; box-shadow:0 0 45px rgba(226,39,63,1); }
  48%{ border-width:2px; box-shadow:0 0 20px rgba(226,39,63,0.9); }
  52%{ border-width:9px; box-shadow:0 0 45px rgba(226,39,63,1); }
  56%{ border-width:2px; box-shadow:0 0 20px rgba(226,39,63,0.9); }
}

/* Batch 43: Horror pulse extended 4 */
.horror-pulse-extended-4{
  animation: horror-pulse-extended-4-anim 8s ease-in-out infinite;
}
@keyframes horror-pulse-extended-4-anim{
  0%,100%{ box-shadow:0 0 30px rgba(226,39,63,0.7); }
  50%{ box-shadow:0 0 70px rgba(226,39,63,1), 0 0 120px rgba(226,39,63,0.7); }
}

/* Batch 43: Blood drip corner extended 4 */
.blood-drip-corner-extended-4{
  position:relative;
  overflow:hidden;
}
.blood-drip-corner-extended-4::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:6px;
  height:0;
  background:linear-gradient(180deg, var(--blood-bright), var(--blood), rgba(226,39,63,0.6), rgba(226,39,63,0.3), transparent);
  animation: blood-drip-corner-extended-4-anim 14s ease-in infinite;
}
@keyframes blood-drip-corner-extended-4-anim{
  0%{ height:0; opacity:1; }
  90%{ height:300px; opacity:0.5; }
  100%{ height:350px; opacity:0; }
}

/* Batch 43: Ghost float extended 8 */
.ghost-float-extended-8{
  animation: ghost-float-extended-8-anim 22s ease-in-out infinite;
}
@keyframes ghost-float-extended-8-anim{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.15; }
  11.11%{ transform:translateY(-28px) translateX(22px) rotate(7deg) scale(1.12); opacity:0.35; }
  22.22%{ transform:translateY(-55px) translateX(0) rotate(0deg) scale(1.25); opacity:1; }
  33.33%{ transform:translateY(-28px) translateX(-22px) rotate(-7deg) scale(1.12); opacity:0.35; }
  44.44%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.15; }
}

/* Batch 43: Static noise extended 5 */
.static-noise-extended-5{
  position:relative;
}
.static-noise-extended-5::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='350' height='350'><filter id='n6'><feTurbulence type='fractalNoise' baseFrequency='4' numOctaves='7'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n6)' opacity='0.55'/></svg>");
  animation: static-noise-extended-5-anim 0.07s steps(9) infinite;
  pointer-events:none;
}
@keyframes static-noise-extended-5-anim{
  0%{ transform:translate(0,0); }
  11.11%{ transform:translate(-7%,7%); }
  22.22%{ transform:translate(7%,7%); }
  33.33%{ transform:translate(7%,-7%); }
  44.44%{ transform:translate(-7%,-7%); }
  55.55%{ transform:translate(5%,5%); }
  66.66%{ transform:translate(-5%,5%); }
  77.77%{ transform:translate(3%,3%); }
  88.88%{ transform:translate(0,0); }
  100%{ transform:translate(0,0); }
}

/* Batch 44: Heartbeat border extended 8 */
.heartbeat-border-extended-8{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-8-anim 5.5s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-8-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 22px rgba(226,39,63,1); }
  3.63%{ border-width:10px; box-shadow:0 0 50px rgba(226,39,63,1); }
  7.27%{ border-width:2px; box-shadow:0 0 22px rgba(226,39,63,1); }
  10.9%{ border-width:10px; box-shadow:0 0 50px rgba(226,39,63,1); }
  14.54%{ border-width:2px; box-shadow:0 0 22px rgba(226,39,63,1); }
  18.18%{ border-width:10px; box-shadow:0 0 50px rgba(226,39,63,1); }
  21.81%{ border-width:2px; box-shadow:0 0 22px rgba(226,39,63,1); }
  25.45%{ border-width:10px; box-shadow:0 0 50px rgba(226,39,63,1); }
  29.09%{ border-width:2px; box-shadow:0 0 22px rgba(226,39,63,1); }
  32.72%{ border-width:10px; box-shadow:0 0 50px rgba(226,39,63,1); }
  36.36%{ border-width:2px; box-shadow:0 0 22px rgba(226,39,63,1); }
  40%{ border-width:10px; box-shadow:0 0 50px rgba(226,39,63,1); }
  43.63%{ border-width:2px; box-shadow:0 0 22px rgba(226,39,63,1); }
  47.27%{ border-width:10px; box-shadow:0 0 50px rgba(226,39,63,1); }
  50.9%{ border-width:2px; box-shadow:0 0 22px rgba(226,39,63,1); }
  54.54%{ border-width:10px; box-shadow:0 0 50px rgba(226,39,63,1); }
  58.18%{ border-width:2px; box-shadow:0 0 22px rgba(226,39,63,1); }
}

/* Batch 44: Blood splatter radial extended 4 */
.blood-splatter-radial-extended-4:hover{
  position:relative;
}
.blood-splatter-radial-extended-4:hover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(226,39,63,0.8), transparent 80%), radial-gradient(circle at 0% 100%, rgba(226,39,63,0.7), transparent 70%), radial-gradient(circle at 100% 0%, rgba(226,39,63,0.7), transparent 70%), radial-gradient(circle at 100% 100%, rgba(226,39,63,0.6), transparent 60%), radial-gradient(circle at 0% 0%, rgba(226,39,63,0.5), transparent 50%), radial-gradient(circle at 50% 100%, rgba(226,39,63,0.4), transparent 45%), radial-gradient(circle at 50% 0%, rgba(226,39,63,0.3), transparent 40%);
  animation: splatter-radial-extended-4 1.1s ease-out;
}
@keyframes splatter-radial-extended-4{
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(5); opacity:0; }
}

/* Batch 44: Ghost appear extended 5 */
.ghost-appear-extended-5{
  animation: ghost-appear-extended-5-anim 18s ease-in-out infinite;
}
@keyframes ghost-appear-extended-5-anim{
  0%,100%{ opacity:0; transform:scale(0.65) translateY(30px) rotate(-10deg); }
  50%{ opacity:1; transform:scale(1.2) translateY(0) rotate(10deg); }
}

/* Batch 44: Flicker neon color extended 4 */
.flicker-neon-color-extended-4{
  animation: flicker-neon-color-extended-4-anim 8s ease-in-out infinite;
}
@keyframes flicker-neon-color-extended-4-anim{
  0%,100%{ color:var(--bone); text-shadow:0 0 30px var(--blood); }
  82%{ color:var(--bone); text-shadow:0 0 30px var(--blood); }
  83%{ color:var(--blood-bright); text-shadow:0 0 55px var(--blood-bright); }
  84%{ color:var(--bone); text-shadow:0 0 30px var(--blood); }
  85%{ color:var(--blood-bright); text-shadow:0 0 50px var(--blood-bright); }
  86%{ color:var(--bone); text-shadow:0 0 30px var(--blood); }
  87%{ color:var(--blood-bright); text-shadow:0 0 60px var(--blood-bright); }
  88%{ color:var(--bone); text-shadow:0 0 30px var(--blood); }
  89%{ color:var(--blood-bright); text-shadow:0 0 45px var(--blood-bright); }
  90%{ color:var(--bone); text-shadow:0 0 30px var(--blood); }
  91%{ color:var(--blood-bright); text-shadow:0 0 65px var(--blood-bright); }
  92%{ color:var(--bone); text-shadow:0 0 30px var(--blood); }
  93%{ color:var(--blood-bright); text-shadow:0 0 40px var(--blood-bright); }
  94%{ color:var(--bone); text-shadow:0 0 30px var(--blood); }
}

/* Batch 45: Creepy crawl extended 5 */
.creepy-crawl-extended-5{
  background-image:repeating-linear-gradient(88deg, transparent, transparent 35px, rgba(226,39,63,0.18) 35px, rgba(226,39,63,0.18) 70px);
  background-size:140px 140px;
  animation: crawl-extended-5-anim 45s linear infinite;
}
@keyframes crawl-extended-5-anim{
  0%{ background-position:0 0; }
  100%{ background-position:1400px 1400px; }
}

/* Batch 45: Blood seep multiple extended 3 */
.blood-seep-multiple-extended-3{
  position:relative;
  overflow:hidden;
}
.blood-seep-multiple-extended-3::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(180deg, transparent, rgba(226,39,63,0.45), rgba(226,39,63,0.25), rgba(226,39,63,0.12), rgba(226,39,63,0.06), rgba(226,39,63,0.02), transparent);
  animation: blood-seep-multiple-extended-3-anim 20s ease-in-out infinite;
}
.blood-seep-multiple-extended-3::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:0;
  background:linear-gradient(0deg, transparent, rgba(226,39,63,0.35), rgba(226,39,63,0.18), rgba(226,39,63,0.1), rgba(226,39,63,0.05), rgba(226,39,63,0.02), transparent);
  animation: blood-seep-multiple-extended-3-anim-2 20s ease-in-out infinite;
}
@keyframes blood-seep-multiple-extended-3-anim{
  0%,100%{ height:0; }
  50%{ height:50%; }
}
@keyframes blood-seep-multiple-extended-3-anim-2{
  0%,100%{ height:0; }
  50%{ height:40%; }
}

/* Batch 45: Ghost whisper extended 6 */
.ghost-whisper-extended-6{
  text-shadow:0 0 40px rgba(226,39,63,0.9);
  animation: ghost-whisper-extended-6-anim 18s ease-in-out infinite;
}
@keyframes ghost-whisper-extended-6-anim{
  0%,100%{ text-shadow:0 0 40px rgba(226,39,63,0.9); opacity:0.4; }
  50%{ text-shadow:0 0 70px rgba(226,39,63,1), 0 0 120px rgba(226,39,63,0.9); opacity:1; }
}

/* Batch 45: Static glitch extended 5 */
.static-glitch-extended-5{
  animation: static-glitch-extended-5-anim 16s ease-in-out infinite;
}
@keyframes static-glitch-extended-5-anim{
  0%,84%,100%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  85%{ clip-path:polygon(0 18%, 100% 0, 100% 82%, 0 100%); }
  86%{ clip-path:polygon(0 0, 100% 18%, 100% 100%, 18% 100%); }
  87%{ clip-path:polygon(12% 0, 100% 0, 100% 100%, 0 88%); }
  88%{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Batch 46: Heartbeat text extended 5 */
.heartbeat-text-extended-5{
  animation: heartbeat-text-extended-5-anim 4s ease-in-out infinite;
}
@keyframes heartbeat-text-extended-5-anim{
  0%,100%{ transform:scale(1); }
  6.25%{ transform:scale(1.2); }
  12.5%{ transform:scale(1); }
  18.75%{ transform:scale(1.2); }
  25%{ transform:scale(1); }
  31.25%{ transform:scale(1.2); }
  37.5%{ transform:scale(1); }
  43.75%{ transform:scale(1.2); }
  50%{ transform:scale(1); }
  56.25%{ transform:scale(1.2); }
  62.5%{ transform:scale(1); }
  68.75%{ transform:scale(1.2); }
  75%{ transform:scale(1); }
  81.25%{ transform:scale(1.2); }
  87.5%{ transform:scale(1); }
}

/* Batch 46: Blood drip multiple extended 3 */
.blood-drip-multiple-extended-3{
  position:relative;
  overflow:hidden;
}
.blood-drip-multiple-extended-3::after{
  content:"";
  position:absolute;
  top:0;
  left:5%;
  width:6px;
  height:0;
  background:linear-gradient(180deg, var(--blood-bright), var(--blood), rgba(226,39,63,0.6), rgba(226,39,63,0.3), transparent);
  animation: blood-drip-multiple-extended-3-anim 8s ease-in infinite;
}
.blood-drip-multiple-extended-3::before{
  content:"";
  position:absolute;
  top:0;
  left:38%;
  width:7px;
  height:0;
  background:linear-gradient(180deg, var(--blood), var(--blood-bright), rgba(226,39,63,0.7), rgba(226,39,63,0.4), transparent);
  animation: blood-drip-multiple-extended-3-anim-2 10s ease-in infinite;
}
.blood-drip-multiple-extended-3 .extra-drip-4{
  content:"";
  position:absolute;
  top:0;
  left:72%;
  width:5px;
  height:0;
  background:linear-gradient(180deg, var(--blood-bright), rgba(226,39,63,0.6), rgba(226,39,63,0.3), transparent);
  animation: blood-drip-multiple-extended-3-anim 9s ease-in infinite;
}
@keyframes blood-drip-multiple-extended-3-anim{
  0%{ height:0; opacity:1; }
  85%{ height:200px; opacity:0.55; }
  100%{ height:220px; opacity:0; }
}
@keyframes blood-drip-multiple-extended-3-anim-2{
  0%{ height:0; opacity:1; }
  90%{ height:250px; opacity:0.65; }
  100%{ height:280px; opacity:0; }
}

/* Batch 46: Ghost fade extended 5 */
.ghost-fade-extended-5{
  animation: ghost-fade-extended-5-anim 17s ease-in-out infinite;
}
@keyframes ghost-fade-extended-5-anim{
  0%,100%{ opacity:0.05; filter:blur(7px); }
  50%{ opacity:1; filter:blur(0px); }
}

/* Batch 46: Flicker light extended 6 */
.flicker-light-extended-6{
  animation: flicker-light-extended-6-anim 9s ease-in-out infinite;
}
@keyframes flicker-light-extended-6-anim{
  0%,100%{ filter:brightness(1) contrast(1) saturate(1); }
  89%{ filter:brightness(1) contrast(1) saturate(1); }
  90%{ filter:brightness(0.1) contrast(0.3) saturate(0.5); }
  91%{ filter:brightness(2) contrast(1.8) saturate(1.5); }
  92%{ filter:brightness(0.3) contrast(0.4) saturate(0.6); }
  93%{ filter:brightness(1) contrast(1) saturate(1); }
}

/* Batch 47: Horror shake extended 5 */
.horror-shake-extended-5{
  animation: horror-shake-extended-5-anim 1.8s ease-in-out infinite;
}
@keyframes horror-shake-extended-5-anim{
  0%,100%{ transform:translate(0) rotate(0deg); }
  11.11%{ transform:translate(-8px, 8px) rotate(-6deg); }
  22.22%{ transform:translate(8px, -8px) rotate(6deg); }
  33.33%{ transform:translate(-8px, -8px) rotate(-6deg); }
  44.44%{ transform:translate(8px, 8px) rotate(6deg); }
  55.55%{ transform:translate(-8px, 8px) rotate(-6deg); }
  66.66%{ transform:translate(8px, -8px) rotate(6deg); }
  77.77%{ transform:translate(-8px, 8px) rotate(-6deg); }
  88.88%{ transform:translate(8px, -8px) rotate(6deg); }
}

/* Batch 47: Blood splat extended 5 */
.blood-splat-extended-5{
  position:relative;
}
.blood-splat-extended-5::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:0;
  height:0;
  background:radial-gradient(circle, rgba(226,39,63,1), transparent 85%);
  border-radius:50%;
  animation: blood-splat-extended-5-anim 16s ease-in-out infinite;
}
@keyframes blood-splat-extended-5-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:400px; height:400px; }
}

/* Batch 47: Ghost float extended 9 */
.ghost-float-extended-9{
  animation: ghost-float-extended-9-anim 24s ease-in-out infinite;
}
@keyframes ghost-float-extended-9-anim{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.1; }
  10%{ transform:translateY(-30px) translateX(25px) rotate(8deg) scale(1.15); opacity:0.3; }
  20%{ transform:translateY(-60px) translateX(0) rotate(0deg) scale(1.3); opacity:1; }
  30%{ transform:translateY(-30px) translateX(-25px) rotate(-8deg) scale(1.15); opacity:0.3; }
  40%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.1; }
}

/* Batch 47: Creepy shadow extended 5 */
.creepy-shadow-extended-5{
  box-shadow:0 35px 80px rgba(0,0,0,1);
  animation: creepy-shadow-extended-5-anim 10s ease-in-out infinite;
}
@keyframes creepy-shadow-extended-5-anim{
  0%,100%{ box-shadow:0 35px 80px rgba(0,0,0,1); }
  50%{ box-shadow:0 40px 90px rgba(226,39,63,0.8); }
}

/* Batch 48: Static burst extended 6 */
.static-burst-extended-6{
  animation: static-burst-extended-6-anim 20s ease-in-out infinite;
}
@keyframes static-burst-extended-6-anim{
  0%,88%,100%{ filter:none; }
  89%{ filter:contrast(4.5) brightness(1.8) saturate(1.7) hue-rotate(25deg); }
  90%{ filter:none; }
}

/* Batch 48: Blood seep corner extended 5 */
.blood-seep-corner-extended-5{
  position:relative;
  overflow:hidden;
}
.blood-seep-corner-extended-5::after{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:0;
  height:0;
  background:linear-gradient(225deg, transparent, rgba(226,39,63,0.8), rgba(226,39,63,0.5), rgba(226,39,63,0.25), rgba(226,39,63,0.12), rgba(226,39,63,0.05), transparent);
  animation: blood-seep-corner-extended-5-anim 18s ease-in-out infinite;
}
@keyframes blood-seep-corner-extended-5-anim{
  0%,100%{ width:0; height:0; }
  50%{ width:400px; height:400px; }
}

/* Batch 48: Ghost trail extended 6 */
.ghost-trail-extended-6{
  position:relative;
}
.ghost-trail-extended-6::before,
.ghost-trail-extended-6::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacity 0.9s, transform 0.9s;
}
.ghost-trail-extended-6:hover::before{
  opacity:0.65;
  transform:translateX(-14px) translateY(12px);
  transition-delay:0.2s;
}
.ghost-trail-extended-6:hover::after{
  opacity:0.55;
  transform:translateX(-28px) translateY(24px);
  transition-delay:0.4s;
}

/* Batch 48: Heartbeat border extended 9 */
.heartbeat-border-extended-9{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-9-anim 6s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-9-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
  3.33%{ border-width:12px; box-shadow:0 0 55px rgba(226,39,63,1); }
  6.66%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
  10%{ border-width:12px; box-shadow:0 0 55px rgba(226,39,63,1); }
  13.33%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
  16.66%{ border-width:12px; box-shadow:0 0 55px rgba(226,39,63,1); }
  20%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
  23.33%{ border-width:12px; box-shadow:0 0 55px rgba(226,39,63,1); }
  26.66%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
  30%{ border-width:12px; box-shadow:0 0 55px rgba(226,39,63,1); }
  33.33%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
  36.66%{ border-width:12px; box-shadow:0 0 55px rgba(226,39,63,1); }
  40%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
  43.33%{ border-width:12px; box-shadow:0 0 55px rgba(226,39,63,1); }
  46.66%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
  50%{ border-width:12px; box-shadow:0 0 55px rgba(226,39,63,1); }
  53.33%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
  56.66%{ border-width:12px; box-shadow:0 0 55px rgba(226,39,63,1); }
  60%{ border-width:2px; box-shadow:0 0 25px rgba(226,39,63,1); }
}

/* Batch 49: Horror pulse extended 5 */
.horror-pulse-extended-5{
  animation: horror-pulse-extended-5-anim 9s ease-in-out infinite;
}
@keyframes horror-pulse-extended-5-anim{
  0%,100%{ box-shadow:0 0 35px rgba(226,39,63,0.8); }
  50%{ box-shadow:0 0 80px rgba(226,39,63,1), 0 0 140px rgba(226,39,63,0.8); }
}

/* Batch 49: Blood drip corner extended 5 */
.blood-drip-corner-extended-5{
  position:relative;
  overflow:hidden;
}
.blood-drip-corner-extended-5::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:7px;
  height:0;
  background:linear-gradient(180deg, var(--blood-bright), var(--blood), rgba(226,39,63,0.7), rgba(226,39,63,0.4), rgba(226,39,63,0.2), transparent);
  animation: blood-drip-corner-extended-5-anim 16s ease-in infinite;
}
@keyframes blood-drip-corner-extended-5-anim{
  0%{ height:0; opacity:1; }
  95%{ height:350px; opacity:0.45; }
  100%{ height:400px; opacity:0; }
}

/* Batch 49: Ghost float extended 10 */
.ghost-float-extended-10{
  animation: ghost-float-extended-10-anim 26s ease-in-out infinite;
}
@keyframes ghost-float-extended-10-anim{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.05; }
  9.09%{ transform:translateY(-32px) translateX(28px) rotate(9deg) scale(1.18); opacity:0.25; }
  18.18%{ transform:translateY(-65px) translateX(0) rotate(0deg) scale(1.35); opacity:1; }
  27.27%{ transform:translateY(-32px) translateX(-28px) rotate(-9deg) scale(1.18); opacity:0.25; }
  36.36%{ transform:translateY(0) translateX(0) rotate(0deg) scale(1); opacity:0.05; }
}

/* Batch 49: Static noise extended 6 */
.static-noise-extended-6{
  position:relative;
}
.static-noise-extended-6::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n7'><feTurbulence type='fractalNoise' baseFrequency='4.5' numOctaves='8'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n7)' opacity='0.6'/></svg>");
  animation: static-noise-extended-6-anim 0.06s steps(10) infinite;
  pointer-events:none;
}
@keyframes static-noise-extended-6-anim{
  0%{ transform:translate(0,0); }
  10%{ transform:translate(-8%,8%); }
  20%{ transform:translate(8%,8%); }
  30%{ transform:translate(8%,-8%); }
  40%{ transform:translate(-8%,-8%); }
  50%{ transform:translate(6%,6%); }
  60%{ transform:translate(-6%,6%); }
  70%{ transform:translate(4%,4%); }
  80%{ transform:translate(-4%,4%); }
  90%{ transform:translate(0,0); }
  100%{ transform:translate(0,0); }
}

/* Batch 50: Heartbeat border extended 10 */
.heartbeat-border-extended-10{
  border:2px solid var(--blood);
  animation: heartbeat-border-extended-10-anim 6.5s ease-in-out infinite;
}
@keyframes heartbeat-border-extended-10-anim{
  0%,100%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  3.07%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  6.15%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  9.23%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  12.3%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  15.38%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  18.46%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  21.53%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  24.61%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  27.69%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  30.76%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  33.84%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  36.92%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  40%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  43.07%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  46.15%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  49.23%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  52.3%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  55.38%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  58.46%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  61.53%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  64.61%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  67.69%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  70.76%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  73.84%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
  76.92%{ border-width:14px; box-shadow:0 0 60px rgba(226,39,63,1); }
  80%{ border-width:2px; box-shadow:0 0 28px rgba(226,39,63,1); }
}

/* Batch 50: Blood splatter radial extended 5 */
.blood-splatter-radial-extended-5:hover{
  position:relative;
}
.blood-splatter-radial-extended-5:hover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(226,39,63,0.9), transparent 85%), radial-gradient(circle at 0% 100%, rgba(226,39,63,0.8), transparent 75%), radial-gradient(circle at 100% 0%, rgba(226,39,63,0.8), transparent 75%), radial-gradient(circle at 100% 100%, rgba(226,39,63,0.7), transparent 65%), radial-gradient(circle at 0% 0%, rgba(226,39,63,0.6), transparent 55%), radial-gradient(circle at 50% 100%, rgba(226,39,63,0.5), transparent 50%), radial-gradient(circle at 50% 0%, rgba(226,39,63,0.4), transparent 45%), radial-gradient(circle at 25% 50%, rgba(226,39,63,0.3), transparent 40%);
  animation: splatter-radial-extended-5 1.2s ease-out;
}
@keyframes splatter-radial-extended-5{
  0%{ transform:scale(0); opacity:1; }
  100%{ transform:scale(5.5); opacity:0; }
}

/* Batch 50: Ghost appear extended 6 */
.ghost-appear-extended-6{
  animation: ghost-appear-extended-6-anim 20s ease-in-out infinite;
}
@keyframes ghost-appear-extended-6-anim{
  0%,100%{ opacity:0; transform:scale(0.6) translateY(35px) rotate(-12deg); }
  50%{ opacity:1; transform:scale(1.25) translateY(0) rotate(12deg); }
}

/* Batch 50: Flicker neon color extended 5 */
.flicker-neon-color-extended-5{
  animation: flicker-neon-color-extended-5-anim 9s ease-in-out infinite;
}
@keyframes flicker-neon-color-extended-5-anim{
  0%,100%{ color:var(--bone); text-shadow:0 0 35px var(--blood); }
  80%{ color:var(--bone); text-shadow:0 0 35px var(--blood); }
  81%{ color:var(--blood-bright); text-shadow:0 0 65px var(--blood-bright); }
  82%{ color:var(--bone); text-shadow:0 0 35px var(--blood); }
  83%{ color:var(--blood-bright); text-shadow:0 0 60px var(--blood-bright); }
  84%{ color:var(--bone); text-shadow:0 0 35px var(--blood); }
  85%{ color:var(--blood-bright); text-shadow:0 0 70px var(--blood-bright); }
  86%{ color:var(--bone); text-shadow:0 0 35px var(--blood); }
  87%{ color:var(--blood-bright); text-shadow:0 0 55px var(--blood-bright); }
  88%{ color:var(--bone); text-shadow:0 0 35px var(--blood); }
  89%{ color:var(--blood-bright); text-shadow:0 0 75px var(--blood-bright); }
  90%{ color:var(--bone); text-shadow:0 0 35px var(--blood); }
  91%{ color:var(--blood-bright); text-shadow:0 0 50px var(--blood-bright); }
  92%{ color:var(--bone); text-shadow:0 0 35px var(--blood); }
  93%{ color:var(--blood-bright); text-shadow:0 0 80px var(--blood-bright); }
  94%{ color:var(--bone); text-shadow:0 0 35px var(--blood); }
}

/* END OF 200 HORROR CSS EFFECTS */

/* 183. Transition opacity */
.transition-opacity{
  transition:opacity 0.3s ease;
}

/* 184. Transition transform */
.transition-transform{
  transition:transform 0.3s ease;
}

/* 185. Transition none */
.transition-none{
  transition:none;
}

/* Group headers for perks/addons/offerings */
.group-header{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:700;
  color:var(--bone);
  margin:40px 0 20px 0;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  text-transform:uppercase;
  letter-spacing:0.1em;
}

/* Grouped layout containers */
.groups-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
  margin-bottom:32px;
}

.group-wrapper{
  width:100%;
  display:flex;
  flex-direction:column;
}

/* Group grids - inherit original grid sizing */
.group-grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(5, 1fr);
  max-width:100%;
  overflow-wrap:break-word;
}
@media (min-width:560px){ .group-grid{ gap:20px; } }
@media (min-width:1000px){ .group-grid{ gap:22px; } }
@media (max-width:559px){ .group-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:400px){ .group-grid{ grid-template-columns: repeat(2, 1fr); } }

.group-grid-small{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(3, 1fr);
  max-width:100%;
  overflow-wrap:break-word;
}
@media (min-width:560px){ .group-grid-small{ gap:20px; } }
@media (min-width:1000px){ .group-grid-small{ gap:22px; } }
@media (max-width:559px){ .group-grid-small{ grid-template-columns: repeat(2, 1fr); } }

/* Mobile menu button */
.mobile-menu-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:44px;
  height:44px;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:6px;
  cursor:pointer;
  padding:8px;
  gap:5px;
  transition:all 0.3s ease;
}
.mobile-menu-btn:hover{
  border-color:var(--blood);
  box-shadow:0 0 15px rgba(226,39,63,0.3);
}
.mobile-menu-btn[aria-expanded="true"] .hamburger:nth-child(1){
  transform:rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn[aria-expanded="true"] .hamburger:nth-child(2){
  opacity:0;
}
.mobile-menu-btn[aria-expanded="true"] .hamburger:nth-child(3){
  transform:rotate(-45deg) translate(5px, -5px);
}
.hamburger{
  width:20px;
  height:2px;
  background:var(--bone);
  border-radius:2px;
  transition:all 0.3s ease;
}

@media (max-width:768px){
  .mobile-menu-btn{
    display:flex;
  }
  .tabs{
    position:fixed;
    top:0;
    right:-100%;
    width:280px;
    height:100vh;
    background:var(--bg);
    flex-direction:column;
    padding:80px 20px 20px;
    box-shadow:-5px 0 20px rgba(0,0,0,0.5);
    transition:right 0.3s ease;
    z-index:100;
  }
  .tabs.is-open{
    right:0;
  }
  .tabs .tab{
    padding:15px 20px;
    border-bottom:1px solid var(--line);
    text-align:left;
    min-height:44px;
    display:flex;
    align-items:center;
  }
  
  /* Improve touch targets for mobile */
  .card{
    min-height:44px;
  }
  .chip{
    min-height:44px;
    min-width:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
  }
  button{
    min-height:44px;
    min-width:44px;
  }
  .sheet-close{
    width:44px;
    height:44px;
    font-size:1.2rem;
  }
  .lightbox-close{
    width:44px;
    height:44px;
    font-size:1.2rem;
  }
  
  /* Mobile-specific card layouts - single column */
  .grid{
    grid-template-columns: 1fr !important;
  }
  .group-grid,
  .group-grid-small{
    grid-template-columns: 1fr !important;
  }
  .groups-row{
    grid-template-columns: 1fr !important;
    gap:20px !important;
  }
}

/* 186. Duration 75 */
.duration-75{
  transition-duration:75ms;
}

/* 187. Duration 150 */
.duration-150{
  transition-duration:150ms;
}

/* 188. Duration 300 */
.duration-300{
  transition-duration:300ms;
}

/* 189. Duration 500 */
.duration-500{
  transition-duration:500ms;
}

/* 190. Duration 700 */
.duration-700{
  transition-duration:700ms;
}

/* 191. Duration 1000 */
.duration-1000{
  transition-duration:1000ms;
}

/* 192. Ease linear */
.ease-linear{
  transition-timing-function:linear;
}

/* 193. Ease in */
.ease-in{
  transition-timing-function:ease-in;
}

/* 194. Ease out */
.ease-out{
  transition-timing-function:ease-out;
}

/* 195. Ease in out */
.ease-in-out{
  transition-timing-function:ease-in-out;
}

/* 196. Delay 75 */
.delay-75{
  transition-delay:75ms;
}

/* 197. Delay 150 */
.delay-150{
  transition-delay:150ms;
}

/* 198. Delay 300 */
.delay-300{
  transition-delay:300ms;
}

/* 199. Delay 500 */
.delay-500{
  transition-delay:500ms;
}

/* 200. Delay 700 */
.delay-700{
  transition-delay:700ms;
}

/* Inline style fixes */
.tabs-margin-top {
  margin-top: 30px;
}

.tab-mori {
  color: var(--blood-bright);
}

.toolbar-margin-top {
  margin-top: 40px;
}

.footer-disclaimer {
  margin-top: 12px;
  font-size: 0.65rem;
  color: var(--bone-dim);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* ══════════ Music button + hover volume slider ══════════ */
.music-wrap{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.music-toggle{
  background:rgba(28,24,32,0.9);
  border:1px solid rgba(233,227,212,0.2);
  border-radius:50%;
  width:50px;
  height:50px;
  font-size:24px;
  cursor:pointer;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:all 0.3s ease;
}
.music-toggle:hover{
  border-color:var(--blood);
  box-shadow:0 0 15px rgba(226,39,63,0.3);
}
.music-volume{
  writing-mode:vertical-lr;
  direction:rtl;
  width:30px;
  height:110px;
  padding:8px 4px;
  background:rgba(28,24,32,0.9);
  border:1px solid rgba(233,227,212,0.2);
  border-radius:15px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  accent-color:#e2273f;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.music-wrap:hover .music-volume,
.music-wrap:focus-within .music-volume{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* ══════════ Light theme - category pages ══════════ */
[data-theme="light"] .video-bg{
  opacity:0;
  visibility:hidden;
}
[data-theme="light"] #fog-canvas{
  opacity:0.12;
}
[data-theme="light"] .scanlines::before,
[data-theme="light"] .scanlines::after,
[data-theme="light"] .entity-pulse,
[data-theme="light"] .scratch-marks{
  display:none;
}
[data-theme="light"] .category-hero{
  background:linear-gradient(180deg, rgba(160,106,214,0.10) 0%, transparent 60%);
}
[data-theme="light"] .category-hero::before{
  opacity:0.35;
}
[data-theme="light"] .category-subtitle{
  color:#57503f;
}
[data-theme="light"] .nav-back{
  background:rgba(255,255,255,0.85);
  color:#221d28;
  border-color:rgba(0,0,0,0.18);
}
[data-theme="light"] .nav-back:hover{
  background:rgba(245,242,235,0.98);
}
[data-theme="light"] .music-toggle,
[data-theme="light"] .music-volume{
  background:rgba(255,255,255,0.9);
  border-color:rgba(0,0,0,0.2);
}


/* ═══════════════════════════════════════════════════════════
   FX LAYER - wiring for docs/css_animation_effects_100.md
   (#39/#95 embers, #18 shimmer, #26 focus dim, #91 breathing,
    plus recently-viewed strip, tooltips, random button)
   ═══════════════════════════════════════════════════════════ */

/* ── Ember motes rising (ambient, idle loop) ── */
.fx-ambience{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fx-ambience .ember{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:var(--blood-bright,#c0392b);box-shadow:0 0 6px 1px rgba(190,40,40,.55);
  opacity:0;left:calc(6% + var(--i)*15%);
  animation:fxEmberRise 12s linear infinite;animation-delay:calc(var(--i)*1.9s)}
@keyframes fxEmberRise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:.5}
  55%{opacity:.22;transform:translateY(-55vh) translateX(14px)}
  100%{transform:translateY(-108vh) translateX(26px);opacity:0}}

/* keep page content painting above the ambience layer */
.recent-strip{position:relative;z-index:4;max-width:1200px;margin:0 auto;padding:18px 20px 6px;}

/* ── Card polish: rarity shimmer sweep (#18) ── */
.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.13),transparent);
  transform:skewX(-18deg);pointer-events:none}
.card:hover::after{left:130%;transition:left .8s ease}

/* ── Breathing portraits: they're alive (#91) ── */
.card:hover img{animation:fxBreath 6.5s ease-in-out infinite}
@keyframes fxBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.016)}}

/* ── Recently viewed strip (site_ideas #3) ── */
.recent-strip{max-width:1280px;margin:30px auto 6px;padding:0 22px}
.recent-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.recent-title{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-dim);margin:0}
.recent-clear{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--bone-dim);background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;cursor:pointer;transition:border-color .2s,color .2s}
.recent-clear:hover{color:var(--blood-bright);border-color:var(--blood)}
.recent-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.recent-card{flex:0 0 auto;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:6px 12px 6px 6px;cursor:pointer;color:var(--bone);font:inherit;font-size:.8rem;
  transition:border-color .25s,transform .25s}
.recent-card:hover{border-color:var(--blood);transform:translateY(-2px)}
.recent-card img{width:34px;height:34px;object-fit:cover;border-radius:5px;animation:none}

/* ── Status-effect tooltips (site_ideas #33) ── */
.fx-tip{border-bottom:1px dotted var(--blood-bright,#c0392b);cursor:help;position:relative}
.fx-tip:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:130%;
  transform:translateX(-50%);background:#0d0d10;border:1px solid var(--line);
  color:var(--bone);padding:6px 10px;border-radius:6px;font-size:.72rem;line-height:1.4;
  width:max-content;max-width:250px;white-space:normal;z-index:80;pointer-events:none;
  box-shadow:0 8px 22px rgba(0,0,0,.65)}

/* ── Random button in the nav (site_ideas #2/#12) ── */
.tab-random{cursor:pointer;background:none;border:1px solid var(--line);border-radius:6px;font:inherit}
.tab-random:hover{border-color:var(--blood);color:var(--blood-bright,#c0392b)}

/* ── Reduced motion guard ── */
@media (prefers-reduced-motion:reduce){
  .fx-ambience .ember,.card img,.card::after{animation:none!important;transition:none!important}
  .scroll-animate,.scroll-animate-left,.scroll-animate-right,.scroll-animate-scale,.scroll-animate-fade{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* fix: remove the red dash bars on section titles (looked like em-dashes) */
.title-fill.blood::before, .title-fill.blood::after { content: none !important; }

/* light theme: detail sheet + sections previously stuck dark */
[data-theme="light"] .sheet { background: var(--void) !important; color: var(--bone) !important; }
[data-theme="light"] .sheet-inner { background: var(--void) !important; }
[data-theme="light"] .d-section { background: var(--surface) !important; border-color: var(--line) !important; color: var(--bone) !important; }
[data-theme="light"] .d-section p, [data-theme="light"] .d-section li, [data-theme="light"] .d-lore { color: var(--bone) !important; }
[data-theme="light"] .power-block, [data-theme="light"] .power-desc { background: var(--raised) !important; color: var(--bone) !important; border-color: var(--line) !important; }
[data-theme="light"] .sub-item { background: var(--raised) !important; border-color: var(--line) !important; }
[data-theme="light"] .sub-item * { color: var(--bone) !important; }
[data-theme="light"] .sub-item .si-desc, [data-theme="light"] .si-meta { color: var(--bone-dim) !important; }
[data-theme="light"] .recent-strip .recent-card { background: var(--surface); color: var(--bone); }
/* Grid cards (.card .name / .sub / .rarity-tag) always sit on top of a
   dark, moodily-filtered artwork image regardless of site theme, so their
   text must stay fixed to the dark-theme light colors - the light-theme
   --bone/--bone-dim overrides (which are dark, for use on light page
   backgrounds elsewhere) make this text invisible against the dark art. */
[data-theme="light"] .card .name { color: #e9e3d4 !important; }
[data-theme="light"] .card .sub { color: #9c958a !important; }
[data-theme="light"] .card:hover .sub { color: #e9e3d4 !important; }
[data-theme="light"] .card .rarity-tag { color: #9c958a !important; }
[data-theme="light"] .card:hover .rarity-tag { color: #e9e3d4 !important; }
[data-theme="light"] .fx-tip:hover::after { background: var(--raised-2); color: var(--bone); }

/* ============================================================
   AWAITING ART - the image element keeps the real filename in src
   so generated files appear on refresh with no code change. These
   rules hide the broken-image glyph and draw a pending state.
   ============================================================ */
img.awaiting-art { opacity: 0 !important; }
.art-pending { position: relative; overflow: hidden; }
.art-pending::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(120,20,14,0.16), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #17141b 0%, #100e14 100%);
  pointer-events: none;
  z-index: 0;
}
.art-pending::after {
  content: "AWAITING ART";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(7px, 1.5vw, 10px);
  letter-spacing: .22em;
  font-weight: 600;
  color: rgba(190,175,160,.30);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  animation: artPendingBreathe 4.2s ease-in-out infinite;
}
@keyframes artPendingBreathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
.art-pending > *:not(::before):not(::after) { position: relative; z-index: 2; }
.icon-pad.art-pending::after, .sub-item.art-pending::after { font-size: 7px; letter-spacing: .16em; }
[data-theme="light"] .art-pending::before {
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(139,26,42,0.10), transparent 60%),
    linear-gradient(180deg, #e8e4df 0%, #ddd7d0 100%);
}
[data-theme="light"] .art-pending::after { color: rgba(60,54,48,.42); }
@media (prefers-reduced-motion: reduce) { .art-pending::after { animation: none; } }

/* ---- newest-first sort toggle ---- */
.count-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.newest-toggle {
  appearance: none;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(210,198,186,.72);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.newest-toggle:hover { background: rgba(255,255,255,.07); color: rgba(228,218,206,.92); }
.newest-toggle:focus-visible { outline: 2px solid rgba(150,30,22,.75); outline-offset: 2px; }
.newest-toggle.is-on {
  background: rgba(126,22,16,.30);
  border-color: rgba(168,38,28,.60);
  color: rgba(238,222,212,.96);
}
[data-theme="light"] .newest-toggle { background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.12); color: rgba(60,54,48,.72); }
[data-theme="light"] .newest-toggle.is-on { background: rgba(139,26,42,.14); border-color: rgba(139,26,42,.45); color: rgba(90,20,28,.95); }


/* ---------------- detail prev/next arrows ---------------- */
.sheet-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line);
  background:rgba(10,9,8,.66); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  color:var(--bone); cursor:pointer;
  font-size:1.5rem; line-height:1; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
}
.sheet-prev{ left:12px; }
.sheet-next{ right:12px; }
.sheet-nav:hover{
  background:var(--blood, #7a1414);
  border-color:var(--blood-bright, #c0392b);
  color:#fff;
  transform:translateY(-50%) scale(1.08);
}
.sheet-nav:active{ transform:translateY(-50%) scale(.96); }
.sheet-nav:focus-visible{ outline:2px solid var(--blood-bright, #c0392b); outline-offset:2px; }
.sheet-nav[disabled]{ opacity:.28; cursor:default; pointer-events:none; }

/* On narrow screens the sheet is full-width/bottom, so tuck arrows just inside the edges */
@media (max-width:759px){
  .sheet-prev{ left:8px; }
  .sheet-next{ right:8px; }
  .sheet-nav{ width:40px; height:40px; font-size:1.35rem; top:88px; transform:none; }
  .sheet-nav:hover{ transform:scale(1.06); }
  .sheet-nav:active{ transform:scale(.96); }
}


/* Easter Eggs tab - gold instead of red */
.tab-ee{ color:var(--gold) !important; }
.tab-ee.is-active{ color:var(--gold) !important; background:transparent !important; box-shadow:none !important; animation:none !important; }
.tab-ee:hover{ color:#e6c14a !important; }


/* -- Save button in detail modal -- */
.sheet-save{
  position:sticky; top:14px; float:right; margin:14px 6px 0 0; z-index:6;
  display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--line);
  background:rgba(10,9,8,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  color:var(--bone); cursor:pointer; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; transition:.2s;
}
.sheet-save:hover{ border-color:var(--gold); color:var(--gold); }
.sheet-save.is-saved{ color:var(--gold); border-color:var(--gold); background:rgba(201,162,39,0.12); }
.sheet-save svg{ display:block; }

/* -- Saved strip: gold-accented variant of recently-viewed -- */
.saved-strip .recent-title{ color:var(--gold); }
.saved-strip .saved-card:hover{ border-color:var(--gold); }
.saved-strip .saved-clear:hover{ color:var(--gold); border-color:var(--gold); }





/* permanent home for Recently viewed + Saved strips */
.fx-strips-wrap{ position:relative; z-index:4; max-width:1200px; margin:0 auto; padding:0 20px; }
.fx-strips-wrap:empty{ display:none; }


/* nav-back golden glow */
.nav-back{
  color:var(--gold) !important;
  border:1px solid rgba(201,162,39,0.6) !important;
  box-shadow:0 0 18px rgba(201,162,39,0.55), 0 0 36px rgba(201,162,39,0.30) !important;
  text-shadow:0 0 10px rgba(201,162,39,0.5) !important;
  background:rgba(30,24,10,0.55) !important;
}
.nav-back:hover{
  box-shadow:0 0 26px rgba(201,162,39,0.75), 0 0 52px rgba(201,162,39,0.4) !important;
  color:#f0d666 !important;
  background:rgba(45,36,14,0.7) !important;
}


/* bottom clearance for fixed buttons */
body{ padding-bottom:90px; }
.site-foot{ padding-bottom:100px !important; }


/* global max 6 cards per row */
@media (min-width:1100px){ .grid:not(.collapsible-content){ grid-template-columns: repeat(6, 1fr) !important; } }
@media (min-width:820px) and (max-width:1099px){ .grid:not(.collapsible-content){ grid-template-columns: repeat(5, 1fr) !important; } }
@media (min-width:620px) and (max-width:819px){ .grid:not(.collapsible-content){ grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width:430px) and (max-width:619px){ .grid:not(.collapsible-content){ grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width:429px){ .grid:not(.collapsible-content){ grid-template-columns: repeat(2, 1fr) !important; } }


/* ===== MOBILE / TABLET OPTIMISATION ===== */
/* never allow sideways scrolling */
html,body{ max-width:100%; overflow-x:hidden; }
img,video,canvas{ max-width:100%; }

/* respect notches / rounded corners (iPhone) */
@supports(padding:max(0px)){
  body{ padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
  .nav-back{ bottom:max(20px, calc(env(safe-area-inset-bottom) + 14px)) !important; }
}

@media (max-width:1024px){
  /* tabs scroll sideways instead of wrapping into a block */
  #tabs{ display:flex; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 10px; }
  #tabs::-webkit-scrollbar{ display:none; }
  #tabs .tab{ flex:0 0 auto; }
}

@media (max-width:760px){
  /* comfortable touch targets */
  .tab{ min-height:44px; display:inline-flex; align-items:center; padding:10px 14px; }
  .bookmark-btn{ width:40px; height:40px; top:6px; right:6px; }
  .sheet-close,.sheet-save{ min-height:44px; }
  .sheet-save{ padding:0 12px; font-size:.68rem; }
  .ee-filter-btn{ min-height:38px; }
  /* detail sheet uses the full screen */
  .sheet{ width:100% !important; max-width:100% !important; border-radius:14px 14px 0 0; }
  .sheet-prev{ left:6px !important; }
  .sheet-next{ right:6px !important; }
  .sheet-nav{ width:38px; height:38px; }
  /* hero scales down */
  .category-hero{ padding:24px 14px 22px !important; }
  .category-title{ font-size:clamp(1.8rem,9vw,2.6rem) !important; }
  .category-subtitle{ font-size:.95rem !important; }
  /* strips scroll with momentum */
  .recent-row{ -webkit-overflow-scrolling:touch; }
  .recent-strip{ padding:14px 14px 6px; }
  /* keep fixed buttons clear of content */
  body{ padding-bottom:110px; }
}

@media (max-width:520px){
  .toolbar{ padding:0 10px; }
  .ee-intro{ padding:16px 14px !important; }
  .ee-intro p{ font-size:1rem !important; }
  .ee-list{ padding:0 10px !important; }
  .ee-group-head{ padding:13px 14px; font-size:.95rem; }
  .ee-group-grid{ padding:12px 12px 16px; }
  .nav-back{ font-size:.72rem; padding:9px 14px; }
}


/* items grid - same scale/behaviour as add-ons */
.items-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:12px; margin-bottom:40px; padding:0 20px; max-width:100%; box-sizing:border-box; width:100%; }
.items-grid .card{ aspect-ratio: 1/1; min-height:200px; }
.items-grid .card img{ object-fit:contain; padding:0; background:var(--surface); width:100%; height:100%; transform:scale(1.5); }
.items-grid .card .icon-pad{ padding:0; height:92%; padding-top:55px; }
.items-grid .card .meta{ padding:2px 8px 4px; }
@media (max-width:1400px){ .items-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width:1100px){ .items-grid{ grid-template-columns: repeat(3, 1fr); gap:10px; } }
@media (max-width:768px){ .items-grid{ grid-template-columns: repeat(2, 1fr); gap:8px; padding:0 12px; min-height:180px; } }
@media (max-width:480px){ .items-grid{ grid-template-columns: repeat(2, 1fr); gap:6px; padding:0 8px; min-height:160px; } }


/* site-head mobile guard */
@media (max-width:760px){
  .site-head{ margin-top:0 !important; padding-top:12px !important; }
}


/* ===== Random spin reel ===== */
.fx-reel{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,5,8,0.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .18s ease;
}
.fx-reel.is-in{ opacity:1; }
.fx-reel.is-out{ opacity:0; }
.fx-reel-box{ display:flex; flex-direction:column; align-items:center; gap:14px; transform:scale(.96); transition:transform .25s cubic-bezier(.2,.9,.3,1.3); }
.fx-reel.is-in .fx-reel-box{ transform:scale(1); }
.fx-reel.is-landed .fx-reel-box{ transform:scale(1.06); }
.fx-reel-cat{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); opacity:.9;
}
.fx-reel-card{
  width:min(280px,64vw); aspect-ratio:3/4; border-radius:14px; overflow:hidden;
  border:1px solid rgba(201,162,39,.45); background:rgba(18,15,20,.9);
  box-shadow:0 0 26px rgba(201,162,39,.28), 0 18px 50px rgba(0,0,0,.6);
}
.fx-reel-card.tick{ animation:fx-reel-tick .13s ease; }
@keyframes fx-reel-tick{
  0%{ transform:translateY(-14px) scale(.985); opacity:.35; filter:blur(2px); }
  100%{ transform:translateY(0) scale(1); opacity:1; filter:blur(0); }
}
.fx-reel-img{ width:100%; height:100%; background-size:cover; background-position:top center; background-repeat:no-repeat; }
.fx-reel-name{
  font-family:var(--display,'Cinzel',serif); font-size:1.25rem; font-weight:700;
  color:var(--bone); text-align:center; max-width:78vw; line-height:1.25;
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.fx-reel.is-landed .fx-reel-card{
  border-color:var(--gold);
  box-shadow:0 0 44px rgba(201,162,39,.6), 0 0 90px rgba(201,162,39,.25), 0 18px 50px rgba(0,0,0,.6);
}
.fx-reel.is-landed .fx-reel-name{ color:var(--gold); }
@media (max-width:520px){
  .fx-reel-card{ width:min(210px,60vw); }
  .fx-reel-name{ font-size:1.05rem; }
}
/* users who prefer less motion get an instant result */
@media (prefers-reduced-motion:reduce){
  .fx-reel-card.tick{ animation:none; }
  .fx-reel-box{ transition:none; }
}
/* ============================================================
   MOBILE OPTIMIZATION LAYER  (appended 2026-08-05)
   Targeted fixes for phones (iPhone/Samsung/Pixel) across
   Chrome, Safari, Firefox, Edge, Opera. Additive & reversible.
   ============================================================ */

/* 1. Kill horizontal overflow / sideways bounce everywhere */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

/* 2. Touch-safe hover: neutralise :hover on touch so nothing "sticks" */
@media (hover: none) and (pointer: coarse) {
  a:hover, button:hover, .card:hover, .chip:hover, .tab:hover,
  .sub-item:hover, .nav a:hover, .clickable-subitem:hover, .bookmark-btn:hover {
    transform: none !important;
    filter: none !important;
  }
  .card:active, .chip:active, .sub-item:active, button:active, .tab:active {
    transform: scale(0.98);
    transition: transform .08s ease;
  }
}

/* 3. Comfortable tap targets (44px min) */
@media (max-width: 768px) {
  .nav a, .chip, .tab, button, .clickable-subitem,
  select, .bookmark-btn, .nav-back, .tab-random {
    min-height: 44px;
  }
  .chip, .tab { display: inline-flex; align-items: center; justify-content: center; }
}

/* 4. Responsive card grids - real class names from this site */
@media (max-width: 768px) {
  .group-grid, .group-grid-small, .ee-group-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  .perks-grid, .mori-grid, .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  .offerings-grid, .addons-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }
}
@media (max-width: 480px) {
  .group-grid, .group-grid-small, .ee-group-grid,
  .grid, .perks-grid, .mori-grid, .items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .offerings-grid, .addons-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 5. Keep the offerings zoomed image inside its card */
@media (max-width: 768px) {
  .offerings-grid .card { overflow: hidden; }
  .offerings-grid .card img { transform: scale(1.15) !important; }
}

/* 6. Fluid hero / overlay panels - no fixed widths busting the viewport */
@media (max-width: 768px) {
  .d-hero, .overlay, .overlay-bg, .category-hero, .hero-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  img, video { max-width: 100%; height: auto; }
  .socials-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
}

/* 7. Readable fluid type + prevent iOS zoom-on-input */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.2rem, 5vw, 1.6rem); }
  h3 { font-size: clamp(1.05rem, 4.5vw, 1.4rem); }
  input, select, textarea { font-size: 16px; }
}

/* 8. Notch / safe-area support (iPhone X+ and modern Androids) */
@media (max-width: 768px) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* 9. iOS momentum scrolling for scroll containers */
.sub-grid, .grid, .offerings-grid, .addons-grid, .group-grid {
  -webkit-overflow-scrolling: touch;
}

/* 10. Kill tap-highlight flash + long-press image callout on touch */
@media (hover: none) {
  a, button, .card, .chip, img, .tab {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
  }
}
/* ===================== END MOBILE OPTIMIZATION LAYER ===================== */


/* ===== SHEET-NAV ARROW POSITION (desktop) - raise arrows ~30% so they clear text ===== */
@media (min-width:760px){
  .sheet-nav{ top:20%; }
  .sheet-nav:hover{ transform:translateY(-50%) scale(1.08); }
  .sheet-nav:active{ transform:translateY(-50%) scale(.96); }
}
/* ===== END SHEET-NAV ARROW POSITION ===== */

/* 3-way sort control wrapper */
.sort-control{ display:inline-flex; gap:6px; flex-wrap:wrap; vertical-align:middle; }
.sort-control .sort-btn.is-on{ background:var(--blood,#7a1414); border-color:var(--blood-bright,#c0392b); color:#fff; }

/* ===== SHEET CENTERING - float the detail card in the vertical middle ===== */
.overlay{ align-items:center !important; }
/* keep a comfortable gap so tall sheets don't touch screen edges */
.sheet{ margin:2vh 0; border-bottom:1px solid var(--line); border-radius:16px; }
/* ===== END SHEET CENTERING ===== */

/* ===== SUB-ITEM CLICK ZONES - image=lightbox, text=detail ===== */
.si-img{ cursor:zoom-in; }
.si-text.clickable-subitem{ cursor:pointer; }
.si-text.clickable-subitem:hover .si-name{ text-decoration:underline; }
/* ===== END SUB-ITEM CLICK ZONES ===== */

/* ===== SHEET CENTERING V2 - lock horizontal + vertical center ===== */
.overlay{ align-items:center !important; justify-content:center !important; }
.sheet{ margin-left:auto !important; margin-right:auto !important; }
/* ===== END SHEET CENTERING V2 ===== */

/* ===== MORI LABEL CENTER - title centered at top of each mori card ===== */
.mori-card .mc-label{ left:50% !important; transform:translateX(-50%); top:8px !important; text-align:center; white-space:nowrap; }
/* ===== END MORI LABEL CENTER ===== */

/* ===== SUB-ITEM TEXT SIZE - make the clickable text readable ===== */
.sub-item .si-name{ font-size:.98rem !important; }
.sub-item .si-desc{ font-size:.86rem !important; -webkit-line-clamp:8; line-clamp:8; }
.si-text.clickable-subitem{ cursor:pointer; padding:4px; border-radius:6px; transition:background .15s; }
.si-text.clickable-subitem:hover{ background:rgba(255,255,255,.05); }
.si-text.clickable-subitem:hover .si-name{ text-decoration:underline; }
/* ===== END SUB-ITEM TEXT SIZE ===== */

/* ===== SUB-ITEM CARD CLICKABLE - whole card is the click target ===== */
.sub-item.clickable-subitem{ cursor:pointer; }
.sub-item.clickable-subitem:hover{ border-color:var(--blood-bright); }
.sub-item.clickable-subitem:hover .si-name{ text-decoration:underline; }
.sub-item .si-img{ cursor:zoom-in; }
/* ===== END SUB-ITEM CARD CLICKABLE ===== */