/* Thanksgiving / autumn (2026-10-31, her ask: "做感恩节主题秋日氛围感").
   Home page: 8 autumn friends + a "Happy Thanksgiving" garland at the top.
   Every page except the games: a few leaves falling down the screen.
   Season over (after Nov 26)? build.py: LCS_AUTUMN=0 drops the <link> to this file and all the markup.
   Only transform/opacity move. Nothing here can be tapped (pointer-events:none), and it all sits below the sticky header (20),
   the round buttons / Book / sound button (30), the WeChat window (60), the coupon window (150), the oven loader (200)
   and the catalog reader (2000).
   Rule of thumb: no friend may sit on text. Big screens keep them in the side margins; phones and tablets only get them
   on the first screen, at the very edges. */

/* ---------- falling leaves (every page) ---------- */
.au-leaves{position:fixed;inset:0;z-index:14;pointer-events:none;overflow:hidden}
/* outer <i> falls straight down (with a little wind to the left), inner <i> sways side to side and tilts */
.aul{position:absolute;left:var(--x);top:0;width:var(--s);margin-left:calc(var(--s) / -2);opacity:.85;
  animation:au-fall var(--d) linear var(--dl) infinite}
.aul>i{display:block;animation:au-sway var(--sd) ease-in-out var(--dl) infinite alternate}
.aul:nth-child(even)>i{animation-name:au-sway2}
.aul svg{display:block;width:100%;height:auto;overflow:visible;color:var(--c)}
@keyframes au-fall{from{transform:translate3d(0,-56px,0)}to{transform:translate3d(-40px,calc(100vh + 56px),0)}}
@keyframes au-sway{from{transform:translate3d(-18px,0,0) rotate(-38deg)}to{transform:translate3d(18px,0,0) rotate(32deg)}}
@keyframes au-sway2{from{transform:translate3d(15px,0,0) rotate(42deg)}to{transform:translate3d(-15px,0,0) rotate(-26deg)}}
@media (min-width:1000px){.aul{width:calc(var(--s) * 1.25)}}
/* phones: only 4 leaves, half see-through, so a word under a passing leaf stays readable */
@media (max-width:700px){.aul{opacity:.5}.aul:nth-child(n+5){display:none}}

/* ---------- autumn friends (home page) ---------- */
.auf{position:absolute;width:var(--s,56px);animation:au-bob var(--d,5s) ease-in-out infinite;animation-delay:var(--dl,0s);filter:drop-shadow(0 6px 6px rgba(74,58,63,.18))}
.auf svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes au-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes au-spin{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(12deg) translateY(-8px)}}
/* the maple friend rides the wind across the greeting banner, tumbling a little */
@keyframes au-drift{0%{transform:translate(-14vw,0) rotate(-18deg)}25%{transform:translate(18vw,16px) rotate(10deg)}50%{transform:translate(48vw,-12px) rotate(-12deg)}
  75%{transform:translate(80vw,12px) rotate(14deg)}100%{transform:translate(114vw,0) rotate(-18deg)}}

