/* loader.css — fancy initial page loader + cross-page transitions */

/* Native View Transitions (Chrome / Edge 126+ ignore-fallback in others) */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-fade-out 320ms cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root) {
  animation: vt-fade-in 460ms cubic-bezier(.16,.84,.32,1) both;
}
@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-12px) scale(0.985); filter: blur(2px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(12px) scale(0.99); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ===== Body content fades when loader is up / when leaving ===== */
body > .site-header,
body > main,
body > .site-footer {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s cubic-bezier(.16,.84,.32,1), transform 0.55s cubic-bezier(.16,.84,.32,1);
  will-change: opacity, transform;
}
body.is-loaded > .site-header,
body.is-loaded > main,
body.is-loaded > .site-footer { opacity: 1; transform: none; }

body.is-leaving > .site-header,
body.is-leaving > main,
body.is-leaving > .site-footer {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.32s ease-out, transform 0.32s ease-out;
}

/* ===== The loader itself ===== */
.page-loader {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(135deg, #1F2D6E 0%, #0E1538 100%);
  display: grid; place-items: center;
  overflow: hidden; isolation: isolate;
  transition: opacity 480ms ease, transform 700ms cubic-bezier(.65,.05,.35,1);
}
.page-loader::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background:
    radial-gradient(38% 50% at 26% 24%, rgba(255,200,87,0.30), transparent 60%),
    radial-gradient(40% 50% at 76% 32%, rgba(239,71,111,0.28), transparent 65%),
    radial-gradient(50% 60% at 60% 80%, rgba(139,92,246,0.32), transparent 65%);
  filter: blur(28px);
  /* deliberately NOT animated — paint cost */
}

body.is-loaded .page-loader {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
body.is-leaving .page-loader { /* show again on exit for the next page */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms ease-in, transform 280ms ease-in;
}

.page-loader-stage {
  display: grid; gap: 1.5rem; place-items: center; text-align: center;
  position: relative;
}

.page-loader-mark {
  position: relative;
  width: 110px; height: 110px;
  display: grid; place-items: center;
}
.page-loader-mark img {
  width: 56px; height: auto;
  opacity: 0;
  animation: loader-pop 0.7s 0.10s cubic-bezier(.5,1.6,.4,1) forwards;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.30));
}
.page-loader-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: loader-rotate 1.6s linear infinite;
  will-change: transform;
}
.page-loader-ring circle {
  stroke-dasharray: 320;
  stroke-dashoffset: 240;
  transform-origin: center;
  animation: loader-arc 1.6s ease-in-out infinite;
}
@keyframes loader-rotate { to { transform: rotate(360deg); } }
@keyframes loader-arc {
  0%, 100% { stroke-dashoffset: 280; }
  50% { stroke-dashoffset: 80; }
}
@keyframes loader-pop {
  0% { opacity: 0; transform: scale(0.55); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

.page-loader-text {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.32em;
  color: #fff;
  font-size: var(--fs-300);
  opacity: 0;
  transform: translateY(8px);
  animation: loader-fade-in 0.5s 0.36s cubic-bezier(.16,.84,.32,1) forwards;
}
.page-loader-text small {
  display: block;
  font-weight: 500;
  letter-spacing: 0.4em;
  font-size: 0.72em;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
}
@keyframes loader-fade-in { to { opacity: 1; transform: none; } }

.page-loader-bar {
  width: 180px; height: 2px; border-radius: 999px;
  background: rgba(255,255,255,0.14);
  overflow: hidden;
  position: relative;
}
.page-loader-bar span {
  display: block; height: 100%; width: 38%;
  background: linear-gradient(90deg, #FFC857, #EF476F, #8B5CF6);
  border-radius: 999px;
  transform: translateX(-100%);
  animation: loader-bar 1.25s cubic-bezier(.65,.05,.35,1) infinite;
  will-change: transform;
}
@keyframes loader-bar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(380%); }
}

/* Two corner dots echoing the brand mark */
.page-loader-stage::before,
.page-loader-stage::after {
  content: ""; position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand-red);
  filter: drop-shadow(0 4px 10px rgba(230,57,70,0.5));
}
.page-loader-stage::before {
  top: -22px; left: 12px;
  animation: dot-bounce 1.6s ease-in-out infinite;
}
.page-loader-stage::after {
  bottom: -8px; right: 6px;
  animation: dot-bounce 1.6s ease-in-out 0.4s infinite;
}
@keyframes dot-bounce {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.85; }
  50% { transform: translateY(-8px) scale(1.15); opacity: 1; }
}

/* Reduced motion — cut out the animations, keep the static mark */
@media (prefers-reduced-motion: reduce) {
  .page-loader-mark img,
  .page-loader-ring,
  .page-loader-ring circle,
  .page-loader-text,
  .page-loader-bar span,
  .page-loader-stage::before,
  .page-loader-stage::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}