/* DUMBBELLDORE — $DUMBBELLDORE (site styles) */

/* ---------- fonts (self-hosted, latin) ---------- */
@font-face{
  font-family:'Lilita One';font-style:normal;font-weight:400;font-display:block;
  src:url('fonts/lilita-one-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:800;font-display:block;
  src:url('fonts/nunito-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:900;font-display:block;
  src:url('fonts/nunito-latin.woff2') format('woff2');
}

/* ---------- palette ---------- */
:root{
  --ink:#0d1526; --navy:#1d3566; --navy2:#142650; --turq:#19b6d6; --turq2:#7fe3f2;
  --pale:#fff4b8; --pump:#ffd21f; --pump2:#e8a800; --swole:#14774a; --swole2:#0b4a2d;
  --sky:#102d5b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--sky)}
body{font-family:'Nunito',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}
img{border:0}
button{font-family:inherit;cursor:pointer}
:focus{outline:none}
:focus-visible{outline:6px solid var(--turq);outline-offset:6px;border-radius:8px}

/* ---------- bleed plate (viewport-anchored) ---------- */
#sky{position:fixed;left:0;top:0;width:100%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,var(--sky) 0,var(--sky) 45%,rgba(16,45,91,0) 100%)}
#plate,#platelq{position:fixed;left:0;top:0;z-index:0;pointer-events:none;user-select:none;
  object-fit:fill;transition:opacity .3s linear}
#platelq{filter:blur(16px);transform:scale(1.03)}
#plate{opacity:0}
body.is-ready #plate{opacity:1}
body.is-ready #platelq{opacity:0}

/* ---------- stage ---------- */
#stage{position:fixed;left:0;top:0;width:2560px;height:1440px;transform-origin:0 0;overflow:visible;z-index:5;
  opacity:0;transition:opacity .3s linear}
body.is-ready #stage{opacity:1}
.layer{position:absolute;inset:0;width:2560px;height:1440px;pointer-events:none;user-select:none}

#rays{position:absolute;left:530px;top:-110px;width:1500px;height:1500px;border-radius:50%;z-index:1;
  opacity:0;transition:opacity .4s linear;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,228,120,.55) 0 7deg,rgba(255,228,120,0) 7deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
#rays.on{opacity:1;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#halo{position:absolute;left:855px;top:215px;width:850px;height:850px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 50% 50%,#fffbe0 0 55%,#fbefa6 85%,#f2e08a 100%);
  transition:background .6s ease,box-shadow .6s ease;pointer-events:none}
#halo.pulse{animation:halopulse 4s ease-in-out infinite}
@keyframes halopulse{0%,100%{box-shadow:0 0 0 rgba(255,240,170,.0)}50%{box-shadow:0 0 40px rgba(255,240,170,.6)}}
#halo.gold{background:radial-gradient(circle,#fff6c8 0 45%,#ffe066 80%,#f7c52a 100%);
  box-shadow:0 0 120px 40px rgba(255,214,70,.55);animation:none}

#hero{position:absolute;inset:0;z-index:6;transform-origin:1280px 1100px;pointer-events:none;will-change:transform}
#breath{position:absolute;inset:0;transform-origin:1280px 1100px;animation:breath 3.2s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.006)}}
#charIdle,#charCurl{position:absolute;inset:0;width:2560px;height:1440px}
#charCurl{opacity:0}

#pourL,#pourR{position:absolute;inset:0;width:2560px;height:1440px;z-index:4;pointer-events:none}
#pourL{clip-path:inset(0 50% 100% 0)}
#pourR{clip-path:inset(0 0 100% 50%)}

.glitter{position:absolute;z-index:5;width:229px;height:52px;opacity:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:10px}
.glitter i{display:block;width:100%;height:7px;border-radius:6px;background:rgba(255,236,150,.95);
  box-shadow:0 0 24px 8px rgba(255,220,90,.75)}
.glitter .gs{position:absolute;width:16px;height:16px;background:var(--pale);border:3px solid var(--ink);
  border-radius:3px;transform:rotate(45deg)}
.glitter .gs:nth-child(2){left:6px;top:2px}
.glitter .gs:nth-child(3){right:6px;top:4px}
.glitter .gs:nth-child(4){left:44%;bottom:0}

#fx{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:visible}
#fxs{position:absolute;left:0;top:0;width:2560px;height:1440px;overflow:visible}
.star{position:absolute;pointer-events:none}
.gem{position:absolute;width:34px;height:34px;transform:rotate(45deg);background:var(--pump);
  border:4px solid var(--ink);border-radius:4px;pointer-events:none}
