/* Açılış ekranı: fareyi/parmağı kaydırdıkça su dolar, dolunca cam kapılar ikiye açılır */
#intro{display:none}
html.intro-on #intro{display:block;position:fixed;inset:0;z-index:1000;overflow:hidden;color:#fff;cursor:crosshair;touch-action:none}
html.intro-on,html.intro-on body{overflow:hidden}
#intro .half{position:absolute;top:0;bottom:0;width:50.2%;background:linear-gradient(160deg,#0c5f94 0%,#07263d 55%,#04141f 100%);transition:transform 1.2s cubic-bezier(.77,0,.18,1)}
#intro .half::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff12 38%,transparent 46%,transparent 60%,#ffffff0d 64%,transparent 70%)}
#intro .half.l{left:0}#intro .half.r{right:0}
#intro .half.l::after,#intro .half.r::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:linear-gradient(#ffca00,#ffe27a,#ffca00);box-shadow:0 0 22px 4px #ffca0066}
#intro .half.l::after{right:0}#intro .half.r::after{left:0}
#intro.open .half.l{transform:translateX(-101%)}#intro.open .half.r{transform:translateX(101%)}
#intro canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#intro .mid{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px;pointer-events:none;transition:opacity .45s,transform .9s cubic-bezier(.77,0,.18,1)}
#intro.open .mid{opacity:0;transform:scale(1.12)}
#intro .il{width:clamp(130px,15vw,200px);height:auto;margin-bottom:14px;filter:drop-shadow(0 10px 30px #0009);animation:ig 1s cubic-bezier(.2,.7,.2,1) both}
#intro h1{margin:0;font:800 clamp(46px,11vw,160px)/1 'Outfit',sans-serif;letter-spacing:.03em;
 background:linear-gradient(90deg,#ffffff 0%,#7fd3ff calc(var(--h,0)*100%),rgba(255,255,255,.16) calc(var(--h,0)*100% + 1.5%));
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 0 calc(var(--h,0)*26px) rgba(60,180,255,.8));animation:ig 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
#intro .sub{margin:14px 0 0;font:600 clamp(15px,2.2vw,24px) 'Outfit',sans-serif;color:#cfe6f5;letter-spacing:.07em;animation:ig 1.1s .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes ig{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
#intro .hint{position:absolute;left:0;right:0;bottom:7vh;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;font:600 16px 'Outfit',sans-serif;color:#ffca00;pointer-events:none;transition:opacity .4s}
#intro.open .hint{opacity:0}
#intro .hint svg{width:34px;height:34px;animation:sw 1.8s ease-in-out infinite}
@keyframes sw{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}
#intro .bar{width:min(260px,60vw);height:4px;background:#ffffff22;border-radius:3px;overflow:hidden}
#intro .bar i{display:block;height:100%;width:calc(var(--h,0)*100%);background:linear-gradient(90deg,#0c7cbe,#ffca00)}
#intro .skip{position:absolute;right:18px;top:18px;z-index:4;background:#ffffff14;color:#fff;border:1px solid #ffffff44;border-radius:30px;padding:8px 18px;font:600 14px 'Outfit',sans-serif;cursor:pointer}
#intro .skip:hover,#intro .skip:focus-visible{background:#ffca00;color:#07263d;border-color:#ffca00;outline:0}
@media(prefers-reduced-motion:reduce){#intro h1,#intro .sub,#intro .il,#intro .hint svg{animation:none}#intro .half,#intro .mid{transition-duration:.01s}}