/* CSS ornaments supplement the seven generated illustrations. No interaction,
   translated copy or layout changes; animation uses only transform/opacity. */
.appearance-particles{height:70vh;max-height:700px;z-index:2}
.appearance-particles i:nth-child(11){left:8%;animation-delay:-4s}.appearance-particles i:nth-child(12){left:22%;animation-delay:-10s}.appearance-particles i:nth-child(13){left:35%;animation-delay:-1s}.appearance-particles i:nth-child(14){left:52%;animation-delay:-6s}.appearance-particles i:nth-child(15){left:74%;animation-delay:-9s}.appearance-particles i:nth-child(16){left:87%;animation-delay:-2s}.appearance-particles i:nth-child(17){left:11%;animation-delay:-7s}.appearance-particles i:nth-child(18){left:30%;animation-delay:-3s}.appearance-particles i:nth-child(19){left:44%;animation-delay:-11s}.appearance-particles i:nth-child(20){left:58%;animation-delay:-5s}.appearance-particles i:nth-child(21){left:66%;animation-delay:-8s}.appearance-particles i:nth-child(22){left:79%;animation-delay:-2s}.appearance-particles i:nth-child(23){left:93%;animation-delay:-4s}.appearance-particles i:nth-child(24){left:98%;animation-delay:-10s}
.appearance-particles i:nth-child(3n){animation-duration:17s}.appearance-particles i:nth-child(4n){animation-duration:22s}
@keyframes hrs-snow{0%{opacity:0;transform:translate3d(0,-10px,0) rotate(0)}10%{opacity:.65}90%{opacity:.55}100%{opacity:0;transform:translate3d(40px,700px,0) rotate(120deg)}}
@keyframes hrs-glimmer{0%,100%{opacity:.2;transform:translate3d(0,8px,0)}50%{opacity:.65;transform:translate3d(15px,-24px,0)}}
@keyframes hrs-ornament{from{transform:translateY(0)}to{transform:translateY(-4px)}}
:root[data-theme=christmas] .appearance-particles i{background:#fff;width:4px;height:4px;box-shadow:0 0 4px #ffffff30;animation-name:hrs-snow;animation-duration:20s}
:root[data-theme=christmas] .appearance-particles i:nth-child(3n){width:11px;height:11px;background:#fff;mask:url('snowflake.svg') center/contain no-repeat;box-shadow:none;animation-duration:27s}
:root[data-theme=christmas] .appearance-particles i:nth-child(4n){width:3px;height:3px;animation-duration:16s}
/* A single branch stays below the hero copy. Snow settles at the end of the
   dark introduction; extra padding keeps the decorative bank below the copy. */
:root[data-theme=christmas] .hero-actions .button,:root[data-theme=christmas] .primary{position:relative;isolation:isolate}
:root[data-theme=christmas] .hero-actions .button::before,:root[data-theme=christmas] .primary::before{content:'';position:absolute;top:-8px;left:12px;right:12px;height:12px;pointer-events:none;background:repeating-linear-gradient(35deg,transparent 0 4px,#255a39 4px 7px,transparent 7px 10px),repeating-linear-gradient(-35deg,transparent 0 4px,#367746 4px 7px,transparent 7px 10px);border-radius:50%}
:root[data-theme=christmas] .hero-actions .button::after,:root[data-theme=christmas] .primary::after{content:'';position:absolute;top:-3px;left:25px;right:25px;height:7px;pointer-events:none;background:radial-gradient(circle,#d84c58 0 3px,transparent 3.5px) 0 0/34px 7px repeat-x}
:root[data-theme=halloween] .appearance-particles i{background:#ffc66c;box-shadow:0 0 5px #f98e2740;animation-name:hrs-glimmer;animation-direction:normal;top:30%}
:root[data-theme=halloween] .appearance-particles i:nth-child(2n){top:70%}
:root[data-theme=halloween] .appearance-particles i:nth-child(-n+2){background:#c4a0e5;mask:url('bat.svg') center/contain no-repeat;width:24px;height:12px;top:15%;box-shadow:none;animation-duration:25s}
:root[data-theme=easter] .appearance-particles i{width:8px;height:5px;background:#e8aba0;animation-name:hrs-snow;animation-duration:22s;border-radius:80% 10%}
:root[data-theme=easter] .appearance-particles i:nth-child(3n){background:#edcf90}
:root[data-theme=songkran] .appearance-particles i{background:#bcecf5;width:3px;height:8px;border-radius:60% 60% 70% 70%;animation-name:hrs-snow;animation-duration:11s}
:root[data-theme=cinco-de-mayo] .appearance-particles i{width:6px;height:3px;animation-name:hrs-snow;animation-duration:15s}
:root[data-theme=diwali] .appearance-particles i,:root[data-theme=lunar-new-year] .appearance-particles i{background:#f8d183;animation-name:hrs-glimmer;animation-direction:normal;top:30%;box-shadow:0 0 6px #eab15580}
:root[data-theme=diwali] .appearance-particles i:nth-child(2n),:root[data-theme=lunar-new-year] .appearance-particles i:nth-child(2n){top:70%}
:root[data-effects=true] .appearance-decoration{animation:hrs-ornament 5s ease-in-out infinite alternate}
@keyframes hrs-garland-glow{from{opacity:.65}to{opacity:1}}
:root[data-theme=christmas][data-effects=true] .hero-actions .button::after,:root[data-theme=christmas][data-effects=true] .primary::after{animation:hrs-garland-glow 3s ease-in-out infinite alternate}
@media(max-width:660px){.appearance-particles i:nth-child(n+13){display:none}}
@media(prefers-reduced-motion:reduce){.appearance-particles{display:none}:root[data-effects=true] .appearance-decoration,:root[data-theme=christmas][data-effects=true] .hero-actions .button::after,:root[data-theme=christmas][data-effects=true] .primary::after{animation:none}}

/* Button accents sit above the label; decorative corner webs stay light. */
:root:is([data-theme=halloween],[data-theme=easter],[data-theme=lunar-new-year],[data-theme=songkran],[data-theme=cinco-de-mayo],[data-theme=diwali]) .hero-actions .button{position:relative;isolation:isolate}
:root[data-theme=halloween] .hero-actions .button::before{content:'';position:absolute;inset-inline-start:3px;top:-22px;width:44px;height:33px;background:url('web-accent-v84.svg') center/contain no-repeat;pointer-events:none}
:root[dir=rtl][data-theme=halloween] .hero-actions .button::before{scale:-1 1}
:root[data-theme=easter] .hero-actions .button::before{content:'';position:absolute;left:10px;right:10px;top:-26px;height:30px;background:url('easter-border-v85.png') center calc(100% + 3.315px)/300px auto repeat-x;pointer-events:none}
:root[data-theme=lunar-new-year] .hero-actions .button::before{content:'';position:absolute;inset-inline-end:6px;top:-28px;width:25px;height:25px;background:url('lunar-new-year-border-v85.png') center calc(100% + .6077px)/120px auto no-repeat;pointer-events:none}
:root[data-theme=songkran] .hero-actions .button::after{content:'';position:absolute;left:12px;right:12px;bottom:-6px;height:8px;background:radial-gradient(ellipse at center top,transparent 0 5px,#96d8e7 5.5px 7px,transparent 7.5px) center/24px 8px repeat-x;pointer-events:none;opacity:.8}
:root[data-theme=cinco-de-mayo] .hero-actions .button::before{content:'';position:absolute;left:10px;right:10px;top:-26px;height:30px;background:url('cinco-de-mayo-border-v85.png') center calc(100% + 2.505px)/320px auto repeat-x;pointer-events:none}
:root[data-theme=diwali] .hero-actions .button::after{content:'';position:absolute;left:12px;right:12px;bottom:-4px;height:6px;background:radial-gradient(circle,#f9df9a 0 2px,transparent 2.5px) center/22px 6px repeat-x;filter:drop-shadow(0 0 3px #efb34d);pointer-events:none}
:root[data-theme=diwali][data-effects=true] .hero-actions .button::after{animation:hrs-garland-glow 4s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){:root[data-theme=diwali][data-effects=true] .hero-actions .button::after{animation:none}}

/* V85: generated transparent PNG borders. The visible alpha bounds determine
   the reserved space; the bitmap keeps its original aspect ratio at every width. */
:root[data-theme=halloween]{--celebration-border:url('halloween-border-v85.png');--border-art-ratio:0.096685;--border-bottom-ratio:0.005525}
:root[data-theme=christmas]{--celebration-border:url('christmas-border-v85.png');--border-art-ratio:0.084715;--border-bottom-ratio:0.0}
:root[data-theme=easter]{--celebration-border:url('easter-border-v85.png');--border-art-ratio:0.094843;--border-bottom-ratio:0.01105}
:root[data-theme=lunar-new-year]{--celebration-border:url('lunar-new-year-border-v85.png');--border-art-ratio:0.162523;--border-bottom-ratio:0.005064}
:root[data-theme=songkran]{--celebration-border:url('songkran-border-v85.png');--border-art-ratio:0.098066;--border-bottom-ratio:0.0}
:root[data-theme=cinco-de-mayo]{--celebration-border:url('cinco-de-mayo-border-v85.png');--border-art-ratio:0.092541;--border-bottom-ratio:0.007827}
:root[data-theme=diwali]{--celebration-border:url('diwali-border-v85.png');--border-art-ratio:0.104052;--border-bottom-ratio:0.015193}
:root:is([data-theme=halloween],[data-theme=christmas],[data-theme=easter],[data-theme=lunar-new-year],[data-theme=songkran],[data-theme=cinco-de-mayo],[data-theme=diwali]) .showcase-home:not(.project-detail-page) .studio-intro{position:relative;--border-width:max(900px,100vw);--border-height:calc(var(--border-width) * var(--border-art-ratio) + 4px);--border-offset:calc(var(--border-width) * var(--border-bottom-ratio));padding-bottom:calc(var(--border-height) + 20px)}
:root:is([data-theme=halloween],[data-theme=christmas],[data-theme=easter],[data-theme=lunar-new-year],[data-theme=songkran],[data-theme=cinco-de-mayo],[data-theme=diwali]) .showcase-home:not(.project-detail-page) .studio-intro::after{content:'';position:absolute;bottom:-1px;left:50%;width:100vw;height:var(--border-height);transform:translateX(-50%);background:var(--celebration-border) center calc(100% + var(--border-offset))/var(--border-width) auto no-repeat;pointer-events:none;user-select:none}
:root:is([data-theme=halloween],[data-theme=christmas],[data-theme=easter],[data-theme=lunar-new-year],[data-theme=songkran],[data-theme=cinco-de-mayo],[data-theme=diwali]) .hero-actions{row-gap:2rem}