.plus{position:absolute;font-family:'Lilita One';font-size:90px;line-height:1;color:var(--pump);
  -webkit-text-stroke:12px var(--ink);paint-order:stroke fill;pointer-events:none;white-space:nowrap}
.twinkle{position:absolute;pointer-events:none}

#confetti{position:absolute;left:0;top:0;width:2560px;height:1440px;z-index:8;pointer-events:none}
#flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:9;pointer-events:none}

/* ---------- UI ---------- */
.ui{position:absolute;font-family:'Nunito',sans-serif;color:var(--ink);z-index:10}

#brand{left:104px;top:70px}
#brand h1{font-family:'Lilita One';font-weight:400;font-size:84px;line-height:1;letter-spacing:1px;
  color:var(--pale);text-shadow:0 8px 0 var(--ink)}
#brand h1 span{display:inline-block;-webkit-text-stroke:12px var(--ink);paint-order:stroke fill}
.pill{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 22px;border:5px solid var(--ink);
  border-radius:999px;background:var(--turq);font:900 34px/1 'Nunito';color:var(--ink);box-shadow:0 6px 0 var(--ink)}
#tag{margin-top:22px;width:470px;font:800 28px/1.3 'Nunito';color:var(--ink);background:#fffaf0;
  border:4px solid var(--ink);border-radius:18px;padding:12px 18px}

#decree{left:104px;top:600px;width:500px;background:var(--navy);border:6px solid var(--ink);border-radius:26px;
  box-shadow:0 10px 0 var(--ink);padding:22px 26px 24px;color:var(--pale)}
