/* ============================================================
   loader.css v5 — "Ancient Gate : 8D Edition"
   GPU-first: only transform + opacity for all CSS animations.
   Canvas handles: stars, portal vortex, shockwave rings.
   CSS handles: gate swing, deck sway, orbit, enter CTA.
   ============================================================ */

/* ── Overlay ── */
#nody-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: #010208;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
  contain: strict;
}

/* Canvas fills entire loader */
#loader-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}

/* Nebula atmospheric layer */
#loader-nebula {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 15% 25%, rgba(50,100,220,.13), transparent 55%),
    radial-gradient(ellipse 55% 40% at 85% 70%, rgba(90,55,210,.1), transparent 50%),
    radial-gradient(ellipse 80% 30% at 50% 95%, rgba(55,155,130,.08), transparent 60%),
    radial-gradient(ellipse 40% 60% at 50% 10%, rgba(80,60,180,.07), transparent 55%);
  animation: nebulaBreath 12s ease-in-out infinite;
}
@keyframes nebulaBreath {
  0%,100% { opacity: .7; }
  50%     { opacity: 1;  }
}

/* ── Stage ── */
#loader-stage {
  position: relative; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center;
  will-change: transform, opacity;
  transition: opacity .35s ease, transform .35s ease;
}
#loader-stage.hide { opacity: 0; transform: scale(.9); pointer-events: none; }

/* ═══════════════════════════════════════
   DECK — 4-layer 3D Tarot Stack
   ═══════════════════════════════════════ */
#loader-deck {
  position: relative; width: 148px; height: 252px; margin-bottom: 44px;
  transform-style: preserve-3d;
  animation: deckSway 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes deckSway {
  0%,100% { transform: rotateY(-9deg) rotateX(6deg) translateY(0); }
  33%     { transform: rotateY(7deg) rotateX(-4deg) translateY(-16px); }
  66%     { transform: rotateY(-4deg) rotateX(7deg) translateY(-9px); }
}

