/* ============================================================
   POOPPA ($pooppa)
   The Museum of Things That Left Too Soon
   Dark gallery. You hold the flashlight.
   ============================================================ */

:root{
  --void:#0d090e;
  --wall:#241a26;
  --wall-2:#1a1220;
  --gold:#e8b950;
  --gold-hi:#ffe6a6;
  --gold-deep:#a9772a;
  --brass-hi:#eccf8f;
  --brass:#b88a3e;
  --brass-deep:#6f5226;
  --label:#ece3d0;
  --ink:#2b2218;
  --ink-soft:#5a4a32;
  --text:#e9e0d4;
  --text-dim:#a99e8d;
  --f-display:'Marcellus',serif;
  --f-body:'Mulish',system-ui,sans-serif;
  --f-mono:'Overpass Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{height:100%;}

body{
  font-family:var(--f-body);
  color:var(--text);
  background:
    radial-gradient(ellipse 130% 64% at 50% 0%, #2c2030, transparent 66%),
    linear-gradient(#211826, #170f19 58%, #110b14);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---- the flashlight ---------------------------------------- */
.darkness{
  position:fixed;inset:0;z-index:50;pointer-events:none;
  background:radial-gradient(circle 460px at var(--mx,50%) var(--my,32%),
    rgba(255,206,122,.05) 0%,
    rgba(13,9,14,0) 14%,
    rgba(13,9,14,0) 21%,
    rgba(13,9,14,.5) 50%,
    rgba(13,9,14,.85) 77%,
    rgba(13,9,14,.94) 100%);
}

/* dust motes, caught only where the light falls */
.dust{position:fixed;inset:0;z-index:2;pointer-events:none;}
.mote{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(255,228,172,.55);
  filter:blur(.4px);
  animation:drift linear infinite;
}
@keyframes drift{
  0%{transform:translateY(20px) translateX(0);opacity:0;}
  14%{opacity:.8;}
  86%{opacity:.7;}
  100%{transform:translateY(-120px) translateX(22px);opacity:0;}
}

/* ---- gallery shell ---------------------------------------- */
.gallery{
  max-width:1000px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,42px);
  position:relative;
}

/* ---- entrance --------------------------------------------- */
.entrance{
  text-align:center;
  padding:clamp(64px,13vh,140px) 0 clamp(40px,7vh,80px);
}
.overline{
  font-family:var(--f-mono);
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-deep);
}
.wing{
  font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-dim);
  margin-top:10px;
}
.exhibit-title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(3.4rem,12vw,6.6rem);
  line-height:.98;
  letter-spacing:.02em;
  color:var(--gold-hi);
  margin:22px 0 4px;
  text-shadow:0 0 30px rgba(232,185,80,.55),0 0 64px rgba(232,185,80,.32),0 6px 18px rgba(0,0,0,.6);
}
.exhibit-sub{
  font-family:var(--f-mono);
  font-size:1rem;letter-spacing:.3em;text-transform:lowercase;
  color:var(--gold);
}
.intro{
  max-width:540px;margin:26px auto 0;
  font-size:1.04rem;color:var(--text);
}
.torch-hint{
  font-family:var(--f-mono);
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);
  margin-top:30px;
  animation:hintPulse 3.2s ease-in-out infinite;
}
@keyframes hintPulse{50%{opacity:.4;}}
.scroll-cue{
  font-family:var(--f-mono);
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-dim);
  margin-top:54px;
}
.scroll-cue::after{content:"";display:block;width:1px;height:38px;margin:12px auto 0;
  background:linear-gradient(var(--gold-deep),transparent);}

