/* KEC — woven connections. A short introduction, independent of video loading. */
.kecs-intro{display:none}
html.intro-pending{overflow:hidden;scroll-behavior:auto}
html.intro-pending .kecs-intro{display:block;position:fixed;inset:0;z-index:200;overflow:hidden;isolation:isolate;touch-action:none;color:#f1f3e9}
.intro-door{position:absolute;inset:0 auto 0 0;width:calc(50% + 1px);background:#102b31;z-index:-2;will-change:transform;transition:transform 1s cubic-bezier(.76,0,.24,1);backface-visibility:hidden}
.intro-door-right{left:auto;right:0;background:#102b31}
.intro-door:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 100% 45%,#4d817a27,transparent 65%)}
.intro-door-right:after{background:radial-gradient(ellipse at 0 45%,#4d817a27,transparent 65%)}
.intro-grid{position:absolute;inset:0;background-image:linear-gradient(#b8d7c608 1px,transparent 1px),linear-gradient(90deg,#b8d7c608 1px,transparent 1px);background-size:110px 110px;opacity:.6;mask-image:radial-gradient(ellipse at center,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);transition:opacity .4s}
.intro-header{position:absolute;left:5%;right:5%;top:37px;display:flex;align-items:center;justify-content:space-between;gap:25px;opacity:0}
.intro-signature{display:flex;align-items:center;gap:19px}
.intro-logo{display:block;background:#f5f5ed;padding:3px 9px;width:104px;flex-shrink:0}
.intro-logo img{width:100%;height:auto}
.intro-signature>span{font-size:13px;line-height:1.9;letter-spacing:.07em}
.intro-edition{font:11px/1.8 Arial,sans-serif;letter-spacing:.17em;text-align:right;color:#9db6ab}
.intro-orbit{position:absolute;inset:0;width:100%;height:100%;fill:none;pointer-events:none;overflow:visible;stroke-width:1;stroke-linecap:round;opacity:0;transition:transform 1s cubic-bezier(.76,0,.24,1),opacity .5s}
.intro-thread{fill:none;stroke:url(#intro-thread-gradient);stroke-width:1;stroke-dasharray:2200;stroke-dashoffset:2200}
.intro-thread-main{stroke-width:2}
.intro-orbit circle{fill:#dce8cf;stroke:none;opacity:0}
.intro-center{position:absolute;left:5%;right:5%;top:50%;transform:translateY(-47%);text-align:center;transition:transform .7s cubic-bezier(.76,0,.24,1),opacity .4s}
.intro-kicker{margin:0 0 30px;font:11px/1.6 Arial,sans-serif;letter-spacing:.28em;color:#a9c4b6;opacity:0}
.intro-word{font:600 clamp(76px,13.5vw,210px)/.95 Arial,sans-serif;letter-spacing:-.075em;white-space:nowrap;margin:0;overflow:hidden;padding:0 .09em .08em 0}
.intro-word>span{display:inline-block;transform:translateY(115%) rotate(5deg);opacity:0;will-change:transform}
.intro-message{font:400 clamp(18px,2.1vw,28px)/1.8 var(--serif,'Yu Mincho',serif);letter-spacing:.19em;margin:28px 0 0;opacity:0;transform:translateY(14px)}
.intro-footer{position:absolute;bottom:40px;left:5%;right:5%;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;opacity:0;transition:opacity .25s}
.intro-locations{display:flex;align-items:center;gap:20px;font:11px/1.7 Arial,sans-serif;letter-spacing:.16em;color:#b7ccbf}
.intro-locations i{height:1px;width:35px;background:#83a29180}
.intro-status{font:10px/1.8 Arial,sans-serif;letter-spacing:.17em;color:#a7bcaf;display:flex;align-items:center;gap:12px}
.intro-status>span{display:block;width:5px;height:5px;border-radius:50%;background:#c8d9be;box-shadow:0 0 14px #bbd6c680}
html.intro-active .intro-header{animation:intro-fade .7s .05s both}
html.intro-active .intro-orbit{animation:intro-orbit-enter 1.8s .1s both}
html.intro-active .intro-thread{animation:intro-thread-draw 2.1s cubic-bezier(.45,.05,.18,1) both;animation-delay:var(--thread-delay,0s)}
html.intro-active .intro-orbit circle{animation:intro-point 1.2s .65s both}
html.intro-active .intro-kicker{animation:intro-fade .7s .28s both}
html.intro-active .intro-word>span{animation:intro-letter 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.35s + var(--letter)*.06s)}
html.intro-active .intro-message{animation:intro-message .9s 1s both}
html.intro-active .intro-footer{animation:intro-fade .8s .55s both}
html.intro-pending:not(.intro-revealing) .hero-content>*{animation-play-state:paused;opacity:0}
html.intro-pending .header{transition:transform .75s cubic-bezier(.16,1,.3,1)}
html.intro-pending:not(.intro-revealing) .header{transform:translateY(-105%)}
html.intro-revealing .intro-door-left{transform:translateX(-101%)}
html.intro-revealing .intro-door-right{transform:translateX(101%)}
html.intro-revealing .intro-center{opacity:0;transform:translateY(-60%) scale(1.025)}
html.intro-revealing .intro-orbit{opacity:0!important;transform:scale(1.12)}
html.intro-revealing .intro-grid,html.intro-revealing .intro-header,html.intro-revealing .intro-footer{opacity:0!important;animation:none!important}
html.intro-revealing .kecs-intro{pointer-events:none}
@keyframes intro-letter{from{opacity:0;transform:translateY(115%) rotate(5deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
@keyframes intro-message{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-thread-draw{0%{stroke-dashoffset:2200}100%{stroke-dashoffset:0}}
@keyframes intro-orbit-enter{0%{opacity:0;transform:scale(1.07)}100%{opacity:.65;transform:scale(1)}}
@keyframes intro-point{from{opacity:0}to{opacity:.8}}
@media(max-width:680px){.intro-header{top:23px;left:7%;right:7%;align-items:flex-start}.intro-logo{width:79px;padding:2px 7px}.intro-signature{gap:12px}.intro-signature>span{font-size:10px;letter-spacing:.025em}.intro-edition{display:none}.intro-center{left:4%;right:4%;transform:translateY(-42%)}.intro-kicker{font-size:9px;letter-spacing:.2em;margin-bottom:25px}.intro-word{font-size:clamp(61px,14.3vw,96px);letter-spacing:-.08em}.intro-message{font-size:17px;letter-spacing:.09em;margin-top:24px}.intro-orbit{width:180%;left:-40%;max-width:none}.intro-grid{background-size:75px 75px}.intro-footer{left:7%;right:7%;bottom:26px;flex-direction:column;align-items:flex-start;gap:20px}.intro-locations{gap:12px;font-size:9px;letter-spacing:.1em}.intro-locations i{width:20px}.intro-status{font-size:9px}.intro-status>span{width:4px;height:4px}}
@media(prefers-reduced-motion:reduce){html.intro-pending .kecs-intro{display:none}html.intro-pending{overflow:visible}html.intro-pending:not(.intro-revealing) .header{transform:none}html.intro-pending:not(.intro-revealing) .hero-content>*{opacity:1;animation:none}}