#decree .lab{font:900 22px/1 'Nunito';letter-spacing:3px;color:var(--turq2)}
#decree .txt{margin-top:14px;font:400 46px/1.08 'Lilita One';color:#fff}
#decree .sub{margin-top:10px;font:800 26px/1.28 'Nunito';color:var(--pale);opacity:.92}
.pips{display:flex;gap:12px;margin-top:18px}
.pip{width:70px;height:26px;border:4px solid var(--ink);border-radius:10px;background:#2c467d}
.pip.on{background:var(--pump)}

#util{right:96px;top:62px;display:flex;gap:14px;align-items:center}
.ub{height:72px;display:flex;align-items:center;gap:10px;padding:0 24px;border:5px solid var(--ink);border-radius:18px;
  background:var(--navy);color:#fff;font:900 28px/1 'Nunito';box-shadow:0 6px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease}
.ub:hover{transform:translateY(-3px)}
.ub:active{transform:translateY(0);box-shadow:0 3px 0 var(--ink)}
.ub .t{color:var(--turq2)}
a.ub{text-decoration:none;cursor:pointer}
.ub svg{display:block}
.ub .t-ico{width:34px;height:34px;fill:#fff}
.ub.ca{cursor:pointer}
.ub .snd-off{display:none}
.ub.muted .snd-on{display:none}
.ub.muted .snd-off{display:block}

#copied{right:96px;top:150px;padding:10px 22px;border:4px solid var(--ink);border-radius:999px;background:var(--turq);
  color:var(--ink);font:900 26px/1 'Nunito';box-shadow:0 6px 0 var(--ink);
  opacity:0;transform:translateY(-8px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
#copied.show{opacity:1;transform:translateY(0)}

#board{right:96px;top:250px;width:500px;background:var(--navy);border:6px solid var(--ink);border-radius:30px;
  box-shadow:0 10px 0 var(--ink);padding:22px 26px 26px;color:#fff}
#board .lab{font:900 22px/1 'Nunito';letter-spacing:3px;color:var(--turq2);text-align:center}
#board h2{font:400 50px/1 'Lilita One';text-align:center;margin-top:8px;color:var(--pale)}
.tubes{display:flex;justify-content:space-around;margin-top:22px}
.house{display:flex;flex-direction:column;align-items:center;width:190px}
.crest{width:120px;height:120px;border-radius:50%;border:5px solid var(--ink);background:#fff center/86% no-repeat;
  margin-bottom:-26px;position:relative;z-index:2}
.tube{position:relative;width:118px;height:440px;border:6px solid var(--ink);border-radius:60px;
  background:linear-gradient(90deg,#3b5aa0,#29457f 60%,#3b5aa0);overflow:hidden}
.fill{position:absolute;left:0;right:0;bottom:0;height:0;border-top:5px solid var(--ink);
  transition:height .4s ease-out}
.swole .fill{background:var(--swole) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 4l10 16-10 16-10-16z' fill='%2329a36a' stroke='%230b4a2d' stroke-width='3'/%3E%3C/svg%3E") 0 0/40px 40px}
.pump .fill{background:var(--pump) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 4l10 16-10 16-10-16z' fill='%23fff08a' stroke='%23c98d00' stroke-width='3'/%3E%3C/svg%3E") 0 0/40px 40px}
.tube::after{content:'';position:absolute;left:16px;top:24px;width:16px;height:70%;border-radius:10px;
  background:rgba(255,255,255,.35)}
.nm{margin-top:14px;font:900 22px/1 'Nunito';letter-spacing:1px;color:var(--turq2)}
.pts{font:400 64px/1 'Lilita One';color:#fff;margin-top:6px}
.pump .pts{color:var(--pump)}
#board .gap{margin-top:18px;text-align:center;font:800 26px/1.2 'Nunito';color:var(--pale)}

#cta{left:1280px;top:1150px;transform:translateX(-50%);text-align:center;white-space:nowrap}
#repWrap{display:inline-block;border-radius:30px}
#repWrap.invite{animation:invitePulse 1.8s ease-in-out infinite}
@keyframes invitePulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,210,31,.55)}
  50%{transform:scale(1.035);box-shadow:0 0 0 10px rgba(255,210,31,.22)}
  100%{transform:scale(1);box-shadow:0 0 0 14px rgba(255,210,31,0)}
}
#rep{font:400 76px/1 'Lilita One';letter-spacing:2px;color:var(--ink);background:var(--pump);border:7px solid var(--ink);
  border-radius:30px;padding:22px 74px 26px;box-shadow:0 12px 0 var(--ink),inset 0 -10px 0 var(--pump2);
  transition:transform .12s ease,box-shadow .12s ease}
#rep:hover{transform:translateY(-3px)}
#rep:active,#rep.pressed{transform:translateY(6px);box-shadow:0 6px 0 var(--ink),inset 0 -10px 0 var(--pump2)}
#cta .hint{margin-top:22px;font:800 26px/1 'Nunito';color:var(--ink);background:rgba(255,244,200,.85);
  display:inline-block;padding:8px 18px;border-radius:999px;border:4px solid var(--ink)}

#ribbon{left:1280px;top:28px;transform:translateX(-50%) translateY(-300px);opacity:0;text-align:center;z-index:11;
  transition:transform .52s cubic-bezier(.2,1.7,.4,1),opacity .3s ease;pointer-events:none}
#ribbon.show{transform:translateX(-50%) translateY(0);opacity:1}
#ribbon .r{font:400 56px/1 'Lilita One';color:var(--ink);background:var(--pump);border:7px solid var(--ink);
  border-radius:20px;padding:16px 36px;box-shadow:0 10px 0 var(--ink);white-space:nowrap;display:inline-block}
#ribbon .s{display:inline-block;margin-top:16px;font:900 26px/1 'Nunito';color:#fff;background:var(--ink);
  padding:8px 18px;border-radius:999px;opacity:0;transform:scale(.8);transition:opacity .25s ease .15s,transform .25s ease .15s}
#ribbon.show .s{opacity:1;transform:scale(1)}

/* ---------- ticker (viewport-anchored, full width) ---------- */
#ticker{position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--navy2);
  border-top:4px solid var(--ink);overflow:hidden;white-space:nowrap;z-index:20;
  opacity:0;transition:opacity .3s linear}
body.is-ready #ticker{opacity:1}
.ticker-track{display:inline-flex;align-items:center;height:100%;will-change:transform;
  font-family:'Lilita One';font-size:var(--tick-fs,34px);line-height:var(--tick-lh,60px);color:var(--pale);letter-spacing:1px;
  animation:marquee var(--dur,40s) linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track .tk{padding:0 .35em}
.ticker-track .tk-star{color:var(--turq2);padding:0 .55em}

/* ---------- loading ---------- */
#loading{position:fixed;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  z-index:30;transition:opacity .3s linear}
#loading .load-pill{font:400 40px/1 'Lilita One';color:var(--pale);background:var(--navy);border:6px solid var(--ink);
  border-radius:24px;padding:20px 40px;box-shadow:0 10px 0 var(--ink)}
body.is-ready #loading{opacity:0;pointer-events:none}
body.is-ready #loading{visibility:hidden;transition:opacity .3s linear,visibility 0s linear .3s}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #breath{animation:none}
  #halo{animation:none}
  #rays{animation:none}
  #repWrap{animation:none!important}
  .fill{transition:none!important}
  #halo,#rays,#ribbon,#copied{transition:none!important}
  .ticker-track{animation-duration:calc(var(--dur,40s) * 2)}
}