/* =========================================================
   ВХОДЕН ЕКРАН — уведомление, че сайтът е демонстрация
   Скрит по подразбиране; показва се само от JS при първо посещение.
   ========================================================= */
#intro{position:fixed;inset:0;z-index:10000;display:none;place-items:center;
  background:var(--ink-900);overflow:hidden;isolation:isolate}
#intro.show{display:grid}
#intro[hidden]{display:none!important}

#intro .in-bg{position:absolute;inset:0;z-index:-2;
  background:url("../img/fleet.jpg") center 34%/cover no-repeat;
  opacity:.14;filter:grayscale(.3) contrast(1.05);
  transform:scale(1.08);animation:inZoom 14s ease-out forwards}
@keyframes inZoom{to{transform:scale(1)}}

#intro .in-grid{position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 80%)}
#intro .in-glow{position:absolute;border-radius:50%;filter:blur(120px);z-index:-1;pointer-events:none}
#intro .in-glow.a{width:640px;height:640px;background:rgba(227,30,36,.34);top:-220px;right:-140px;
  animation:inFloatA 16s ease-in-out infinite}
#intro .in-glow.b{width:520px;height:520px;background:rgba(227,30,36,.18);bottom:-200px;left:-120px;
  animation:inFloatB 20s ease-in-out infinite}
@keyframes inFloatA{50%{transform:translate(-70px,80px) scale(1.15)}}
@keyframes inFloatB{50%{transform:translate(90px,-60px) scale(1.1)}}

/* сканиращ лъч */
#intro .in-scan{position:absolute;left:0;right:0;height:180px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(227,30,36,.16),transparent);
  animation:inScan 5.5s ease-in-out infinite}
@keyframes inScan{0%{top:-180px}100%{top:100%}}

#intro .in-card{position:relative;width:min(100% - 40px,620px);text-align:center;
  padding:46px 44px 40px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 40px 110px -30px rgba(0,0,0,.85);overflow:hidden;
  opacity:0;transform:translateY(26px) scale(.97);
  animation:inCard .9s cubic-bezier(.16,1,.3,1) .15s forwards}
@keyframes inCard{to{opacity:1;transform:none}}
#intro .in-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(227,30,36,.7),transparent 40%,transparent 60%,rgba(255,255,255,.24));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

#intro .in-logo{height:52px;width:auto;margin:0 auto 26px;filter:brightness(0) invert(1);
  opacity:0;animation:inUp .7s cubic-bezier(.16,1,.3,1) .3s forwards}
#intro .in-tag{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red-200);
  background:rgba(227,30,36,.14);border:1px dashed rgba(227,30,36,.5);
  padding:8px 17px;border-radius:99px;margin-bottom:22px;
  opacity:0;animation:inUp .7s cubic-bezier(.16,1,.3,1) .42s forwards}
#intro .in-tag i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;
  animation:pulse 2s infinite}
#intro h2{font-size:clamp(25px,3.6vw,36px);letter-spacing:-.035em;color:#fff;margin-bottom:14px;
  opacity:0;animation:inUp .7s cubic-bezier(.16,1,.3,1) .5s forwards}
#intro h2 em{font-style:normal;color:var(--red-300)}
#intro p{font-size:15.5px;color:var(--ink-300);max-width:46ch;margin:0 auto 18px;line-height:1.65;
  opacity:0;animation:inUp .7s cubic-bezier(.16,1,.3,1) .58s forwards}
#intro .in-note{font-size:12.5px;color:var(--ink-400);margin-bottom:30px;
  opacity:0;animation:inUp .7s cubic-bezier(.16,1,.3,1) .66s forwards}
#intro .in-note a{color:var(--red-200);border-bottom:1px solid rgba(255,143,147,.4)}
@keyframes inUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* бутонът */
#intro .in-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:18px 46px;border:0;border-radius:99px;cursor:pointer;overflow:hidden;
  font-family:inherit;font-size:17px;font-weight:800;letter-spacing:.01em;color:#fff;
  background:var(--grad-red);box-shadow:0 20px 54px -16px rgba(227,30,36,.75);
  opacity:0;animation:inUp .7s cubic-bezier(.16,1,.3,1) .76s forwards,
                      inPulse 2.6s ease-in-out 1.6s infinite;
  transition:transform .3s cubic-bezier(.22,.75,.2,1),box-shadow .3s}
#intro .in-btn:hover{transform:translateY(-3px) scale(1.03);
  box-shadow:0 28px 70px -16px rgba(227,30,36,.9)}
#intro .in-btn:active{transform:translateY(-1px) scale(.99)}
#intro .in-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.22,.75,.2,1)}
#intro .in-btn:hover svg{transform:translateX(5px)}
@keyframes inPulse{0%,100%{box-shadow:0 20px 54px -16px rgba(227,30,36,.75),0 0 0 0 rgba(227,30,36,.5)}
  60%{box-shadow:0 20px 54px -16px rgba(227,30,36,.75),0 0 0 18px rgba(227,30,36,0)}}
/* пробягващ отблясък */
#intro .in-btn::after{content:"";position:absolute;top:0;bottom:0;width:60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:inShine 3.2s ease-in-out 1.4s infinite}
@keyframes inShine{0%{left:-70%}55%,100%{left:130%}}

/* трите точки долу */
#intro .in-dots{display:flex;gap:22px;justify-content:center;margin-top:30px;flex-wrap:wrap;
  opacity:0;animation:inUp .7s cubic-bezier(.16,1,.3,1) .88s forwards}
#intro .in-dots span{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  color:var(--ink-400);letter-spacing:.05em;text-transform:uppercase}
#intro .in-dots i{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}

/* излизане */
#intro.leaving{animation:inOut .6s cubic-bezier(.7,0,.3,1) forwards;pointer-events:none}
@keyframes inOut{to{opacity:0;transform:scale(1.06);filter:blur(6px)}}
#intro.leaving .in-card{animation:inCardOut .5s cubic-bezier(.7,0,.3,1) forwards}
@keyframes inCardOut{to{opacity:0;transform:translateY(-24px) scale(.96)}}

body.intro-lock{overflow:hidden}

@media (max-width:560px){
  #intro .in-card{padding:34px 24px 30px}
  #intro .in-logo{height:40px;margin-bottom:20px}
  #intro .in-btn{padding:16px 34px;font-size:16px;width:100%}
  #intro .in-dots{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  #intro *,#intro *::before,#intro *::after{animation:none!important;opacity:1!important;transform:none!important}
}