/* ============================================================
   Premium boot layer for product subpages.
   - Full-screen loader overlay
   - Cinematic fade-in of #root once React renders AND first paint
     of meaningful assets is done
   - Pauses every CSS animation inside #root until booted, so any
     ambient/decorative animations start cleanly from frame 0
   - Reduced-motion friendly
   ============================================================ */

.page-loader{
  position: fixed; inset: 0; z-index: 9999;
  background: #FFD93D;
  display: grid; place-items: center;
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.page-loader.is-hidden{
  opacity: 0; visibility: hidden; pointer-events: none;
}
.page-loader-inner{
  display:flex; flex-direction:column; align-items:center; gap:22px;
  transform: translateY(-2vh);
}
.page-loader-logo{
  width: 220px; max-width: 55vw; height: auto;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.12));
  animation: pl-breathe 1.8s ease-in-out infinite;
  will-change: transform;
}
@keyframes pl-breathe{
  0%,100%{ transform: scale(1); }
  50%   { transform: scale(1.045); }
}
.page-loader-bar{
  position: relative;
  width: 180px; height: 8px;
  background: rgba(26,20,16,.15);
  border-radius: 999px; overflow:hidden;
  border: 2px solid #1a1410;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.page-loader-bar::before{
  content:""; position:absolute; top:0; left:0; bottom:0;
  width: 45%; background: #1a1410;
  border-radius: 999px;
  animation: pl-track 1.25s ease-in-out infinite;
  will-change: transform;
}
@keyframes pl-track{
  0%   { transform: translateX(-110%); }
  50%  { transform: translateX(140%); }
  100% { transform: translateX(-110%); }
}

/* Hide #root while loader is on top — fade it in with a subtle lift */
#root{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.16,.84,.3,1);
  will-change: opacity, transform;
}
body.is-booted #root{ opacity: 1; transform: none; }

/* Freeze every CSS animation inside #root until we boot. This avoids the
   "truncated/half-loaded" feel where ambient animations (clouds, sunbursts,
   floating tokens, marquees) are already mid-cycle when the loader fades.
   Once .is-booted is added, animations resume from their initial keyframe. */
body:not(.is-booted) #root,
body:not(.is-booted) #root *,
body:not(.is-booted) #root *::before,
body:not(.is-booted) #root *::after{
  animation-play-state: paused !important;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .page-loader, .page-loader *{ animation: none !important; }
  #root{ opacity: 1 !important; transform: none !important; transition: none !important; }
  body:not(.is-booted) #root,
  body:not(.is-booted) #root *,
  body:not(.is-booted) #root *::before,
  body:not(.is-booted) #root *::after{
    animation-play-state: running !important;
  }
}