.lc-wrap {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
.lc-wrap:nth-child(1) { transform: translateY(22px) translateZ(-48px) rotateX(8deg); }
.lc-wrap:nth-child(2) { transform: translateY(14px) translateZ(-26px) rotateX(4deg); }
.lc-wrap:nth-child(3) { transform: translateY(6px)  translateZ(-10px) rotateX(1.5deg); }
.lc-wrap:nth-child(4) { transform: translateZ(0); }

.lc {
  position: absolute; inset: 0; border-radius: 13px;
  border: 1px solid rgba(95,180,236,.28);
  background:
    radial-gradient(ellipse at 28% 22%, rgba(95,180,236,.18), transparent 52%),
    repeating-linear-gradient(48deg, rgba(95,180,236,.04) 0 3px, transparent 3px 8px),
    linear-gradient(158deg, #1b3a72, #08102a 50%, #12305e);
  display: grid; place-items: center; overflow: hidden;
  backface-visibility: hidden;
}
.lc-wrap:nth-child(1) .lc { opacity: .25; }
.lc-wrap:nth-child(2) .lc { opacity: .5;  }
.lc-wrap:nth-child(3) .lc { opacity: .78; }
.lc-wrap:nth-child(4) .lc {
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(95,180,236,.45),
    0 32px 90px rgba(0,0,0,.95),
    0 0 55px rgba(95,180,236,.22),
    0 0 110px rgba(95,180,236,.08);
}

/* Dot-grid pattern on cards */
.lc::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 30px 30px, 18px 18px;
  background-position: 6px 6px, 14px 15px;
  opacity: .16;
}

/* Glyph inside top card */
.lc-glyph {
  font-size: 2.7rem; position: relative; z-index: 1;
  color: rgba(155,210,255,.88);
  text-shadow: 0 0 20px rgba(95,180,236,.95), 0 0 45px rgba(95,180,236,.4);
  animation: glyphPulse 3.4s ease-in-out infinite;
  animation-delay: var(--gd, 0s);
  will-change: transform, opacity;
}
@keyframes glyphPulse {
  0%,100% { opacity: .42; transform: scale(.93); }
  50%     { opacity: 1;   transform: scale(1.14); }
}

/* Rainbow aurora border on top card */
.lc-wrap:nth-child(4)::after {
  content: ''; position: absolute; inset: -3px; border-radius: 16px; z-index: -1;
  background: linear-gradient(135deg,
    #5fb4ec, #8b9bf6, #6fe0d6, #ffe680, #f472b6, #a78bfa, #6fd0a8, #5fb4ec);
  background-size: 300% 300%;
  opacity: .55; filter: blur(4px);
  animation: auroraShift 3.2s linear infinite;
}
@keyframes auroraShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ═══════════════════════════════════════
   ORBIT — rune ring around deck
   ═══════════════════════════════════════ */
#loader-orbit {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; pointer-events: none;
  animation: orbitSpin 16s linear infinite;
  will-change: transform; z-index: 6;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* Vị trí mỗi dot theo tọa độ tròn r=158px */
.orbit-dot {
  position: absolute; width: 32px; height: 32px; margin: -16px;
  display: grid; place-items: center;
}
.orbit-dot:nth-child(1) { transform: translate( 158px,    0); }
.orbit-dot:nth-child(2) { transform: translate(  79px,  137px); }
.orbit-dot:nth-child(3) { transform: translate( -79px,  137px); }
.orbit-dot:nth-child(4) { transform: translate(-158px,    0); }
.orbit-dot:nth-child(5) { transform: translate( -79px, -137px); }
.orbit-dot:nth-child(6) { transform: translate(  79px, -137px); }

.orbit-rune {
  display: block; font-size: 1.1rem; color: rgba(95,180,236,.72);
  text-shadow: 0 0 10px rgba(95,180,236,.95), 0 0 22px rgba(95,180,236,.4);
  animation: runeCounter 16s linear infinite, runeGlow 3s ease-in-out infinite;
  animation-delay: 0s, var(--rd, 0s);
  will-change: transform, opacity;
}
@keyframes runeCounter { to { transform: rotate(-360deg); } }
@keyframes runeGlow    { 0%,100% { opacity: .28; } 50% { opacity: 1; } }

/* ═══════════════════════════════════════
   LOGO
   ═══════════════════════════════════════ */
#loader-logo {
  font-family: 'Cinzel', 'Lora', Georgia, serif;
  font-size: clamp(1.85rem, 5vw, 2.9rem);
  font-weight: 600; letter-spacing: .22em; color: #dde9ff;
  text-shadow:
    0 0 28px rgba(95,180,236,.65),
    0 0 70px rgba(95,180,236,.28),
    0 0 140px rgba(95,180,236,.1);
  margin-bottom: 7px;
  animation: logoGlow 5s ease-in-out infinite;
  will-change: opacity;
}
@keyframes logoGlow { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

#loader-sub {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: .78rem; letter-spacing: .3em; color: rgba(95,180,236,.5);
  text-transform: uppercase; margin-bottom: 52px;
}

/* ═══════════════════════════════════════
   MOON PROGRESS
   ═══════════════════════════════════════ */
#loader-progress {
  display: flex; gap: 13px; margin-bottom: 13px;
}
.moon-phase {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(95,180,236,.32); background: transparent;
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
  will-change: transform;
}
.moon-phase.lit {
  background: rgba(95,180,236,.42);
  box-shadow: 0 0 7px rgba(95,180,236,.55);
  transform: scale(1.12);
}
.moon-phase.full {
  background: radial-gradient(circle, #d8eeff 18%, #5fb4ec 60%, #3480c4);
  box-shadow: 0 0 14px rgba(95,180,236,1), 0 0 30px rgba(95,180,236,.5);
  transform: scale(1.4);
}

#loader-status {
  font-family: 'Lora', Georgia, serif; font-style: italic;
  font-size: .85rem; color: rgba(188,205,235,.5);
  letter-spacing: .05em; text-align: center; min-height: 1.5em;
  transition: opacity .4s ease;
}

