/* ══════════════════════════════════════════════════════════════════
   preloader.css — ALTARISS homepage intro animation
   Liquid-glass frosted panels, letter turn-in, zoom-through exit.
   Homepage only — loaded exclusively from index.php.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --preloader-font-logo: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Locks scroll while the preloader is on screen (toggled via JS) */
body.preloader-lock {
  overflow: hidden;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.pl-backdrop-split {
  position: absolute;
  inset: 0;
  display: flex;
}

/* ── Liquid glass panels: translucent + blurred, ~90% opacity ───── */
.pl-panel {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
}

/* subtle refractive highlight to sell the "glass" read */
.pl-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
}

.pl-panel-left  { transform-origin: 100% 50%; }
.pl-panel-right { transform-origin: 0% 50%; }

.pl-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  z-index: 2;
}

#preloader.exit .pl-stage { animation: plStageOut 1.4s ease forwards; }
@keyframes plStageOut { to { opacity: 0; transform: scale(0.55); } }

/* ── Wordmark: Montserrat ────────────────────────────────────────── */
.pl-word {
  display: flex;
  font-family: var(--preloader-font-logo);
  font-weight: 600;
  font-size: clamp(2.4rem, 8.5vw, 6rem);
  letter-spacing: 0.14em;
  line-height: 1;
}

.pl-letter {
  display: inline-block;
  color: var(--dark);
  opacity: 0.16;
  filter: blur(11px);
  transform: perspective(700px) rotateY(62deg) scale(1.04);
  backface-visibility: hidden;
}

.pl-letter.in { animation: plTurnIn 950ms cubic-bezier(0.25, 0.7, 0.2, 1) forwards; }
@keyframes plTurnIn {
  0%   { opacity: 0.16; filter: blur(11px); transform: perspective(700px) rotateY(62deg) scale(1.04); }
  55%  { opacity: 0.8;  filter: blur(3px);  transform: perspective(700px) rotateY(14deg) scale(1.015); }
  100% { opacity: 1;    filter: blur(0);    transform: perspective(700px) rotateY(0deg)  scale(1); }
}

.pl-baseline {
  width: 0%;
  height: 1px;
  background: rgba(27, 24, 21, 0.18);
}
.pl-baseline.draw { animation: plDraw 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes plDraw { from { width: 0%; } to { width: 100%; } }

/* ── Tagline: IvyOra (site serif) ─────────────────────────────────── */
.pl-tagline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: 0.01em;
  color: #1a1a1a;
  opacity: 0;
  transform: scale(0.85);
  filter: blur(4px);
}
.pl-tagline.show { animation: plTaglineIn 0.9s ease forwards; }
@keyframes plTaglineIn { to { opacity: 1; transform: scale(1); filter: blur(0); } }

/* ── Exit: zoom through ──────────────────────────────────────────── */
#preloader.exit .pl-panel-left  { animation: plZoomLeft  1.4s ease forwards; }
#preloader.exit .pl-panel-right { animation: plZoomRight 1.4s ease forwards; }
@keyframes plZoomLeft  { to { transform: scale(2.6); opacity: 0; } }
@keyframes plZoomRight { to { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pl-letter { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  .pl-baseline.draw { animation: none !important; width: 100%; }
  .pl-tagline.show { animation: none !important; opacity: 1 !important; transform: none !important; }
}