:root{
  --bg:#06090f;
  --bg2:#0d1522;
  --gold:#d4af37;
  --text:#f3f4f6;
  --muted:rgba(255,255,255,.72);
  --metal1:#dadada;
  --metal2:#9a9a9a;
  --flash:#fff8e8;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 18% 20%, rgba(212,175,55,.08), transparent 24%),
    radial-gradient(circle at 82% 26%, rgba(255,255,255,.04), transparent 20%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
}

body.hitShake{
  animation:hitShake .34s ease-in-out 1;
}

@keyframes hitShake{
  0%{transform:translate(0,0)}
  20%{transform:translate(-4px,2px)}
  40%{transform:translate(4px,-2px)}
  60%{transform:translate(-3px,1px)}
  80%{transform:translate(3px,-1px)}
  100%{transform:translate(0,0)}
}

.intro{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

.scene{
  position:relative;
  width:min(1200px, 94vw);
  height:min(560px, 82vh);
}

.vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 44%, rgba(0,0,0,.3) 100%);
  z-index:1;
}

.flashCut{
  position:fixed;
  inset:0;
  background:#ffffff;
  opacity:0;
  pointer-events:none;
  z-index:50;
}

.flashCut.on{
  animation:flashCut .42s ease-out forwards;
}

@keyframes flashCut{
  0%{opacity:0}
  18%{opacity:1}
  100%{opacity:0}
}

/* POWITANIE */

.welcomeOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  z-index:60;
  transition:opacity .35s ease, visibility .35s ease;
  padding:24px;
  background:
    radial-gradient(circle at center, rgba(6,9,15,.10), rgba(6,9,15,.68));
}

.welcomeOverlay.show{
  opacity:1;
  visibility:visible;
}

.welcomeStage{
  position:relative;
  width:min(760px, 82vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.welcomeStageClean{
  gap:28px;
}

.welcomeLogo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.welcomeLogoClean{
  width:min(320px, 72vw);
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,.45))
    drop-shadow(0 0 26px rgba(212,175,55,.12));
  opacity:0;
  transform:translateY(8px) scale(.96);
  animation:logoFadeUp .8s ease .05s forwards;
}

.welcomeText{
  position:relative;
  z-index:2;
}

.welcomeTextClean{
  opacity:0;
  transform:translateY(18px);
  animation:textFadeUp .8s ease .28s forwards;
}

.welcomeTitle{
  margin:0;
}

.welcomeTitlePremium{
  position:relative;
  margin:0;
  padding:0 .2em;
  font-size:clamp(26px, 4vw, 50px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:transparent;
  background:
    linear-gradient(180deg,
      #fff8d7 0%,
      #f6dd86 18%,
      #d4af37 42%,
      #fff0b0 52%,
      #c58f1d 72%,
      #8e6610 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 6px 16px rgba(0,0,0,.45);
  overflow:hidden;
}

.welcomeTitlePremium::after{
  content:"";
  position:absolute;
  inset:-12% -30%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,.80) 50%,
    rgba(255,255,255,0) 58%,
    transparent 62%,
    transparent 100%
  );
  transform:translateX(-120%) skewX(-18deg);
  animation:titleSweep 1.7s ease-out .7s 1 forwards;
  pointer-events:none;
}