/* ═══════════════════════════════════════
   ENTER CTA
   ═══════════════════════════════════════ */
#loader-enter {
  position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 1s ease;
  cursor: pointer; will-change: opacity;
}
#loader-enter.show { opacity: 1; pointer-events: auto; }

#enter-portal-ring {
  width: 86px; height: 86px; border-radius: 50%;
  border: 1.5px solid rgba(95,180,236,.5);
  display: grid; place-items: center; position: relative;
  animation: ringPulse 2.2s ease-in-out infinite;
  will-change: transform;
}
/* Outer ripple rings */
#enter-portal-ring::before, #enter-portal-ring::after {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px solid rgba(95,180,236,.22);
  animation: ripple 2.4s ease-out infinite;
  will-change: transform, opacity;
}
#enter-portal-ring::before { inset: -16px; animation-delay: 0s;   }
#enter-portal-ring::after  { inset: -30px; animation-delay: .6s; }

@keyframes ringPulse {
  0%,100% { transform: scale(1);    border-color: rgba(95,180,236,.38); }
  50%     { transform: scale(1.08); border-color: rgba(95,180,236,.95); }
}
@keyframes ripple {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(1.8); opacity: 0;  }
}

#enter-ring-inner {
  position: absolute; inset: 8px; border-radius: 50%;
  border: 1px solid rgba(95,180,236,.3);
  animation: innerSpin 4s linear infinite; will-change: transform;
}
@keyframes innerSpin { to { transform: rotate(360deg); } }

#enter-icon {
  font-size: 1.85rem; color: rgba(155,215,255,.88);
  text-shadow: 0 0 16px rgba(95,180,236,1), 0 0 40px rgba(95,180,236,.5);
  animation: iconPulse 2.2s ease-in-out infinite; will-change: opacity;
  position: relative; z-index: 1;
}
@keyframes iconPulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

#enter-text {
  font-family: 'Cinzel', 'Lora', Georgia, serif;
  font-size: clamp(.8rem, 2.2vw, .97rem); letter-spacing: .22em;
  color: rgba(220,235,255,.68); text-transform: uppercase;
  animation: textBlink 2.6s ease-in-out infinite; will-change: opacity;
}
@keyframes textBlink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ══════════════════════════════════════════════════════
   THE GATE — 8D Ancient Portal
   ══════════════════════════════════════════════════════ */
#gate-wrap {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; pointer-events: none;
  perspective: 2200px;
  perspective-origin: 50% 40%;
  opacity: 0;
  will-change: opacity;
}
#gate-wrap.active { opacity: 1; }

/* ── Gate panels ── */
#gate-left, #gate-right {
  flex: 1;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  overflow: hidden; position: relative;
}
#gate-left  { transform-origin: left center;  }
#gate-right { transform-origin: right center; }

/* Gate panel texture */
#gate-left, #gate-right {
  background:
    repeating-linear-gradient(48deg, rgba(95,180,236,.045) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(135deg, rgba(95,180,236,.025) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #060d1e, #0b1935 38%, #050c18 70%, #030910);
}
#gate-left  { border-right: 2px solid rgba(95,180,236,.6); }
#gate-right { border-left:  2px solid rgba(95,180,236,.6); }

/* Gate grid overlay */
#gate-left::before, #gate-right::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(95,180,236,.038) 72px 74px),
    repeating-linear-gradient(0deg,  transparent 0 92px, rgba(95,180,236,.028) 92px 94px);
}

/* Edge glow — light bleeds from the seam */
#gate-left::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 100% at 100% 50%, rgba(95,180,236,.15), transparent 60%);
}
#gate-right::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 100% at 0% 50%, rgba(95,180,236,.15), transparent 60%);
}

/* Gate inner content */
.gate-inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  padding: 8% 0;
}