/* big screens (1200px+): 5 friends in the side margins, staying on screen while you scroll */
.au-float{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.auf.pumpkin{left:2%;top:24vh;--s:74px;--d:5.5s}
.auf.turkey{right:2%;top:33vh;--s:80px;--d:6s;--dl:-2s}
.auf.pie{right:1.5%;top:44vh;--s:58px;--d:4.5s;--dl:-1s}
.auf.apple{right:3%;top:58vh;--s:54px;--d:5s;--dl:-3s;animation-name:au-spin}
.auf.cupcake{left:1.5%;bottom:13vh;--s:66px;--d:6.5s;--dl:-4s}
.au-float .auf.maple{display:none}   /* big screens: the maple flies across the banner instead (below) */
/* ...and 3 friends riding on the greeting banner, so they scroll away with it and never sit over the text further down.
   The words are stacked above them: the flying maple passes in front of the flags but behind the letters. */
.aub-friends{position:absolute;inset:0;z-index:1;pointer-events:none}
.aub-friends .auf.cocoa{left:16%;top:12px;--s:50px;--d:4.8s;--dl:-2.4s}
.aub-friends .auf.acorn{right:11%;top:24px;--s:46px;--d:3.6s;--dl:-1s}
.aub-friends .auf.maple{left:0;top:18px;--s:54px;animation:au-drift 32s linear infinite}

/* phones + tablets (up to 1199px): the side margins are narrower than the friends, so 4 of them peek in from the screen
   edges on the first screen only (around the tea table) and scroll away with it. */
@media (max-width:1199px){
  /* width:100vw: the home page is a little wider than a phone (the treat carousel tags stick out); pin these layers to the
     screen width so nothing pinned to the right edge ends up off-screen */
  .au-float{position:absolute;top:0;left:0;right:auto;bottom:auto;width:100vw;height:100vh;height:100svh}
  .au-leaves{right:auto;width:100vw}
  .aub-friends,.auf.apple,.auf.cupcake{display:none}
  .auf.pumpkin{left:-4px;top:max(36vh,280px);--s:52px}
  .auf.turkey{right:-6px;top:max(40vh,300px);--s:56px}
  .au-float .auf.maple{display:block;left:-2px;top:max(60vh,400px);--s:46px;--d:5s;--dl:-1.5s}
  .auf.pie{right:-2px;top:max(64vh,440px);top:min(max(64vh,440px),calc(100% - 170px));--s:50px}  /* stays clear of the Book button */
}
/* phones: smaller, and placed in the gaps between the tea-table labels ("Meet Chef Chloe" sits around 340-440px from the
   top, "Birthday parties" from about 715px) */
@media (max-width:700px){
  .auf.pumpkin{top:256px;--s:40px}
  .auf.turkey{right:-4px;top:470px;--s:44px}
  .au-float .auf.maple{top:max(58vh,380px);--s:34px}
  .auf.pie{right:0;top:600px;top:min(600px,calc(100% - 170px));--s:40px}
}
@media (max-width:700px) and (max-height:700px){.auf.pie{display:none}}   /* short phones: no room between the turkey and the Book button */
@media (max-width:1199px) and (max-height:560px){.au-float{display:none}}  /* phones turned sideways: the first screen is all banner and buttons */

/* wiggly bits inside the friends (pumpkin/apple leaf, turkey tail, cocoa steam, cupcake leaf topper) */
.auf .wig{transform-box:fill-box;animation:au-wig 2.6s ease-in-out infinite alternate}
.auf .wig-bl{transform-origin:0 100%}   /* leaf hinged at its stem end (bottom-left) */
.auf .wig-b{transform-origin:50% 100%}  /* tail / steam / topper hinged at the bottom middle */
.auf.turkey .wig{animation-name:au-fan;animation-duration:1.8s}
.auf.cocoa .wig{animation-name:au-steam;animation-duration:2.2s}
@keyframes au-wig{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes au-fan{from{transform:rotate(-5deg) scale(.97)}to{transform:rotate(5deg) scale(1.03)}}
@keyframes au-steam{0%{transform:translateY(2px) scaleY(.9);opacity:.5}100%{transform:translateY(-2px) skewX(-8deg);opacity:1}}

/* ---------- "Happy Thanksgiving" garland + greeting at the top of the home page ---------- */
.au-banner{position:relative;z-index:5;text-align:center;padding:4px 12px 16px;background:linear-gradient(#fff8ef,#ffe9d6);overflow:hidden}
.aub-flags{display:flex;justify-content:center;gap:clamp(4px,1.2vw,12px);position:relative;padding-top:8px}
.aub-flags::before{content:"";position:absolute;left:-5%;right:-5%;top:6px;height:18px;border-top:2px dashed #8a5a3c;border-radius:50%/0 0 100% 100%;opacity:.55}
.aub-f{position:relative;display:grid;place-items:center;width:clamp(30px,5vw,46px);height:clamp(36px,6vw,54px);font-style:normal;font-size:clamp(14px,2.3vw,22px);
  clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);padding-bottom:10px;transform-origin:50% 0;animation:aub-sway 3.4s ease-in-out infinite}
.aub-f.c0{background:#f4a259}.aub-f.c1{background:#f8b4cc}.aub-f.c2{background:#f2cf6b}.aub-f.c3{background:#e98f6c}.aub-f.c4{background:#dcb48c}
.aub-f:nth-child(odd){animation-delay:-1.7s;margin-top:4px}
@keyframes aub-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.aub-text,.aub-sub{position:relative;z-index:2}   /* above the banner friends */
.aub-text{margin:10px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(22px,4.4vw,40px);line-height:1.2;color:#dd6f26;
  letter-spacing:.02em;text-wrap:balance;text-shadow:2px 2px 0 #fff,4px 4px 0 #c98f63}
html[lang=zh] .aub-text{text-shadow:2px 2px 0 #fff,3px 3px 0 #e8c3a5}   /* thin Chinese strokes: a softer outline */
.aub-e{font-style:normal;text-shadow:none}   /* the 🍂 🥧 emoji: no brown copy behind them */
.aub-text span{display:inline-block;animation:aub-bob 4s ease-in-out infinite}
@keyframes aub-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.aub-sub{margin:6px 0 0;font-family:var(--body);font-weight:600;font-size:clamp(14px,1.9vw,18px);color:#8a5a3c}
@media (max-width:700px){.aub-f:nth-child(n+10){display:none}}

/* ---------- reduce motion: nothing moves, no falling leaves ---------- */
@media (prefers-reduced-motion:reduce){
  .au-leaves{display:none}
  .auf,.auf .wig,.aub-f,.aub-text span{animation:none!important}
  .aub-friends .auf.maple{left:2.5%}   /* parked in the empty top-left corner of the banner instead of flying */
}