/* harry-potter.css -- loaded only by /harry-potter. Split out of fanpages.css. */

.hp-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(85% 42% at 50% 104%, rgba(214,156,68,.13), transparent 64%),
    radial-gradient(34% 26% at 79% 13%, rgba(226,206,164,.08), transparent 72%),
    radial-gradient(120% 92% at 50% -18%, #1c1014 0%, #120a0e 44%, #070509 100%);
}

/* the enchanted ceiling: it shows the real sky, so there are real stars */
.hp-stars {
  position: absolute; inset: 0; display: block;
  background-size: 340px 340px;
  background-image:
    radial-gradient(1px 1px at 34px 46px,   rgba(255,246,224,.75), transparent),
    radial-gradient(1px 1px at 128px 22px,  rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 214px 92px,  rgba(255,240,206,.65), transparent),
    radial-gradient(1.4px 1.4px at 286px 40px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 62px 158px,  rgba(255,238,200,.5),  transparent),
    radial-gradient(1px 1px at 176px 210px, rgba(255,255,255,.6),  transparent),
    radial-gradient(1.4px 1.4px at 300px 176px, rgba(255,244,214,.6), transparent),
    radial-gradient(1px 1px at 96px 286px,  rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 246px 300px, rgba(255,236,196,.5),  transparent);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 82%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 82%);
  animation: hp-twinkle 7s ease-in-out infinite alternate;
}