/* Rune symbols on gate */
.gate-symbol {
  font-size: clamp(1.1rem, 3.5vw, 2.2rem);
  color: rgba(95,180,236,.22); letter-spacing: .4em;
  text-shadow: 0 0 22px rgba(95,180,236,.18);
  animation: symbolBreath 5s ease-in-out infinite;
}
.gate-symbol:nth-child(2) { animation-delay: 1.6s; }
.gate-symbol:nth-child(3) { animation-delay: 3.2s; }
@keyframes symbolBreath { 0%,100% { opacity: .18; } 50% { opacity: .55; } }

/* Vertical line grid on gate */
.gate-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(95,180,236,.025) 18px 19px);
}

/* ── Open animation ── */
#gate-wrap.open #gate-left  { animation: gateSwingL 1.6s cubic-bezier(.4,0,.08,1) forwards; }
#gate-wrap.open #gate-right { animation: gateSwingR 1.6s cubic-bezier(.4,0,.08,1) forwards; }

@keyframes gateSwingL {
  0%   { transform: rotateY(0);     opacity: 1; }
  20%  { transform: rotateY(-8deg); opacity: 1; }
  55%  { transform: rotateY(-88deg); opacity: .88; }
  80%  { transform: rotateY(-96deg); opacity: .5; }
  100% { transform: rotateY(-102deg); opacity: 0; }
}
@keyframes gateSwingR {
  0%   { transform: rotateY(0);    opacity: 1; }
  20%  { transform: rotateY(8deg); opacity: 1; }
  55%  { transform: rotateY(88deg); opacity: .88; }
  80%  { transform: rotateY(96deg); opacity: .5; }
  100% { transform: rotateY(102deg); opacity: 0; }
}

/* ── Central seam (light crack) ── */
#gate-seam {
  position: fixed; top: 0; bottom: 0; left: 50%;
  width: 4px; margin-left: -2px; z-index: 99991; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(180,220,255,.9) 12%,
    rgba(255,248,200,1) 50%,
    rgba(180,220,255,.9) 88%,
    transparent 100%);
  filter: blur(1.5px);
  transform: scaleX(0); opacity: 0; transform-origin: center;
  will-change: transform, opacity;
}
#gate-seam.open {
  animation: seamOpen 1.6s cubic-bezier(.38,0,.1,1) forwards;
}
@keyframes seamOpen {
  0%   { transform: scaleX(0);   opacity: 0;  filter: blur(3px); }
  6%   { transform: scaleX(1);   opacity: 1;  filter: blur(1px); }
  30%  { transform: scaleX(12);  opacity: 1;  filter: blur(5px); }
  65%  { transform: scaleX(70);  opacity: .9; filter: blur(14px); }
  100% { transform: scaleX(250); opacity: 0;  filter: blur(28px); }
}

/* ── White flash ── */
#gate-flash {
  position: fixed; inset: 0; z-index: 99996; pointer-events: none;
  background: #fff; opacity: 0; will-change: opacity;
}
#gate-flash.flash { animation: flashBurst .6s ease forwards; }
@keyframes flashBurst {
  0%   { opacity: 0; }
  18%  { opacity: .95; }
  100% { opacity: 0; }
}

/* ── Shockwave ── */
#gate-shock {
  position: fixed; inset: 0; z-index: 99992; pointer-events: none;
}

/* ═══════════════════════════════════════
   DOOR CARDS — fly through the gate
   ═══════════════════════════════════════ */
.door-card {
  position: fixed; border-radius: 11px;
  border: 1px solid rgba(95,180,236,.35);
  background:
    repeating-linear-gradient(48deg, rgba(95,180,236,.06) 0 3px, transparent 3px 8px),
    linear-gradient(158deg,
      hsl(var(--ch, 210), 62%, 28%),
      hsl(var(--ch, 210), 50%, 9%) 50%,
      hsl(var(--ch, 210), 60%, 22%));
  display: grid; place-items: center;
  pointer-events: none; z-index: 99993;
  backface-visibility: hidden; will-change: transform, opacity;
  overflow: hidden;
}