/* ---- the vitrine ------------------------------------------ */
.vitrine-zone{
  position:relative;
  padding:30px 0 56px;
  display:flex;flex-direction:column;align-items:center;
}
.vitrine{
  position:relative;
  z-index:60;
  display:flex;flex-direction:column;align-items:center;
}
.case{
  position:relative;
  width:min(460px,86vw);
  height:470px;
  overflow:hidden;
  border:12px solid var(--brass);
  border-image:linear-gradient(155deg,#eccf8f,#8a6a32 38%,#caa45e 58%,#5e451f) 1;
  background:linear-gradient(180deg,
    #1d1521 0%,
    #181020 58%,
    #0b0710 60%,
    #060409 100%);
  box-shadow:
    0 46px 64px -28px rgba(0,0,0,.86),
    inset 0 0 0 2px rgba(0,0,0,.55),
    inset 0 3px 34px rgba(0,0,0,.85),
    inset 0 0 64px rgba(0,0,0,.6);
}
/* the relic is the light source: its glow fills the case and dies in the corners */
.case-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 44% at 50% 40%,
    rgba(255,201,99,.52) 0%,
    rgba(245,165,57,.27) 30%,
    rgba(212,131,42,.1) 52%,
    transparent 72%);
  animation:emberPulse 7.5s ease-in-out infinite;
}
@keyframes emberPulse{50%{opacity:.82;}}
/* warm pool where the relic light lands on the floor, grounding it */
.floor-pool{
  position:absolute;left:50%;bottom:26%;
  width:64%;height:90px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255,194,92,.5) 0%,
    rgba(231,150,52,.21) 44%,
    transparent 75%);
  pointer-events:none;
}
.relic{
  position:absolute;left:50%;bottom:35%;
  transform:translateX(-50%);
  width:62%;max-width:282px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))
         drop-shadow(0 0 20px rgba(255,182,72,.4));
}
.vitrine-glass{
  position:absolute;inset:0;
  border:0;cursor:pointer;
  background:linear-gradient(127deg,
    rgba(255,255,255,.085) 0%,
    rgba(255,255,255,0) 24%,
    rgba(255,255,255,0) 68%,
    rgba(255,255,255,.045) 100%);
}
.vitrine-glass::before{
  content:"";position:absolute;top:0;left:-30%;width:34%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-14deg);
  animation:sheen 9s ease-in-out infinite;
}
@keyframes sheen{
  0%,72%,100%{left:-40%;}
  86%{left:118%;}
}
.smudge{
  position:absolute;width:44px;height:56px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.16),transparent 66%);
  filter:blur(2px);pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  animation:smudgeIn .4s ease both;
}
@keyframes smudgeIn{from{opacity:0;}to{opacity:1;}}
.case-cap{
  margin-top:18px;max-width:380px;text-align:center;
  font-size:.84rem;font-style:italic;color:var(--text-dim);
}

/* ---- brass accession plate (the CA) ----------------------- */
.plate{
  position:relative;z-index:60;
  margin-top:30px;
  width:min(470px,92%);
  padding:20px 30px 17px;
  border:0;cursor:pointer;text-align:center;
  border-radius:5px;
  background:linear-gradient(168deg,#eccf8f,#bb8d40 34%,#876730 68%,#caa45e);
  box-shadow:
    0 22px 32px -18px rgba(0,0,0,.8),
    inset 0 2px 1px rgba(255,245,210,.5),
    inset 0 -3px 6px rgba(60,40,10,.5);
  transition:transform .12s ease,filter .2s ease;
}
.plate:hover{filter:brightness(1.06);}
.plate:active{transform:translateY(1px);}
.plate-label{
  display:block;
  font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.3em;text-transform:uppercase;
  color:#3c2d13;text-shadow:0 1px 0 rgba(255,244,210,.45);
}
.plate-ca{
  display:block;margin-top:7px;
  font-family:var(--f-mono);font-weight:600;font-size:.96rem;
  color:#241a08;text-shadow:0 1px 0 rgba(255,244,210,.4);
  word-break:break-all;line-height:1.4;
}
.plate-hint{
  display:block;margin-top:8px;
  font-size:.74rem;font-style:italic;color:#5a4316;
}
.plate.is-copied{filter:brightness(1.12);}
.plate.is-copied .plate-hint{color:#3c2d13;font-style:normal;letter-spacing:.06em;}
.screw{
  position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#f4e2b4,#7a5b29 68%,#48340f);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.55),0 1px 1px rgba(0,0,0,.4);
}
.screw::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:8px;height:1.6px;background:rgba(30,20,4,.7);
  transform:rotate(42deg);
}
.screw-tl{top:9px;left:9px;}
.screw-tr{top:9px;right:9px;}
.screw-bl{bottom:9px;left:9px;}
.screw-br{bottom:9px;right:9px;}

/* ---- wall rows -------------------------------------------- */
.wall-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5.5vw,68px);
  align-items:center;
  margin:clamp(70px,12vh,128px) 0;
}
.prov-row{direction:rtl;}
.prov-row>*{direction:ltr;}

.wall-text{max-width:440px;}
.kicker{
  font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);
}
.wall-text h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  line-height:1.14;color:var(--gold-hi);
  margin:12px 0 16px;
}
.wall-text p{margin-bottom:14px;color:var(--text);}
.wall-text p:last-child{margin-bottom:0;}

