/* ============================================================ CRYPTEX AUTUMN FESTIVAL — entry screens skin (September 2026) Active only while has .cx-autumn (set by js/autumn.js when Manila date <= 2026-09-30). After that this file is inert and the normal UI shows untouched. Layers on the login screen, back to front: #app-auth gradient → .aut-moon → #aut-three (leaves) → .auth-container ============================================================ */ html.cx-autumn{ --aut-night:#14090d; --aut-copper:#c8622a; --aut-amber:#e9a03b; --aut-gold:#f6cf7a; --aut-cream:#ffe8c2; --aut-maple:#a83224; } /* ---------- Splash screen ---------- */ html.cx-autumn #splash-screen{background:radial-gradient(ellipse 120% 90% at 50% 112%,#2a1016 0%,#160a0e 42%,#0b0507 100%)} html.cx-autumn .splash-grid{ background-image:linear-gradient(rgba(233,160,59,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(233,160,59,.05) 1px,transparent 1px); } html.cx-autumn .splash-scanline{background:linear-gradient(90deg,transparent,rgba(233,160,59,.45),transparent)} html.cx-autumn .splash-hex{border-color:rgba(233,160,59,.28)} html.cx-autumn .splash-hex::before{border-color:rgba(200,98,42,.22)} html.cx-autumn .splash-hex::after{border-color:rgba(246,207,122,.14)} html.cx-autumn .splash-logo{filter:drop-shadow(0 0 20px rgba(233,160,59,.55));animation:autLogoPulse 2s ease-in-out infinite} @keyframes autLogoPulse{ 0%,100%{filter:drop-shadow(0 0 18px rgba(233,160,59,.5))} 50%{filter:drop-shadow(0 0 38px rgba(246,207,122,.85))} } html.cx-autumn .splash-sub{color:rgba(246,207,122,.72)} html.cx-autumn .splash-bar{background:linear-gradient(90deg,transparent,var(--aut-copper),var(--aut-gold),transparent)} html.cx-autumn .splash-status{color:rgba(233,160,59,.45)} html.cx-autumn .splash-particle{background:var(--aut-amber)!important} /* Festival ribbon under the splash logo (injected by JS) */ .aut-ribbon{ display:flex;align-items:center;gap:10px; font-family:'Fraunces','Georgia',serif;font-style:italic;font-weight:400; font-size:.92rem;letter-spacing:.04em;white-space:nowrap; margin-top:4px; } /* the clipped gradient sits on this leaf-free span; GSAP-transformed siblings cannot break it */ .aut-ribbon-text{ color:var(--aut-gold,#f6cf7a); background:linear-gradient(100deg,#b3561f 20%,#f6cf7a 42%,#fff3d9 50%,#f6cf7a 58%,#b3561f 80%); background-size:220% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } .aut-ribbon-leaf{display:block;width:14px;height:14px;flex-shrink:0;color:var(--aut-copper,#c8622a)} .aut-ribbon-leaf svg{display:block;width:100%;height:100%} /* ---------- Auth (login) screen ---------- */ html.cx-autumn #app-auth{ background:linear-gradient(170deg,#0b0507 0%,#160a0e 28%,#2a1016 58%,#3a1a14 82%,#1a0c0a 100%); } html.cx-autumn #app-auth::before{ background-image:linear-gradient(rgba(233,160,59,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(233,160,59,.03) 1px,transparent 1px); } html.cx-autumn #app-auth::after{ background:radial-gradient(ellipse 80% 45% at 50% 100%,rgba(200,98,42,.16),transparent 62%), radial-gradient(ellipse 50% 40% at 15% 70%,rgba(168,50,36,.08),transparent), radial-gradient(ellipse 45% 35% at 85% 60%,rgba(233,160,59,.06),transparent); } /* Harvest moon — placed by JS at the logo's centre, sits behind the leaves */ .aut-moon{ position:absolute;left:50%;top:22%; width:min(300px,78vw);height:min(300px,78vw); transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;z-index:0; background: radial-gradient(circle at 38% 30%,rgba(255,255,255,.35) 0%,transparent 28%), radial-gradient(circle at 62% 66%,rgba(120,60,20,.20) 0%,transparent 12%), radial-gradient(circle at 30% 70%,rgba(120,60,20,.16) 0%,transparent 9%), radial-gradient(circle at 70% 32%,rgba(120,60,20,.14) 0%,transparent 7%), radial-gradient(circle at 50% 50%,#fff1d6 0%,#f9d99a 38%,#eeb35c 70%,#c97a30 100%); box-shadow: 0 0 40px 10px rgba(246,207,122,.32), 0 0 120px 40px rgba(233,160,59,.18), 0 0 240px 90px rgba(200,98,42,.10); animation:autMoonBreathe 7s ease-in-out infinite; } .aut-moon::after{ content:'';position:absolute;inset:-2px;border-radius:50%; background:radial-gradient(circle at 50% 50%,transparent 60%,rgba(110,45,15,.22) 100%); } @keyframes autMoonBreathe{ 0%,100%{box-shadow:0 0 40px 10px rgba(246,207,122,.32),0 0 120px 40px rgba(233,160,59,.18),0 0 240px 90px rgba(200,98,42,.10)} 50%{box-shadow:0 0 50px 14px rgba(246,207,122,.42),0 0 150px 50px rgba(233,160,59,.24),0 0 280px 110px rgba(200,98,42,.13)} } /* three.js canvas sits where the neuron canvas lives; neuron hides only when the 3D scene actually runs (cx-autumn-3d added on successful init) */ #aut-three{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} html.cx-autumn-3d #neuron-canvas{display:none} /* a little headroom so more of the moon disc shows above the logo */ html.cx-autumn .auth-logo{margin-top:22px} @media (min-width:768px) and (min-height:760px){html.cx-autumn .auth-logo{margin-top:56px}} /* the moon is decoration; the logo must stay legible on top of it */ html.cx-autumn .auth-logo-glow{background:radial-gradient(circle,rgba(20,9,13,.55) 0%,rgba(20,9,13,.30) 45%,transparent 70%);filter:blur(18px);width:280px;height:120px} html.cx-autumn .auth-logo .logo-img{filter:drop-shadow(0 2px 6px rgba(20,9,13,.9)) drop-shadow(0 0 22px rgba(233,160,59,.45))} html.cx-autumn .auth-divider span{background:linear-gradient(90deg,transparent,rgba(233,160,59,.5),rgba(246,207,122,.35),transparent)} html.cx-autumn .auth-subtitle{ background:linear-gradient(135deg,#fff3d9 30%,var(--aut-amber)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* Festival hero headline (injected by JS between subtitle and warning) */ /* no filter on this ancestor: a filter above background-clip:text letters makes Chrome drop the gradient fill */ .aut-hero{margin-top:14px;position:relative;padding:2px 0 4px} .aut-hero-line1{ font-family:'Fraunces','Georgia',serif;font-style:italic;font-weight:400; font-size:clamp(.95rem,4vw,1.1rem);letter-spacing:.01em; color:rgba(255,232,194,.80); } /* two un-breakable words: side by side when there is room, otherwise the whole word drops to the next line — never a mid-word break */ .aut-hero-words{ display:flex;flex-wrap:wrap;justify-content:center;column-gap:.28em;row-gap:0; margin-top:2px;line-height:1.02; position:relative;isolation:isolate; /* sheen geometry, set by JS after measuring the rendered word: --sw = width of the sheen layer, --sheen = its x offset, --lx per letter */ --sw:600px;--sheen:-9999px; } /* warm bloom behind the title — a sibling of the letters, never an ancestor, so its blur filter cannot break the clipped text */ .aut-hero-glow{ position:absolute;left:50%;top:50%;width:105%;height:150%; transform:translate(-50%,-50%);z-index:-1;pointer-events:none; background:radial-gradient(ellipse at 50% 55%,rgba(233,160,59,.38) 0%,rgba(200,98,42,.16) 45%,transparent 72%); filter:blur(18px);opacity:.9; } .aut-word{ font-family:'Fraunces','Georgia',serif;font-weight:600; font-size:clamp(2.3rem,11.5vw,3.4rem);letter-spacing:-.01em;white-space:nowrap; /* no text-shadow: with a transparent fill it paints *through* the glyphs */ } /* gradient lives on each letter (vertical, so it reads as one continuous copper engraving) — parent-level background-clip:text goes invisible once GSAP leaves transforms on the spans. A second, wider layer carries the light sheen; each letter offsets it by its own --lx so the band travels across the word as one continuous highlight. */ .aut-word .aut-ch{ display:inline-block;white-space:pre;--lx:0px; background-image: linear-gradient(105deg,rgba(255,252,240,0) 44%,rgba(255,252,240,.55) 48.5%,rgba(255,255,255,.98) 50%,rgba(255,252,240,.55) 51.5%,rgba(255,252,240,0) 56%), linear-gradient(180deg,#fff3d9 0%,#f6cf7a 34%,#e9a03b 62%,#b3561f 98%); background-size:var(--sw) 100%,100% 100%; background-position:calc(var(--sheen) - var(--lx)) 0,0 0; background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .aut-hero-sub{ margin-top:8px;font-size:.74rem;font-weight:500;letter-spacing:.3px; color:rgba(255,232,194,.62); } /* Auth card: warm glass, quiet — the moon and leaves are the show */ html.cx-autumn .auth-form{ border-color:rgba(233,160,59,.22); background:linear-gradient(160deg,rgba(38,16,14,.72),rgba(14,6,8,.94)); box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 40px rgba(200,98,42,.10),0 1px 0 rgba(246,207,122,.18) inset; } html.cx-autumn .auth-form h2{color:#ffe8c2} html.cx-autumn .auth-form .form-group label{color:rgba(246,207,122,.68)} html.cx-autumn .auth-form .form-group input{background:rgba(24,10,8,.55);border-color:rgba(233,160,59,.16);color:#fff1d6} html.cx-autumn .auth-form .form-group input::placeholder{color:rgba(246,207,122,.32)} html.cx-autumn .auth-form .form-group input:focus{border-color:rgba(233,160,59,.6);box-shadow:0 0 0 3px rgba(233,160,59,.14);background:rgba(36,14,10,.6)} html.cx-autumn .auth-form button[type=button]{color:rgba(246,207,122,.55)} html.cx-autumn .auth-form .btn-primary, html.cx-autumn .btn-primary{ background:linear-gradient(135deg,#a8461c,#c8622a 50%,#e9a03b); color:#fff3d9;border:1px solid rgba(246,207,122,.35); box-shadow:0 4px 18px rgba(200,98,42,.35); text-shadow:0 1px 0 rgba(60,20,8,.5); } html.cx-autumn .auth-form .btn-primary:hover, html.cx-autumn .btn-primary:hover{ background:linear-gradient(135deg,#c8622a,#e9a03b 55%,#f6cf7a); color:#2a1016;text-shadow:none; box-shadow:0 4px 26px rgba(233,160,59,.45); } html.cx-autumn .auth-form .btn-primary:focus-visible{outline:2px solid var(--aut-gold);outline-offset:2px} html.cx-autumn .auth-switch{color:rgba(255,232,194,.55)} html.cx-autumn .auth-switch a{color:var(--aut-amber)} html.cx-autumn .auth-warning{color:#f6cf7a;background:rgba(246,207,122,.08);border-color:rgba(246,207,122,.22)} /* CS widget toggle takes the season's rim too */ html.cx-autumn #gs-toggle{border-color:rgba(233,160,59,.35);background:linear-gradient(135deg,#1a0c0a,#2a1016)} html.cx-autumn #gs-toggle:hover{box-shadow:0 4px 24px rgba(233,160,59,.3)} /* ---------- Autumn Festival promo poster popup ---------- */ .aut-promo{z-index:99990;align-items:flex-start;overflow:auto;padding:16px 12px; -webkit-overflow-scrolling:touch;overscroll-behavior:contain} .aut-promo .promo-poster-wrap{ max-width:min(430px,94vw);width:100%;margin:auto;text-align:center; /* CSS-driven so the poster always finishes arriving; a JS tween that stalls would leave the overlay half-transparent and block the app. 'backwards', never 'both': if the animation engine never runs, the wrap falls back to its natural state (visible) instead of opacity 0 */ animation:autPromoIn .5s cubic-bezier(.2,.9,.3,1.2) backwards; } @keyframes autPromoIn{from{opacity:0;transform:translateY(26px) scale(.86)}to{opacity:1;transform:none}} .aut-promo.closing{animation:autPromoOut .22s ease forwards;pointer-events:none} @keyframes autPromoOut{to{opacity:0}} @media (prefers-reduced-motion:reduce){ .aut-promo .promo-poster-wrap{animation:none} .aut-promo.closing{animation:none;opacity:0} } .aut-promo .promo-poster-img{ display:block;width:100%;height:auto;max-height:72vh;object-fit:contain; border-radius:14px;cursor:zoom-in; border:1px solid rgba(233,160,59,.5); box-shadow:0 10px 50px rgba(0,0,0,.75),0 0 44px rgba(200,98,42,.2); } /* the app disables pinch-zoom, so tapping the poster enlarges it in place; the overlay then scrolls in both directions to read the rules panel */ .aut-promo.zoomed .promo-poster-wrap{ max-width:none;width:min(780px,215vw); /* the overlay is a flex container: without this the wider poster is just shrunk back to the viewport width and the zoom does nothing */ flex:0 0 auto;margin:0 auto; } .aut-promo.zoomed .promo-poster-img{max-height:none;cursor:zoom-out} .aut-promo-hint{ margin-top:10px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600; letter-spacing:.4px;color:rgba(246,207,122,.6); } /* X is fixed to the viewport corner so it never scrolls away while zoomed */ .aut-promo .promo-poster-close{ position:fixed;top:14px;right:14px; width:40px;height:40px;font-size:22px;line-height:1;padding:0; display:flex;align-items:center;justify-content:center; background:#1a0c0a;border:1px solid rgba(233,160,59,.55);color:#f6cf7a; border-radius:50%;cursor:pointer;z-index:3; box-shadow:0 2px 14px rgba(0,0,0,.8); transition:background .15s,color .15s; } .aut-promo .promo-poster-close:hover{background:#e9a03b;color:#1a0c0a} .aut-promo .promo-poster-close:focus-visible{outline:2px solid var(--aut-gold);outline-offset:2px} .aut-promo-cta{ display:block;width:100%;margin-top:12px;padding:15px 16px; background:linear-gradient(135deg,#a8461c,#c8622a 50%,#e9a03b); color:#fff3d9;border:1px solid rgba(246,207,122,.42);border-radius:12px; font-family:'Inter',sans-serif;font-size:.92rem;font-weight:800;letter-spacing:.2px; cursor:pointer;box-shadow:0 4px 22px rgba(200,98,42,.35); text-shadow:0 1px 0 rgba(60,20,8,.5); transition:transform .15s,box-shadow .15s,background .15s; } .aut-promo-cta:hover{background:linear-gradient(135deg,#c8622a,#e9a03b 55%,#f6cf7a);color:#2a1016;text-shadow:none;box-shadow:0 4px 28px rgba(233,160,59,.5)} .aut-promo-cta:active{transform:scale(.97)} .aut-promo-cta:disabled{opacity:.7;cursor:default} .aut-promo-cta:focus-visible{outline:2px solid var(--aut-gold);outline-offset:2px} @media (max-height:700px){ .aut-promo .promo-poster-img{max-height:64vh} } /* ---------- Leaf gust canvas (splash exit) ---------- */ #aut-gust{position:fixed;inset:0;width:100%;height:100%;z-index:100000;pointer-events:none} /* shake-to-shower: above every overlay (arcade 999998, invites 999999) */ #aut-shower{position:fixed;inset:0;width:100%;height:100%;z-index:1000001;pointer-events:none} /* ---------- Accessibility / small screens ---------- */ @media (prefers-reduced-motion:reduce){ html.cx-autumn .splash-logo{animation:none} .aut-moon{animation:none} .aut-ribbon-text{background:none;-webkit-text-fill-color:var(--aut-gold,#f6cf7a)} .aut-hero-glow{opacity:.6} } @media (max-width:380px){ .aut-ribbon{font-size:.8rem} } @media (max-height:640px){ .aut-moon{width:min(220px,70vw);height:min(220px,70vw)} } /* ---------- "Shake your phone" hint pill (see-through, drops in at random moments) ---------- */ .aut-shake-hint{ position:fixed;left:50%;top:calc(72px + env(safe-area-inset-top,0px));transform:translateX(-50%); z-index:99980;pointer-events:none; display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px; border-radius:999px; background:rgba(26,12,10,.55);border:1px solid rgba(233,160,59,.45); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:rgba(255,236,200,.92);font-family:'Inter',sans-serif;font-size:.86rem;font-weight:700;line-height:1.15; letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.5); box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 24px rgba(200,98,42,.18); white-space:nowrap; animation:autHintIn .55s cubic-bezier(.2,.9,.3,1.2) backwards; } .aut-shake-hint small{display:block;font-size:.7rem;font-weight:600;color:rgba(246,207,122,.8);margin-top:2px} .aut-shake-ico{font-size:1.35rem;animation:autHintWiggle 1.1s ease-in-out infinite;transform-origin:50% 70%} .aut-shake-leaf{font-size:1.15rem;animation:autHintLeaf 2.2s ease-in-out infinite} .aut-shake-hint.out{animation:autHintOut .45s ease forwards} @keyframes autHintIn{from{opacity:0;transform:translateX(-50%) translateY(-18px) scale(.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}} @keyframes autHintOut{to{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.95)}} @keyframes autHintWiggle{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}} @keyframes autHintLeaf{0%,100%{transform:translateY(-2px) rotate(-10deg)}50%{transform:translateY(4px) rotate(14deg)}} @media (prefers-reduced-motion:reduce){.aut-shake-hint,.aut-shake-ico,.aut-shake-leaf{animation:none}} /* ---------- Poster viewer: arrows + dots to flip between the festival posters ---------- */ .aut-promo-frame{position:relative} .aut-promo-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:44px;height:44px;border-radius:50%;padding:0 0 3px; display:flex;align-items:center;justify-content:center; /* white disc + electric-cyan ring: stands out against the gold/navy posters */ background:#ffffff;border:2px solid #00e5ff;color:#0b2a6b; font-size:30px;font-weight:900;line-height:1;font-family:'Inter',sans-serif;cursor:pointer; box-shadow:0 0 0 3px rgba(0,229,255,.35),0 0 22px rgba(0,229,255,.75),0 4px 16px rgba(0,0,0,.6); animation:autArrowPulse 1.6s ease-in-out infinite; transition:background .15s,color .15s,opacity .15s,transform .15s; } @keyframes autArrowPulse{0%,100%{box-shadow:0 0 0 3px rgba(0,229,255,.35),0 0 22px rgba(0,229,255,.75),0 4px 16px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 7px rgba(0,229,255,.18),0 0 34px rgba(0,229,255,.95),0 4px 16px rgba(0,0,0,.6)}} @media (prefers-reduced-motion:reduce){.aut-promo-arrow{animation:none}} .aut-promo-arrow.prev{left:8px} .aut-promo-arrow.next{right:8px} .aut-promo-arrow:hover{background:#00e5ff;color:#06203f} .aut-promo-arrow:disabled{opacity:.25;cursor:default;pointer-events:none} .aut-promo.zoomed .aut-promo-arrow{display:none} .aut-promo-nav{ display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px; font-family:'Inter',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.5px;color:rgba(246,207,122,.75); } .aut-promo-dots{display:flex;gap:7px} .aut-promo-dot{ width:9px;height:9px;border-radius:50%;padding:0;border:1px solid rgba(246,207,122,.6); background:transparent;cursor:pointer;transition:background .15s,transform .15s; } .aut-promo-dot.on{background:#e9a03b;border-color:#e9a03b;transform:scale(1.25);box-shadow:0 0 10px rgba(233,160,59,.7)} .aut-promo-hint{margin-top:6px} /* ---------- Sidebar: "Autumn Special Promos" with swaying leaves + live countdown ---------- */ .aut-sidebar-promo{display:none} html.cx-autumn .aut-sidebar-promo{ display:flex;align-items:center;gap:8px;flex:0 0 auto; margin:6px 10px;padding:10px 12px;border-radius:14px;border-left:0; position:relative;overflow:hidden; /* own dark base so the gold text reads in the light theme too */ background:linear-gradient(120deg,#2a1016 0%,#4a1e12 48%,#5a2c14 100%); border:1px solid rgba(233,160,59,.5); box-shadow:0 0 0 rgba(233,160,59,0),inset 0 1px 0 rgba(255,236,200,.12); animation:autSpGlow 3.2s ease-in-out infinite; } html.cx-autumn .aut-sidebar-promo:hover,html.cx-autumn .aut-sidebar-promo:active{ background:linear-gradient(120deg,#3a1618 0%,#5e2614 48%,#74391a 100%); border-color:rgba(246,207,122,.8); } /* drifting shimmer sweeps across the card */ html.cx-autumn .aut-sidebar-promo::after{ content:'';position:absolute;top:-40%;bottom:-40%;left:-30%;width:28%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,236,200,.22),transparent); transform:skewX(-18deg);animation:autSpSweep 4.5s ease-in-out infinite; } html.cx-autumn .aut-sidebar-promo .aut-sp-body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;text-align:center;padding:0 24px;position:relative;z-index:1} .aut-sp-title{ font-family:'Fraunces','Inter',serif;font-weight:600;font-size:clamp(.78rem,4vw,.92rem);letter-spacing:.2px;line-height:1.1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis; background:linear-gradient(90deg,#f6cf7a,#fff3d9 40%,#e9a03b 60%,#f6cf7a);background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; animation:autSpShine 3.6s linear infinite; } .aut-sp-countdown{ font-family:'Inter',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase; color:#fff3d9;padding:2px 9px;border-radius:999px; background:rgba(26,12,10,.55);border:1px solid rgba(233,160,59,.5); font-variant-numeric:tabular-nums;white-space:nowrap; } html.cx-autumn .aut-sidebar-promo .aut-sp-leaf{position:absolute;top:50%;left:8px;transform:translateY(-50%);display:flex;align-items:flex-end;gap:1px;color:#e9a03b;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));opacity:.95} .aut-sp-leaf svg{width:20px;height:20px;opacity:1;transform-origin:20% 90%;animation:autSpSway 2.6s ease-in-out infinite} .aut-sp-leaf svg.small{width:13px;height:13px;color:#c8622a;animation-duration:2.1s;animation-delay:-.7s} html.cx-autumn .aut-sidebar-promo .aut-sp-leaf.right{left:auto;right:8px;transform:translateY(-50%) scaleX(-1)} .aut-sp-leaf.right svg{animation-delay:-1.3s} .aut-sp-leaf.left svg:first-child{color:#d94a2c} @keyframes autSpSway{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(10deg) translateY(-2px)}} @keyframes autSpShine{to{background-position:-220% 0}} @keyframes autSpSweep{0%{left:-30%}55%,100%{left:130%}} @keyframes autSpGlow{0%,100%{box-shadow:0 0 0 rgba(233,160,59,0),inset 0 1px 0 rgba(255,236,200,.12)}50%{box-shadow:0 0 18px rgba(233,160,59,.35),inset 0 1px 0 rgba(255,236,200,.12)}} @media (prefers-reduced-motion:reduce){ html.cx-autumn .aut-sidebar-promo,html.cx-autumn .aut-sidebar-promo::after,.aut-sp-title,.aut-sp-leaf svg{animation:none} }