@keyframes logoFadeUp{
  0%{
    opacity:0;
    transform:translateY(8px) scale(.96);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes textFadeUp{
  0%{
    opacity:0;
    transform:translateY(18px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes titleSweep{
  0%{
    transform:translateX(-120%) skewX(-18deg);
    opacity:0;
  }
  18%{
    opacity:1;
  }
  100%{
    transform:translateX(120%) skewX(-18deg);
    opacity:0;
  }
}

/* LEWA STRONA */

.brand{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:44%;
  z-index:3;
}

.brandKicker{
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}

.brandTitle{
  margin:0 0 12px;
  font-size:clamp(34px, 5vw, 76px);
  line-height:1.02;
  letter-spacing:.04em;
  font-weight:800;
  text-shadow:0 10px 30px rgba(0,0,0,.45);
}

.brandSub{
  max-width:520px;
  color:var(--muted);
  font-size:clamp(14px, 1.45vw, 18px);
  line-height:1.6;
}

/* LOGO CEL */

.logoWrap{
  position:absolute;
  right:8%;
  top:50%;
  width:min(270px, 30vw);
  transform:translateY(-50%);
  z-index:5;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
}

.logoGlow{
  position:absolute;
  inset:-12%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.12), transparent 58%);
  filter:blur(18px);
  z-index:0;
}

.logoTarget{
  position:relative;
  width:100%;
  display:block;
  z-index:2;
  transform-origin:center;
  transition:transform .25s ease;
}

.logoWrap.hit .logoTarget{
  transform:scale(.965);
}

.crack{
  position:absolute;
  inset:0;
  z-index:8;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.logoWrap.hit .crack{
  opacity:1;
}

.crack svg{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.12));
}

/* DYM Z LUFY */

.barrelSmoke{
  position:absolute;
  left:66px;
  top:50%;
  width:0;
  height:0;
  z-index:4;
  pointer-events:none;
}

.barrelSmoke .puff{
  position:absolute;
  width:24px;
  height:24px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(220,220,220,.58), rgba(130,130,130,.18), transparent 72%);
  opacity:0;
  filter:blur(3px);
}

.barrelSmoke .p1{ animation:muzzleSmoke1 .8s ease-out .08s forwards; }
.barrelSmoke .p2{ animation:muzzleSmoke2 .95s ease-out .10s forwards; }
.barrelSmoke .p3{ animation:muzzleSmoke3 .9s ease-out .14s forwards; }

@keyframes muzzleSmoke1{
  0%{opacity:0; transform:translate(0,0) scale(.2)}
  18%{opacity:.7}
  100%{opacity:0; transform:translate(-12px,-28px) scale(2.2)}
}
@keyframes muzzleSmoke2{
  0%{opacity:0; transform:translate(0,0) scale(.2)}
  18%{opacity:.62}
  100%{opacity:0; transform:translate(10px,-18px) scale(2)}
}
@keyframes muzzleSmoke3{
  0%{opacity:0; transform:translate(0,0) scale(.2)}
  18%{opacity:.52}
  100%{opacity:0; transform:translate(-2px,18px) scale(1.8)}
}

/* POCISK */

.bullet{
  position:absolute;
  left:-160px;
  top:50%;
  width:96px;
  height:22px;
  transform:translateY(-50%);
  z-index:8;
  animation:bulletFly 1.55s linear forwards;
  filter:drop-shadow(0 0 14px rgba(255,220,130,.32));
}

.bulletBase{
  position:absolute;
  left:0;
  top:2px;
  width:24px;
  height:18px;
  border-radius:5px 2px 2px 5px;
  background:linear-gradient(180deg, #9a6f1c, #63460f);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16);
}

.bulletBody{
  position:absolute;
  left:20px;
  top:5px;
  width:48px;
  height:12px;
  border-radius:7px;
  background:linear-gradient(180deg, var(--metal1), var(--metal2));
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35);
}

.bulletTip{
  position:absolute;
  left:64px;
  top:3px;
  width:0;
  height:0;
  border-left:28px solid #c79f44;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  filter:brightness(1.06);
}

.trail{
  position:absolute;
  left:-340px;
  top:50%;
  width:290px;
  height:6px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(255,235,190,.92), rgba(255,255,255,.08));
  filter:blur(2px);
  opacity:.9;
  z-index:4;
  animation:trailFly 1.55s linear forwards;
}

@keyframes bulletFly{
  0%{left:-160px; opacity:0}
  8%{opacity:1}
  100%{left:calc(100% - min(270px, 30vw) - 8% - 58px); opacity:1}
}

@keyframes trailFly{
  0%{left:-360px; opacity:0}
  10%{opacity:.95}
  100%{left:calc(100% - min(270px, 30vw) - 8% - 320px); opacity:0}
}

/* TRAFIENIE */

.impactFlash{
  position:absolute;
  right:calc(8% + min(270px, 30vw) * .48);
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--flash);
  transform:translate(50%,-50%) scale(.1);
  opacity:0;
  z-index:10;
  box-shadow:
    0 0 26px rgba(255,255,255,.95),
    0 0 54px rgba(255,225,140,.82),
    0 0 110px rgba(255,180,40,.55);
  animation:impactFlash .46s ease-out 1.46s forwards;
}

.impactRing{
  position:absolute;
  right:calc(8% + min(270px, 30vw) * .48);
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.92);
  transform:translate(50%,-50%) scale(.2);
  opacity:0;
  z-index:9;
  animation:impactRing .62s ease-out 1.48s forwards;
}

.shockwave{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
  opacity:0;
  background:radial-gradient(circle at 78% 50%, rgba(255,255,255,.16), transparent 12%);
  animation:shockwave .55s ease-out 1.46s forwards;
}

@keyframes shockwave{
  0%{opacity:0; transform:scale(.96)}
  28%{opacity:1}
  100%{opacity:0; transform:scale(1.08)}
}

@keyframes impactFlash{
  0%{opacity:0; transform:translate(50%,-50%) scale(.1)}
  22%{opacity:1; transform:translate(50%,-50%) scale(3.3)}
  100%{opacity:0; transform:translate(50%,-50%) scale(.45)}
}

@keyframes impactRing{
  0%{opacity:0; transform:translate(50%,-50%) scale(.2)}
  28%{opacity:1}
  100%{opacity:0; transform:translate(50%,-50%) scale(7.4)}
}

.hole{
  position:absolute;
  right:calc(8% + min(270px, 30vw) * .48 - 10px);
  top:calc(50% - 10px);
  width:20px;
  height:20px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.12), rgba(255,255,255,0) 28%),
    radial-gradient(circle at center, #000 0 58%, #1a1a1a 58% 70%, rgba(255,255,255,.18) 70% 74%, transparent 74%);
  opacity:0;
  z-index:11;
  box-shadow:0 0 12px rgba(0,0,0,.62);
  animation:holeShow .22s linear 1.62s forwards;
}