/* Dot-grid on door cards */
.door-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-image: radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 1px);
  background-size: 26px 26px; background-position: 4px 4px; opacity: .14;
}

/* Shimmer highlight pass */
.door-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.28) 40%, transparent 62%);
  animation: dcShimmer .9s ease-out forwards;
  will-change: transform;
}
@keyframes dcShimmer { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/* Glyph inside card */
.dc-glyph {
  position: relative; z-index: 2;
  font-size: 1.5rem;
  color: hsla(var(--ch, 210), 85%, 72%, .8);
  text-shadow: 0 0 12px hsla(var(--ch, 210), 100%, 65%, .9);
}

/* ── 8 fly directions ── */
@keyframes cardFlyL {
  0%   { transform: translate(0,0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
  12%  { opacity: 1; }
  100% { transform: translate(-135vw, var(--fy,0px)) rotateY(-200deg) rotateZ(var(--rz,-18deg)) scale(.25); opacity: 0; }
}
@keyframes cardFlyR {
  0%   { transform: translate(0,0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
  12%  { opacity: 1; }
  100% { transform: translate( 135vw, var(--fy,0px)) rotateY( 200deg) rotateZ(var(--rz, 18deg)) scale(.25); opacity: 0; }
}
@keyframes cardFlyU {
  0%   { transform: translate(var(--fx,0px), 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--fx,0px), -130vh) rotateX(75deg) scale(.3); opacity: 0; }
}
@keyframes cardFlyD {
  0%   { transform: translate(var(--fx,0px), 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--fx,0px),  130vh) rotateX(-75deg) scale(.3); opacity: 0; }
}
@keyframes cardFlyTL {
  0%   { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(-118vw,-118vh) rotate(-110deg) scale(.18); opacity: 0; }
}
@keyframes cardFlyTR {
  0%   { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate( 118vw,-118vh) rotate( 110deg) scale(.18); opacity: 0; }
}
@keyframes cardFlyBL {
  0%   { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(-118vw, 118vh) rotate(-75deg) scale(.18); opacity: 0; }
}
@keyframes cardFlyBR {
  0%   { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate( 118vw, 118vh) rotate( 75deg) scale(.18); opacity: 0; }
}

/* ── Rumble effect ── */
@keyframes rumble {
  0%,100% { transform: translate(0,0); }
  8%  { transform: translate(-5px, 2px); }
  18% { transform: translate( 5px,-3px); }
  28% { transform: translate(-4px, 4px); }
  38% { transform: translate( 4px,-2px); }
  48% { transform: translate(-5px, 3px); }
  58% { transform: translate( 3px,-4px); }
  68% { transform: translate(-3px, 3px); }
  78% { transform: translate( 4px,-2px); }
  88% { transform: translate(-3px, 1px); }
}
.rumbling { animation: rumble .55s ease; }

/* ── Loader exit transition ── */
#nody-loader.exiting {
  animation: loaderExit 1s ease forwards;
  pointer-events: none;
}
@keyframes loaderExit {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: .6; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.07); }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #loader-deck    { width: 112px; height: 192px; margin-bottom: 32px; }
  .lc-glyph       { font-size: 2rem; }
  #loader-logo    { font-size: 1.5rem; letter-spacing: .14em; }
  #loader-sub     { letter-spacing: .16em; font-size: .72rem; }
  .gate-symbol    { font-size: 1rem; }
  #enter-portal-ring { width: 68px; height: 68px; }
  #loader-orbit   { display: none; } /* orbit quá lớn trên mobile nhỏ */
}

@media (max-width: 360px) {
  #loader-deck    { width: 90px; height: 154px; margin-bottom: 24px; }
  #loader-logo    { font-size: 1.25rem; }
}

@media (min-width: 1440px) {
  #loader-deck    { width: 172px; height: 292px; }
  .lc-glyph       { font-size: 3.2rem; }
  #loader-logo    { font-size: 3.2rem; }
  #enter-portal-ring { width: 100px; height: 100px; }
}