.hp-moon {
  position: absolute; right: 15%; top: 9%; display: block;
  width: clamp(52px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fdf6e2, #e3d3ad 58%, #b9a882 100%);
  box-shadow: 0 0 60px 16px rgba(240,226,186,.10), 0 0 150px 46px rgba(226,206,164,.045);
  opacity: .55;
}

/* the castle on the ridge, lit from within */
.hp-castle {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  width: 100%; height: clamp(210px, 34vh, 380px);
  opacity: .7;                  /* page copy scrolls over this, so keep it back */
}

.hp-castle .hp-rock  { fill: #06050a; }

.hp-castle .hp-stone { fill: #0a0810; }

/* the Quidditch pitch sits further off than the castle, so it reads lighter */
.hp-castle .hp-pitch-ground { fill: #070610; }

.hp-castle .hp-stands { fill: #0b0912; }

.hp-castle .hp-hoops {
  fill: none; stroke: #8f7a4a; stroke-width: 2.4;
  opacity: .5;
}

.hp-castle .hp-hoops rect { fill: #8f7a4a; stroke: none; }

.hp-castle .hp-lit {
  fill: #e8bd68;
  filter: drop-shadow(0 0 4px rgba(246,207,122,.55)) drop-shadow(0 0 11px rgba(226,160,60,.3));
  animation: hp-windows 9s ease-in-out infinite alternate;
}

/* the Great Hall candles, floating between you and the castle */
.hp-sky span {
  position: absolute; width: 3px; height: 12px; border-radius: 2px;
  background: linear-gradient(#f8e6b0, #b9873f);
  opacity: .62;
  box-shadow: 0 -7px 16px 2px rgba(245,198,60,.18), 0 0 5px rgba(255,230,150,.55);
  animation: hp-float 9s ease-in-out infinite alternate,
             hp-flicker 4.5s ease-in-out infinite;
}

.hp-sky span:nth-of-type(1)  { left: 8%;  top: 18%; animation-delay: -1s, -0.4s; }

.hp-sky span:nth-of-type(2)  { left: 22%; top: 42%; animation-delay: -3s, -1.7s; height: 9px; }

.hp-sky span:nth-of-type(3)  { left: 41%; top: 12%; animation-delay: -5s, -2.9s; }

.hp-sky span:nth-of-type(4)  { left: 63%; top: 34%; animation-delay: -2s, -0.9s; height: 15px; }

.hp-sky span:nth-of-type(5)  { left: 78%; top: 16%; animation-delay: -6s, -3.6s; }

.hp-sky span:nth-of-type(6)  { left: 90%; top: 52%; animation-delay: -4s, -2.2s; height: 8px; }

.hp-sky span:nth-of-type(7)  { left: 52%; top: 66%; animation-delay: -7s, -1.2s; }

.hp-sky span:nth-of-type(8)  { left: 15%; top: 74%; animation-delay: -8s, -4.1s; height: 11px; }

.hp-sky span:nth-of-type(9)  { left: 33%; top: 26%; animation-delay: -2.5s, -3.2s; height: 7px; }

.hp-sky span:nth-of-type(10) { left: 70%; top: 60%; animation-delay: -6.5s, -0.2s; height: 13px; }

.hp-sky span:nth-of-type(11) { left: 4%;  top: 48%; animation-delay: -1.5s, -2.6s; height: 10px; }

.hp-sky span:nth-of-type(12) { left: 84%; top: 30%; animation-delay: -5.5s, -1.4s; height: 9px; }

.hp-sky span:nth-of-type(13) { left: 46%; top: 50%; animation-delay: -3.5s, -3.9s; height: 12px; }

.hp-sky span:nth-of-type(14) { left: 60%; top: 8%;  animation-delay: -7.5s, -0.7s; height: 8px; }

/* ── the Sorting Hat ── */
.hat-panel {
  display: grid; gap: clamp(1rem, 3vw, 2.2rem); align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, #d3a625 26%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(211,166,37,.09), transparent 62%),
    linear-gradient(165deg, rgba(42,26,14,.5), rgba(10,7,9,.6) 70%);
}

@media (min-width: 720px) { .hat-panel { grid-template-columns: 210px 1fr; } }

.hat-stage { display: grid; place-items: center; }

.hat {
  width: clamp(140px, 22vw, 200px); height: auto;
  transform-origin: 50% 92%;
  transition: transform .5s var(--ease);
}

.hat-felt {
  fill: #150d0c;
  stroke: #c9a95f; stroke-width: 2.4; stroke-linejoin: round;
}

.hat-brim { fill: #120b0b; stroke: #c9a95f; stroke-width: 2.4; stroke-linejoin: round; }

.hat-fold, .hat-eye, .hat-mouth {
  fill: none; stroke: #c9a95f; stroke-width: 2.2; stroke-linecap: round;
}

.hat-fold { opacity: .5; }

.hat-mouth {
  stroke-width: 2.8;
  transform-box: fill-box; transform-origin: 50% 0;
  transition: transform .18s ease;
}

.hat.is-thinking { animation: hat-ponder 2.6s ease-in-out infinite; }

.hat.is-thinking .hat-mouth { animation: hat-mutter .62s ease-in-out infinite alternate; }

.hat.is-shouting { animation: hat-shout .55s var(--ease); }

.hat.is-shouting .hat-mouth { transform: scaleY(2.6); }

.hat-body { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }

.hat-say {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: clamp(1.02rem, 2.4vw, 1.4rem); line-height: 1.4;
  color: var(--ink); min-height: 2.5em; text-wrap: balance;
}

.hat-say.is-muttering { color: var(--ink-dim); }

.hat-say.is-shout {
  font-style: normal; font-weight: 700; letter-spacing: .04em;
  font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1.05;
  color: var(--hl, #d3a625);
  text-shadow: 0 0 32px color-mix(in srgb, var(--hl, #d3a625) 55%, transparent);
  animation: hat-said .5s var(--ease);
}

.hat-go {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  padding: .65rem 1.3rem; border-radius: 100px; cursor: pointer;
  color: #f0d89a; background: rgba(211,166,37,.09);
  border: 1px solid rgba(211,166,37,.5);
  transition: background .25s, transform .25s var(--ease), border-color .25s;
}

.hat-go:hover:not([disabled]) { background: rgba(211,166,37,.2); transform: translateY(-2px); }

.hat-go:focus-visible { outline: 2px solid #d3a625; outline-offset: 3px; }

.hat-go[disabled] { opacity: .6; cursor: default; }

.hat-tally, .hat-note {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute);
}

.hat-tally:empty { display: none; }

.hat-note { max-width: 46ch; text-transform: none; letter-spacing: .02em; font-size: .68rem; line-height: 1.6; }

/* my house, stated plainly and not left to a random hat */
.hp-mine {
  padding: 0.1rem 0.6rem; border-radius: 100px;
  color: #7b9be0; border: 1px solid rgba(123,155,224,.5);
  background: rgba(123,155,224,.1);
}

.spell-burst {
  position: absolute; left: 1.4rem; top: 1.2rem;
  width: 0; height: 0; pointer-events: none; z-index: 3;
}

.spell-burst i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--c, #f6e8a8);
  box-shadow: 0 0 8px 1px var(--c, #f6e8a8);
  animation: spell-spark .8s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}

/* Lumos: the whole castle night lifts for a few seconds */
body.is-lumos .hp-sky { filter: brightness(2.1) saturate(1.15); }

body.is-lumos .hp-castle { opacity: 1; }

body.is-lumos .hp-sky,
body.is-lumos .hp-castle { transition: filter 1.1s ease, opacity 1.1s ease; }

.hp-sky, .hp-castle { transition: filter 1.6s ease, opacity 1.6s ease; }

/* the wand under the castle */
.hp-wand { margin-top: -0.4rem; }

.wand-wood  { fill: #6b4a2e; stroke: #a5764a; stroke-width: 2; stroke-linejoin: round; }

.wand-grip  { fill: #7d5836; stroke: #a5764a; stroke-width: 1.6; }

.wand-grain { fill: none; stroke: #a5764a; stroke-width: 1; opacity: .35; stroke-linecap: round; }

.wl-halo {
  fill: rgba(246,232,168,.16);
  filter: blur(5px);
  animation: hp-lumos 3.4s ease-in-out infinite alternate;
}

.wl-core {
  fill: #fdf6d8;
  filter: drop-shadow(0 0 8px rgba(246,232,168,.95)) drop-shadow(0 0 22px rgba(226,190,90,.7));
  animation: hp-lumos 3.4s ease-in-out infinite alternate;
}

.wl-spark circle { fill: #f6e8a8; opacity: .7; animation: hp-lumos 2.6s ease-in-out infinite alternate; }

.wl-spark circle:nth-child(2n) { animation-delay: -1.1s; }

.wl-spark circle:nth-child(3n) { animation-delay: -1.9s; }