
:root{
  --vidlik-splash-ink:#10233d;
  --vidlik-splash-muted:#8390a3;
  --vidlik-splash-green:#16856a;
  --vidlik-splash-green-2:#68d5b8;
  --vidlik-splash-track:#e7f1ef;
}

#rebBootSplash.vidlik-splash{
  position:fixed;
  inset:0;
  z-index:10000;
  overflow:hidden;
  display:block;
  min-height:100dvh;
  background:
    radial-gradient(circle at 50% 16%,rgba(255,255,255,.98),rgba(250,253,252,.97) 36%,rgba(245,250,249,.98) 100%);
  color:var(--vidlik-splash-ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:opacity .34s ease,visibility .34s ease;
  isolation:isolate;
}
#rebBootSplash.vidlik-splash.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.vidlik-splash__content{
  position:relative;
  z-index:4;
  width:min(100%,560px);
  min-height:100dvh;
  margin:0 auto;
  padding:clamp(26px,5vh,58px) 24px clamp(110px,14vh,160px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.vidlik-splash__bg-left,
.vidlik-splash__bg-bottom,
.vidlik-splash__butterfly-top,
.vidlik-splash__flight,
.vidlik-splash__bottom-left-butterfly{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:1;
}
.vidlik-splash__bg-left{left:-22px;top:38px;width:min(34vw,290px);opacity:.44}
.vidlik-splash__bg-left img,
.vidlik-splash__bg-bottom img,
.vidlik-splash__butterfly-top img,
.vidlik-splash__flight img,
.vidlik-splash__bottom-left-butterfly img{display:block;width:100%;height:auto}
.vidlik-splash__bg-bottom{left:-2%;right:-2%;bottom:-8px;opacity:.58}
.vidlik-splash__bg-bottom img{width:104%;max-width:none}
.vidlik-splash__brand{margin-top:4px;margin-bottom:clamp(24px,4vh,42px)}
.vidlik-splash__wordmark{display:block;width:clamp(124px,28vw,170px);height:auto}
.vidlik-splash__hero{
  position:relative;
  width:100%;
  min-height:clamp(190px,30vh,285px);
  display:grid;
  place-items:center;
  margin-bottom:clamp(16px,2vh,26px);
}
.vidlik-splash__books{
  display:block;
  width:clamp(214px,54vw,316px);
  height:auto;
  filter:drop-shadow(0 18px 28px rgba(19,94,73,.11));
  animation:vidlikHeroFloat 4.5s ease-in-out infinite;
}
.vidlik-splash__rays{
  position:absolute;
  left:clamp(18px,7vw,58px);
  top:clamp(12px,4vh,38px);
  width:clamp(52px,13vw,78px);
  height:auto;
  opacity:.92;
}
.vidlik-splash__butterfly-top{
  right:clamp(16px,5vw,48px);
  top:clamp(44px,7vh,82px);
  width:clamp(84px,17vw,122px);
  opacity:.38;
  animation:vidlikButterfly 5.2s ease-in-out infinite;
}
.vidlik-splash__flight{
  right:clamp(10px,4vw,40px);
  top:clamp(108px,16vh,170px);
  width:clamp(116px,25vw,176px);
  opacity:.35;
}
.vidlik-splash__title{
  margin:0;
  max-width:520px;
  color:#10233d;
  font-size:clamp(34px,6vw,54px);
  line-height:1.07;
  letter-spacing:-.045em;
  font-weight:850;
}
.vidlik-splash__subtitle{
  margin:18px 0 0;
  max-width:390px;
  color:var(--vidlik-splash-muted);
  font-size:clamp(16px,2.7vw,21px);
  line-height:1.45;
  font-weight:500;
}
.vidlik-splash__progress{
  display:grid;
  place-items:center;
  margin-top:clamp(28px,4vh,42px);
}
.vidlik-splash__ring{
  --progress:16;
  position:relative;
  width:clamp(144px,27vw,182px);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:conic-gradient(from -90deg,var(--vidlik-splash-green) 0deg,var(--vidlik-splash-green-2) calc(var(--progress) * 3.6deg),var(--vidlik-splash-track) calc(var(--progress) * 3.6deg),var(--vidlik-splash-track) 360deg);
  box-shadow:0 14px 32px rgba(22,133,106,.1);
}
.vidlik-splash__ring::after{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  box-shadow:inset 0 0 0 1px rgba(205,226,220,.75);
}
.vidlik-splash__percent{
  position:relative;
  z-index:2;
  color:var(--vidlik-splash-green);
  font-size:clamp(28px,5vw,38px);
  line-height:1;
  font-weight:850;
  letter-spacing:-.03em;
}
.vidlik-splash__footer{
  margin-top:auto;
  padding-top:clamp(28px,4vh,48px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.vidlik-splash__tagline{
  margin:0;
  color:#929daf;
  font-size:clamp(15px,2.4vw,19px);
  line-height:1.4;
}
.vidlik-splash__divider{display:block;width:60px;height:auto;opacity:.85}
.vidlik-splash__bottom-left-butterfly{
  left:clamp(18px,7vw,76px);
  bottom:clamp(92px,12vh,145px);
  width:clamp(86px,18vw,132px);
  opacity:.2;
}
.vidlik-splash__corner-copy{
  position:absolute;
  right:clamp(20px,6vw,70px);
  bottom:clamp(42px,6vh,70px);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:#aab4c0;
  font-size:clamp(13px,2.1vw,17px);
  line-height:1.12;
  text-align:center;
}
.vidlik-splash__corner-copy img{width:34px;height:auto;opacity:.75}
.vidlik-splash__recovery{
  position:absolute;
  inset:auto 18px 28px;
  z-index:8;
  width:min(540px,calc(100% - 36px));
  margin:0 auto;
  left:0;
  right:0;
  padding:18px;
  border:1px solid rgba(205,222,216,.95);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 50px rgba(16,35,61,.12);
  backdrop-filter:blur(14px);
}
.vidlik-splash__recovery b{display:block;font-size:18px;margin-bottom:6px}
.vidlik-splash__recovery p{margin:0;color:#718096;line-height:1.45;font-size:13px}
.vidlik-splash__recovery-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:13px}
.vidlik-splash__recovery button{
  border:0;border-radius:11px;padding:10px 14px;font-weight:800;cursor:pointer;
}
.vidlik-splash__recovery .primary{background:#16856a;color:#fff}
.vidlik-splash__recovery .secondary{background:#fff;color:#10233d;border:1px solid #d6e2de}
@keyframes vidlikHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes vidlikButterfly{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-5px,7px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){
  .vidlik-splash__books,.vidlik-splash__butterfly-top{animation:none}
  #rebBootSplash.vidlik-splash{transition:none}
}
@media (max-width:520px){
  .vidlik-splash__content{padding:26px 18px 112px}
  .vidlik-splash__brand{margin-bottom:22px}
  .vidlik-splash__hero{min-height:220px;margin-bottom:12px}
  .vidlik-splash__title{font-size:clamp(38px,10vw,50px)}
  .vidlik-splash__subtitle{margin-top:14px;font-size:18px}
  .vidlik-splash__progress{margin-top:26px}
  .vidlik-splash__bg-left{width:42vw;left:-30px}
  .vidlik-splash__bottom-left-butterfly{bottom:104px}
  .vidlik-splash__corner-copy{bottom:44px;right:24px}
}
@media (max-height:760px){
  .vidlik-splash__content{padding-top:20px;padding-bottom:88px}
  .vidlik-splash__brand{margin-bottom:14px}
  .vidlik-splash__hero{min-height:170px;margin-bottom:8px}
  .vidlik-splash__books{width:210px}
  .vidlik-splash__title{font-size:34px}
  .vidlik-splash__subtitle{margin-top:10px;font-size:15px}
  .vidlik-splash__progress{margin-top:18px}
  .vidlik-splash__ring{width:132px}
  .vidlik-splash__footer{padding-top:18px}
}


/* Splash v5: cleaner composition without decorative rays, numeric progress,
   lower tagline/divider, or the "Більше, ніж навчання" corner copy. */
.vidlik-splash__content{
  padding-bottom:clamp(72px,9vh,108px);
}
.vidlik-splash__subtitle{
  margin-bottom:0;
}
.vidlik-splash__hero{
  margin-bottom:clamp(18px,2.6vh,30px);
}
.vidlik-splash__progress,
.vidlik-splash__footer,
.vidlik-splash__corner-copy,
.vidlik-splash__rays{
  display:none!important;
}
@media(max-width:520px){
  .vidlik-splash__content{padding-bottom:84px}
}


/* Splash v9: center the whole wordmark + books + copy stack vertically. */
.vidlik-splash__content{
  padding:0 24px;
  justify-content:center;
  transform:translateY(clamp(18px,2.5vh,32px));
}
.vidlik-splash__brand{
  margin-top:0;
  margin-bottom:clamp(20px,2.8vh,30px);
}
.vidlik-splash__hero{
  margin-top:0;
  margin-bottom:clamp(18px,2.4vh,28px);
}
@media(max-width:520px){
  .vidlik-splash__content{
    padding:0 18px;
    transform:translateY(18px);
  }
  .vidlik-splash__brand{
    margin-bottom:18px;
  }
  .vidlik-splash__hero{
    margin-top:0;
    margin-bottom:16px;
  }
}
@media(max-height:760px){
  .vidlik-splash__content{
    padding-top:0;
    padding-bottom:0;
    transform:translateY(12px);
  }
  .vidlik-splash__hero{
    margin-top:0;
  }
}


/* Splash v8: fade the baked-in right-side copy from the waves artwork. */
.vidlik-splash__bg-bottom{
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 70%,rgba(0,0,0,.55) 78%,transparent 88%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 70%,rgba(0,0,0,.55) 78%,transparent 88%,transparent 100%);
}


/* Splash v11: use the new static VIDLIK wordmark at a clearer size. */
.vidlik-splash__wordmark{
  width:clamp(190px,22vw,260px);
  height:auto;
}
@media(max-width:520px){
  .vidlik-splash__wordmark{
    width:clamp(172px,48vw,220px);
  }
}
