/* What a holiday does to the whole site (holiday-wear.js sets html.hw and the --hw-* values): its colours, what lies on the buttons,
   panels and gates, what hangs from the menu and the ground at the foot of each big picture. Frostforged wears all of it; the classic
   look keeps its own header dressing and takes the buttons, the ground and the secrets. */
.hw-piece { pointer-events: none; }
html.hw { scrollbar-color: var(--hw-a) #05080d; }
html.hw ::selection { background: var(--hw-a); color: #05080d; }

/* ---------- the colours ---------- */
html.ff.hw { --ice: var(--hw-a); }
html.ff.hw body { background-color: var(--hw-bg); }
html.ff.hw .ff-sec, html.ff.hw .frame.sg-band, html.ff.hw .home, html.ff.hw .ff-saga { background-color: var(--hw-bg); }
html.ff.hw .ff-logo, html.ff.hw .ff-big, html.ff.hw .banner h1, html.ff.hw section[data-view] .banner h1, html.ff.hw .ffg-ttl, html.ff.hw .sg-band .mh h3, html.ff.hw .sg-blade .mh h3, html.ff.hw .ppanel h3, html.ff.hw .ph .r, html.ff.hw .sg-gates .open .ffg-ttl, html.ff.hw #newhere h2, html.ff.hw .sg-slash, html.ff.hw .sg-play .act:last-child > b { background-image: var(--hw-t) !important; }
html.ff.hw .ff-logo { filter: var(--hw-rim); }
html.ff.hw .ff-big, html.ff.hw .banner h1, html.ff.hw .sg-band .mh h3, html.ff.hw .ppanel h3, html.ff.hw #newhere h2 { filter: var(--hw-rim) drop-shadow(0 4px 16px rgba(0, 0, 0, .85)); }
html.ff.hw .ff-card b { color: var(--hw-a); }
html.ff.hw .navbar a:not(.ff-brand):not(.ff-play), html.ff.hw .navbar .ddwrap > a, html.ff.hw .navbar .ddwrap > button, html.ff.hw .ff-brand { color: var(--hw-nav); }
html.ff.hw .navbar a.on:not(.ff-brand):not(.ff-play) { box-shadow: 0 2px 0 0 var(--hw-a); }
html.ff.hw .navbar a:not(.ff-brand):not(.ff-play):hover, html.ff.hw .navbar a.on:not(.ff-brand):not(.ff-play), html.ff.hw .navbar .ddwrap > a:hover { color: #fff; text-shadow: 0 0 14px var(--hw-a), 0 1px 6px #000; }
html.ff.hw .navbar .wrap { border-bottom-color: var(--hw-a); }
html.ff-scrolled.hw .navbar .wrap { background: color-mix(in srgb, var(--hw-bg) 96%, transparent); }
html.ff.hw .frame:not(.banner):not(.sg-band) { border-top-color: var(--hw-a); }
html.ff.hw .sg-band .ff-eye, html.ff.hw .sg-camp .ff-eye, html.ff.hw .pg-ingame .ff-eye, html.ff.hw .ff-saga .ff-eye { color: var(--hw-a); }
html.ff.hw .ff-eye::before, html.ff.hw .sg-band .ff-eye::before, html.ff.hw .sg-camp .ff-eye::before, html.ff.hw .pg-ingame .ff-eye::before, html.ff.hw .ff-saga .ff-eye::before { background: linear-gradient(90deg, transparent, var(--hw-a)); box-shadow: 0 0 10px var(--hw-a); }
html.ff.hw .ff-gate::after { background: linear-gradient(180deg, transparent, var(--hw-a) 45%, transparent); box-shadow: 0 0 16px var(--hw-a); }
html.ff.hw .ffs-ring { filter: drop-shadow(0 0 22px var(--hw-a)); }
html.ff.hw .ffs-ring .ffg-r1, html.ff.hw .ffs-ring .ffg-r2, html.ff.hw .ffs-ring .ffg-r3 { stroke: var(--hw-a); }

/* the buttons: their own colours, and whatever has settled on them */
html.ff.hw .ff-btn.g, html.ff.hw .ff-play { background: var(--hw-btn); box-shadow: 0 10px 34px rgba(var(--hw-glow), .55); }
html.ff.hw .ff-btn.g:hover, html.ff.hw .ff-play:hover { color: var(--hw-btn); box-shadow: 0 14px 50px rgba(var(--hw-glow), .85); }
html.ff.hw .ff-btn.o { background: var(--hw-btn2); box-shadow: inset 0 0 0 1.5px var(--hw-a); }
html.ff.hw .ff-btn.o::before { background: var(--hw-a); }
html.ff.hw .ff-btn.o:hover { color: #05080d; }
html.ff.hw .wowbtn { background: var(--hw-btn); }
html.ff.hw .wowbtn:hover { color: var(--hw-btn); background: #fff; }
html.ff.hw .wowbtn.dark { background: var(--hw-btn2); }
html.ff.hw .wowbtn.dark:hover { color: #05080d; background: var(--hw-a); }
html.hw .ff-btn, html.hw .ff-play { overflow: visible; }
html.hw .ff-btn::before, html.hw .ff-play::before { transform: none; opacity: 0; transition: opacity .25s ease; }
html.hw .ff-btn:hover::before, html.hw .ff-play:hover::before { transform: none; opacity: 1; }
html.hw .ff-btn::after, html.hw .ff-play::after { content: ""; position: absolute; z-index: 2; left: -3px; right: -3px; top: -3px; height: var(--hw-cap-h); background: var(--hw-cap) repeat-x left center / auto 100%; pointer-events: none; }
html.hw-out-cap .ff-btn::after, html.hw-out-cap .ff-play::after { top: calc(var(--hw-cap-h) * -1 + 2px); }
html.hw .wowbtn { position: relative; }
html.hw .wowbtn::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: var(--hw-cap-h); background: var(--hw-cap) repeat-x left top / auto 100%; pointer-events: none; }

/* the panels, cards and rows of gates */
html.ff.hw .frame:not(.banner):not(.sg-band):not(.feature):not(.play)::before { display: block; content: ""; position: absolute; z-index: 2; inset: 0 0 auto; width: auto; height: var(--hw-top-h); border: 0; border-radius: 0; background: var(--hw-top) repeat-x left top / auto 100%; pointer-events: none; }
html.ff.hw .frame.sg-blade::before, html.ff.hw .frame.article::before { display: none !important; }
html.ff.hw .ff-card::after { content: ""; position: absolute; inset: 0 0 auto; height: var(--hw-top-h); background: var(--hw-top) repeat-x left top / auto 100%; pointer-events: none; }
html.ff.hw #ff-newsgates::before, html.ff.hw #ff-road::before, html.ff.hw .sg-gates::before, html.ff.hw .phases::before { content: ""; position: absolute; z-index: 7; inset: 0 0 auto; height: var(--hw-top-h); background: var(--hw-top) repeat-x left top / auto 100%; pointer-events: none; }
html.ff.hw #ff-newsgates, html.ff.hw #ff-road, html.ff.hw .sg-gates { position: relative; }
html.hw-out-top.ff #ff-newsgates::before, html.hw-out-top.ff #ff-road::before, html.hw-out-top.ff .sg-gates::before { top: calc(var(--hw-top-h) * -1); }

/* the moving bar: the holiday's colours, its own divider */
html.ff.hw .ff-mq { --mq-ink: var(--hw-a) !important; --mq-line: var(--hw-a) !important; --mq-mark: var(--hw-a) !important; --mq-bg: var(--hw-bg) !important; --mq-halo: var(--hw-a) !important; --mq-edge: var(--hw-a) !important; }
html.ff.hw .ff-mq .ff-mqt i { width: calc(var(--mq-size) * var(--mq-s) * .62) !important; height: calc(var(--mq-size) * var(--mq-s) * .62) !important; transform: none !important; clip-path: none !important; border-radius: 0 !important; box-shadow: none !important; background: var(--hw-a) !important; -webkit-mask: var(--hw-mark) center / contain no-repeat; mask: var(--hw-mark) center / contain no-repeat; filter: drop-shadow(0 0 8px var(--hw-a)); }

/* ---------- what hangs and what lies on the ground ---------- */
.hw-hang { position: absolute; z-index: 3; left: 0; right: 0; top: 100%; height: var(--hw-hang-h); background: var(--hw-hang) repeat-x left top; transform-origin: top; animation: hwsway 7s ease-in-out infinite alternate; }
@keyframes hwsway { from { transform: scaleY(.97); } to { transform: scaleY(1.03); } }
.hw-tint { position: absolute; z-index: 1; inset: 0; background: var(--hw-tint); }
.ff-open .hw-tint { z-index: 5; }
.hw-ground { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 64px; background: var(--hw-ground) repeat-x left bottom; }
.ff-open .hw-ground { z-index: 5; height: 54px; background-size: auto 54px; }
html.ff section[data-view="saga"] .banner .hw-ground { display: none; }
.banner .hw-ground { z-index: 0; }
footer { position: relative; }
.hw-foot { bottom: 100%; }

/* a holiday's long name keeps its words whole on its narrow gate, and the words stand clear of the ground */
html.ff.hw .ff-gate.holi .ffg-ttl { overflow-wrap: normal; font-size: clamp(25px, 2.5vw, 36px); }
html.ff.hw .ff-gate.holi:hover .ffg-ttl { font-size: clamp(30px, 3.4vw, 50px); }
html.ff.hw .ff-open .ffg-txt { padding-bottom: 62px; }

/* the holiday's fire: the logo breathes */
html.hw-fire .ff-logo { animation: hwflicker 3.4s ease-in-out infinite alternate; }
@keyframes hwflicker { 0% { filter: drop-shadow(0 0 14px rgba(var(--hw-glow), .5)); } 40% { filter: drop-shadow(0 0 30px rgba(var(--hw-glow), .95)); } 62% { filter: drop-shadow(0 0 18px rgba(var(--hw-glow), .6)); } 100% { filter: drop-shadow(0 0 36px rgba(var(--hw-glow), 1)); } }

/* the whole page's weather, in the look whose header has none */
#hw-sky { position: fixed; z-index: 31; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#hw-sky[hidden] { display: none; }
html.ff.hw .ff-dust { display: none; }

/* ---------- a puff of the holiday's things ---------- */
.hw-bit { position: fixed; z-index: 90; margin: -8px 0 0 -8px; pointer-events: none; -webkit-mask: var(--hw-mark) center / contain no-repeat; mask: var(--hw-mark) center / contain no-repeat; animation: hwbit .9s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes hwbit { from { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } 70% { opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.5); opacity: 0; } }

/* ---------- the secrets ---------- */
.hw-egg { position: absolute; z-index: 7; bottom: 6px; width: 54px; height: auto; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.hw-egg svg { display: block; width: 100%; height: auto; }
.hw-egg:hover { transform: scale(1.14) rotate(-3deg); }
.hw-egg:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hw-hop { animation: hwhop .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes hwhop { 40% { transform: translateY(-16px) rotate(4deg); } }
.hw-snowman { right: 6%; width: 58px; }
.hw-pump { left: 5%; width: 56px; }
.hw-skull { right: 6%; width: 44px; }
.hw-lantern { right: 7%; width: 38px; }
.hw-box { left: 6%; width: 48px; }
.hw-bonfire { right: 6%; width: 64px; }
.hw-mug { left: 5%; width: 50px; }
.hw-parrot { right: 5%; width: 46px; }
.hw-noble { width: 26px; z-index: 8; opacity: .95; }
.hw-turkey { left: 0; width: 66px; animation: hwmarch 26s linear infinite; }
.hw-turkey:hover { transform: none; }
@keyframes hwmarch { 0% { translate: 4vw 0; scale: 1 1; } 49% { translate: 92vw 0; scale: 1 1; } 50% { translate: 92vw 0; scale: -1 1; } 99% { translate: 4vw 0; scale: -1 1; } 100% { translate: 4vw 0; scale: 1 1; } }
.hw-plane { position: fixed; z-index: 92; left: 0; bottom: auto; width: 70px; animation: hwplane 11s linear both; }
@keyframes hwplane { from { transform: translate(-90px, 0) rotate(2deg); } 50% { transform: translate(50vw, 30px) rotate(-2deg); } to { transform: translate(calc(100vw + 90px), -20px) rotate(2deg); } }

.hw-splat { position: fixed; z-index: 91; width: 170px; height: 170px; margin: -85px 0 0 -85px; pointer-events: none; rotate: var(--r); background: radial-gradient(closest-side, #fff 54%, rgba(255, 255, 255, .92) 62%, transparent 72%), radial-gradient(14px 14px at 12% 30%, #fff 60%, transparent 70%), radial-gradient(10px 10px at 84% 20%, #fff 60%, transparent 70%), radial-gradient(12px 12px at 90% 74%, #fff 60%, transparent 70%), radial-gradient(9px 9px at 20% 88%, #fff 60%, transparent 70%); animation: hwsplat 3.4s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes hwsplat { 0% { transform: scale(.2); opacity: 0; } 8% { transform: scale(1.06); opacity: 1; } 14% { transform: scale(1); } 60% { opacity: .95; translate: 0 0; } 100% { opacity: 0; translate: 0 60px; } }
.hw-dark { position: fixed; z-index: 89; inset: 0; pointer-events: none; background: radial-gradient(190px 190px at var(--x) var(--y), rgba(255, 180, 90, .05) 0, rgba(0, 0, 0, .35) 50%, rgba(2, 1, 6, .985) 100%); animation: hwfade .5s both; transition: opacity .8s ease; }
.hw-dark.out { opacity: 0; }
@keyframes hwfade { from { opacity: 0; } }
.hw-surge { position: fixed; z-index: 88; left: 0; right: 0; bottom: 0; height: 80vh; pointer-events: none; background: linear-gradient(0deg, rgba(255, 110, 20, .85), rgba(255, 180, 60, .35) 40%, transparent); animation: hwsurge 2.2s ease-out both; }
@keyframes hwsurge { from { transform: translateY(100%); } 35% { transform: none; opacity: 1; } to { transform: none; opacity: 0; } }
html.hw-tipsy main, html.hw-tipsy .navbar { animation: hwtipsy 3.5s ease-in-out 2; }
@keyframes hwtipsy { 0%, 100% { transform: none; filter: none; } 25% { transform: rotate(.7deg) translateX(10px); filter: blur(1px); } 50% { transform: rotate(-.5deg) translateX(-12px); filter: blur(1.6px); } 75% { transform: rotate(.4deg) translateX(6px); filter: blur(.8px); } }
.hw-fly { position: fixed; z-index: 32; left: 0; width: 170px; pointer-events: none; animation: hwfly 15s linear both; }
.hw-fly svg { display: block; width: 100%; height: auto; }
@keyframes hwfly { from { transform: translateX(-200px); } 50% { transform: translateX(50vw) translateY(-22px); } to { transform: translateX(calc(100vw + 200px)); } }

/* the achievement, as the game shows one */
.hw-feat { position: fixed; z-index: 95; left: 50%; bottom: 96px; display: flex; align-items: center; gap: 14px; width: min(440px, calc(100vw - 24px)); padding: 12px 18px 12px 12px; color: #fff; background: linear-gradient(180deg, #2a2118, #120d08); border: 2px solid #c8a24a; border-radius: 40px 10px 10px 40px; box-shadow: 0 16px 50px rgba(0, 0, 0, .85), 0 0 40px rgba(242, 207, 122, .4); transform: translateX(-50%); animation: hwfeat .7s cubic-bezier(.2, 1.3, .3, 1) both; }
.hw-feat.out { opacity: 0; transition: opacity .5s ease; }
@keyframes hwfeat { from { opacity: 0; transform: translate(-50%, 40px) scale(.9); } }
.hw-feat-ico { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 2px solid #c8a24a; background: var(--hw-a, #f2cf7a); position: relative; }
.hw-feat-ico::after { content: ""; position: absolute; inset: 9px; background: #120d08; -webkit-mask: var(--hw-mark) center / contain no-repeat; mask: var(--hw-mark) center / contain no-repeat; }
.hw-feat-t { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; font-size: 14px; line-height: 1.3; color: #e4dccb; }
.hw-feat-t small { font: 700 11px/1.2 var(--body, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: #f2cf7a; }
.hw-feat-t b { font: 800 18px/1.2 var(--logo, serif); color: #fff; }
.hw-feat-pts { flex: none; display: grid; place-items: center; width: 36px; height: 36px; font: 800 15px/1 var(--logo, serif); color: #2a2118; background: radial-gradient(circle at 35% 30%, #fff0b0, #c8a24a); border-radius: 50%; }
.hw-say { position: fixed; z-index: 95; left: 50%; bottom: 96px; padding: 8px 18px; font-size: 15px; color: #fff; background: rgba(5, 8, 13, .9); border-top: 2px solid var(--hw-a); transform: translateX(-50%); animation: hwfeat .4s both; }

@media (max-width: 820px) {
  .ff-open .hw-ground, .hw-ground { height: 44px; background-size: auto 44px; }
  .hw-egg { transform: scale(.82); transform-origin: bottom; }
  .hw-hang { background-size: auto 70%; }
}
@media (max-width: 760px) { .hw-feat, .hw-say { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) {
  .hw-hang, html.hw-fire .ff-logo, .hw-turkey { animation: none; }
  .hw-turkey { left: 8%; }
}
html.calm .hw-hang, html.calm.hw-fire .ff-logo, html.calm .hw-turkey { animation: none; }
html.calm .hw-turkey { left: 8%; }