/* SpookSpot v5 — dark goth cartoon (5 Nov 2026). Original art only. */
@font-face{font-family:'Grenze Gotisch';src:url(/fonts/grenze-gotisch.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cinzel';src:url(/fonts/cinzel.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(/fonts/garamond.woff2) format('woff2');font-display:swap}
:root{--ink:#08060a;--night:#120b19;--plum:#3a1f3d;--bruise:#5b3a6e;--teal:#4f7c80;--tealdk:#2f4a52;--bone:#e8dcc4;--boneSh:#c9b99c;--rose:#a8737c;--roseSh:#86545e;--amber:#c9954a;--text:#d9d0c1;--muted:#a093a6}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink);overflow-x:hidden}
body{margin:0;color:var(--text);font:18px/1.6 'EB Garamond',Georgia,'Times New Roman',serif;min-height:100vh;overflow-x:hidden;
 background:
  radial-gradient(circle at 78% 12%,rgba(232,220,196,.10),transparent 32%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .45 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(180deg,#22132c 0%,#170d1f 40%,#0d0812 75%,#08060a 100%);
 background-attachment:fixed,scroll,fixed}
a{color:#c7a9d6}
a:hover{color:var(--bone)}
.wrap{position:relative;z-index:2;overflow-x:clip;max-width:980px;margin:0 auto;padding:0 18px}

/* ---------- scene ---------- */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.moon{position:absolute;top:-3vh;right:-9vw;width:clamp(120px,36vw,280px);height:auto;overflow:visible}
.cloud{position:absolute;height:auto;overflow:visible;will-change:transform;animation:drift var(--d,90s) ease-in-out var(--w,0s) infinite alternate}
.c1{top:6vh;right:-16vw;width:clamp(170px,50vw,360px);--d:80s}
.c2{top:31vh;left:-18vw;width:clamp(150px,44vw,320px);--d:110s;--w:-40s;opacity:.85}
@keyframes drift{from{transform:translateX(-6vw)}to{transform:translateX(6vw)}}
.land{position:absolute;left:50%;bottom:0;width:max(760px,120vw);height:auto;transform:translateX(-50%);overflow:visible}
.lit{animation:lamp 7s ease-in-out infinite}
.lit.b{animation-duration:9s;animation-delay:-3s}
@keyframes lamp{0%,100%{opacity:1}45%{opacity:.72}55%{opacity:.95}70%{opacity:.8}}
.rv{transform-box:fill-box;transform-origin:50% 100%;animation:tilt 14s ease-in-out infinite}
.rv.b{animation-duration:17s;animation-delay:-6s}
@keyframes tilt{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(-5deg)}80%{transform:rotate(-5deg)}86%{transform:rotate(1deg)}}
.glint{animation:glint 6s ease-in-out infinite}
@keyframes glint{0%,100%{opacity:.25}50%{opacity:.9}}
.fog{position:absolute;left:-30%;width:160%;height:26vh;bottom:-6vh;background:radial-gradient(ellipse at center,rgba(200,185,215,.10),transparent 68%);will-change:transform;animation:roll 60s ease-in-out infinite alternate}
.fog.b{bottom:10vh;opacity:.6;animation-duration:85s;animation-delay:-30s}
@keyframes roll{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
.gh{position:absolute;left:var(--x);top:var(--y);width:var(--s);opacity:0;will-change:transform,opacity;animation:haunt var(--d,30s) ease-in-out var(--w,0s) infinite}
.gh svg{display:block;width:100%;height:auto;overflow:visible}
.g1{--x:3%;--y:14vh;--s:clamp(54px,15vw,110px);--d:34s;--w:-4s}
.g2{--x:78%;--y:40vh;--s:clamp(48px,13vw,96px);--d:41s;--w:-19s}
.g3{--x:30%;--y:52vh;--s:clamp(40px,11vw,80px);--d:38s;--w:-29s}
.g4{--x:62%;--y:8vh;--s:clamp(34px,9vw,70px);--d:46s;--w:-11s}
@keyframes haunt{0%,100%{opacity:0;transform:translate(0,12px)}20%{opacity:0}38%{opacity:.5;transform:translate(6px,0)}55%{opacity:.36;transform:translate(-4px,-10px)}68%{opacity:.48;transform:translate(4px,-16px)}82%{opacity:0;transform:translate(0,-24px)}}

/* ---------- header ---------- */
header{padding:50px 0 18px;text-align:center}
.candles{display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,3vw,40px);max-width:100%}
.candle{width:clamp(16px,5vw,26px);flex:0 0 auto;position:relative}
.candle svg{display:block;width:100%;height:auto;overflow:visible}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame 3.2s ease-in-out infinite alternate}
.candle:last-child .flame{animation-duration:3.9s;animation-delay:-1.2s}
.glow{position:absolute;left:50%;top:-24px;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:radial-gradient(circle,rgba(201,149,74,.22),transparent 65%);animation:lamp 6s ease-in-out infinite}
@keyframes flame{from{transform:scale(1,1) rotate(-2deg)}to{transform:scale(.94,1.06) rotate(2deg)}}
.logo{font-family:'Grenze Gotisch',Georgia,serif;font-weight:600;font-size:clamp(2.5rem,12.5vw,5.8rem);line-height:1;margin:0;color:var(--bone);letter-spacing:.015em;
 text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),0 -2px 0 var(--ink),0 2px 0 var(--ink),-2px 0 0 var(--ink),2px 0 0 var(--ink),5px 5px 0 var(--plum),6px 6px 0 var(--ink),0 0 26px rgba(232,220,196,.16)}
.logo span{color:#e6cfc8}
.tag{font-style:italic;color:#bfb3c4;font-size:1.12rem;margin:16px auto 0;max-width:30em}
.rule{display:block;width:min(300px,72%);height:16px;margin:16px auto 0}
.soon{display:inline-block;margin-top:16px;padding:9px 20px;font:700 .82rem/1 'Cinzel',Georgia,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--plum);
 background:var(--bone);border:3px solid var(--ink);border-radius:4px;box-shadow:inset 0 -5px 0 var(--boneSh),4px 4px 0 var(--ink)}

/* ---------- panels ---------- */
section{margin:30px 0}
h2,h3{font-family:'Cinzel',Georgia,serif;font-weight:700;letter-spacing:.05em;color:var(--bone)}
h2{font-size:1.32rem;margin:0 0 10px;text-shadow:2px 2px 0 var(--plum)}
p{margin:0 0 12px}
.card{position:relative;padding:26px 22px 22px;background:#1d1326;border:3px solid var(--ink);border-radius:6px;
 box-shadow:inset 0 0 0 2px #3b2846,inset 0 -40px 0 -20px rgba(8,6,10,.0),7px 7px 0 var(--ink)}
.card::before{content:"";position:absolute;left:10px;right:10px;top:10px;bottom:10px;border:1px solid rgba(168,115,124,.28);border-radius:3px;pointer-events:none}
.card h2{text-align:center}
.card p{color:#d3c9d6}
form .row{display:flex;flex-direction:column;gap:12px;margin-top:6px;position:relative}
input[type=email]{width:100%;padding:13px 14px;border-radius:4px;border:3px solid var(--ink);background:#120c17;color:var(--text);font:17px 'EB Garamond',Georgia,serif;box-shadow:inset 0 0 0 1px #3b2846}
input[type=email]::placeholder{color:#76697d}
input[type=email]:focus{outline:2px solid var(--teal);outline-offset:2px}
button{padding:13px 22px;border-radius:4px;cursor:pointer;font:700 .9rem/1 'Cinzel',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:#1c0f1d;
 background:var(--rose);border:3px solid var(--ink);box-shadow:inset 0 -5px 0 var(--roseSh),4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
button:hover,button:focus-visible{transform:translate(-1px,-1px);box-shadow:inset 0 -5px 0 var(--roseSh),6px 6px 0 var(--ink);outline:none}
button:active{transform:translate(3px,3px);box-shadow:inset 0 -5px 0 var(--roseSh),1px 1px 0 var(--ink)}
button:disabled{opacity:.6}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.98rem;color:var(--muted);margin-top:14px}
.consent input{margin-top:4px;width:20px;height:20px;flex:0 0 auto;accent-color:var(--rose)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{min-height:1.4em;margin-top:10px;font-size:1rem}
.msg.ok{color:#e6bf7f}.msg.err{color:#efa3ab}

/* ---------- portrait gallery ---------- */
.shop-h{text-align:center}
.shop-h p{color:var(--muted);font-style:italic}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:560px){.row{flex-direction:row!important}.row button{flex:0 0 auto}}
@media(min-width:880px){.grid{grid-template-columns:repeat(4,1fr)}}
.prod{position:relative;padding:12px 12px 14px;background:#1a1220;border:3px solid var(--ink);border-radius:6px;box-shadow:inset 0 0 0 2px #33223d,5px 5px 0 var(--ink)}
.ph{position:relative;aspect-ratio:3/4;margin:2px 4px;border-radius:50%;overflow:hidden;background:linear-gradient(100deg,var(--bgc,#3b5d63) 0 58%,var(--bgs,#2f4a52) 58%);
 border:7px solid #8a6a3a;box-shadow:0 0 0 3px var(--ink),inset 0 0 0 3px var(--ink),inset 0 0 0 7px rgba(8,6,10,.25)}
.prod:nth-child(2) .ph{--bgc:#4a3256;--bgs:#3a2645}
.prod:nth-child(3) .ph{--bgc:#6e4650;--bgs:#583841}
.prod:nth-child(4) .ph{--bgc:#3c4458;--bgs:#2f3646}
.ph svg{position:absolute;left:4%;bottom:-18%;width:92%;height:auto;opacity:.92;animation:sit 12s ease-in-out infinite alternate}
.prod:nth-child(2) .ph svg{animation-delay:-3s}.prod:nth-child(3) .ph svg{animation-delay:-6s}.prod:nth-child(4) .ph svg{animation-delay:-9s}
@keyframes sit{0%{opacity:.92;transform:translateY(0)}50%{opacity:.55}100%{opacity:.9;transform:translateY(-4px)}}
.prod .b{padding:12px 4px 0;text-align:center}
.prod h3{margin:0 0 2px;font-size:.92rem;color:var(--bone);text-shadow:1px 1px 0 var(--plum)}
.prod small{color:var(--muted);font-style:italic;font-size:.92rem}

footer{border-top:3px solid var(--ink);box-shadow:0 -1px 0 #3b2846;margin-top:44px;padding:22px 0 46px;color:var(--muted);font-size:.95rem;text-align:center}
.legal{padding-top:24px;padding-bottom:30px}
.legal h1{font-family:'Cinzel',Georgia,serif;font-weight:700;color:var(--bone);text-shadow:3px 3px 0 var(--plum)}
.legal h2{font-size:1.08rem;margin-top:24px}
.lost{display:block;width:min(210px,58vw);margin:10px auto 0}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .gh{opacity:.32}
}