/* ---- gilt frames ------------------------------------------ */
.frame{display:block;margin:0 auto;}
.photo-frame{max-width:360px;}
.photo-frame.small{max-width:312px;}
.epigraph-frame{
  max-width:660px;
  margin:clamp(56px,9vh,104px) auto;
}
.mount{
  display:block;
  padding:13px;border-radius:3px;
  background:linear-gradient(135deg,#efd398,#9a7838 40%,#d7b066 58%,#69501f);
  box-shadow:
    0 40px 56px -30px rgba(0,0,0,.88),
    inset 0 0 0 1px rgba(255,246,212,.32),
    inset 0 0 22px rgba(56,38,10,.5);
}
.mount img{
  display:block;width:100%;
  border:10px solid #130c14;border-radius:1px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.6);
}
.frame figcaption{
  margin-top:15px;text-align:center;
  font-size:.82rem;font-style:italic;color:var(--text-dim);
}

/* ---- provenance plaque ------------------------------------ */
.prov-plaque{
  position:relative;
  max-width:440px;margin:0 auto;
  padding:26px 30px 22px;border-radius:5px;
  background:linear-gradient(165deg,#e9cb88,#b6883c 36%,#7f5f2c 70%,#c39f57);
  box-shadow:
    0 30px 42px -22px rgba(0,0,0,.82),
    inset 0 2px 1px rgba(255,245,210,.5),
    inset 0 -3px 8px rgba(56,38,10,.5);
}
.plaque-title{
  font-family:var(--f-mono);font-size:.74rem;
  letter-spacing:.26em;text-transform:uppercase;
  color:#3c2d13;text-shadow:0 1px 0 rgba(255,244,210,.45);
  text-align:center;padding-bottom:13px;
  border-bottom:1px solid rgba(56,38,10,.4);
}
.catalogue div{
  display:grid;grid-template-columns:128px 1fr;gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(56,38,10,.22);
}
.catalogue div:last-child{border-bottom:0;}
.catalogue dt{
  font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:#4a3718;padding-top:3px;
}
.catalogue dd{
  font-size:.92rem;color:#2a1f08;
}

/* ---- gallery objects (the three socials) ------------------ */
.object-link{
  display:flex;align-items:center;gap:20px;
  text-decoration:none;
}
.object-body{display:block;}
.object-head{
  display:block;
  font-family:var(--f-display);font-size:1.22rem;
}
.object-text{
  display:block;margin:5px 0 9px;
  font-size:.88rem;line-height:1.55;
}
.object-go{
  display:inline-block;
  font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;
}
.object-go::after{content:" \2192";}
.object-link:hover .object-go{letter-spacing:.26em;}
.object-link.is-sealed{cursor:default;opacity:.62;}
.object-link.is-sealed:hover .object-go{letter-spacing:.18em;}

/* press clipping (X) -- a small framed paper notice, hung left */
.press-clip,.figures-panel{max-width:392px;margin:clamp(54px,9vh,100px) 0;}
.hang-left{margin-right:auto;}
.hang-right{margin-left:auto;}
.press-clip .object-link{
  padding:15px;border-radius:3px;
  background:linear-gradient(135deg,#efd398,#9a7838 42%,#d7b066 60%,#69501f);
  box-shadow:0 34px 46px -28px rgba(0,0,0,.86),
    inset 0 0 0 1px rgba(255,246,212,.3);
}
.press-clip .object-body,.press-clip .press-icon{
  /* sit on the parchment clipping */
}
.press-clip .object-link>*{position:relative;z-index:1;}
.press-clip .object-link{position:relative;}
.press-clip .object-link::before{
  content:"";position:absolute;inset:11px;border-radius:1px;
  background:
    repeating-linear-gradient(0deg,transparent 0 21px,rgba(120,96,52,.14) 21px 22px),
    #ece3d0;
  box-shadow:inset 0 0 16px rgba(110,84,40,.28);
}
.press-clip .object-link{padding:24px 22px;gap:16px;}
.press-clip .object-head{color:var(--ink);}
.press-clip .object-text{color:var(--ink-soft);}
.press-clip .object-go{color:var(--gold-deep);}
.press-icon{flex:0 0 auto;}
.press-icon svg{width:46px;height:46px;display:block;}
.x-shadow{fill:rgba(255,247,222,.6);}
.x-face{fill:#2b2218;}

/* visitor figures (dexscreener) -- framed dark panel, hung right */
.figures-panel .object-link{
  padding:13px;border-radius:3px;
  background:linear-gradient(135deg,#efd398,#9a7838 42%,#d7b066 60%,#69501f);
  box-shadow:0 34px 46px -28px rgba(0,0,0,.86),
    inset 0 0 0 1px rgba(255,246,212,.3);
}
.figures-panel .object-link{position:relative;}
.figures-panel .object-link>*{position:relative;z-index:1;}
.figures-panel .object-link::before{
  content:"";position:absolute;inset:11px;border-radius:1px;
  background:radial-gradient(ellipse at 50% 18%,#241a2a,#120c16 80%);
  box-shadow:inset 0 0 20px rgba(0,0,0,.7);
}
.figures-panel .object-link{padding:24px 22px;gap:16px;}
.figures-icon{flex:0 0 auto;}
.figures-icon svg{width:62px;height:48px;display:block;}
.fig-frame{fill:rgba(20,13,22,.6);stroke:var(--brass);stroke-width:1.4;}
.fig-line{fill:none;stroke:var(--gold-hi);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;}
.fig-arrow{fill:none;stroke:var(--gold-hi);stroke-width:2.6;stroke-linecap:round;}
.fig-base{stroke:rgba(184,138,62,.5);stroke-width:1.2;}
.figures-panel .object-head{color:var(--gold-hi);}
.figures-panel .object-text{color:var(--text);}
.figures-panel .object-go{color:var(--gold);}

/* museum shop (pump.fun) -- a brass sign by the exit, centred */
.shop-sign{
  max-width:470px;
  margin:clamp(60px,10vh,116px) auto clamp(30px,5vh,50px);
}
.shop-sign .object-link{
  padding:22px 28px;border-radius:5px;
  background:linear-gradient(168deg,#eccf8f,#bb8d40 34%,#876730 68%,#caa45e);
  box-shadow:
    0 26px 38px -20px rgba(0,0,0,.82),
    inset 0 2px 1px rgba(255,245,210,.5),
    inset 0 -3px 7px rgba(56,38,10,.5);
}
.shop-icon{flex:0 0 auto;}
.shop-icon svg{width:54px;height:54px;display:block;}
.coin-rim{fill:#7c5c2a;stroke:#3f2d10;stroke-width:1.5;}
.coin-face{fill:none;stroke:#3f2d10;stroke-width:1.5;
  stroke-dasharray:3 3;}
.coin-moon{fill:#3a2a10;}
.shop-sign .object-head{color:var(--ink);text-shadow:0 1px 0 rgba(255,244,210,.4);}
.shop-sign .object-text{color:#4a3718;}
.shop-sign .object-go{color:#3c2d13;}

/* ---- foyer / footer --------------------------------------- */
.foyer{
  max-width:640px;margin:0 auto;
  padding:46px clamp(20px,5vw,42px) 70px;
  text-align:center;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--brass),transparent) 1;
}
.foyer-name{font-family:var(--f-display);font-size:1.16rem;color:var(--gold-hi);}
.foyer-hours{
  font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);margin:10px 0 18px;
}
.foyer-disc{font-size:.78rem;color:var(--text-dim);line-height:1.7;}

/* ---- notice (museum label) -------------------------------- */
.notice{
  position:fixed;left:50%;bottom:26px;z-index:90;
  transform:translate(-50%,150%);
  max-width:min(420px,90vw);
  padding:13px 24px;
  background:var(--label);color:var(--ink);
  border:1px solid #b89a5c;border-top:3px solid var(--gold);
  font-size:.85rem;text-align:center;
  box-shadow:0 18px 36px -12px rgba(0,0,0,.7);
  transition:transform .42s cubic-bezier(.2,.9,.25,1);
}
.notice.show{transform:translate(-50%,0);}

/* ---- responsive ------------------------------------------- */
@media (max-width:820px){
  .wall-row{grid-template-columns:1fr;gap:38px;}
  .prov-row{direction:ltr;}
  .wall-text{max-width:520px;margin:0 auto;}
  .object-link{gap:16px;}
  .hang-left,.hang-right{margin-left:auto;margin-right:auto;}
}
@media (max-width:520px){
  .case{height:412px;}
  .relic{width:66%;}
  .object-link{flex-direction:column;text-align:center;}
  .object-go::after{content:" \2193";}
  .catalogue div{grid-template-columns:1fr;gap:2px;}
  .catalogue dd{padding-bottom:4px;}
}

/* ---- touch: no cursor, so light the hall ------------------ */
@media (hover:none){
  .darkness{display:none;}
  .torch-hint{display:none;}
  body::after{
    content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
    background:radial-gradient(ellipse 100% 70% at 50% 32%,
      transparent 40%,rgba(13,9,14,.62) 100%);
  }
}

/* ---- reduced motion --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .notice{transition:transform .01s linear!important;}
}