/* =========================================================
   CAMERA PRELOADER - STYLES
   Works with or without Bootstrap. Everything is scoped to
   #preloader, so it will not clash with your theme.
   Optional font: Bebas Neue (add the Google Fonts link if you want it)
   ========================================================= */

:root{
  --pl-bg:#0b0c0f;        /* loader background */
  --pl-accent:#e63946;    /* brand colour */
  --pl-light:#f4f1ea;     /* text colour */
}

/* lock scroll while loading */
body.loading{ overflow:hidden; }

#preloader{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  pointer-events:all;
  color:var(--pl-light);
}

/* two shutter panels that slide apart at the end */
#preloader .panel{
  position:absolute; left:0; width:100%; height:50.2%;
  background:radial-gradient(circle at 50% 50%, #1a1d24 0%, var(--pl-bg) 70%);
  transition:transform .9s cubic-bezier(.77,0,.18,1);
  z-index:1;
}
#preloader .panel.top{ top:0; }
#preloader .panel.bottom{ bottom:0; }
#preloader.open .panel.top{ transform:translateY(-101%); }
#preloader.open .panel.bottom{ transform:translateY(101%); }

/* film grain */
#preloader::before{
  content:""; position:absolute; inset:0; z-index:2; opacity:.07; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:pl-grain .6s steps(4) infinite;
}
@keyframes pl-grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)}
}

#preloader .loader-stage{
  position:relative; z-index:3; text-align:center;
  width:min(420px,86vw);
  transition:opacity .35s ease, transform .5s ease;
}
#preloader.open .loader-stage{ opacity:0; transform:scale(1.25); }

/* ---------- CAMERA PARTS ---------- */
#preloader .camera{
  width:100%; height:auto; overflow:visible;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
}
#preloader .part{
  transform-box:fill-box; transform-origin:center;
  opacity:0;
  animation:pl-assemble .95s cubic-bezier(.2,.9,.25,1.2) forwards;
  animation-delay:var(--d);
}
@keyframes pl-assemble{
  0%  { opacity:0; transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.35); }
  55% { opacity:1; }
  100%{ opacity:1; transform:translate(0,0) rotate(0) scale(1); }
}

/* "click" settle after all parts are in */
#preloader .camera.settled{ animation:pl-settle .45s ease-out; }
@keyframes pl-settle{
  0%{transform:scale(1)} 35%{transform:scale(1.045)} 100%{transform:scale(1)}
}

/* rec light + lens glint */
#preloader .rec{ animation:pl-blink 1s steps(2) infinite; animation-delay:2.2s; }
@keyframes pl-blink{ 50%{opacity:.15} }
#preloader .glint{ opacity:0; animation:pl-glint 1.6s ease-in-out 2s infinite; }
@keyframes pl-glint{ 0%,60%,100%{opacity:0} 80%{opacity:.9} }

/* ---------- COUNTER / FILM BAR ---------- */
#preloader .loader-meta{ margin-top:1.4rem; }
#preloader .loader-title{
  font-size:1.05rem; letter-spacing:.35em; color:#9aa0ab; text-transform:uppercase;
}
#preloader .loader-count{
  font-family:'Bebas Neue',Impact,sans-serif; font-size:3.4rem; line-height:1;
}
#preloader .loader-count small{ font-size:1.2rem; color:var(--pl-accent); }
#preloader .filmbar{
  height:10px; margin:.8rem auto 0; width:100%;
  background:repeating-linear-gradient(90deg,#23262d 0 8px,transparent 8px 14px);
  border-radius:2px; position:relative; overflow:hidden;
}
#preloader .filmbar i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:repeating-linear-gradient(90deg,var(--pl-accent) 0 8px,transparent 8px 14px);
}

/* ---------- FLASH BLAST ---------- */
#preloader .flash{
  position:absolute; z-index:4; left:50%; top:50%;
  width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#fff 35%,rgba(255,255,255,0) 70%);
  opacity:0; transform:scale(0); pointer-events:none;
}
#preloader .flash-rays{
  position:absolute; z-index:4; left:50%; top:50%;
  width:140vmax; height:140vmax; margin:-70vmax 0 0 -70vmax; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0 3deg,transparent 3deg 12deg);
  -webkit-mask:radial-gradient(circle,#000 0%,transparent 60%);
          mask:radial-gradient(circle,#000 0%,transparent 60%);
  opacity:0; transform:scale(.1) rotate(0); pointer-events:none;
}
#preloader.blast .flash{ animation:pl-flash .75s ease-out forwards; }
#preloader.blast .flash-rays{ animation:pl-rays .75s ease-out forwards; }
@keyframes pl-flash{
  0%{opacity:1; transform:scale(0);} 25%{opacity:1;} 100%{opacity:0; transform:scale(60);}
}
@keyframes pl-rays{
  0%{opacity:0; transform:scale(.1) rotate(0);} 20%{opacity:1;}
  100%{opacity:0; transform:scale(1) rotate(25deg);}
}

/* camera parts burst slightly apart on the blast */
#preloader.blast .part{
  animation:none; opacity:1;
  transition:transform .5s cubic-bezier(.2,.8,.3,1), opacity .5s;
  transform:translate(calc(var(--x) * -.12), calc(var(--y) * -.12)) rotate(calc(var(--r) * .12));
}

/* =========================================================
   OPTIONAL: reveal animation for your own page content.
   Add class="reveal" to any element (hero text, cards...).
   JS adds body.site-ready when the loader finishes.
   ========================================================= */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
body.site-ready .reveal{ opacity:1; transform:none; }
body.site-ready .reveal:nth-child(2){ transition-delay:.15s; }
body.site-ready .reveal:nth-child(3){ transition-delay:.3s; }
body.site-ready .reveal:nth-child(4){ transition-delay:.45s; }

/* accessibility */
@media (prefers-reduced-motion:reduce){
  #preloader .part, #preloader .camera.settled, #preloader .rec,
  #preloader .glint, #preloader::before{ animation:none !important; }
  #preloader .part{ opacity:1; }
}