/* Fine moving threads stay at the edges, leaving the words in clear space. */
.welcome-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;z-index:0;color:#f7f6ed;contain:paint;opacity:.29;transition:opacity 1.8s cubic-bezier(.4,0,.2,1) .16s}
.welcome-lines__drawing{display:block;width:100%;height:100%;overflow:visible;opacity:var(--welcome-line-visibility,1);transition:opacity .2s ease-out}
.welcome-lines__drawing path{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.welcome-lines__stroke--echo{opacity:.55}
.welcome-lines__swirl,.welcome-lines__ribbon{transform-box:view-box;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.welcome-lines__swirl--left{transform-origin:5% 30%;animation-name:welcome-lines-swirl-left;animation-duration:22s}
.welcome-lines__swirl--right{transform-origin:95% 70%;animation-name:welcome-lines-swirl-right;animation-duration:24s;animation-delay:-8s}
.welcome-lines__ribbon--top{transform-origin:91% 3%;animation-name:welcome-lines-flutter-top;animation-duration:18s;animation-delay:-5s;opacity:.75}
.welcome-lines__ribbon--bottom{transform-origin:10% 96%;animation-name:welcome-lines-flutter-bottom;animation-duration:20s;animation-delay:-11s;opacity:.75}
.welcome-lines__trace{stroke-width:1.45!important;stroke-dasharray:9 91;opacity:.45;animation:welcome-lines-trace 24s linear infinite}
.welcome-lines__swirl--right .welcome-lines__trace{animation-direction:reverse;animation-delay:-10s}
@keyframes welcome-lines-swirl-left{from{transform:translate(-5px,8px) rotate(-3deg)}to{transform:translate(9px,-10px) rotate(3deg)}}
@keyframes welcome-lines-swirl-right{from{transform:translate(7px,-8px) rotate(3deg)}to{transform:translate(-8px,10px) rotate(-3deg)}}
@keyframes welcome-lines-flutter-top{from{transform:translate(-3px,-5px) rotate(-2deg) skewX(-2deg)}to{transform:translate(5px,9px) rotate(2deg) skewX(2deg)}}
@keyframes welcome-lines-flutter-bottom{from{transform:translate(4px,8px) rotate(2deg) skewX(2deg)}to{transform:translate(-6px,-7px) rotate(-2deg) skewX(-2deg)}}
@keyframes welcome-lines-trace{to{stroke-dashoffset:-100}}
@media(max-width:720px){.welcome-lines{opacity:.23}.welcome-lines__drawing{position:absolute;left:-18%;width:136%}.welcome-lines__drawing path{stroke-width:1.15}.welcome-lines__trace{stroke-width:1.25!important}}
@media(prefers-reduced-motion:reduce){.welcome-lines,.welcome-lines__drawing{transition:none!important}.welcome-lines *{animation:none!important}}
html[data-motion=off] .welcome-lines,html[data-motion=off] .welcome-lines__drawing{transition:none!important}
html[data-motion=off] .welcome-lines *{animation:none!important}
/* Keep the lines invisible until the logo portal has fully opened, then fade in. */
html.logo-intro .welcome-surface .welcome-lines{opacity:0;transition:none!important}
html.logo-intro .welcome-surface .welcome-lines *{animation:none!important}

/* This composition belongs only to the first green welcome section. */
.welcome-surface.welcome-lined .welcome-story{display:block;width:100%;max-width:1200px;text-align:center}
.welcome-surface.welcome-lined .welcome-story h1{font-size:clamp(3rem,6.4vw,6.5rem);max-width:22ch;margin:0 auto;line-height:1.13;text-wrap:balance}
.welcome-surface.welcome-lined .welcome-story h1>span:last-child{color:inherit}
.welcome-surface.welcome-lined .welcome-inner{gap:clamp(28px,5vh,56px);padding-block:clamp(32px,5vh,56px)}
.welcome-surface.welcome-lined .welcome-bottom{padding-top:0}
@media(max-width:720px){
 .welcome-surface.welcome-lined .welcome-story h1{font-size:clamp(2.25rem,7.7vw,3.75rem);max-width:20ch;line-height:1.16}
 .welcome-surface.welcome-lined .welcome-inner{gap:28px;padding-block:30px}
}
@media(max-width:720px) and (max-height:740px){
 .welcome-surface.welcome-lined .welcome-story h1{font-size:clamp(2rem,7.1vw,3rem)}
 .welcome-surface.welcome-lined .welcome-inner{gap:22px;padding-block:26px}
}

/* Paint the full header width while retaining its centred content alignment. */
body:has(.welcome-surface.welcome-lined) .site-header{
 width:100%;max-width:none;
 padding-inline:max(clamp(24px,5.3vw,82px),calc((100% - 1600px)/2 + 82px));
}
/* Only the separate background lines move; the welcome copy stays still. */
.welcome-surface.welcome-lined .welcome-inner,
.welcome-surface.welcome-lined .welcome-inner *{
 animation:none!important;transition:none!important;transform:none!important;
 translate:none!important;rotate:none!important;scale:none!important;opacity:1!important;
}