/* ===========================================================
   ZELLY - Zeddy's secret girlfriend. Layered on top of
   style.css + zeddy.css, only for <body class="zeddy zelly">.
   Palette: bubblegum #f472b6 / hot pink #ec4899 / blush #fbcfe8
            demon magenta #e0115f / pigtail gold #e3b65a
            bg plum-black #12060d
   Display face: Chewy (self-hosted) · Body: Nunito
   =========================================================== */

@font-face{ font-family:'Chewy'; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/chewy-latin-400-normal.woff2) format('woff2'); }

body.zelly{
  --bg: #12060d;
  --bg-soft: #1a0913;
  --panel: #1f0b17;
  --panel-line: #4a1834;
  --blood: #be185d;
  --blood-deep: #6b0f3a;
  --ember: #f472b6;
  --ember-bright: #f9a8d4;
  --stone: #fff1f7;
  --stone-dim: #e7b3cc;
  --stone-faint: #a26a86;
  --ink: #ffe9f3;
  --ink-dim: #f0c6da;
  --demon: #e0115f;
  --demon-deep: #8a0a3a;
  --gold: #e3b65a;
  --slime-glow: rgba(244,114,182,.4);
  --display: 'Chewy', 'Comic Sans MS', cursive;
  --deco: 'Chewy', 'Comic Sans MS', cursive;

  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(224,17,95,.12), transparent 60%),
    radial-gradient(900px 600px at 0% 20%, rgba(244,114,182,.10), transparent 60%),
    var(--bg);
}
body.zelly h1, body.zelly h2, body.zelly h3, body.zelly h4, body.zelly h5, body.zelly h6{
  color: var(--ember-bright);
  letter-spacing: .02em;
  text-shadow: 2px 2px 0 #4a0a2a, 0 0 18px rgba(244,114,182,.35);
}
body.zelly .eyebrow, body.zelly .hero-tag{ color: var(--gold); }
body.zelly .btn{ letter-spacing: .03em; }
body.zelly .btn:hover{ border-color: var(--gold); background: rgba(227,182,90,.12); }
body.zelly .btn-primary{
  background: linear-gradient(180deg, rgba(236,72,153,.35), rgba(131,24,67,.55)), url('assets/zelly/tex_pink.jpg') center/180px;
  border-color: #fbcfe8; color: #fff;
  text-shadow: 2px 2px 0 #831843, 0 0 6px rgba(0,0,0,.5);
  box-shadow: 0 6px 24px rgba(236,72,153,.45), inset 0 -3px 0 rgba(0,0,0,.25);
}
body.zelly .btn-primary:hover{
  background: linear-gradient(180deg, rgba(138,10,58,.3), rgba(70,5,30,.55)), url('assets/zelly/tex_demon.jpg') center/180px;
  border-color: #fda4af; text-shadow: 2px 2px 0 #4c0519;
}