@keyframes holeShow{
  from{opacity:0; transform:scale(.2)}
  to{opacity:1; transform:scale(1)}
}

/* ISKRY */

.sparks{
  position:absolute;
  right:calc(8% + min(270px, 30vw) * .48);
  top:50%;
  width:0;
  height:0;
  z-index:12;
  pointer-events:none;
}

.spark{
  position:absolute;
  width:4px;
  height:4px;
  background:linear-gradient(180deg, #fff7cc, #f0b43d);
  border-radius:50%;
  opacity:0;
  box-shadow:0 0 10px rgba(255,215,100,.7);
}

.spark.s1{ animation:spark1 .52s ease-out 1.46s forwards; }
.spark.s2{ animation:spark2 .58s ease-out 1.46s forwards; }
.spark.s3{ animation:spark3 .5s ease-out 1.46s forwards; }
.spark.s4{ animation:spark4 .62s ease-out 1.46s forwards; }
.spark.s5{ animation:spark5 .54s ease-out 1.46s forwards; }
.spark.s6{ animation:spark6 .6s ease-out 1.46s forwards; }

@keyframes spark1{
  0%{opacity:0; transform:translate(0,0) scale(.6)}
  12%{opacity:1}
  100%{opacity:0; transform:translate(42px,-22px) scale(.2)}
}
@keyframes spark2{
  0%{opacity:0; transform:translate(0,0) scale(.6)}
  12%{opacity:1}
  100%{opacity:0; transform:translate(-34px,-18px) scale(.2)}
}
@keyframes spark3{
  0%{opacity:0; transform:translate(0,0) scale(.6)}
  12%{opacity:1}
  100%{opacity:0; transform:translate(18px,34px) scale(.2)}
}
@keyframes spark4{
  0%{opacity:0; transform:translate(0,0) scale(.6)}
  12%{opacity:1}
  100%{opacity:0; transform:translate(-26px,28px) scale(.2)}
}
@keyframes spark5{
  0%{opacity:0; transform:translate(0,0) scale(.6)}
  12%{opacity:1}
  100%{opacity:0; transform:translate(54px,8px) scale(.2)}
}
@keyframes spark6{
  0%{opacity:0; transform:translate(0,0) scale(.6)}
  12%{opacity:1}
  100%{opacity:0; transform:translate(-48px,6px) scale(.2)}
}

/* DYM */

.smoke{
  position:absolute;
  right:calc(8% + min(270px, 30vw) * .48);
  top:50%;
  width:0;
  height:0;
  z-index:8;
  pointer-events:none;
}

.smokePuff{
  position:absolute;
  width:24px;
  height:24px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(220,220,220,.55), rgba(140,140,140,.18), transparent 70%);
  opacity:0;
  filter:blur(3px);
}

.smokePuff.p1{ animation:smoke1 .95s ease-out 1.5s forwards; }
.smokePuff.p2{ animation:smoke2 1.1s ease-out 1.52s forwards; }
.smokePuff.p3{ animation:smoke3 1.05s ease-out 1.56s forwards; }

@keyframes smoke1{
  0%{opacity:0; transform:translate(0,0) scale(.2)}
  20%{opacity:.8}
  100%{opacity:0; transform:translate(22px,-34px) scale(2.2)}
}
@keyframes smoke2{
  0%{opacity:0; transform:translate(0,0) scale(.2)}
  18%{opacity:.72}
  100%{opacity:0; transform:translate(-26px,-26px) scale(2.1)}
}
@keyframes smoke3{
  0%{opacity:0; transform:translate(0,0) scale(.2)}
  18%{opacity:.65}
  100%{opacity:0; transform:translate(8px,-46px) scale(2.5)}
}

/* DODATKI */

.skip{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:20;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
  transition:transform .2s ease, background .2s ease;
}

.skip:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.1);
}

.hint{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:20;
  color:rgba(255,255,255,.72);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.fadeOut{
  animation:fadeOut .55s ease forwards;
}

@keyframes fadeOut{
  to{
    opacity:0;
    visibility:hidden;
  }
}

@media (max-width: 900px){
  .scene{
    width:94vw;
    height:76vh;
  }

  .brand{
    left:50%;
    top:13%;
    width:100%;
    transform:translateX(-50%);
    text-align:center;
  }

  .brandSub{
    max-width:none;
    padding:0 16px;
  }

  .logoWrap{
    right:50%;
    top:64%;
    width:min(220px, 46vw);
    transform:translate(50%,-50%);
  }

  .bullet,
  .trail{
    top:64%;
  }

  .impactFlash,
  .impactRing{
    right:50%;
  }

  .hole{
    right:calc(50% - 10px);
  }

  .sparks,
  .smoke{
    right:50%;
  }

  .welcomeText{
    max-width:88%;
  }

  @keyframes bulletFly{
    0%{left:-160px; opacity:0}
    8%{opacity:1}
    100%{left:calc(50% - min(220px, 46vw) * .56); opacity:1}
  }

  @keyframes trailFly{
    0%{left:-360px; opacity:0}
    10%{opacity:.95}
    100%{left:calc(50% - min(220px, 46vw) * .56 - 280px); opacity:0}
  }
}