/* Unseen SMP — Thanksgiving theme: autumn orange and red colours, falling pixel leaves, and Minecraft decorations.
   The pieces are added by thanksgiving.js (which also decides when Thanksgiving is on: all of November).
   Nothing here does anything unless the page has html.v2-thanksgiving. */

/* ================= Colours: orange and red instead of amethyst purple ================= */
:root.v2-thanksgiving,:root.v2-thanksgiving[data-theme="dark"]{
  --u-bg:#100a08;--u-bg-2:#180e0a;
  --u-surface:rgba(30,16,11,.80);--u-surface-solid:#1e120d;--u-surface-2:rgba(46,24,16,.84);--u-surface-hover:rgba(60,30,19,.92);
  --u-border:rgba(255,166,110,.14);--u-border-strong:rgba(255,128,72,.34);
  --u-text:#fff6ef;--u-text-2:#ead6c9;--u-muted:#bba293;
  --u-accent:#ff8a3d;--u-accent-strong:#e8452c;--u-accent-text:#2a0c03;--u-accent-soft:rgba(255,138,61,.14);
  --u-gold:#ffc24d;--u-gold-soft:rgba(255,194,77,.13);
  --u-glow:0 0 0 1px rgba(255,128,72,.2),0 18px 60px rgba(214,64,28,.2);
  --u-bg-overlay:linear-gradient(180deg,rgba(16,10,8,.30) 0%,rgba(16,10,8,.62) 34%,rgba(16,10,8,.88) 70%,#100a08 100%);
  --u-hero-overlay:linear-gradient(90deg,rgba(22,10,7,.92) 0%,rgba(22,10,7,.64) 45%,rgba(22,10,7,.16) 100%);
  --u-header:rgba(18,10,7,.74);
  --color-primary-hover:#ffb07a;--usmp-border:var(--u-border);
}
:root.v2-thanksgiving[data-theme="light"]{
  --u-bg:#fbf1e8;--u-bg-2:#f7e7da;
  --u-surface:rgba(255,255,255,.82);--u-surface-2:rgba(255,247,240,.92);
  --u-border:rgba(170,70,20,.14);--u-border-strong:rgba(200,80,30,.30);
  --u-text:#2a140c;--u-text-2:#57362a;--u-muted:#86675a;
  --u-accent:#d9531e;--u-accent-strong:#b8321c;--u-accent-text:#ffffff;--u-accent-soft:rgba(217,83,30,.10);
  --u-glow:0 0 0 1px rgba(217,83,30,.16),0 18px 50px rgba(217,83,30,.14);
  --u-bg-overlay:linear-gradient(180deg,rgba(251,241,232,.10) 0%,rgba(251,241,232,.55) 34%,rgba(251,241,232,.86) 70%,#fbf1e8 100%);
  --u-hero-overlay:linear-gradient(90deg,rgba(255,249,243,.94) 0%,rgba(255,249,243,.72) 45%,rgba(255,249,243,.10) 100%);
  --u-header:rgba(255,249,243,.76);
  --color-primary-hover:#e8672f;
}

/* The purple ruins background turns to autumn: a hue shift on the page background, warm sparkles */
.v2-thanksgiving body::before{filter:hue-rotate(118deg) saturate(1.15)}
.v2-thanksgiving body::after{filter:hue-rotate(125deg) saturate(1.6)}
:root.v2-thanksgiving[data-theme="light"] body::before{filter:hue-rotate(142deg) saturate(1.25)}
:root.v2-thanksgiving[data-theme="light"] body::after{filter:hue-rotate(142deg) saturate(1.6) brightness(.85)}

/* Big sections with a picture behind them get a warm orange-red wash (under the text, over the picture) */
.v2-thanksgiving .v2-tg-washed{isolation:isolate}
.v2-thanksgiving .v2-tg-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,#e2611b 0%,#c2321c 60%,#8f1d12 100%);mix-blend-mode:color;opacity:.9}
:root.v2-thanksgiving[data-theme="light"] .v2-tg-wash{background:linear-gradient(115deg,#f29a3a 0%,#ec7a2c 55%,#d9531e 100%);opacity:.7}

.v2-thanksgiving .usmp-hero::after{background:radial-gradient(closest-side,rgba(255,110,40,.30),transparent)}

/* Headings, labels and buttons that had purple written into them */
.v2-thanksgiving .usmp-hero h1 span{background-image:linear-gradient(90deg,#ffb35c,#ff6a2b 45%,#e8352a 75%,#ffb35c)}
:root.v2-thanksgiving[data-theme="light"] .usmp-hero h1 span{background-image:linear-gradient(90deg,#d9531e,#c2321c 50%,#e07a1f)}
.v2-thanksgiving .usmp-eyebrow,.v2-thanksgiving .v2-kicker,.v2-thanksgiving .ul-deals .ul-eyebrow{color:#ffa45c}
:root.v2-thanksgiving[data-theme="light"] .usmp-eyebrow{color:#b8461a}
.v2-thanksgiving .usmp-button-primary{background:linear-gradient(135deg,#ff9a4d,#f0532a);border-color:#ffb27a;color:#2a0c03;box-shadow:0 4px 22px rgba(232,69,44,.28)}
.v2-thanksgiving .usmp-button-primary:hover{background:linear-gradient(135deg,#ffb06e,#ff6a3d)}
:root.v2-thanksgiving[data-theme="light"] .usmp-button-primary{background:linear-gradient(135deg,#e8672f,#c2321c);color:#fff}
.v2-thanksgiving a:focus-visible,.v2-thanksgiving button:focus-visible,.v2-thanksgiving summary:focus-visible{outline-color:#ffb27a}

/* Launch / top deals section: harvest orange instead of amethyst */
.v2-thanksgiving .ul-launch{border-color:rgba(255,128,72,.34)}
.v2-thanksgiving .ul-official{border-color:rgba(255,128,72,.48);box-shadow:0 0 44px rgba(232,69,44,.16),0 18px 40px rgba(0,0,0,.35)}
.v2-thanksgiving .ul-official-kicker,.v2-thanksgiving .ul-hero-kicker,.v2-thanksgiving .ul-teaser .ul-gone{background:linear-gradient(135deg,#ffb35c,#e8452c)}
.v2-thanksgiving .ul-official .ul-flip,.v2-thanksgiving .ul-hero-clock .ul-flip{box-shadow:0 12px 24px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,128,72,.42)}
.v2-thanksgiving .ul-official .ul-f,.v2-thanksgiving .ul-hero-clock .ul-f{color:#ffb86b}
.v2-thanksgiving .ul-official .ul-f b,.v2-thanksgiving .ul-hero-clock .ul-f b{text-shadow:.125em .125em 0 rgba(0,0,0,.5),0 0 .32em rgba(232,69,44,.6)}
.v2-thanksgiving .ul-ev{border-color:rgba(255,128,72,.26)}
.v2-thanksgiving .ul-ev a,.v2-thanksgiving .ul-hero-evs a{color:#ffa45c}
.v2-thanksgiving .ul-teaser{border-color:rgba(255,128,72,.36);box-shadow:0 0 40px rgba(232,69,44,.08)}
.v2-thanksgiving .ul-adv-icon{filter:drop-shadow(0 0 8px rgba(255,140,50,.55))}
:root.v2-thanksgiving[data-theme="light"] .ul-official .ul-f{color:#b8461a}
:root.v2-thanksgiving[data-theme="light"] .ul-ev a{color:#b8461a}

/* Vote page: the headline and the amethyst glow go warm */
.v2-thanksgiving .v2-sheen{background-image:linear-gradient(90deg,#ffc06b 0%,#ff7a33 35%,#e8352a 55%,#ffc06b 80%)}
:root.v2-thanksgiving[data-theme="light"] .v2-sheen{background-image:linear-gradient(90deg,#d9531e 0%,#b8321c 35%,#e07a1f 55%,#d9531e 80%)}
.v2-thanksgiving .v2-quest-art::before{background:radial-gradient(circle,rgba(255,110,40,.45),transparent 65%)}
/* The amethyst cluster makes way for a big Minecraft pumpkin */
.v2-thanksgiving .v2-quest-art.has-tg-pumpkin img{display:none}
.v2-thanksgiving .v2-quest-pumpkin{position:relative;width:132px;height:132px;filter:drop-shadow(0 18px 30px rgba(220,70,30,.5));animation:v2-bob 4s ease-in-out infinite}
.v2-thanksgiving .v2-quest-pumpkin svg{display:block;width:100%;height:100%;image-rendering:pixelated}

/* ================= Pixel art basics ================= */
.v2-thanksgiving .v2-tg-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit;container-type:inline-size}
.v2-thanksgiving .v2-tg-layer svg,.v2-leaves svg,.v2-thanksgiving .v2-key-chicken svg,.v2-feast-burst svg{display:block;width:100%;height:100%;image-rendering:pixelated;overflow:visible}

/* ---------- Leaves falling down the screen ----------
   The outer piece falls straight down; the inner piece sways side to side and tumbles. */
.v2-leaves{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.v2-leaf-fall{position:absolute;top:-40px;animation:v2-leaf-fall var(--d,14s) linear var(--w,0s) infinite;will-change:transform}
.v2-leaf-sway{width:var(--s,18px);height:var(--s,18px);opacity:.9;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));animation:v2-leaf-sway var(--sd,3.4s) ease-in-out infinite alternate;will-change:transform}
@keyframes v2-leaf-fall{0%{transform:translateY(0)}100%{transform:translateY(calc(100vh + 80px))}}
@keyframes v2-leaf-sway{0%{transform:translateX(calc(var(--x,40px) * -1)) rotate(calc(var(--r,0deg) - 35deg))}100%{transform:translateX(var(--x,40px)) rotate(calc(var(--r,0deg) + 35deg))}}

/* ---------- Leaf piles in the corners ---------- */
.v2-thanksgiving .v2-leaf-pile{position:absolute;bottom:-4px;width:150px;height:48px}
.v2-thanksgiving .v2-pile-bl{left:-6px}
.v2-thanksgiving .v2-pile-br{right:-6px}
.v2-thanksgiving .v2-pile-leaf{position:absolute;width:24px;height:24px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}

/* ---------- Hay bale, pumpkin and a steaming pumpkin pie (home page, bottom right) ---------- */
.v2-thanksgiving .v2-harvest{position:absolute;right:40px;bottom:54px;width:120px;height:110px}
.v2-thanksgiving .v2-hay{position:absolute;right:0;bottom:0;width:72px;height:60px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.v2-thanksgiving .v2-hay-pumpkin{position:absolute;right:10px;bottom:58px;width:50px;height:50px;filter:drop-shadow(0 0 10px rgba(255,130,40,.45));animation:v2-bob 4s ease-in-out infinite}
.v2-thanksgiving .v2-hay-pie{position:absolute;right:76px;bottom:0;width:48px;height:32px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
@keyframes v2-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Steam rising off a pie */
.v2-thanksgiving .v2-steam{position:absolute;bottom:80%;width:4px;height:4px;background:rgba(255,240,225,.75);box-shadow:0 -6px 0 rgba(255,240,225,.5),2px -12px 0 rgba(255,240,225,.3);opacity:0;animation:v2-steam 2.6s ease-out infinite}
.v2-thanksgiving .v2-steam-1{left:34%}
.v2-thanksgiving .v2-steam-2{left:62%;animation-delay:-1.3s}
@keyframes v2-steam{0%{transform:translateY(4px);opacity:0}25%{opacity:.9}100%{transform:translate(3px,-18px);opacity:0}}

/* ---------- A chicken in a pilgrim hat strolling along the bottom of the top section ----------
   It walks right, stops to peck, turns round and walks back. 100cqw is the section's width. */
.v2-thanksgiving .v2-stroll{position:absolute;left:0;bottom:56px;width:52px;height:55px;animation:v2-stroll 26s linear infinite}
.v2-thanksgiving .v2-stroll-face{width:100%;height:100%;animation:v2-face 26s steps(1) infinite}
.v2-thanksgiving .v2-chicken{width:100%;height:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.v2-thanksgiving .v2-stroll .v2-chicken{animation:v2-peck 26s ease-in-out infinite;transform-origin:70% 90%}
@keyframes v2-stroll{
  0%{transform:translateX(calc(100cqw * .44))}
  40%{transform:translateX(calc(100cqw * .70))}
  50%{transform:translateX(calc(100cqw * .70))}
  90%{transform:translateX(calc(100cqw * .44))}
  100%{transform:translateX(calc(100cqw * .44))}
}
@keyframes v2-face{0%{transform:scaleX(1)}45%{transform:scaleX(-1)}95%{transform:scaleX(1)}}
@keyframes v2-peck{0%,40%,50%,90%,100%{transform:rotate(0)}42%,46%,92%,96%{transform:rotate(22deg)}44%,48%,94%,98%{transform:rotate(0)}}
/* Two leg poses swap back and forth, like a Minecraft walk cycle */
.v2-thanksgiving .v2-chicken .v2-legs-a{animation:v2-step .36s steps(1) infinite}
.v2-thanksgiving .v2-chicken .v2-legs-b{animation:v2-step .36s steps(1) infinite;animation-delay:-.18s}
@keyframes v2-step{0%{opacity:1}50%{opacity:0}}

/* ---------- A chicken pecking its way along the top of the Amethyst Key card ---------- */
.v2-thanksgiving .ul-key:has(.v2-key-chicken){z-index:2}
.v2-thanksgiving .v2-key-chicken{position:absolute;left:0;right:0;top:0;height:0;z-index:5;pointer-events:none;container-type:inline-size}
.v2-thanksgiving .v2-kc-walk{position:absolute;left:0;bottom:-2px;width:34px;height:36px;animation:v2-kc-walk 14s linear infinite}
.v2-thanksgiving .v2-kc-face{width:100%;height:100%;animation:v2-face 14s steps(1) infinite}
.v2-thanksgiving .v2-kc-bird{transform-origin:70% 90%;animation:v2-peck 14s ease-in-out infinite}
@keyframes v2-kc-walk{
  0%{transform:translateX(6px)}
  40%{transform:translateX(calc(100cqw - 40px))}
  50%{transform:translateX(calc(100cqw - 40px))}
  90%{transform:translateX(6px)}
  100%{transform:translateX(6px)}
}

/* ================= Vote page ================= */
.v2-thanksgiving .v2-quest-hero{position:relative}
.v2-thanksgiving .v2-quest-copy{position:relative;z-index:1}
.v2-thanksgiving .v2-quest-art{z-index:1}
.v2-thanksgiving .v2-vote-tg{z-index:0;border-radius:0;overflow:visible}

/* A big pilgrim chicken next to the title that says "Bawk!" now and then */
.v2-thanksgiving .v2-pilgrim{position:absolute;top:28px;right:344px;width:100px;height:106px;animation:v2-bob 3.2s ease-in-out infinite}
.v2-thanksgiving .v2-pilgrim-body{width:100%;height:100%;transform-origin:70% 90%;animation:v2-bawk-bump 8s ease-out infinite}
.v2-thanksgiving .v2-pilgrim .v2-legs-a,.v2-thanksgiving .v2-pilgrim .v2-legs-b{animation-duration:1.4s}
.v2-thanksgiving .v2-pilgrim .v2-legs-b{animation-delay:-.7s}
.v2-thanksgiving .v2-bawk{position:absolute;top:-14px;right:-58px;padding:5px 9px 4px;border:2px solid #2a0c03;border-radius:3px;background:#fff6ef;color:#2a0c03;font-family:var(--u-pixel,'Tiny5',monospace);font-size:15px;line-height:1;white-space:nowrap;box-shadow:3px 3px 0 rgba(0,0,0,.35);opacity:0;transform:translateY(6px) scale(.8);animation:v2-bawk 8s steps(1) infinite}
.v2-thanksgiving .v2-bawk::after{content:'';position:absolute;left:8px;bottom:-8px;width:8px;height:8px;background:#fff6ef;border-left:2px solid #2a0c03;border-bottom:2px solid #2a0c03;clip-path:polygon(0 0,100% 0,0 100%)}
@keyframes v2-bawk{0%,69%{opacity:0;transform:translateY(6px) scale(.8)}70%,92%{opacity:1;transform:none}93%,100%{opacity:0;transform:translateY(6px) scale(.8)}}
@keyframes v2-bawk-bump{0%,69%{transform:rotate(0)}71%{transform:rotate(-8deg) scale(1.06)}74%{transform:rotate(0)}77%{transform:rotate(-6deg)}80%,100%{transform:rotate(0)}}

/* Voted sites: the purple "Voted" badge and glow go harvest orange */
.v2-thanksgiving .vote-done{background:linear-gradient(160deg,rgba(255,138,61,.95),rgba(214,52,32,.95));box-shadow:0 6px 18px rgba(214,52,32,.45),inset 0 1px rgba(255,255,255,.25)}
.v2-thanksgiving.vote-page .usmp-btn.is-voted,.v2-thanksgiving .vote-page .usmp-btn.is-voted{background:radial-gradient(ellipse at 50% 30%,rgba(255,110,40,.18),transparent 70%),var(--u-surface)!important;border-color:rgba(255,128,72,.6)!important}

/* ---------- A pumpkin pie on each vote site: raw until the vote counts, then golden and steaming ---------- */
.v2-thanksgiving .v2-card-pie{position:absolute;top:10px;right:9px;width:30px;height:20px}
.v2-thanksgiving .v2-card-pie > span{position:absolute;inset:0;transition:opacity .3s}
.v2-thanksgiving .v2-card-pie svg{display:block;width:100%;height:100%;image-rendering:pixelated}
.v2-thanksgiving .v2-card-pie .v2-pie-baked{opacity:0}
.v2-thanksgiving .v2-card-pie .v2-steam{display:none}
.v2-thanksgiving .usmp-btn:hover .v2-card-pie{animation:v2-pie-wobble .5s ease-in-out}
.v2-thanksgiving .usmp-btn.is-voted .v2-card-pie{filter:drop-shadow(0 0 7px rgba(255,140,40,.8))}
.v2-thanksgiving .usmp-btn.is-voted .v2-card-pie .v2-pie-baked{opacity:1}
.v2-thanksgiving .usmp-btn.is-voted .v2-card-pie .v2-pie-raw{opacity:0}
.v2-thanksgiving .usmp-btn.is-voted .v2-card-pie .v2-steam{display:block}
/* The moment a vote counts: the pie pops out of the oven */
.v2-thanksgiving .usmp-btn.is-just-voted .v2-card-pie{animation:v2-pie-pop .7s cubic-bezier(.34,1.56,.64,1)}
.v2-thanksgiving .usmp-btn.is-just-voted .v2-card-pie::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,140,40,.9);opacity:0;animation:v2-pie-ring .7s ease-out}
@keyframes v2-pie-pop{0%{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.35) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes v2-pie-ring{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes v2-pie-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}

/* The line that explains the pies */
.v2-thanksgiving .v2-tg-tip{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:12px 0 0;padding:7px 14px 7px 9px;border-radius:999px;background:rgba(232,69,44,.12);border:1px solid rgba(255,128,72,.42);color:#ffbf8a;font-size:.8125rem;font-weight:700;line-height:1.35}
.v2-thanksgiving .v2-tip-pie{flex:none;width:24px;height:16px;filter:drop-shadow(0 0 5px rgba(255,140,40,.7))}
.v2-thanksgiving .v2-tip-pie svg{display:block;width:100%;height:100%;image-rendering:pixelated}
:root.v2-thanksgiving[data-theme="light"] .v2-tg-tip{color:#8a2e0c;background:rgba(232,69,44,.10);border-color:rgba(200,80,30,.45)}

/* ---------- Quest complete: leaves and pies fly up the screen ---------- */
.v2-feast-burst{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden}
.v2-feast-burst .v2-burst-piece{position:absolute;bottom:-60px;width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(255,120,40,.55));animation:v2-rise var(--d,2.6s) cubic-bezier(.2,.65,.35,1) var(--w,0s) forwards}
.v2-feast-burst .v2-burst-piece.is-pie{width:48px;height:32px}
@keyframes v2-rise{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--x,0),calc(-100vh - 140px)) rotate(var(--r,0deg))}}

/* ================= Smaller screens ================= */
@media (max-width:1100px){
  .v2-thanksgiving .v2-pilgrim{right:300px}
}
@media (max-width:900px){
  .v2-thanksgiving .v2-pilgrim{top:20px;right:240px;width:72px;height:76px}
}
@media (max-width:650px){
  .v2-thanksgiving .v2-pilgrim{top:4px;right:4px;width:54px;height:57px}
  .v2-thanksgiving .v2-bawk{top:-12px;right:auto;left:-58px;font-size:12px}
  .v2-thanksgiving .v2-bawk::after{left:auto;right:8px;transform:scaleX(-1)}
  /* On phones the pie sits like a sticker on the corner of the site icon */
  .v2-thanksgiving .v2-card-pie{top:6px;left:80px;right:auto;width:24px;height:16px}
  .v2-thanksgiving .v2-tg-tip{border-radius:14px}
  .v2-thanksgiving .v2-harvest{right:12px;bottom:62px;transform:scale(.7);transform-origin:100% 100%}
  .v2-thanksgiving .v2-stroll{bottom:58px;width:38px;height:40px}
  .v2-thanksgiving .v2-leaf-pile{width:110px;height:40px}
  .v2-thanksgiving .v2-pile-leaf{width:18px;height:18px}
  .v2-thanksgiving .v2-kc-walk{width:28px;height:30px}
}

/* ================= Reduced motion: keep the colours and decorations, drop the movement ================= */
@media (prefers-reduced-motion:reduce){
  .v2-thanksgiving .v2-quest-pumpkin{animation:none}
  .v2-thanksgiving .v2-tg-layer *,.v2-thanksgiving .v2-key-chicken *,.v2-thanksgiving .v2-card-pie,.v2-thanksgiving .v2-card-pie::after{animation:none!important}
  .v2-thanksgiving .v2-stroll{transform:translateX(calc(100cqw * .6))}
  .v2-thanksgiving .v2-kc-walk{transform:translateX(calc(100cqw - 48px))}
  .v2-thanksgiving .v2-legs-b,.v2-thanksgiving .v2-bawk,.v2-thanksgiving .v2-steam{display:none!important}
  .v2-leaves,.v2-feast-burst{display:none}
}
html.usmp-lite.v2-thanksgiving .v2-steam{display:none}