/* =========================================================================
   FULLDOT — Page Loader (first visit only)
   Visible by default; hidden when html.fd-skip-loader is set in head.
   ========================================================================= */

/* During loading: lock body scroll */
html.fd-loading,
html.fd-loading body { overflow: hidden; }

/* Skip-loader: instantly remove from layout */
html.fd-skip-loader .page-loader { display: none !important; }

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  background: var(--ink, #0A1F3D);
  color: var(--paper, #F5F1E8);
  opacity: 1;
  transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  isolation: isolate;
  /* CSS-only failsafe: even if all JS fails, the loader fades out by 9s.
     animation-fill-mode forwards keeps it dismissed permanently. */
  animation: pl-failsafe 1200ms cubic-bezier(0.22, 1, 0.36, 1) 7800ms forwards;
}
@keyframes pl-failsafe {
  to {
    opacity: 0;
    filter: blur(8px);
    visibility: hidden;
    pointer-events: none;
  }
}
.page-loader.is-hidden { filter: blur(8px); }

/* Hidden state (fading out) */
.page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Ambient gradient backdrop — twin radial glows breathing slowly */
.page-loader__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 75% at 12% 18%, rgba(200, 155, 108, 0.22), transparent 55%),
    radial-gradient(ellipse 45% 65% at 88% 82%, rgba(62, 142, 126, 0.18), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(20, 48, 90, 0.85) 0%, #0A1F3D 60%);
  animation: pl-breathe 8s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
@keyframes pl-breathe {
  from { transform: scale(1);    opacity: 0.88; }
  to   { transform: scale(1.06); opacity: 1; }
}

/* Subtle noise texture */
.page-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.page-loader__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: 24px;
}

/*
   Timeline — total 7s (content done by 6s, fade out 6-7s by JS)
   --------------------------------------------------------------
   0.6 → 1.6s   Eyebrow fades in       (1000ms)
   1.2 → 2.6s   Brand mark rises        (1400ms)
   2.4 → 3.2s   Line track appears      (800ms)
   2.8 → 5.0s   Line fills L→R          (2200ms)
   4.0 → 5.2s   Subtitle fades in       (1200ms)
   4.5s+        Dot pulse begins        (loops 3.5s)
   5.0 → 6.0s   Subtle highlight pass   (1000ms)
   6.0 → 7.0s   JS triggers fade-out
*/

/* Eyebrow */
.page-loader__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(218, 179, 130, 0.6);
  margin: 0 0 28px;
  opacity: 0;
  transform: translateY(8px);
  animation: pl-rise 1000ms cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards;
}

/* Brand mark — big elegant */
.page-loader__brand {
  font-family: "Fraunces", "Cormorant Garamond", serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--paper, #F5F1E8);
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  animation: pl-brand-rise 1400ms cubic-bezier(0.22, 1, 0.36, 1) 1200ms forwards;
}

@keyframes pl-brand-rise {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.page-loader__dot {
  display: inline-block;
  color: #DAB382;          /* copper-bright */
  transform: scale(1);
  text-shadow: 0 0 24px rgba(218, 179, 130, 0.55);
  animation: pl-dot 3.5s cubic-bezier(0.4, 0, 0.6, 1) 4500ms infinite alternate;
}
@keyframes pl-dot {
  from { text-shadow: 0 0 8px  rgba(218, 179, 130, 0.25); transform: scale(1); }
  to   { text-shadow: 0 0 32px rgba(218, 179, 130, 0.7);  transform: scale(1.08); }
}

/* Decorative drawing line — fills left to right (the centerpiece) */
.page-loader__line {
  width: clamp(180px, 28vw, 320px);
  height: 1.5px;
  margin: 36px auto 28px;
  background: rgba(245, 241, 232, 0.10);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  animation: pl-fade-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 2400ms forwards;
}
.page-loader__line span {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(218, 179, 130, 0.42) 18%,
    #DAB382 48%,
    rgba(62, 142, 126, 0.78) 78%,
    transparent 100%);
  border-radius: 2px;
  transform: translateX(-100%);
  animation: pl-line-fill 2200ms cubic-bezier(0.65, 0, 0.35, 1) 2800ms forwards;
  box-shadow: 0 0 14px rgba(218, 179, 130, 0.5);
}
@keyframes pl-line-fill {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0%); }
}

/* Subtle accent dots on each end of the line — fade in late for refinement */
.page-loader__line::before,
.page-loader__line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #DAB382;
  transform: translate(0, -50%) scale(0);
  opacity: 0;
  animation: pl-dot-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-shadow: 0 0 10px rgba(218, 179, 130, 0.6);
}
.page-loader__line::before { left: -8px;  animation-delay: 5000ms; }
.page-loader__line::after  { right: -8px; animation-delay: 5200ms; background: rgba(62, 142, 126, 0.9); box-shadow: 0 0 10px rgba(62, 142, 126, 0.7); }
@keyframes pl-dot-pop {
  to { transform: translate(0, -50%) scale(1); opacity: 1; }
}

/* Caption */
.page-loader__sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: pl-rise 1200ms cubic-bezier(0.22, 1, 0.36, 1) 4000ms forwards;
}

@keyframes pl-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pl-fade-in {
  to { opacity: 1; }
}

/* Reduced motion: skip animations, show static state immediately */
@media (prefers-reduced-motion: reduce) {
  .page-loader__bg,
  .page-loader__dot { animation: none; }
  .page-loader__eyebrow,
  .page-loader__brand,
  .page-loader__line,
  .page-loader__sub {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .page-loader__line span { transform: translateX(0); animation: none; }
}

/* Small screens — tighter spacing */
@media (max-width: 480px) {
  .page-loader__eyebrow { margin-bottom: 16px; }
  .page-loader__line { margin: 24px auto 18px; }
}