/* The Caramel Tree seasonal experience layer. Pairs with seasons.js.
   Everything here is pointer-events:none except the Effects toggle.
   Stacking: canvas 30 (below sticky ATC 35 and nav 40), spiders live inside the nav,
   frost 29, toggle 55 (same as the Preview pill), drawer and menu 70 stay on top. */
.szn-x{pointer-events:none}
.szn-cv{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:41;pointer-events:none;display:block}
.szn-rel{position:relative}
.szn-iso{isolation:isolate}

/* ---------- Effects toggle (matches the Preview skin pill) ---------- */
.szn-fx{position:fixed;right:16px;bottom:16px;z-index:55;pointer-events:auto;display:inline-flex;align-items:center;gap:6px;background:rgba(43,33,26,.92);color:var(--cream,#FBF7F0);border:1px solid rgba(251,247,240,.12);border-radius:999px;padding:5px 6px 5px 14px;font-family:var(--ff-h,Jost,sans-serif);font-size:10px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 24px rgba(43,33,26,.22);backdrop-filter:blur(8px);cursor:pointer;transition:bottom .25s ease}
.szn-fx[hidden]{display:none}
.szn-fx span{opacity:.55}
.szn-fx b{font-weight:500;min-height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:var(--gold,#D9A446);color:var(--ink,#2B211A);letter-spacing:.12em}
.szn-fx[aria-pressed="false"] b{background:transparent;color:rgba(251,247,240,.7);box-shadow:inset 0 0 0 1px rgba(251,247,240,.25)}
.szn-fx:focus-visible{outline:2px solid var(--gold,#D9A446);outline-offset:2px}
[data-skin="oct"] .szn-fx{background:rgba(30,18,34,.94)}[data-skin="oct"] .szn-fx b{background:#C1611F;color:#FBF7F0}
[data-skin="nov"] .szn-fx{background:rgba(122,58,34,.94)}[data-skin="nov"] .szn-fx b{background:#D9A446}
[data-skin="dec"] .szn-fx{background:rgba(22,48,38,.94)}
body.has-sticky .szn-fx{bottom:78px}
@media(max-width:700px){.szn-fx{right:10px;bottom:10px;padding:4px 4px 4px 10px;font-size:9.5px}.szn-fx span{display:none}.szn-fx{padding-left:4px}.szn-fx b{padding:0 9px}}

/* ---------- shared draw-in ---------- */
@keyframes szn-draw{to{stroke-dashoffset:0}}
.szn-web{position:absolute;overflow:visible;z-index:2}
.szn-web path{fill:none;stroke:currentColor;stroke-width:.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:szn-draw 2.2s cubic-bezier(.45,.05,.2,1) forwards}

/* ---------- BASE: caramel drip under the header ---------- */
.szn-drip{position:absolute;left:0;top:100%;width:100%;height:60px;overflow:visible;margin-top:-1px}
.szn-drip g.d{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:szn-drip 1.6s cubic-bezier(.5,0,.3,1) .35s forwards}
.szn-drip g.d2{animation-duration:2s;animation-delay:.7s}
.szn-drip.fast g.d{animation-duration:.85s;animation-delay:0s}.szn-drip.fast g.d2{animation-duration:.9s;animation-delay:0s}
.szn-drip.set g.d{animation:none;transform:none}
@keyframes szn-drip{0%{transform:scaleY(0)}18%{transform:scaleY(.22)}64%{transform:scaleY(1.06)}82%{transform:scaleY(.98)}100%{transform:scaleY(1)}}

/* ---------- OCTOBER ---------- */
.szn-spiders{position:fixed;left:0;right:0;top:0;height:100vh;overflow:hidden;z-index:39;contain:layout paint}
.szn-spd{position:absolute;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}
.szn-spd i{position:absolute;left:-.5px;top:0;width:1px;height:1px;transform-origin:0 0;background:rgba(43,33,26,.42)}
.szn-spd.dk i{background:rgba(251,238,226,.5)}
.szn-spd svg{position:absolute;left:-15px;top:0;width:30px;height:34.6px;overflow:visible;filter:drop-shadow(0 5px 4px rgba(20,10,20,.28))}
.szn-spd.dk svg{filter:drop-shadow(0 0 1px rgba(251,236,222,.45)) drop-shadow(0 6px 5px rgba(0,0,0,.35))}
.szn-spd .lg{transform-box:fill-box;transform-origin:50% 50%}
.szn-spd.go .lg.a{animation:szn-leg .1s linear infinite alternate}
.szn-spd.go .lg.b{animation:szn-leg .1s linear infinite alternate-reverse}
@keyframes szn-leg{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@media(max-width:700px){.szn-spd svg{transform-origin:50% 0;scale:.82}}
/* the skin's static corner moon moves behind the product and breathes */
[data-skin="oct"] .hero.szn-iso{background-image:radial-gradient(60% 70% at 72% 18%,rgba(120,90,130,.2) 0%,rgba(42,26,46,0) 70%),linear-gradient(180deg,#2A1A2E 0%,#1E1224 48%,#130B17 100%)}
.szn-moon{position:absolute;z-index:-1;left:66%;top:20%;width:clamp(260px,30vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.szn-moon::before,.szn-moon::after{content:"";position:absolute;inset:0;border-radius:50%}
.szn-moon::before{inset:-45%;background:radial-gradient(circle,rgba(246,214,178,.16) 0,rgba(233,162,107,.08) 32%,rgba(42,26,46,0) 66%);animation:szn-breathe 7s ease-in-out infinite}
.szn-moon::after{inset:22%;background:radial-gradient(circle at 38% 36%,rgba(255,246,232,.2),rgba(252,236,214,.12) 58%,rgba(252,236,214,.07));box-shadow:0 0 40px rgba(252,236,214,.1),inset -10px -8px 24px rgba(42,26,46,.18)}
@keyframes szn-breathe{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@media(max-width:900px){.szn-moon{left:74%;top:14%;width:64vw}}
.szn-cweb{position:absolute;top:0;right:0;width:64px;height:64px;color:rgba(184,134,47,.62);opacity:0;transition:opacity .3s;z-index:2}
.szn-cweb path{animation:none}
.card:hover .szn-cweb{opacity:1}
.card:hover .szn-cweb path{animation:szn-draw 1.1s cubic-bezier(.45,.05,.2,1) forwards}
/* a single silk thread sweeps across buttons on hover */
[data-skin="oct"] .btn{position:relative;overflow:hidden}
[data-skin="oct"] .btn::after{content:"";position:absolute;inset:0 -12%;pointer-events:none;transform:translateX(-115%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48' preserveAspectRatio='none'%3E%3Cpath d='M0 9Q58 40 120 14M34 0Q44 22 40 48' fill='none' stroke='%23FBF7F0' stroke-opacity='.55' stroke-width='.7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
[data-skin="oct"] .btn--line::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48' preserveAspectRatio='none'%3E%3Cpath d='M0 9Q58 40 120 14M34 0Q44 22 40 48' fill='none' stroke='%23C1611F' stroke-opacity='.6' stroke-width='.7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
html:not(.szn-static)[data-skin="oct"] .btn:hover::after{animation:szn-sweep .9s cubic-bezier(.4,0,.2,1)}
@keyframes szn-sweep{from{transform:translateX(-115%)}to{transform:translateX(115%)}}

/* ---------- NOVEMBER ---------- */
.szn-note{position:absolute;left:2%;top:7%;width:min(62%,430px);z-index:3;overflow:visible;transform:rotate(-4deg)}
.szn-note text{font-family:"EB Garamond",Georgia,serif;font-style:italic;font-size:44px;fill:rgba(156,74,43,0);stroke:#9C4A2B;stroke-width:.6;stroke-dasharray:420;stroke-dashoffset:420;animation:szn-write 2.6s cubic-bezier(.5,.1,.3,1) 1s forwards,szn-ink .9s ease 2.9s forwards}
.szn-note .clip{animation:szn-reveal 2.6s cubic-bezier(.5,.1,.3,1) 1s both}
@keyframes szn-write{to{stroke-dashoffset:0}}
@keyframes szn-ink{to{fill:#9C4A2B;stroke-width:0}}
@keyframes szn-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(max-width:900px){.szn-note{left:4%;top:4%;width:min(58%,260px)}}
.szn-note.in-copy{left:-4px;top:calc(100% + 16px);width:min(290px,72%);transform:rotate(-2.5deg)}
.szn-note.flow{position:relative;left:-2px;top:auto;display:block;margin-top:18px;width:min(250px,66%)}
[data-skin="nov"].szn-w .sec-head h2::after{display:none}
.szn-wheat{display:block;width:150px;height:20px;margin:12px auto 0;overflow:visible;color:#B8862F}
.sec-head.left .szn-wheat{margin-left:0}
.szn-wheat path{fill:none;stroke:currentColor;stroke-width:.8;stroke-linecap:round;stroke-opacity:.75;stroke-dasharray:1;stroke-dashoffset:1}
.szn-wheat.in path{animation:szn-draw 1.6s cubic-bezier(.45,.05,.2,1) forwards}
.szn-wheat.in path+path{animation-delay:.9s;animation-duration:.9s}

/* ---------- DECEMBER ---------- */
.szn-cap{position:absolute;left:0;width:100%;overflow:visible;z-index:3;transform-origin:50% 100%;animation:szn-grow 20s cubic-bezier(.2,.6,.3,1) both;filter:drop-shadow(0 1px 1.4px rgba(40,70,100,.3))}
@keyframes szn-grow{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
[data-skin="dec"] .card.szn-capped{overflow:visible}
.szn-cap.cc{filter:drop-shadow(0 -.5px 0 rgba(110,140,168,.45)) drop-shadow(0 2px 2px rgba(40,70,100,.22))}
[data-skin="dec"] .card.szn-capped .card-media{border-radius:11px 11px 0 0}
.szn-frost{position:fixed;z-index:29;width:240px;height:240px;pointer-events:none;opacity:0;animation:szn-frost 7s cubic-bezier(.2,.6,.3,1) .4s forwards}
.szn-frost.tl{left:0;top:0;transform-origin:0 0}.szn-frost.tr{right:0;top:0;transform-origin:100% 0;scale:-1 1}
.szn-frost.bl{left:0;bottom:0;transform-origin:0 100%;scale:1 -1}.szn-frost.br{right:0;bottom:0;transform-origin:100% 100%;scale:-1 -1}
@keyframes szn-frost{from{opacity:0;transform:scale(.45)}to{opacity:.5;transform:scale(1)}}
@media(max-width:700px){.szn-frost{width:140px;height:140px}}
.szn-lights{position:absolute;left:0;top:0;width:100%;height:18px;overflow:visible;z-index:1}
.szn-lights .bl{animation:szn-tw 3s ease-in-out infinite alternate}
@keyframes szn-tw{0%{opacity:.35}60%{opacity:1}100%{opacity:.75}}
[data-skin="dec"] .announce{position:relative}
.szn-d .announce{padding-bottom:17px}@media(max-width:700px){.szn-d .announce{padding-bottom:15px}}

/* ---------- static dressed state (reduced motion, or Effects off) ---------- */
.szn-static .szn-x,.szn-static .szn-x *,.szn-static .szn-x::before,.szn-static .szn-x::after{animation:none !important;transition:none !important}
.szn-static .szn-web path,.szn-static .szn-wheat path{stroke-dashoffset:0}
.szn-static .card:hover .szn-cweb path{stroke-dashoffset:0}
.szn-static .szn-drip g.d{transform:none}
.szn-static .szn-note text{fill:#9C4A2B;stroke-width:0}
.szn-static .szn-frost{opacity:.5}
.szn-static .szn-lights .bl{opacity:.9}
@media(prefers-reduced-motion:reduce){.szn-x,.szn-x *,.szn-x::before,.szn-x::after{animation:none !important;transition:none !important}[data-skin="oct"] .btn::after{display:none}}