/* ============================================================ CC's Threads β€” Halloween skin πŸŽƒ "The Haunted Stitch" Cute-bold Halloween per Cece's reference: peach stripes, kawaii bow-ghosts + pumpkins with bold black sticker outlines, black bats, haunted-town skyline, invitation envelope overlay. Everything is scoped under html.hw β€” with the class absent this entire file is inert and the base site renders untouched. The class is set by the inline gate in : Β· auto-on 2026-08-25 β†’ auto-off 2026-11-01 Β· preview override: ?hw=1 (on) / ?hw=0 (off), per tab-session ============================================================ */ html.hw{ --hw-or:#E8872B; /* pumpkin */ --hw-or-deep:#C9660F; --hw-peach:#F5C9A2; --hw-stripe:rgba(232,135,43,.16); --hw-card:#FFF7EA; /* invitation ticket fill */ --hw-script:"Caveat",cursive; } html.hw-lock,html.hw-lock body{overflow:hidden} /* ---------- hand-painted peach stripes (hero) ---------- */ html.hw .hero{isolation:isolate} html.hw .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:repeating-linear-gradient(90deg, var(--hw-stripe) 0 26px,rgba(232,135,43,.03) 30px 56px,var(--hw-stripe) 60px); -webkit-mask-image:linear-gradient(#000 76%,transparent); mask-image:linear-gradient(#000 76%,transparent)} /* ---------- seasonal accent recolors ---------- */ html.hw .ribbon__set span:nth-child(4n+1){color:var(--hw-or)} html.hw .ribbon__set span:nth-child(4n+3){color:var(--hw-peach)} html.hw .eyebrow{color:var(--hw-or-deep)} html.hw .fr-dot{color:var(--hw-or)} html.hw .stitch-underline path{stroke:var(--hw-or)} /* pumpkin type moments β€” deep pumpkin on cream (readable), bright pumpkin on ink (glows) */ html.hw h1 .stitch-word{color:var(--hw-or-deep)} html.hw .studio__stats strong{color:var(--hw-or)} html.hw .joutro__stats strong{color:var(--hw-or)} html.hw .arch-stats div:nth-child(2) strong{color:var(--hw-or-deep)} html.hw .quote em{color:var(--hw-or-deep)} html.hw .foot__col h4{color:var(--hw-or)} html.hw .nav__links a::after{border-bottom-color:var(--hw-or-deep)} html.hw ::selection{background:var(--hw-or-deep);color:var(--cream)} html.hw .makes::before{background:radial-gradient(circle at 13px -8px,var(--hw-peach) 16px,transparent 17px) repeat-x;background-size:26px 26px;opacity:.8} html.hw .reviews{position:relative} /* ---------- shared decoration base ---------- */ .hwghost,.hwbat{position:absolute;pointer-events:none} .hwghost{filter:drop-shadow(0 6px 10px rgba(35,32,41,.22))} html.hw .butterfly{display:none} /* butterflies winter in September */ /* hero ghosts (replace the two butterflies, same spirit) */ .hwg1{top:-16px;left:6.5%;width:56px;--bow:#B5512A;animation:hwfloat 6.5s ease-in-out infinite} .hwg2{top:36px;left:17%;width:42px;--bow:#8FB3E0;animation:hwfloat 8s 1.1s ease-in-out infinite} @keyframes hwfloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-13px) rotate(5deg)}} /* ---------- black bats ---------- */ .hwbat{fill:var(--ink)} .hwbat--fly{top:9%;left:0;width:36px;opacity:0;animation:hwflyby 17s 1.5s linear infinite} .hwbat--fly2{top:16%;left:0;width:26px;opacity:0;animation:hwflyby 23s 9s linear infinite} @keyframes hwflyby{ 0%{opacity:0;transform:translate(-8vw,0) rotate(4deg)} 4%{opacity:1} 25%{transform:translate(22vw,-3.2vh) rotate(-6deg)} 50%{transform:translate(52vw,1.8vh) rotate(5deg)} 75%{transform:translate(82vw,-2.6vh) rotate(-5deg)} 96%{opacity:1} 100%{opacity:0;transform:translate(112vw,.6vh) rotate(4deg)} } /* perched bats on light sections */ .hwbat--perch{width:30px;transform:rotate(-10deg)} .hwbat--makes{top:34px;right:5%} .hwbat--reviews{top:6px;left:6%;transform:rotate(9deg)} /* ---------- pumpkin clusters on the collage corners ---------- */ .hwpumps{position:absolute;display:flex;align-items:flex-end;pointer-events:none; filter:drop-shadow(0 8px 12px rgba(35,32,41,.28))} .hwpumps svg{display:block} .hwpumps--a{left:-16px;bottom:-16px} .hwpumps--a svg:nth-child(1){width:58px} .hwpumps--a svg:nth-child(2){width:42px;margin-left:-13px} .hwpumps--a svg:nth-child(3){width:31px;margin-left:-9px;margin-bottom:2px} .hwpumps--b{right:-10px;top:348px} .hwpumps--b svg:nth-child(1){width:46px} .hwpumps--b svg:nth-child(2){width:33px;margin-left:-11px} /* ---------- witch hat on the nav logo ---------- */ html.hw .nav__brand{position:relative} .hwhat{position:absolute;top:-13px;left:-9px;width:34px;transform:rotate(-21deg);pointer-events:none; filter:drop-shadow(0 3px 5px rgba(35,32,41,.3))} /* ---------- ghost dangling from the navbar on a thread ---------- */ .hwdangle{position:absolute;top:100%;right:11%;z-index:-1;pointer-events:none; display:flex;flex-direction:column;align-items:center; transform-origin:top center;animation:hwsway 5.5s ease-in-out infinite} .hwdangle__thread{width:0;height:56px;border-left:2px dashed rgba(35,32,41,.55)} .hwdangle svg{width:32px;filter:drop-shadow(0 5px 8px rgba(35,32,41,.2))} @keyframes hwsway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}} /* ---------- haunted-town skyline (above the footer) ---------- */ .hwskyline{line-height:0;margin-top:-2px} .hwskyline svg{display:block;width:100%;height:clamp(74px,9.17vw,240px)} .hwskyline .sk{fill:var(--ink)} .hwskyline .sk-win{fill:var(--hw-or)} .hwskyline .sk-moon{fill:var(--hw-peach);opacity:.9} /* --- skyline comes alive --- */ .hwskyline .sk-win rect,.hwskyline .sk-win circle{animation:hwflick 4.2s ease-in-out infinite} .hwskyline .sk-win rect:nth-child(2n){animation-delay:1.3s;animation-duration:3.4s} .hwskyline .sk-win rect:nth-child(3n){animation-delay:2.1s;animation-duration:5s} .hwskyline .sk-win circle{animation-delay:.7s} @keyframes hwflick{0%,100%{opacity:1}42%{opacity:.5}52%{opacity:.92}62%{opacity:.45}} .hwskyline .sk-tail{transform-box:fill-box;transform-origin:8% 92%;animation:hwtail 3.4s ease-in-out infinite} @keyframes hwtail{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}} .hwskyline .sk-bats path{transform-box:fill-box;animation:hwbob 5s ease-in-out infinite} .hwskyline .sk-bats path:nth-child(2){animation-delay:1.2s;animation-duration:6.2s} .hwskyline .sk-bats path:nth-child(3){animation-delay:2.4s;animation-duration:4.4s} @keyframes hwbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .hwskyline .sk-moon{transform-box:fill-box;transform-origin:center;animation:hwglow 6.5s ease-in-out infinite} @keyframes hwglow{0%,100%{opacity:.9}50%{opacity:.6}} .hwskyline .sk-drift{animation:hwdrift 36s linear infinite} @keyframes hwdrift{ 0%{transform:translate(-60px,32px) scale(1.15)} 25%{transform:translate(255px,22px) scale(1.15)} 50%{transform:translate(575px,34px) scale(1.15)} 75%{transform:translate(895px,20px) scale(1.15)} 100%{transform:translate(1260px,32px) scale(1.15)} } html.hw .etsy{padding-bottom:64px} /* ---------- mobile hero spinner: Halloween badge + still hat ---------- */ .hwspin{display:none} @media (max-width:980px){ .hwspin{display:block;position:relative;grid-column:1/-1;justify-self:center;margin-top:20px;width:92px;height:92px} html.hw .hero__spinlogo{margin-top:0} .hwhat-spin{top:-24px;left:-10px;width:50px;transform:rotate(-24deg);z-index:2} } /* ---------- "First Look" drop-preview rail ---------- */ .hwdrop{padding:78px 0 10px;position:relative} .hwdrop .sec-head{margin-bottom:30px} .hwdrop__rail{display:flex;gap:16px;overflow-x:auto;padding:10px 26px 20px; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .hwdrop__rail::-webkit-scrollbar{display:none} .hwdrop__tile{position:relative;flex:0 0 auto;width:min(250px,62vw);aspect-ratio:1; border-radius:16px;overflow:hidden;background:var(--paper);border:6px solid #fff; box-shadow:0 14px 30px -14px rgba(35,32,41,.32);scroll-snap-align:center; text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .hwdrop__tile:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 22px 40px -16px rgba(35,32,41,.42)} .hwdrop__tile img{width:100%;height:100%;object-fit:cover;display:block} .hwdrop__num{position:absolute;left:10px;bottom:10px;background:rgba(35,32,41,.84);color:var(--cream); font-weight:800;font-size:11px;letter-spacing:.14em;padding:5px 11px;border-radius:999px} .hwdrop__hint{text-align:center;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9A7B53;margin-top:4px} @media (min-width:981px){ .hwdrop__rail{padding-left:max(26px, calc((100vw - 1180px)/2 + 26px));padding-right:60px} } /* ---------- lightbox for drop pieces ---------- */ .hwlb{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:20px; background:rgba(35,32,41,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); opacity:0;transition:opacity .26s var(--ease)} .hwlb.is-in{opacity:1} .hwlb__stage{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:min(92vw,620px);margin:0} .hwlb__img{width:100%;max-height:64vh;object-fit:contain;border-radius:18px;border:6px solid #fff; background:var(--paper);box-shadow:0 34px 80px -24px rgba(0,0,0,.65)} .hwlb__meta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap} .hwlb__num{color:var(--cream);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.85} .hwlb__close{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;cursor:pointer; background:rgba(247,235,213,.12);border:1.5px dashed rgba(247,235,213,.55);color:var(--cream);font-size:17px;font-weight:700} .hwlb__close:hover{background:rgba(247,235,213,.24)} .hwlb__nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;cursor:pointer; background:rgba(247,235,213,.12);border:1.5px dashed rgba(247,235,213,.55);color:var(--cream);font-size:26px;line-height:1} .hwlb__nav:hover{background:rgba(247,235,213,.24)} .hwlb__nav--prev{left:14px} .hwlb__nav--next{right:14px} @media (max-width:640px){ .hwlb__img{max-height:54vh} /* solid bottom-corner buttons β€” the translucent side arrows vanish over light mockups */ .hwlb__nav{top:auto;bottom:24px;transform:none;width:48px;height:48px;font-size:24px; background:rgba(35,32,41,.94);border:1.5px solid rgba(247,235,213,.8); box-shadow:0 8px 20px -6px rgba(0,0,0,.5)} .hwlb__nav:active{background:#000} .hwlb__nav--prev{left:20px} .hwlb__nav--next{right:20px} .hwlb__stage{padding-bottom:8px} } /* ---------- Drop 03 band β†’ The Halloween Drop ---------- */ html.hw .drop03::after{content:"BOO";font-size:290px;right:-26px;bottom:-58px} html.hw .drop03__kicker{color:var(--hw-peach)} html.hw .drop03__count strong{color:var(--hw-or)} html.hw .drop03__count div{border-color:rgba(232,135,43,.45)} .hwformghost{position:absolute;top:-32px;right:26px;width:52px;z-index:2; transform:rotate(7deg);pointer-events:none;--bow:#B5512A; filter:drop-shadow(0 6px 10px rgba(35,32,41,.25))} /* ============================================================ The invitation β€” "You've been invited…" overlay ============================================================ */ .hwo{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px; background:var(--cream);opacity:0;transition:opacity .45s var(--ease)} .hwo.is-in{opacity:1} .hwo::before{content:"";position:absolute;inset:0; background:repeating-linear-gradient(90deg,rgba(232,135,43,.22) 0 26px,rgba(232,135,43,.04) 30px 56px,rgba(232,135,43,.22) 60px)} .hwo::after{content:"";position:absolute;inset:0;background-image:url("../assets/img/grain.png");opacity:.5;pointer-events:none} .hwo__bat{position:absolute;fill:var(--ink);pointer-events:none} .hwo__bat--1{top:10%;left:12%;width:34px;transform:rotate(-12deg);animation:hwfloat 7s ease-in-out infinite} .hwo__bat--2{bottom:14%;right:10%;width:26px;transform:rotate(10deg);animation:hwfloat 9s 1s ease-in-out infinite} .hwo__stage{position:relative;z-index:2;width:min(560px,94vw);display:grid} .hwo__card,.hwo__inner{align-self:center} /* each card keeps its natural height */ .hwo__card{grid-area:1/1;position:relative;background:var(--hw-card); border:3px solid var(--ink);border-radius:26px;padding:50px 40px 42px;text-align:center; box-shadow:0 34px 80px -26px rgba(35,32,41,.5); transition:opacity .45s var(--ease),transform .45s var(--ease)} .hwo__card::after{content:"";position:absolute;inset:9px;border:2px dashed rgba(35,32,41,.3);border-radius:16px;pointer-events:none} .hwo__card[data-out]{opacity:0;transform:scale(.92) rotate(-2deg);pointer-events:none} .hwo__card[data-wait]{opacity:0;transform:scale(1.06);pointer-events:none} .hwo__script{font-family:var(--hw-script);font-weight:700;font-size:clamp(27px,5vw,35px);color:var(--t-ink);letter-spacing:.02em} .hwo__boo{display:flex;align-items:center;justify-content:center;gap:2px;margin:8px 0 4px; font-family:var(--disp);font-weight:900;font-size:clamp(76px,16vw,112px);line-height:1;color:var(--hw-or);letter-spacing:-.01em; text-shadow:3px 3px 0 rgba(35,32,41,.9)} .hwo__boo svg{width:.88em;margin:0 3px;--bow:#B5512A;filter:drop-shadow(0 6px 10px rgba(35,32,41,.18))} .hwo__sub{font-family:var(--hw-script);font-weight:600;font-size:clamp(21px,4vw,26px);color:var(--rust);margin-bottom:24px} .hwo__open{margin:0 auto;min-width:200px} .hwo__skip{display:block;margin:18px auto 0;background:none;border:none;cursor:pointer; font-family:var(--body);font-weight:700;font-size:13.5px;letter-spacing:.06em;color:var(--t-mut); border-bottom:2px dashed var(--line);padding-bottom:2px} .hwo__skip:hover{color:var(--ink)} /* corner pumpkins on the ticket */ .hwo__pumps{position:absolute;display:flex;align-items:flex-end;pointer-events:none; filter:drop-shadow(0 6px 10px rgba(35,32,41,.25))} .hwo__pumps--tl{left:-22px;top:-26px} .hwo__pumps--tl svg:nth-child(1){width:50px} .hwo__pumps--tl svg:nth-child(2){width:35px;margin-left:-11px} .hwo__pumps--br{right:-18px;bottom:-22px} .hwo__pumps--br svg:nth-child(1){width:42px} .hwo__pumps--br svg:nth-child(2){width:54px;margin-left:-13px} /* little floating ghost above the stage */ .hwo__fly{position:absolute;top:-66px;right:7%;width:46px;--bow:#8FB3E0; animation:hwfloat 7s ease-in-out infinite;pointer-events:none; filter:drop-shadow(0 6px 10px rgba(35,32,41,.2))} /* --- open state: the drop reveal --- */ .hwo__inner{grid-area:1/1;position:relative;background:var(--hw-card); border:3px solid var(--ink);border-radius:26px;padding:44px 40px 38px;text-align:center; box-shadow:0 34px 80px -26px rgba(35,32,41,.5); opacity:0;transform:scale(1.05);pointer-events:none; transition:opacity .5s .12s var(--ease),transform .5s .12s var(--ease)} .hwo__inner::after{content:"";position:absolute;inset:9px;border:2px dashed rgba(35,32,41,.3);border-radius:16px;pointer-events:none} .hwo.is-open .hwo__inner{opacity:1;transform:none;pointer-events:auto} .hwo__inner .hwo__script{font-size:clamp(23px,4.4vw,29px)} .hwo__title{font-family:var(--disp);font-weight:900;font-size:clamp(38px,7.4vw,54px);line-height:1.02;color:var(--ink);margin:8px 0 4px;letter-spacing:-.015em} .hwo__title em{font-style:normal;color:var(--hw-or)} .hwo__date{display:inline-flex;align-items:center;gap:9px;margin-top:12px; background:var(--ink);color:var(--cream);border-radius:999px; padding:9px 20px;font-weight:800;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase} .hwo__cdcap{margin-top:18px;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-mut)} .hwo__cd{display:flex;gap:12px;justify-content:center;margin:10px 0 6px} .hwo__cd div{min-width:64px;background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:10px 6px} .hwo__cd strong{display:block;font-family:var(--disp);font-weight:900;font-size:26px;color:var(--hw-or)} .hwo__cd span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--t-mut)} .hwo__copy{font-size:15px;color:var(--t-mut);max-width:370px;margin:12px auto 24px} .hwo__copy strong{color:var(--ink)} @media (max-width:640px){ .hwo__card{padding:40px 24px 34px} .hwo__inner{padding:36px 22px 30px} .hwo__cd div{min-width:56px} .hwo__pumps--tl{left:-10px;top:-22px} .hwo__pumps--br{right:-8px;bottom:-18px} .hwo__fly{top:-58px;right:4%} .hwo__bat--1{top:7%;left:7%} } /* ============================================================ Responsive tweaks for hero decorations ============================================================ */ @media (max-width:980px){ .hwg1{top:-24px;left:6%;right:auto;width:48px} .hwg2{top:auto;bottom:80px;left:3%;width:42px} .hwdangle{right:98px} .hwdangle__thread{height:46px} .hwdangle svg{width:27px} .hwhat{top:-11px;left:-8px;width:29px} .hwpumps--a{left:-8px;bottom:106px} .hwpumps--a svg:nth-child(1){width:46px} .hwpumps--a svg:nth-child(2){width:34px} .hwpumps--a svg:nth-child(3){width:25px} .hwpumps--b{right:2px;top:-18px} .hwpumps--b svg:nth-child(1){width:38px} .hwpumps--b svg:nth-child(2){width:27px} .hwbat--fly{top:6%} html.hw .drop03::after{content:"BOO";font-size:180px;right:-18px;bottom:-38px} .hwformghost{width:44px;right:18px} } /* ============================================================ Pass 2 β€” decorations through every section (2026-08-24) ============================================================ */ /* sprinkle: every eyebrow gets a stitched star */ html.hw .eyebrow::before{content:"✦ ";color:var(--hw-or)} /* candy corn base */ .hwcandy{position:absolute;pointer-events:none;filter:drop-shadow(0 4px 7px rgba(35,32,41,.22))} /* makes: spider off the header, card characters */ html.hw .makes .sec-head{position:relative} .hwdangle--spider{right:7%;top:-30px;animation-duration:7s} .hwdangle--spider .hwdangle__thread{height:42px} .hwdangle--spider svg{width:27px} .hwpatchghost{top:-19px;right:14px;width:38px;transform:rotate(6deg);animation:hwfloat 7.5s 0.6s ease-in-out infinite} .hwcandy--patch{top:-13px;left:-8px;width:24px;transform:rotate(-16deg)} .hwpumps--patch{left:-11px;bottom:-13px} .hwpumps--patch svg:nth-child(1){width:30px} .hwpumps--patch svg:nth-child(2){width:40px;margin-left:-9px} /* studio (dark band): moon + sparkles, floating ghost */ .hwmoon{position:absolute;top:36px;right:5%;width:54px;pointer-events:none} html.hw .studio__copy{position:relative} .hwstudioghost{top:-40px;right:4%;width:44px;animation:hwfloat 7s ease-in-out infinite} /* steps: witch hat on 03, candy on 01 */ .hwhat--step{top:-58px;left:50%;margin-left:-4px;width:42px;transform:rotate(16deg);z-index:2} .hwcandy--step{bottom:-12px;left:-8px;width:26px;transform:rotate(-14deg)} /* spider colony hanging over the section (varied lengths, out-of-sync sway) */ html.hw .drops{position:relative} .hwdangle--drops{top:0} .hwdangle--d1{left:7%;right:auto} .hwdangle--d1 .hwdangle__thread{height:62px} .hwdangle--d2{left:21%;right:auto;animation-delay:.9s} .hwdangle--d2 .hwdangle__thread{height:34px} .hwdangle--d2 svg{--bow:#8FB3E0;width:23px} .hwdangle--d3{right:19%;animation-delay:1.5s} .hwdangle--d3 .hwdangle__thread{height:86px} .hwdangle--d3 svg{width:29px} .hwdangle--d4{right:6%;animation-delay:.5s} .hwdangle--d4 .hwdangle__thread{height:48px} .hwdangle--d4 svg{--bow:#8FB3E0;width:24px} /* archive preview: candies + corner ghost */ html.hw .archive .sec-head{position:relative} .hwcandy--arch1{left:3%;top:46px;width:26px;transform:rotate(-14deg)} .hwcandy--arch2{right:3%;top:64px;width:21px;transform:rotate(13deg)} /* spider colony over Past Work (archive section is position:relative in main.css) */ .hwdangle--a1{left:12%;right:auto;animation-delay:.3s} .hwdangle--a1 .hwdangle__thread{height:74px} .hwdangle--a2{left:27%;right:auto;animation-delay:1.2s} .hwdangle--a2 .hwdangle__thread{height:38px} .hwdangle--a2 svg{--bow:#8FB3E0;width:23px} .hwdangle--a3{right:25%;animation-delay:.7s} .hwdangle--a3 .hwdangle__thread{height:92px} .hwdangle--a3 svg{width:29px} .hwdangle--a4{right:10%;animation-delay:1.8s} .hwdangle--a4 .hwdangle__thread{height:50px} .hwdangle--a4 svg{--bow:#8FB3E0;width:24px} html.hw .archive__grid{position:relative} .hwarchghost{top:-20px;left:-10px;width:46px;z-index:2;animation:hwfloat 7s ease-in-out infinite} /* customs: spider into the card */ html.hw .customs__grid{position:relative} .hwdangle--customs{right:44px;top:0;z-index:1;animation-duration:6.2s} .hwdangle--customs .hwdangle__thread{height:36px} /* reviews: ghost beside the quote */ html.hw .reviews .quote{position:relative} .hwquoteghost{top:-6px;left:-58px;width:40px;animation:hwfloat 8s .8s ease-in-out infinite} /* etsy band (dark): peach bats */ .hwbat--light{fill:var(--hw-peach)} .hwbat--etsy1{top:24px;right:6%;width:30px;transform:rotate(-9deg)} .hwbat--etsy2{top:54px;right:12.5%;width:22px;transform:rotate(8deg)} /* ambient viewport-crossing bat (both pages) */ .hwflyer{position:fixed;top:15vh;left:0;width:32px;z-index:35;opacity:0;animation:hwflyby 27s 8s linear infinite} /* gallery header: stripes + friends */ html.hw .arch-head{position:relative;isolation:isolate} html.hw .arch-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(232,135,43,.11) 0 26px,rgba(232,135,43,.02) 30px 56px,rgba(232,135,43,.11) 60px); -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)} .hwgalghost{top:40px;right:6%;width:46px;animation:hwfloat 7s ease-in-out infinite} .hwpumps--gal{left:-6px;bottom:-8px} .hwpumps--gal svg:nth-child(1){width:44px} .hwpumps--gal svg:nth-child(2){width:31px;margin-left:-10px} .hwcandy--gal{left:46%;top:6px;width:22px;transform:rotate(12deg)} @media (max-width:980px){ .hwdangle--spider{right:4%;top:-24px} .hwdangle--spider .hwdangle__thread{height:32px} .hwdangle--spider svg{width:24px} .hwdangle--drops{top:0} .hwdangle--d1{left:4%} .hwdangle--d1 .hwdangle__thread{height:34px} .hwdangle--d3{right:5%} .hwdangle--d3 .hwdangle__thread{height:52px} .hwdangle--d3 svg{width:25px} .hwdangle--d2,.hwdangle--d4{display:none} .hwdangle--a1{left:5%} .hwdangle--a1 .hwdangle__thread{height:36px} .hwdangle--a3{right:6%} .hwdangle--a3 .hwdangle__thread{height:54px} .hwdangle--a3 svg{width:25px} .hwdangle--a2,.hwdangle--a4{display:none} .hwmoon{width:44px;top:26px} .hwstudioghost{top:-34px;width:38px} .hwhat--step{width:36px;top:-54px} .hwcandy--arch1{left:2%;top:4px} .hwcandy--arch2{right:2%;top:auto;bottom:-18px} .hwarchghost{width:40px;top:-14px} .hwdangle--customs{right:26px} .hwquoteghost{left:-2px;top:-38px;width:34px} .hwgalghost{top:16px;right:5%;width:38px} .hwpumps--gal svg:nth-child(1){width:36px} .hwpumps--gal svg:nth-child(2){width:26px} .hwcandy--gal{left:auto;right:24%;top:2px;width:19px} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .hwghost,.hwdangle,.hwo__fly,.hwo__bat{animation:none} .hwbat--fly,.hwbat--fly2{animation:none;opacity:.9;left:auto;right:8%;top:6%} .hwbat--fly2{display:none} .hwflyer{display:none} .hwskyline *{animation:none!important} .hwskyline .sk-drift{display:none} .hwo,.hwo__card,.hwo__inner,.hwlb{transition:none} }