/* ===================================================================
   ETHERNALIS — Preloader styles
   Five-card cross deals/withdraws over a black candlelit field.
   States: data-state="open" (lifting away) / "close" (falling shut)
   =================================================================== */

.nk-preloader {
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-abyss, #000);
  color: var(--fg-bone, #d9cdb8);
  overflow: hidden;
  user-select: none;
}
.nk-preloader.is-gone { pointer-events: none; opacity: 0; transition: opacity .28s ease; }

/* The candlelit field */
.nk-preloader-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(217,123,58,.10), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(40,28,18,.55), rgba(0,0,0,0) 60%),
    #000;
}
.nk-preloader-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .55;
  mix-blend-mode: overlay;
}
.nk-preloader-vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,0.85);
  pointer-events: none;
}

/* Wordmark + quote */
.nk-preloader-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}
.nk-preloader-mark {
  font-family: var(--font-display, "NC", serif);
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: .42em;
  color: var(--gold, #c9a25a);
  text-shadow: 0 0 18px rgba(217,123,58,.25), 0 2px 0 rgba(0,0,0,.7);
  text-transform: uppercase;
  opacity: 0;
  animation: nkmark-in .55s .15s ease forwards;
}
.nk-preloader-quote {
  font-family: var(--font-narrative, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--fg-bone-dim, #a89a85);
  opacity: 0;
  animation: nkquote-in .6s .35s ease forwards;
}
@keyframes nkmark-in {
  0% { opacity: 0; transform: translateY(-6px); letter-spacing: .55em; }
  100% { opacity: 1; transform: none; letter-spacing: .42em; }
}
@keyframes nkquote-in {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: .85; transform: none; }
}

/* The cross: five card-shaped fragments */
.nk-preloader-animation {
  --card-w: 56px;
  --card-h: 76px;
  --gap: 8px;
  display: grid;
  grid-template-columns: repeat(3, var(--card-w));
  grid-template-rows: repeat(3, var(--card-h));
  gap: var(--gap);
  margin: 4px 0;
}
.frag {
  position: relative;
  width: var(--card-w); height: var(--card-h);
  transform-style: preserve-3d;
  perspective: 600px;
}
.frag i {
  position: absolute; inset: 0;
  display: block;
  border: 1px solid var(--border-strong, rgba(201,162,90,.55));
  background:
    radial-gradient(circle at 50% 35%, rgba(201,162,90,.18), transparent 55%),
    var(--bg-panel, #1a1410);
  box-shadow:
    0 8px 18px rgba(0,0,0,.85),
    inset 0 0 20px rgba(0,0,0,.7);
}
.frag i::before, .frag i::after {
  content: ""; position: absolute;
  width: 6px; height: 6px;
  border: 1px solid var(--gold-deep, #8a6a2e);
}
.frag i::before { top: 3px; left: 3px; border-right: 0; border-bottom: 0; }
.frag i::after  { bottom: 3px; right: 3px; border-left: 0; border-top: 0; }

/* Center fragment glows */
.pos-c { grid-column: 2; grid-row: 2; }
.pos-c i {
  background:
    radial-gradient(circle at 50% 35%, rgba(217,123,58,.30), transparent 60%),
    var(--bg-panel-2, #221a14);
  box-shadow:
    0 0 26px rgba(217,123,58,.30),
    0 8px 18px rgba(0,0,0,.85),
    inset 0 0 20px rgba(0,0,0,.7);
}
.pos-c i::after { content: "✦"; color: var(--gold, #c9a25a); inset: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: auto; height: auto; border: 0; font-family: var(--font-display, serif); font-size: 26px; text-shadow: 0 0 14px rgba(232,200,120,.5); }
.pos-c i::before { display: none; }
.pos-n { grid-column: 2; grid-row: 1; }
.pos-w { grid-column: 1; grid-row: 2; }
.pos-e { grid-column: 3; grid-row: 2; }
.pos-s { grid-column: 2; grid-row: 3; }

/* ============ OPEN — cards retreat: center fades first, neighbours peel out ============ */
.nk-preloader[data-state="open"] .frag {
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.6,0,.3,1);
  animation-duration: .9s;
}
.nk-preloader[data-state="open"] .pos-c { animation-name: open-c; animation-delay: 0s; }
.nk-preloader[data-state="open"] .pos-n { animation-name: open-n; animation-delay: .12s; }
.nk-preloader[data-state="open"] .pos-w { animation-name: open-w; animation-delay: .18s; }
.nk-preloader[data-state="open"] .pos-e { animation-name: open-e; animation-delay: .18s; }
.nk-preloader[data-state="open"] .pos-s { animation-name: open-s; animation-delay: .24s; }

@keyframes open-c { 0%{opacity:0;transform:translateY(8px) rotateX(-12deg) scale(.8);} 30%{opacity:1;transform:none;} 80%{opacity:1;transform:none;} 100%{opacity:0;transform:translateY(-6px) scale(1.15);} }
@keyframes open-n { 0%{opacity:0;transform:translateY(14px) rotateX(20deg);} 35%{opacity:1;transform:none;} 80%{opacity:1;transform:none;} 100%{opacity:0;transform:translateY(-32px) rotateX(-30deg);} }
@keyframes open-s { 0%{opacity:0;transform:translateY(-14px) rotateX(-20deg);} 35%{opacity:1;transform:none;} 80%{opacity:1;transform:none;} 100%{opacity:0;transform:translateY(32px) rotateX(30deg);} }
@keyframes open-w { 0%{opacity:0;transform:translateX(20px) rotateY(-25deg);} 35%{opacity:1;transform:none;} 80%{opacity:1;transform:none;} 100%{opacity:0;transform:translateX(-44px) rotateY(40deg);} }
@keyframes open-e { 0%{opacity:0;transform:translateX(-20px) rotateY(25deg);} 35%{opacity:1;transform:none;} 80%{opacity:1;transform:none;} 100%{opacity:0;transform:translateX(44px) rotateY(-40deg);} }

/* Open: vignette/quote fade out at the end */
.nk-preloader[data-state="open"] .nk-preloader-mark { animation: nkmark-in .5s .1s ease forwards, nkmark-out .35s .85s ease forwards; }
.nk-preloader[data-state="open"] .nk-preloader-quote { animation: nkquote-in .6s .35s ease forwards, nkquote-out .35s .85s ease forwards; }
.nk-preloader[data-state="open"] .nk-preloader-bg { animation: bg-out .55s .75s ease forwards; }
@keyframes nkmark-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes nkquote-out { to { opacity: 0; transform: translateY(2px); } }
@keyframes bg-out { to { opacity: 0; } }

/* ============ CLOSE — cards fall in from the rim, then settle ============ */
.nk-preloader[data-state="close"] .frag {
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.4,.05,.3,1);
  animation-duration: .7s;
}
.nk-preloader[data-state="close"] .pos-n { animation-name: close-n; animation-delay: .02s; }
.nk-preloader[data-state="close"] .pos-w { animation-name: close-w; animation-delay: .08s; }
.nk-preloader[data-state="close"] .pos-e { animation-name: close-e; animation-delay: .08s; }
.nk-preloader[data-state="close"] .pos-s { animation-name: close-s; animation-delay: .14s; }
.nk-preloader[data-state="close"] .pos-c { animation-name: close-c; animation-delay: .22s; animation-duration: .55s; }

@keyframes close-c { 0%{opacity:0;transform:scale(1.3) rotateX(15deg);} 100%{opacity:1;transform:none;} }
@keyframes close-n { 0%{opacity:0;transform:translateY(-46px) rotateX(-30deg);} 100%{opacity:1;transform:none;} }
@keyframes close-s { 0%{opacity:0;transform:translateY(46px) rotateX(30deg);} 100%{opacity:1;transform:none;} }
@keyframes close-w { 0%{opacity:0;transform:translateX(-60px) rotateY(40deg);} 100%{opacity:1;transform:none;} }
@keyframes close-e { 0%{opacity:0;transform:translateX(60px) rotateY(-40deg);} 100%{opacity:1;transform:none;} }

.nk-preloader[data-state="close"] .nk-preloader-bg { animation: bg-in .35s ease forwards; }
@keyframes bg-in { from { opacity: 0; } to { opacity: 1; } }
.nk-preloader[data-state="close"] .nk-preloader-mark { animation: nkmark-in .5s .25s ease forwards; }
.nk-preloader[data-state="close"] .nk-preloader-quote { animation: nkquote-in .55s .45s ease forwards; }

/* Skip control */
.nk-preloader-skip {
  position: absolute;
  right: 28px; bottom: 22px;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-line, rgba(201,162,90,.28));
  color: var(--fg-bone-dim, #a89a85);
  font-family: var(--font-small-caps, serif);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.nk-preloader-skip:hover {
  color: var(--gold-bright, #e8c878);
  border-color: var(--gold, #c9a25a);
  background: rgba(201,162,90,.06);
}

/* Reduced motion: keep just a quick fade */
@media (prefers-reduced-motion: reduce) {
  .nk-preloader .frag,
  .nk-preloader .nk-preloader-mark,
  .nk-preloader .nk-preloader-quote,
  .nk-preloader .nk-preloader-bg { animation: none !important; }
  .nk-preloader { transition: opacity .25s ease; }
  .nk-preloader.is-gone { opacity: 0; }
}