/* nav */
body.zelly .site-nav{
  background: rgba(18,6,13,.92);
  border-image: linear-gradient(90deg, var(--ember) 0%, var(--ember) 55%, var(--demon) 72%, var(--demon) 100%) 1;
}
body.zelly .site-version{ color: var(--ember-bright); }
body.zelly .brand-text .small{ color: var(--gold); }
body.zelly .brand img{ border-radius: 50%; }
body.zelly .nav-links a.z-back{ border-color: var(--demon); background: rgba(224,17,95,.14); }
body.zelly .nav-links a.z-back:hover{ background: var(--demon); }
body.zelly .nav-links a.zl-back-zeddy{ border-color: #84cc16; background: rgba(132,204,22,.14); }
body.zelly .nav-links a.zl-back-zeddy:hover{ background: #4d7c0f; }
body.zelly .nav-dropdown-menu a:hover{ background: rgba(244,114,182,.12); }
@media (max-width: 1180px){
  body.zelly .nav-links a.zl-back-zeddy{ background: rgba(132,204,22,.14); }
}

/* hero */
body.zelly .z-hero-bg{ background: url('assets/zelly/tex_pink.jpg') left top/420px repeat; }
body.zelly .z-hero-bg::before{ background: url('assets/zelly/tex_demon.jpg') right top/420px repeat; }
body.zelly .z-hero-bg::after{
  background:
    radial-gradient(ellipse at 50% 42%, rgba(18,6,13,.25) 0%, rgba(18,6,13,.72) 62%, rgba(18,6,13,.95) 100%),
    linear-gradient(180deg, rgba(18,6,13,.35) 0%, transparent 30%, var(--bg) 100%);
}
.zl-hero-logo{ max-width: min(680px, 92vw) !important; }
.zl-hero-logo img{ filter: drop-shadow(0 16px 26px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(244,114,182,.35)) !important; }
.zl-faces{ display: flex; justify-content: center; gap: 28px; margin-top: 4px; }
.zl-face{ width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 0 3px rgba(251,207,232,.6); animation: zBob 3s ease-in-out infinite; }
.zl-face-demon{ box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 0 3px rgba(224,17,95,.8); animation-delay: -1.5s; }
body.zelly .z-hero-by{ color: var(--ember-bright); }
body.zelly .z-hero-by span{ color: var(--gold); }

.zl-hearts{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.zl-hearts span{
  position: absolute; bottom: -40px; font-size: 22px; opacity: 0;
  animation: zlHeart 9s linear infinite;
}
.zl-hearts span:nth-child(1){ left: 6%;  animation-delay: 0s;   font-size: 18px; }
.zl-hearts span:nth-child(2){ left: 16%; animation-delay: 2.4s; font-size: 26px; }
.zl-hearts span:nth-child(3){ left: 28%; animation-delay: 5s; }
.zl-hearts span:nth-child(4){ left: 72%; animation-delay: 1.2s; font-size: 28px; }
.zl-hearts span:nth-child(5){ left: 84%; animation-delay: 3.6s; font-size: 16px; }
.zl-hearts span:nth-child(6){ left: 93%; animation-delay: 6.2s; }
.zl-hearts span:nth-child(7){ left: 46%; animation-delay: 7.4s; font-size: 14px; }
.zl-hearts span:nth-child(8){ left: 60%; animation-delay: 4.4s; font-size: 20px; }
@keyframes zlHeart{
  0%{ transform: translateY(0) rotate(-10deg); opacity: 0; }
  10%{ opacity: .85; }
  50%{ transform: translateY(-45vh) translateX(18px) rotate(10deg); }
  90%{ opacity: .6; }
  100%{ transform: translateY(-90vh) translateX(-10px) rotate(-8deg); opacity: 0; }
}
.zl-hero .z-hero-inner{ position: relative; z-index: 1; }

/* drips: candy pink + demon */
body.zelly .z-drip path{ fill: #8a1450; }
body.zelly .z-drip{ filter: drop-shadow(0 6px 10px rgba(244,114,182,.2)); }
body.zelly .z-drip-red path{ fill: #4c0520; }

/* wiki-style layout */
body.zelly .zeddy-layout{ background: rgba(26,9,19,.8); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(244,114,182,.1); border-radius: 26px; }
body.zelly .wiki-side{
  background: linear-gradient(180deg, rgba(20,6,14,.9), rgba(20,6,14,.96)), url('assets/zelly/tex_pink.jpg') center/300px;
}
body.zelly .wiki-side .group-label{ color: var(--gold); }
body.zelly .wiki-side button{ border-radius: 0 999px 999px 0; }
body.zelly .wiki-side button.active{ color: #4a0a2a; background: var(--ember); border-left-color: #fff; }
body.zelly .wiki-article code{ color: #fbcfe8; background: #1a0712; }
body.zelly .wiki-article pre{ background: #1a0712; }
body.zelly .wiki-article th{ background: #1a0712; }
body.zelly .wiki-article a{ color: #f9a8d4; text-decoration-color: rgba(249,168,212,.45); }
body.zelly .callout{ border-left-color: var(--ember); background: rgba(244,114,182,.07); }
body.zelly .callout .eyebrow{ color: var(--ember-bright); }
body.zelly .callout.warn{ border-left-color: var(--demon); background: rgba(224,17,95,.09); }
body.zelly .callout.warn .eyebrow{ color: #fb7185; }
body.zelly ul.z-list li{ border-radius: 999px; padding: 10px 20px; background: rgba(244,114,182,.05); }
@media (max-width: 700px){ body.zelly ul.z-list li{ border-radius: 18px; } }
body.zelly .z-card{ background: linear-gradient(160deg, rgba(244,114,182,.16), rgba(244,114,182,.03)); border-radius: 20px; }
body.zelly .z-card:hover{ border-color: var(--ember); transform: translateY(-3px) rotate(.8deg); }
body.zelly .zl-cards .z-card:nth-child(7){ background: linear-gradient(160deg, rgba(224,17,95,.25), rgba(224,17,95,.05)); }
body.zelly .z-console-row{ background: #170610; }
body.zelly .z-console-cmd code{ background: rgba(244,114,182,.1) !important; border-color: rgba(244,114,182,.3); }
body.zelly .z-tag{ color: var(--ember-bright) !important; }

/* video */
.zl-video{ margin: .4em 0 1.6em; }
.zl-video video{
  display: block; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 3px rgba(244,114,182,.5), 0 0 40px rgba(244,114,182,.25);
}
.zl-video figcaption{ font-family: var(--display); font-size: 1.3rem; color: var(--ember-bright); margin-top: .5em; text-align: center; }

/* quotes - speech bubbles */
.zl-quotes{ display: grid; gap: 12px; margin: 1.4em 0; }
.zl-quotes blockquote{
  position: relative; margin: 0; padding: 14px 20px 14px 22px; max-width: 560px;
  background: #fbcfe8; color: #4a0a2a; border-radius: 22px 22px 22px 6px;
  font-weight: 800; font-size: 1.05rem; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.zl-quotes blockquote.zl-zeddy{ margin-left: auto; background: #a3e635; color: #1a2e05; border-radius: 22px 22px 6px 22px; }
.zl-who{ display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; font-weight: 400; margin-bottom: 2px; }

/* personality feature tiles */
.zl-feature-row{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 1.2em 0; }
.zl-feature{
  padding: 18px 18px 16px; border-radius: 22px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.45)), url('assets/zelly/tex_pink.jpg') center/240px;
  border: 1px solid rgba(255,255,255,.12); font-size: .98rem;
}
.zl-feature span{ display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; }
.zl-feature strong{ display: block; font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: #fff; }
.zl-feature-demon{ background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5)), url('assets/zelly/tex_demon.jpg') center/240px; }
@media (max-width: 560px){ .zl-feature-row{ grid-template-columns: 1fr; } .zl-face{ width: 70px; height: 70px; } }

/* photos */
body.zelly .section.alt.z-photos{ background: linear-gradient(180deg, #1e0514 0%, var(--bg-soft) 40%); }
body.zelly .section-head h2{ color: var(--ember-bright); text-shadow: 2px 2px 0 #4a0a2a, 0 0 18px rgba(244,114,182,.35); }
body.zelly .z-gallery figure{ border-radius: 20px; }
body.zelly .z-gallery figure:hover{ border-color: var(--ember); }
body.zelly .z-gallery .zl-fig-face{ background: url('assets/zelly/tex_pink.jpg') center/260px; }
body.zelly .z-gallery .zl-fig-face.z-fig-demon{ background: url('assets/zelly/tex_demon.jpg') center/260px; }
body.zelly .z-gallery .zl-fig-face img{ padding: 0; object-fit: cover; filter: none; }
body.zelly .lightbox-overlay{ background: rgba(18,4,12,.95); }

/* footer & music */
body.zelly .music-widget{ border-color: var(--ember); box-shadow: 0 6px 22px rgba(0,0,0,.5), 0 0 18px rgba(244,114,182,.25); }
body.zelly .music-volume::-webkit-slider-thumb{ background: var(--ember); }
body.zelly .music-volume::-moz-range-thumb{ background: var(--ember); }
body.zelly .cookie-banner-actions .btn-primary{ background: var(--ember); color: #4a0a2a; }

@media (prefers-reduced-motion: reduce){
  .zl-hearts{ display: none; }
  .zl-face{ animation: none; }
}