/* ============================================================
   Fukaimori · An Archive
   Fullscreen fluid rebuild from Figma (design base 1920 x 1080)
   Figma px are converted to % (position) and vw (size) so the
   layout fills any screen proportionally with no black bars.
   ============================================================ */
:root {
  --text-violet: #b676ff;   /* AN ARCHIVE + subtitle — luminous white-violet like the crescent glow */
  --brand-violet: #694EAB;  /* DROP POINT */
  --dot-red: #FF4444;       /* Ellipse 4 */
  /* Bright violet halo so the text glows like the moon's crescent */
  --text-glow: 0 0 6px rgba(255, 255, 255, 0.45),
               0 0 16px rgba(197, 188, 255, 0.65),
               0 0 34px rgba(150, 105, 255, 0.5),
               0 1px 2px rgba(18, 6, 38, 0.55);
  /* Soft, thin violet glow for the AN ARCHIVE / subtitle text */
  --text-glow-soft: 0 0 3px rgba(197, 188, 255, 0.55),
                    0 0 8px rgba(150, 105, 255, 0.4),
                    0 0 16px rgba(105, 78, 171, 0.28);
}





* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Feather / star particle canvas ── */
.starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  display: block;
}

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
}

/* Full-window stage — centers the scaled design canvas.
   The design is scaled to CONTAIN (smaller axis) so the whole canvas
   always fits inside the viewport on every device and orientation.
   Any leftover space around the canvas is filled by the backdrop. */
.viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — avoids mobile browser-chrome gaps */
  background: #05020a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* clips the canvas edges that extend beyond the screen */
}
.viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("BGLP.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Halaman archive: blurred backdrop (bukan landing) */
.viewport:has(.archive-canvas)::before {
  filter: blur(28px) brightness(0.55) saturate(1.05);
  transform: scale(1.12);
}


/* The design canvas is scaled as a single unit (via --scale, set
   in script.js using a CONTAIN ratio) so the WHOLE design ALWAYS
   fits inside the viewport on every device, browser and aspect
   ratio — nothing is ever cropped — while keeping its original
   proportions. The background photo is never stretched and every
   element stays perfectly aligned; any leftover space around the
   canvas is filled by the viewport's blurred backdrop. */

.canvas {
  --design-w: 2168px;
  --design-h: 1080px;   /* Figma Frame 214 */

  position: relative;
  z-index: 1;           /* sit above the viewport's blurred backdrop */

  flex: none;

  width: var(--design-w);
  height: var(--design-h);
  background: #05020a;

  /* COVER: canvas is scaled by the LARGER axis ratio so the canvas
     always fills the entire viewport with no black bars — some edges
     may be clipped on extreme aspect ratios. */
  overflow: hidden;
  color: var(--text-violet);
  transform: scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
  transform-origin: center center;
}


.archive-canvas {
  --design-w: 2168px;
  --design-h: 1080px;   /* Figma Frame 214 */
  background: #05020a;
}

.landing-canvas {
  --design-w: 2168px;
  --design-h: 1080px;   /* Figma Frame 214 */
  background: transparent;
}






/* ============================================================
   Background image (BGLP.png) — fills the screen (cover)
   ============================================================ */
.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("BGLP.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
  will-change: transform;
}


/* If the image fails to load, the .scene fallback shows through */

/* ============================================================
   Clouds & fog — hidden (replaced by static stars)
   ============================================================ */
.clouds,
.fog { display: none; }


/* Also remove leftover .aurora CSS rules (no element in HTML anymore) */
.aurora,
.aurora-layer,
.aurora-1, .aurora-2, .aurora-3 { display: none; }

/* ============================================================
   Animated star field canvas
   ============================================================ */
.starfield {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

/* ============================================================
   SHADM — hanya tampil di mobile (disembunyikan di desktop)
   ============================================================ */
.moon-shadm {
  display: none;
}

/* ============================================================
   BGLP 2 — moon background image (Figma: left 943, top 356.99, 296.41x300.5)
   ============================================================ */
.moon-photo {
  position: absolute;
  left: 943px;
  top: 356.99px;
  width: 296.41px;
  height: 300.5px;
  background-image: url("BGLP 2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 5;
  pointer-events: none;
  /* Reset button defaults on desktop — visually identical to the old div */
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  cursor: default;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ============================================================
   BGLPS — portal hitbox (Figma: left 980.61, top 391.74, 203.4x203.4)
   Denyut ungu tua always-on; navigasi ke archive saat diklik.
   ============================================================ */
.moon-link {
  position: absolute;
  left: 980.61px;
  top: 391.74px;
  width: 203.4px;
  height: 203.4px;
  z-index: 6;
  border-radius: 50%;
  display: block;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  animation: bglps-pulse 3s ease-in-out infinite;
}
.moon-link:focus-visible {
  outline: 2px solid rgba(105, 78, 171, 0.8);
  outline-offset: 6px;
}

/* Denyut ungu tua luas — bernapas pelan, radius besar */
@keyframes bglps-pulse {
  0%, 100% {
    box-shadow:
      0 0 20px 10px rgba(60, 20, 100, 0.45),
      0 0 50px 22px rgba(80, 30, 130, 0.3),
      0 0 90px 40px rgba(60, 20, 100, 0.18),
      0 0 140px 70px rgba(40, 10, 80, 0.1);
  }
  50% {
    box-shadow:
      0 0 35px 16px rgba(90, 40, 160, 0.7),
      0 0 75px 35px rgba(70, 25, 120, 0.5),
      0 0 130px 65px rgba(50, 15, 90, 0.3),
      0 0 200px 110px rgba(30, 10, 70, 0.15);
  }
}

/* Hover — denyut lebih cepat + gelombang ripple */
.moon-link:hover,
.moon-link:focus-visible {
  animation: bglps-pulse 1.2s ease-in-out infinite;
}
.moon-link:hover::before,
.moon-link:hover::after,
.moon-link:focus-visible::before,
.moon-link:focus-visible::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  border: 3px solid rgba(160, 80, 255, 0.9);
  box-shadow: 0 0 12px 4px rgba(160, 80, 255, 0.5),
              inset 0 0 8px 2px rgba(160, 80, 255, 0.3);
  animation: bglps-ripple 2.4s ease-out infinite;
  pointer-events: none;
}
.moon-link:hover::after,
.moon-link:focus-visible::after {
  animation-delay: 1.2s;
  border-color: rgba(140, 70, 220, 0.7);
  box-shadow: 0 0 10px 3px rgba(140, 70, 220, 0.4),
              inset 0 0 6px 2px rgba(140, 70, 220, 0.25);
}

@keyframes bglps-ripple {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}



/* ============================================================
   Page transition — simple fade to dark
   Leaving : transparent → opaque (300ms)
   Entering: opaque → transparent (400ms)
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: #05020a;
  opacity: 0;
  /* Ensure no animation-fill-mode lingers */
  animation: none;
}
.page-transition.is-leaving {
  pointer-events: all;
  animation: pt-fade-out 0.35s ease forwards;
}
.page-transition.is-entering {
  opacity: 1;
  pointer-events: none;
  animation: pt-fade-in 0.4s ease forwards;
}

@keyframes pt-fade-out {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pt-fade-in {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ============================================================
   Fallback cosmic scene (only visible if photo missing)
   ============================================================ */
.scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 640px at 50% 44%, rgba(60, 30, 100, 0.7), transparent 60%),
    radial-gradient(500px 420px at 50% 42%, rgba(105, 78, 171, 0.28), transparent 65%),
    linear-gradient(180deg, #0d0518 0%, #05020a 72%);
}
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(197,188,255,0.6), transparent),
    radial-gradient(1.4px 1.4px at 68% 78%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 82% 28%, rgba(197,188,255,0.7), transparent),
    radial-gradient(1px 1px at 92% 66%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 8% 84%, rgba(255,255,255,0.5), transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.5; } to { opacity: 1; } }
.sigil {
  position: absolute; left: 50%; top: 42%;
  width: 538px; height: 538px;

  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  filter: drop-shadow(0 0 24px rgba(105, 78, 171, 0.45));
}
.ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-outer { animation: spin 60s linear infinite; }
.ring-inner { animation: spin 40s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.moon { width: 34%; aspect-ratio: 1/1; display: grid; place-items: center; }
.moon-body {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 62% 50%, #f3e9ff 0%, #C5BCFF 45%, #694EAB 100%);
  box-shadow: -10px 0 24px #9c6bff, 0 0 40px rgba(105,78,171,0.6), 0 0 80px rgba(105,78,171,0.4);
  -webkit-mask: radial-gradient(circle at 30% 50%, transparent 52%, #000 53%);
          mask: radial-gradient(circle at 30% 50%, transparent 52%, #000 53%);
}

/* ============================================================
   Brand — top-left
   Subtract 1 (logo): left 44 top 48 size 29 x 34  (base 1920x1080)
   ============================================================ */
.brand {
  position: absolute;
  left: 80px;
  top: 64px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40.7px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.4s ease;
}
.brand[href]:hover,
.brand[href]:focus-visible {
  filter: drop-shadow(0 0 6px rgba(160, 110, 255, 0.95))
          drop-shadow(0 0 16px rgba(105, 78, 171, 0.75))
          brightness(1.35);
  outline: none;
}

/* Logo mark — Subtract.png */
.brand-mark {
  flex-shrink: 0;
  width: 36.01px;
  height: 40.7px;

  background-image: url("Subtract.png");

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* CSS fallback logo (only shown when Subtract.png is missing) */
.canvas.no-logo .brand-mark {
  background-image: none;
  border-radius: 50%;
  background: linear-gradient(181.27deg, #5A3E8E 24.1%, #D4BDFF 86.22%);
}
.canvas.no-logo .brand-mark::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(90deg, #5100F8 0%, #C0A1FF 100.92%);
  -webkit-mask: radial-gradient(circle at 78% 50%, transparent 46%, #000 47%);
          mask: radial-gradient(circle at 78% 50%, transparent 46%, #000 47%);
}
.canvas.no-logo .brand-mark::after {
  content: "";
  position: absolute;
  left: 14%; top: 10%;
  width: 76%; height: 76%;
  border-radius: 50%;
  background: #D9D9D9;
}
/* FUKAIMORI text — flex child, vertically centered by parent */
.brand-text {
  font-family: "Cantarell", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20.19px;
  line-height: 1;
  letter-spacing: 0.4em;
  white-space: nowrap;
  background: linear-gradient(90deg, #4616BC 0%, #9367FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}


/* ============================================================
   Drop point — top-right  (Group 8: left 1688 top 56)
   Now an <a> link — hover: dot turns purple, text glows
   ============================================================ */
.drop-point {
  position: absolute;
  left: 1925px;
  top: 64px;
  width: 180.88px;
  height: 40.7px;
  z-index: 9;
  text-decoration: none;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

.drop-text {
  font-family: "Cantarell", system-ui, sans-serif;
  font-weight: 700;
  font-size: 21.24px;
  line-height: 40.7px;
  letter-spacing: 0;
  white-space: nowrap;
  background: linear-gradient(90deg, #3300AF 2.88%, #A37DFF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  transition: filter 0.35s ease;
}


/* Ellipse 4: red blinking dot — turns purple on hover */
.drop-dot {
  position: absolute;
  left: 170.64px;
  top: 50%;
  transform: translateY(-50%);
  width: 10.24px;
  height: 10.24px;
  border-radius: 50%;
  background: #FB0000;
  animation: pulse-dot 1.3s ease-in-out infinite;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.drop-point:hover .drop-dot,
.drop-point:focus-visible .drop-dot {
  background: #9B41FF;
  animation: pulse-dot-purple 1.3s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 5px 1px rgba(255, 68, 68, 0.9),
                0 0 12px 3px rgba(255, 68, 68, 0.6);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1.25);
    box-shadow: 0 0 12px 4px rgba(255, 68, 68, 1),
                0 0 26px 8px rgba(255, 68, 68, 0.7);
  }
}

@keyframes pulse-dot-purple {
  0%, 100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 6px 2px rgba(155, 65, 255, 0.9),
                0 0 14px 4px rgba(155, 65, 255, 0.6);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 14px 5px rgba(155, 65, 255, 1),
                0 0 30px 10px rgba(155, 65, 255, 0.7);
  }
}

.drop-point:focus-visible {
  outline: 2px solid rgba(155, 65, 255, 0.7);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================
   DROP POINT PAGE (droppoint.html) — exact Figma spec
   Canvas: 2168 × 1080
   ============================================================ */

.dp-canvas {
  background: #000;
}

/* Background: BGLP.png — same as landing page */
.dp-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: url("BGLP.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Rectangle 12: dark overlay full screen */
.dp-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* BGDP portrait image (left 642, top 204, 884×787) */
.dp-portrait-img {
  position: absolute;
  left: 642px;
  top: 204px;
  width: 884px;
  height: 787px;
  z-index: 4;
  background-image: url("BGDP.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Rectangle 14: border + gradient overlay (centered, 884×787, top calc(50% - 787px/2 + 57.5px)) */
.dp-portrait {
  position: absolute;
  left: calc(50% - 884px / 2);
  top: calc(50% - 787px / 2 + 57.5px);
  width: 884px;
  height: 787px;
  z-index: 5;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(3,3,3,0.36) 54.81%, rgba(105,105,105,0) 100%);
  border: 1px solid #9B8BFF;
  box-shadow: 0 0 24.4px 9px rgba(185, 65, 255, 0.25);
  pointer-events: none;
}

/* DROP POINT heading (centered, top 397, 342×66) */
.dp-heading {
  position: absolute;
  left: calc(50% - 342px / 2);
  top: 397px;
  width: 342px;
  height: 66px;
  z-index: 6;
  font-family: "Bona Nova", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 54.83px;
  line-height: 66px;
  text-align: center;
  color: #A99AFF;
  margin: 0;
}

/* SUBMIT YOUR RECOVERED SEQUENCE (centered, top 468, 488×32) */
.dp-sub {
  position: absolute;
  left: calc(50% - 488px / 2);
  top: 468px;
  width: 488px;
  height: 32px;
  z-index: 6;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 26.3919px;
  line-height: 32px;
  text-align: center;
  color: #CFB7FF;
  margin: 0;
  white-space: nowrap;
}

/* RECOVERED SEQUENCE label (left 717, top 535, 171×19) */
.dp-label {
  position: absolute;
  left: 717px;
  top: 535px;
  width: 171px;
  height: 19px;
  z-index: 6;
  font-family: "Maven Pro", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16.143px;
  line-height: 19px;
  text-align: center;
  white-space: nowrap;
  color: #A99AFF;
  margin: 0;
}

/* 9 input boxes — Figma spec, top 568, size 70.49×70.49, start left 717, spacing 83px */
.dp-seq {
  position: absolute;
  top: 568px;
  left: 717px;
  width: calc(70.49px * 9 + 83px * 8); /* 9 boxes + 8 gaps */
  height: 70.49px;
  z-index: 6;
  pointer-events: auto;
}
.dp-seq-box {
  position: absolute;
  width: 70.49px;
  height: 70.49px;
  box-sizing: border-box;
  border: 1.18011px solid #786BC7;
  background: transparent;
  color: #C5BCFF;
  font-family: "Bona Nova", Georgia, serif;
  font-size: 28px;
  text-align: center;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  caret-color: transparent;
  top: 0;
}
/* Rect 15–38: left positions from Figma (717, 800, 883, 966, 1049, 1132, 1215, 1298, 1381) */
.dp-seq-box:nth-child(1) { left: 0; }
.dp-seq-box:nth-child(2) { left: calc(800px - 717px); }
.dp-seq-box:nth-child(3) { left: calc(883px - 717px); }
.dp-seq-box:nth-child(4) { left: calc(966px - 717px); }
.dp-seq-box:nth-child(5) { left: calc(1049px - 717px); }
.dp-seq-box:nth-child(6) { left: calc(1132px - 717px); }
.dp-seq-box:nth-child(7) { left: calc(1215px - 717px); }
.dp-seq-box:nth-child(8) { left: calc(1298px - 717px); }
.dp-seq-box:nth-child(9) { left: calc(1381px - 717px); }
.dp-seq-box:focus {
  border-color: #B9AEF7;
  box-shadow: 0 0 10px 2px rgba(155, 65, 255, 0.45);
}
.dp-seq-box.wrong {
  border-color: #FF3B3B;
  box-shadow: 0 0 10px 3px rgba(255, 59, 59, 0.6), 0 0 20px 6px rgba(255, 59, 59, 0.3);
  color: #FF8080;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* Shake animation — triggered on .dp-seq when input is wrong/empty */
.dp-seq.shake {
  animation: dp-seq-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes dp-seq-shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(7px); }
  45%  { transform: translateX(-6px); }
  60%  { transform: translateX(5px); }
  75%  { transform: translateX(-4px); }
  90%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* VERIFY button — Figma: left 972, top 664, 223×65 */
.dp-verify {
  position: absolute;
  left: 972px;
  top: 664px;
  width: 223px;
  height: 65px;
  z-index: 6;
  box-sizing: border-box;
  background: rgba(55, 22, 255, 0.19);
  border: 1.08822px solid #786BC7;
  color: #786BC7;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 21.8405px;
  line-height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.dp-verify:hover,
.dp-verify:focus-visible {
  background: rgba(100, 60, 255, 0.35);
  color: #C5BCFF;
  box-shadow: 0 0 20px 4px rgba(155, 65, 255, 0.45);
  outline: none;
}

/* NEED ASSISTANCE? (centered, top 751, 141×18) */
.dp-assist-q {
  position: absolute;
  left: calc(50% - 141px / 2 - 0.5px);
  top: 751px;
  width: 141px;
  height: 18px;
  z-index: 6;
  font-family: "Maven Pro", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15.3917px;
  line-height: 18px;
  color: rgba(226, 214, 255, 0.59);
  margin: 0;
}

/* ACCESS ARCHIVE NOTES + red dot — flex row, vertically centered (top 774) */
.dp-assist-row {
  position: absolute;
  left: calc(50% - 166px / 2 - 8px);
  top: 774px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dp-assist-link {
  font-family: "Maven Pro", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14.3752px;
  line-height: 17px;
  text-align: center;
  color: rgba(226, 214, 255, 0.59);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.dp-assist-link:hover,
.dp-assist-link:focus-visible {
  color: #C5BCFF;
  text-shadow: 0 0 8px rgba(155, 65, 255, 0.7), 0 0 18px rgba(155, 65, 255, 0.4);
}

/* Ellipse 14: red dot — inline inside the flex row, always vertically centered */
.dp-assist-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF1010;
  box-shadow: 0 0 3px 1px rgba(255,17,17,0.6), 0 0 7px 2px rgba(255,17,17,0.3);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

/* Purple glow on hover — triggered by hovering the sibling link */
.dp-assist-link:hover ~ .dp-assist-dot,
.dp-assist-link:focus-visible ~ .dp-assist-dot {
  background: #9B41FF;
  box-shadow: 0 0 4px 2px rgba(155,65,255,0.7), 0 0 10px 4px rgba(155,65,255,0.4);
}

/* Close button: × (left 1488, top 215, 28×28)
   Vector inner: left 17.09% right 17.08% top 17.09% bottom 17.09% → ~4.8px inset
   Color: #C1AAFA */
.dp-close {
  position: absolute;
  left: 1488px;
  top: 215px;
  width: 28px;
  height: 28px;
  z-index: 9;
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease;
}
.dp-close:hover,
.dp-close:focus-visible {
  transform: scale(1.15);
  outline: none;
}
.dp-close-line {
  position: absolute;
  /* inset 17.09% from each side → left: 4.79px, width: 18.42px (≈ 65.8% of 28) */
  left: 50%;
  top: 50%;
  width: 2px;
  height: calc(28px * 0.658); /* 18.42px */
  background: #C1AAFA;
  border-radius: 1px;
  display: block;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.dp-close-line-1 { transform: translate(-50%, -50%) rotate(45deg); }
.dp-close-line-2 { transform: translate(-50%, -50%) rotate(-45deg); }
.dp-close:hover .dp-close-line,
.dp-close:focus-visible .dp-close-line {
  background: #e8deff;
  box-shadow: 0 0 8px rgba(193, 170, 250, 0.9);
}


/* ============================================================
   Hover dark overlay — seluruh canvas gelap kecuali area BGLPS 2
   Overlay dibuat via pseudo-element di .landing-canvas dengan
   radial-gradient transparan di posisi bulan (49.9% 45.7%)
   ============================================================ */
.landing-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(
    circle 180px at 49.9% 45.7%,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.55) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}
.landing-canvas:has(.moon-link:hover)::before {
  opacity: 1;
}

/* ============================================================
   Title block — bottom-center (base 1920x1080)
   ============================================================ */
/* AN ARCHIVE — menyala kuat saat hover */
.title {
  position: absolute;
  left: 927.5px;
  top: 940px;
  width: 313px;
  height: 41px;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 33.79px;
  line-height: 41px;
  letter-spacing: 0.31em;
  text-align: center;
  color: #C5BCFF;
  text-shadow: var(--text-glow-soft);
  z-index: 8;
  transition: text-shadow 0.5s ease, color 0.5s ease;
}
/* EXPLORING THE DEPTHS OF HUMANITY */
.subtitle {
  position: absolute;
  left: 823px;
  top: 995px;
  width: 522px;
  height: 23px;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 19.02px;
  line-height: 23px;
  letter-spacing: 0.25em;
  white-space: nowrap;
  text-align: center;
  color: #C5BCFF;
  text-shadow: var(--text-glow-soft);
  z-index: 8;
  transition: text-shadow 0.5s ease, color 0.5s ease;
}
/* Teks menyala terang saat hover moon */
.landing-canvas:has(.moon-link:hover) .title,
.landing-canvas:has(.moon-link:hover) .subtitle {
  color: #ffffff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(210, 180, 255, 0.95),
    0 0 28px rgba(180, 130, 255, 0.85),
    0 0 55px rgba(150, 100, 255, 0.7),
    0 0 90px rgba(120, 70, 230, 0.5);
}







/* ============================================================
   ARCHIVE PAGE (archive.html)
   Design base 1920 x 1050 — same canvas/background as landing.
   Coordinates below come straight from the Figma spec (the
   spec's inner frame is offset by -132.49px, so every spec
   `top` has 132.49 subtracted to land on this 1920x1050 canvas).
   ============================================================ */

/* Logo + drop point (red dot) sit at the SAME spot as the
   landing page — they inherit the base .brand-mark (top 74) and
   .drop-point (top 80), so no override is needed here. */

/* Soft entrance fade so the page eases in after the portal flash */

.archive-canvas .arc-head,
.archive-canvas .arc-desc,
.archive-canvas .arc-gallery,
.archive-canvas .arc-nav {
  animation: arc-fade-in 0.9s ease-out both;
}
.archive-canvas .arc-gallery { animation-delay: 0.15s; }
.archive-canvas .arc-nav { animation-delay: 0.3s; }
@keyframes arc-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Layout wrapper: heading + description + gallery — absolute Figma coords --- */
.arc-layout {
  position: absolute;
  top: 0;
  left: 0;
  width: 2168px;
  height: 1080px;
  z-index: 6;
  pointer-events: none;
}

/* --- ARCHIVE heading (left 107, top 113, 477×129) --- */
.arc-head {
  position: absolute;
  left: 107px;
  top: 113px;
  width: 477px;
  height: 129px;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}
.arc-title {
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 107.682px;
  line-height: 129px;
  letter-spacing: 0;
  margin: 0;
  color: #C5BCFF;
  text-shadow: var(--text-glow);
  white-space: nowrap;
  transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* Brighten ARCHIVE title when hovering the moon portal */
.archive-canvas:has(.arc-moon-link:hover) .arc-title {
  color: #ffffff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(210, 180, 255, 0.95),
    0 0 28px rgba(180, 130, 255, 0.85),
    0 0 55px rgba(150, 100, 255, 0.7),
    0 0 90px rgba(120, 70, 230, 0.5);
}

/* Moon portal on archive page — same position as landing, links back to index.html */
.arc-moon-link {
  z-index: 6;
}

/* Brand-mark hover on archive page — glow + pointer cursor */
.archive-canvas .brand-mark {
  cursor: pointer;
  transition: filter 0.35s ease, transform 0.35s ease;
}
.archive-canvas .brand-mark:hover,
.archive-canvas .brand-mark:focus-visible {
  filter: drop-shadow(0 0 8px rgba(150, 105, 255, 0.9))
          drop-shadow(0 0 20px rgba(105, 78, 171, 0.7))
          brightness(1.25);
  transform: scale(1.08);
  outline: none;
}

/* Logo-only mark on archive page (no text wrapper) */
.arc-brand-mark {
  position: absolute;
  left: 51px;
  top: 44px;
  width: 36.01px;
  height: 40.7px;
  z-index: 9;
  background-image: url("Subtract.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.4s ease, transform 0.4s ease;
}
.arc-brand-mark:hover,
.arc-brand-mark:focus-visible {
  filter: drop-shadow(0 0 5px rgba(197, 188, 255, 0.6))
          drop-shadow(0 0 12px rgba(150, 105, 255, 0.4))
          brightness(1.15);
  transform: scale(1.07);
  outline: none;
}

/* --- Description (left 107, top 240, 435×34) --- */
.arc-desc {
  position: absolute;
  left: 107px;
  top: 240px;
  width: 435px;
  height: 34px;
  margin: 0;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0;
  color: #786BC7;
}
.arc-desc p { margin: 0; }

/* --- Gallery row: 4 kartu — exact Figma absolute positions --- */
.arc-gallery {
  position: absolute;
  top: 0;
  left: 0;
  width: 2168px;
  height: 1080px;
  pointer-events: auto;
}

/* Card 1: left 108, top 328, 400×604 */
.arc-card-1 {
  position: absolute;
  left: 108px;
  top: 328px;
  width: 400px;
  height: 604px;
  cursor: pointer;
}

/* Card 2: left 613.96, top 328, 410.65×603.22 */
.arc-card-2 {
  position: absolute;
  left: 613.96px;
  top: 328px;
  width: 410.65px;
  height: 603.22px;
}

/* Card 3: left 1135.13, top 328, 410.65×603.22 */
.arc-card-3 {
  position: absolute;
  left: 1135.13px;
  top: 328px;
  width: 410.65px;
  height: 603.22px;
}

/* Card 4: left 1650.68, top 328, 410.65×603.22 */
.arc-card-4 {
  position: absolute;
  left: 1650.68px;
  top: 328px;
  width: 410.65px;
  height: 603.22px;
}

.arc-card {
  position: absolute;
  overflow: hidden;
  border-radius: 0;
  pointer-events: auto;
  transform: translateZ(0);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  box-shadow: none;
}

/* Real archive artwork — fills the card, keeps portrait crop */
.arc-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Number badge (Rectangle + number) overlay */
/* Card 2 num: Rectangle at 832.8, 774.1 → relative to card left 613.96 = 218.84, top 446.1 */
/* Card 3 num: Rectangle at 1355.37, 774.1 → relative to card left 1135.13 = 220.24, top 446.1 */
/* Card 4 num: Rectangle at 1870.93, 774.1 → relative to card left 1650.68 = 220.25, top 446.1 */
.arc-card-num {
  position: absolute;
  left: 218px;
  top: 446px;
  z-index: 3;
  font-family: "Brawler", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18.0844px;
  line-height: 22px;
  color: #525252;
  background: #040404;
  width: 12.63px;
  height: 16.83px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}


.arc-card:hover,
.arc-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 22px 54px rgba(8, 3, 20, 0.6),
              0 0 0 1px rgba(214, 159, 255, 0.55),
              0 0 30px rgba(150, 105, 255, 0.4);
}

/* Red tint overlay on hover for aw 2, aw 3 and aw 4.
   (img is a replaced element so the tint lives on the card via ::after) */
.arc-card-2::after,
.arc-card-3::after,
.arc-card-4::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(220, 30, 30, 0.45);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.arc-card-2:hover::after,
.arc-card-2:focus-within::after,
.arc-card-3:hover::after,
.arc-card-3:focus-within::after,
.arc-card-4:hover::after,
.arc-card-4:focus-within::after {
  opacity: 1;
}
.arc-card-2:hover,
.arc-card-2:focus-within,
.arc-card-3:hover,
.arc-card-3:focus-within,
.arc-card-4:hover,
.arc-card-4:focus-within {
  box-shadow: 0 22px 54px rgba(20, 3, 3, 0.6),
              0 0 0 1px rgba(255, 90, 90, 0.7),
              0 0 30px rgba(220, 40, 40, 0.5);
}



/* --- Decorative focus ring (Ellipse 1) --- */
.arc-ring {
  position: absolute;
  left: 50%;
  top: 52.65%;            /* 517 / 982 */
  width: 157px;
  height: 157px;

  transform: translate(-50%, -50%);
  border: 1px solid rgba(233, 226, 255, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(150, 105, 255, 0.35),
              inset 0 0 24px rgba(197, 188, 255, 0.2);
  z-index: 7;
  pointer-events: none;
  animation: arc-ring-pulse 4s ease-in-out infinite;
}
@keyframes arc-ring-pulse {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
}

/* --- Navigation button (Group 2: left 1773, top 725.49 -> 593) --- */
.arc-nav {
  position: absolute;
  left: 2021px;           /* re-pinned to the right edge of the 2168px canvas */
  top: 593px;             /* 725.49 - 132.49 */

  width: 69.84px;         /* Figma size */
  height: 69.84px;

  display: grid;
  place-items: center;
  border: 2.08px solid #786BC7;
  border-radius: 50%;
  background: rgba(20, 10, 40, 0.35);
  z-index: 8;
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.arc-nav:hover,
.arc-nav:focus-visible {
  background: rgba(120, 107, 199, 0.25);
  box-shadow: 0 0 22px rgba(150, 105, 255, 0.5);
  transform: scale(1.06);
  outline: none;
}
/* Chevron arrow (Vector 1) */
.arc-nav-icon {
  width: 24px;            /* ~25 in the 1512 design */
  height: 24px;

  border-top: 2.4px solid #B9AEF7;
  border-right: 2.4px solid #B9AEF7;
  transform: rotate(45deg) translate(-8%, 8%);
}

/* ============================================================
   Archive file pop-up (Seshomaru — AW-01)
   Opens when the first card is clicked. Mirrors the Figma
   dialog: full-screen dim backdrop + a wide panel split into
   a portrait image (left) and metadata (right).
   ============================================================ */
.arc-modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.arc-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.arc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 7, 38, 0.58);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.arc-modal-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 42% 1fr;
  width: 1560px;
  height: 780px;
  background: #2B2B2B;
  border: 1.13px solid #786BC7;
  border-radius: 4px;
  box-shadow: 0 30px 90px rgba(6, 2, 16, 0.7);
  overflow: hidden;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.4s ease;
}
.arc-modal.is-open .arc-modal-dialog {
  transform: translateY(0) scale(1);
}

/* Close (×) top-right */
.arc-modal-close {
  position: absolute;
  top: 2.2%;
  right: 2%;
  width: 2.2vw;
  height: 2.2vw;
  min-width: 26px;
  min-height: 26px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
}
.arc-modal-close span,
.arc-modal-close::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #786BC7;
  transform: translate(-50%, -50%) rotate(45deg);
}
.arc-modal-close span {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.arc-modal-close:hover span,
.arc-modal-close:hover::before {
  background: #B9AEF7;
}

/* Left: portrait image */
.arc-modal-media {
  position: relative;
  overflow: hidden;
  background: #14061f;
}
.arc-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.arc-modal-tag {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  font-family: "Bona Nova", Georgia, serif;
  font-size: clamp(11px, 1vw, 16px);
  letter-spacing: 0.35em;
  color: rgba(255, 243, 197, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Right: metadata */
.arc-modal-body {
  position: relative;
  padding: 4% 5% 4% 4.5%;
  overflow-y: auto;
  color: #969074;
  font-family: "Bona Nova", Georgia, serif;
}
.arc-modal-kicker {
  font-size: clamp(11px, 1.02vw, 16px);
  letter-spacing: 0.14em;
  color: rgba(255, 243, 197, 0.59);
  margin: 0;
}
.arc-modal-code {
  font-size: clamp(11px, 1.02vw, 16px);
  letter-spacing: 0.2em;
  color: rgba(255, 243, 197, 0.59);
  margin: 0.2em 0 0.4em;
}
.arc-modal-name {
  font-size: clamp(30px, 3.94vw, 60px);
  line-height: 1.1;
  font-weight: 400;
  color: rgba(255, 243, 197, 0.7);
  margin: 0;
}
.arc-modal-role {
  font-size: clamp(15px, 1.4vw, 22px);
  letter-spacing: 0.06em;
  color: #786BC7;
  margin: 0.3em 0 1.4em;
}
.arc-modal-field {
  margin: 0 0 1.3em;
}
.arc-modal-label {
  font-size: clamp(12px, 1.17vw, 18px);
  letter-spacing: 0.06em;
  color: rgba(170, 155, 93, 0.75);
  margin: 0 0 0.35em;
}
.arc-modal-value {
  font-size: clamp(12px, 1.17vw, 18px);
  color: rgba(255, 243, 197, 0.7);
  margin: 0;
}
.arc-modal-text {
  font-size: clamp(12px, 1.2vw, 18px);
  line-height: 1.35;
  color: #969074;
  margin: 0;
  max-width: 34em;
}
.arc-modal-cta {
  margin-top: 1.6em;
}
.arc-modal-own {
  font-size: clamp(18px, 2.2vw, 33px);
  color: rgba(184, 156, 111, 0.95);
  margin: 0 0 0.25em;
}
.arc-modal-status {
  font-size: clamp(12px, 1.17vw, 18px);
  letter-spacing: 0.05em;
  color: #A499E4;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {

  * { animation: none !important; }
}

/* ============================================================
   GRANTED PAGE (granted.html) — exact Figma spec
   Canvas: 2168 × 1080
   ============================================================ */

.gr-canvas {
  background: #000;
}

/* Background: BGLP.png — full screen cover semua device */
.gr-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: url("BGLP.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Rectangle 12: dark overlay full screen */
.gr-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* BGDP portrait: BGDP.png (left 765, top 188, 638×800) */
.gr-portrait-img {
  position: absolute;
  left: 765px;
  top: 188px;
  width: 638px;
  height: 800px;
  z-index: 4;
  background-image: url("BGDP.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Rectangle 14: gradient + border overlay (centered, top 188, 638×800) */
.gr-portrait {
  position: absolute;
  left: calc(50% - 638px / 2);
  top: 188px;
  width: 638px;
  height: 800px;
  z-index: 5;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(3,3,3,0.36) 54.81%, rgba(105,105,105,0) 100%);
  border: 1px solid #9B8BFF;
  box-shadow: 0 0 24.4px 9px rgba(185, 65, 255, 0.25);
  pointer-events: none;
}

/* logosuc image (left 932, top 439, 308×309) — berputar */
.gr-logosuc {
  position: absolute;
  left: 932px;
  top: 439px;
  width: 308px;
  height: 309px;
  z-index: 6;
  background-image: url("WhatsApp Image 2026-07-09 at 18.08.29.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: gr-logosuc-spin 18s linear infinite;
}
@keyframes gr-logosuc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Lingkaran statis di tengah portrait — tanpa cahaya */
.gr-ring-glow {
  position: absolute;
  left: calc(50% - 117.02px);
  top: 471px;
  width: 234.04px;
  height: 234.04px;
  z-index: 7;
  border-radius: 50%;
  pointer-events: none;
  border: 1.3px solid #694EAB;
  background: transparent;
}

/* logosuc di tengah kolom portrait (center: left 930, top 433.5, 308×309) */
.gr-logosuc-center {
  position: absolute;
  left: 930px;
  top: 433.5px;
  width: 308px;
  height: 309px;
  z-index: 8;
  background-image: url("logosuc.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: gr-logosuc-spin 18s linear infinite;
}

/* ACCESS GRANTED heading (left 841, top 302, 486×66) */
.gr-heading {
  position: absolute;
  left: 841px;
  top: 302px;
  width: 486px;
  height: 66px;
  z-index: 8;
  font-family: "Bona Nova", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 54.83px;
  line-height: 66px;
  text-align: center;
  color: #A99AFF;
  margin: 0;
}
@keyframes gr-glow-in {
  0%   { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* THE TRUTH ACKNOWLEDGES YOU (centered, top 372.69, 446×32) */
.gr-sub {
  position: absolute;
  left: calc(50% - 446px / 2);
  top: 372.69px;
  width: 446px;
  height: 32px;
  z-index: 8;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 26.3919px;
  line-height: 32px;
  text-align: center;
  color: #CFB7FF;
  margin: 0;
  animation: gr-fade-up 0.7s ease-out 0.35s both;
}

/* Rectangle 16 outer border (centered, top 777, 430×141) */
.gr-reward-box {
  position: absolute;
  left: calc(50% - 430px / 2 - 1px);
  top: 777px;
  width: 430px;
  height: 141px;
  z-index: 8;
  box-sizing: border-box;
  border: 1.93736px solid #786BC7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  animation: gr-fade-up 0.65s ease-out 0.6s both;
}

/* YOU MAY CLAIM WHAT IS YOURS. (centered within box, top 803.58, 313×23)
   top relative to box: 803.58 - 777 = 26.58px */
.gr-reward-q {
  position: absolute;
  left: calc(50% - 313px / 2 - 0.19px);
  top: 26.58px;
  width: 313px;
  height: 23px;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 19.2792px;
  line-height: 23px;
  text-align: center;
  color: #A99AFF;
  margin: 0;
  white-space: nowrap;
}

/* CLAIM REWARD button (centered within box, top 832, 373.16×49.41)
   top relative to box: 832 - 765 = 67px */
.gr-claim-btn {
  position: absolute;
  left: calc(50% - 373.16px / 2 - 1.31px);
  top: 67px;
  width: 373.16px;
  height: 49.41px;
  box-sizing: border-box;
  background: rgba(55, 22, 255, 0.19);
  border: 1.20554px solid #786BC7;
  color: #786BC7;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 25.8389px;
  line-height: 31px;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.gr-claim-btn:hover,
.gr-claim-btn:focus-visible {
  background: rgba(100, 60, 255, 0.35);
  color: #C5BCFF;
  box-shadow: 0 0 20px 4px rgba(155, 65, 255, 0.45);
  outline: none;
}

/* Close button × (left 1362, top 203, 28×28, #C1AAFA) */
.gr-close {
  position: absolute;
  left: 1362px;
  top: 203px;
  width: 28px;
  height: 28px;
  z-index: 9;
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease;
}
.gr-close:hover,
.gr-close:focus-visible {
  transform: scale(1.15);
  outline: none;
}
.gr-close-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: calc(28px * 0.658);
  background: #C1AAFA;
  border-radius: 1px;
  display: block;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.gr-close-line-1 { transform: translate(-50%, -50%) rotate(45deg); }
.gr-close-line-2 { transform: translate(-50%, -50%) rotate(-45deg); }
.gr-close:hover .gr-close-line,
.gr-close:focus-visible .gr-close-line {
  background: #e8deff;
  box-shadow: 0 0 8px rgba(193, 170, 250, 0.9);
}

/* Entrance animations */
@keyframes gr-fade-up {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

.gr-canvas .gr-portrait-img    { animation: gr-fade-up 1s   cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.gr-canvas .gr-portrait        { animation: gr-fade-up 1s   cubic-bezier(0.22,1,0.36,1) 0.1s  both; }
.gr-canvas .gr-ring-glow       { animation: gr-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
/* ACCESS GRANTED: muncul bersamaan layar, delay 0.2s setelah overlay fade selesai */
.gr-canvas .gr-heading         { animation: gr-glow-in 1.0s cubic-bezier(0.22,1,0.36,1) 0.2s  both; }
/* logosuc-center: fade-up + spin bersama */
.gr-canvas .gr-logosuc-center  { animation: gr-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s both, gr-logosuc-spin 18s linear 1s infinite; }
/* logosuc (lama, jika masih ada): fade-up + spin */
.gr-canvas .gr-logosuc         { animation: gr-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s both, gr-logosuc-spin 18s linear 1s infinite; }
.gr-canvas .gr-sub             { animation: gr-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s  both; }
.gr-canvas .gr-reward-box      { animation: gr-fade-up 0.65s cubic-bezier(0.22,1,0.36,1) 0.45s both; }
.gr-canvas .gr-close           { animation: gr-fade-up 0.5s cubic-bezier(0.22,1,0.36,1) 0.1s  both; }

/* ============================================================
   ARCHIVE NOTES OVERLAY (droppoint.html → click ACCESS ARCHIVE NOTES)
   Panel sits in a fixed fullscreen overlay, centered on the 2168×1080
   design canvas. All Figma coords are absolute inside the panel.
   ============================================================ */

/* Fullscreen dim layer — hidden by default */
.an-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.an-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Dim backdrop */
.an-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

/* Panel — 884×800, same proportions as the Figma Group 55 */
.an-panel {
  position: relative;
  width: 884px;
  height: 800px;
  flex: none;
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.an-overlay.is-open .an-panel {
  transform: translateY(0) scale(1);
}

/* BGDP portrait image — fills panel */
.an-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("BGDP.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Rectangle 14: gradient + violet border + purple glow */
.an-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(3, 3, 3, 0.36) 54.81%, rgba(105, 105, 105, 0) 100%);
  border: 1px solid #9B8BFF;
  box-shadow: 0 0 24.4px 9px rgba(185, 65, 255, 0.25);
  pointer-events: none;
}

/* Close × button — top-right corner of the panel */
.an-close {
  position: absolute;
  right: 12px;
  top: 11px;
  width: 28px;
  height: 28px;
  z-index: 10;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease;
}
.an-close:hover,
.an-close:focus-visible { transform: scale(1.15); outline: none; }
.an-close-line {
  position: absolute;
  left: 50%; top: 50%;
  width: 2px;
  height: calc(28px * 0.658);
  background: #C1AAFA;
  border-radius: 1px;
  display: block;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.an-close-line-1 { transform: translate(-50%, -50%) rotate(45deg); }
.an-close-line-2 { transform: translate(-50%, -50%) rotate(-45deg); }
.an-close:hover .an-close-line,
.an-close:focus-visible .an-close-line {
  background: #e8deff;
  box-shadow: 0 0 8px rgba(193, 170, 250, 0.9);
}

/* ARCHIVE NOTES heading — Figma top 243, centered */
.an-title {
  position: absolute;
  left: 50%;
  top: 243px;
  transform: translateX(-50%);
  width: 443px;
  height: 66px;
  z-index: 2;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 54.83px;
  line-height: 66px;
  text-align: center;
  color: #A99AFF;
  margin: 0;
  white-space: nowrap;
}

/* SUBMIT YOUR RECOVERED SEQUENCE — Figma top 314, centered */
.an-sub {
  position: absolute;
  left: 50%;
  top: 314px;
  transform: translateX(-50%);
  width: 488px;
  height: 32px;
  z-index: 2;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 26.3919px;
  line-height: 32px;
  text-align: center;
  color: #CFB7FF;
  margin: 0;
  white-space: nowrap;
}

/* Each note row — absolute within the panel, Figma 637×119 centered */
.an-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 637px;
  height: 119px;
  z-index: 3;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.01);
  border: 1.47332px solid #786BC7;
  box-shadow: 0 0 118.058px -36.5547px #6D61B5;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 0;
}

/* Circle icon holder — Figma Ellipse 5: 69.05×69.05, border #786BC7 */
.an-row-circle {
  flex: none;
  width: 69.05px;
  height: 69.05px;
  border-radius: 50%;
  border: 1.35388px solid #786BC7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Icon images inside each circle — LA1.png … LA4.png */
.an-row-icon {
  width: 51px;
  height: 51px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.an-row-icon-1 { background-image: url("LA1.png"); }
.an-row-icon-2 { background-image: url("LA2.png"); }
.an-row-icon-3 { background-image: url("LA3.png"); }
.an-row-icon-4 { background-image: url("LA4.png"); }

/* Note label — Figma font: Century / 25.9592px / #BFB4FF */
.an-row-label {
  flex: 1;
  padding-left: 20px;
  font-family: "Century", "Times New Roman", Georgia, serif;
  font-weight: 400;
  font-size: 25.9592px;
  line-height: 31px;
  color: #BFB4FF;
  white-space: nowrap;
}

/* Arrow button — revrs.png image */
.an-row-arrow {
  flex: none;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.25s ease;
}
.an-row-arrow:hover {
  filter: brightness(1.4) drop-shadow(0 0 4px rgba(155, 65, 255, 0.7));
}
.an-row-arrow-img {
  width: 36px;
  height: 36px;
  background-image: url("revrs.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Footer motto */
.an-motto {
  position: absolute;
  left: 50%;
  top: 925px;
  transform: translateX(-50%);
  width: 563px;
  z-index: 2;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 22.268px;
  line-height: 27px;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
}

/* Reset <button> to look like the existing .dp-assist-link anchor */
.dp-assist-link--btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline;
}

/* ============================================================
   ARCHIVE NOTES PAGE (archive-notes.html)
   Full 2168×1080 canvas — exact Figma Frame 223 coordinates.
   ============================================================ */

.an-page-canvas {
  background: #000;
}

/* Background photo (same as droppoint — BGLP.png) */
.an-page-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: url("BGLP.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Rectangle 12: dark overlay rgba(0,0,0,0.4) */
.an-page-dim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* BGDP portrait image — left 642, top 194, 884×798 */
.an-page-portrait-img {
  position: absolute;
  left: 642px;
  top: 194px;
  width: 884px;
  height: 798px;
  z-index: 4;
  background-image: url("BGDP.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Rectangle 14: gradient + violet border + purple glow
   Figma: centered horizontally, top calc(50% - 800px/2 + 54px) */
.an-page-portrait-border {
  position: absolute;
  left: calc(50% - 884px / 2);
  top: calc(50% - 800px / 2 + 54px);
  width: 884px;
  height: 800px;
  z-index: 5;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(3, 3, 3, 0.36) 54.81%, rgba(105, 105, 105, 0) 100%);
  border: 1px solid #9B8BFF;
  box-shadow: 0 0 24.4px 9px rgba(185, 65, 255, 0.25);
  pointer-events: none;
}

/* Close × — left 1488, top 205, 28×28, #C1AAFA */
.an-page-close {
  position: absolute;
  left: 1488px;
  top: 205px;
  width: 28px;
  height: 28px;
  z-index: 9;
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease;
}
.an-page-close:hover,
.an-page-close:focus-visible {
  transform: scale(1.15);
  outline: none;
}
.an-page-close-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: calc(28px * 0.658);
  background: #C1AAFA;
  border-radius: 1px;
  display: block;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.an-page-close-line-1 { transform: translate(-50%, -50%) rotate(45deg); }
.an-page-close-line-2 { transform: translate(-50%, -50%) rotate(-45deg); }
.an-page-close:hover .an-page-close-line,
.an-page-close:focus-visible .an-page-close-line {
  background: #e8deff;
  box-shadow: 0 0 8px rgba(193, 170, 250, 0.9);
}

/* ARCHIVE NOTES heading — centered, top 243, 443×66 */
.an-page-title {
  position: absolute;
  left: calc(50% - 443px / 2 + 0.5px);
  top: 243px;
  width: 443px;
  height: 66px;
  z-index: 6;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 54.83px;
  line-height: 66px;
  text-align: center;
  color: #A99AFF;
  margin: 0;
  white-space: nowrap;
}

/* SUBMIT YOUR RECOVERED SQUENCE — centered, top 314, 488×32 */
.an-page-sub {
  position: absolute;
  left: calc(50% - 488px / 2);
  top: 314px;
  width: 488px;
  height: 32px;
  z-index: 6;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 26.3919px;
  line-height: 32px;
  text-align: center;
  color: #CFB7FF;
  margin: 0;
  white-space: nowrap;
}

/* Note row — Figma 637×119, centered horizontally.
   top is set via inline style on each row. */
.an-page-row {
  position: absolute;
  left: calc(50% - 637px / 2 - 0.5px);
  width: 637px;
  height: 119px;
  z-index: 6;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.01);
  border: 1.47332px solid #786BC7;
  box-shadow: 0 0 118.058px -36.5547px #6D61B5;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.an-page-row:hover {
  background: rgba(120, 107, 199, 0.07);
  box-shadow: 0 0 118.058px -20px #7B6FD0;
}

/* Circle — Figma Ellipse 5: 69.05×69.05, border #786BC7
   left 807.69 relative to canvas → relative to row left:
   807.69 - (50% - 318.5) = varies by viewport; we use flex start */
.an-page-circle {
  flex: none;
  width: 69.05px;
  height: 69.05px;
  border-radius: 50%;
  border: 1.35388px solid #786BC7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Icon inside circle — using LA1–LA4.png as stand-ins */
.an-page-icon {
  width: 51px;
  height: 51px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.an-page-icon-1 { background-image: url("LA1.png"); }
.an-page-icon-2 { background-image: url("LA2.png"); }
.an-page-icon-3 { background-image: url("LA3.png"); }
.an-page-icon-4 { background-image: url("LA4.png"); }

/* Note label — Century 25.9592px / #BFB4FF */
.an-page-label {
  flex: 1;
  padding-left: 24px;
  font-family: "Century", "Times New Roman", Georgia, serif;
  font-weight: 400;
  font-size: 25.9592px;
  line-height: 31px;
  color: #BFB4FF;
  white-space: nowrap;
}

/* Arrow button — revrs.png image */
.an-page-arrow {
  flex: none;
  width: 52px;
  height: 52px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.25s ease;
}
.an-page-arrow:hover {
  filter: brightness(1.4) drop-shadow(0 0 4px rgba(155, 65, 255, 0.7));
}
.an-page-arrow-img {
  width: 40px;
  height: 40px;
  background-image: url("revrs.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Footer motto — centered, top 925.29, 563×27 */
.an-page-motto {
  position: absolute;
  left: calc(50% - 563px / 2 - 0.5px);
  top: 925.29px;
  width: 563px;
  height: 27px;
  z-index: 6;
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  font-size: 22.268px;
  line-height: 27px;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
}

/* Entrance stagger animations for the archive-notes page */
@keyframes an-page-enter {
  0%   { opacity: 0; transform: translateY(16px); filter: blur(5px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.an-page-canvas .an-page-portrait-img  { animation: an-page-enter 1s   cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.an-page-canvas .an-page-portrait-border { animation: an-page-enter 1s  cubic-bezier(0.22,1,0.36,1) 0.1s  both; }
.an-page-canvas .an-page-title         { animation: an-page-enter 0.75s cubic-bezier(0.22,1,0.36,1) 0.2s  both; }
.an-page-canvas .an-page-sub           { animation: an-page-enter 0.65s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.an-page-canvas .an-page-row:nth-child(1) { animation: an-page-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.35s both; }
.an-page-canvas .an-page-row:nth-child(2) { animation: an-page-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.42s both; }
.an-page-canvas .an-page-row:nth-child(3) { animation: an-page-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.49s both; }
.an-page-canvas .an-page-row:nth-child(4) { animation: an-page-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.56s both; }
.an-page-canvas .an-page-motto         { animation: an-page-enter 0.55s cubic-bezier(0.22,1,0.36,1) 0.62s both; }
.an-page-canvas .an-page-close         { animation: an-page-enter 0.5s  cubic-bezier(0.22,1,0.36,1) 0.1s  both; }

/* ============================================================
    Drop Point — animasi masuk (stagger + blur-fade dari bawah)
    ============================================================ */

@keyframes dp-enter {
  0%   { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes dp-enter-portrait {
  0%   { opacity: 0; transform: translateY(10px) scale(0.985); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1);         filter: blur(0); }
}

.dp-canvas .dp-portrait-img { animation: dp-enter-portrait 1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
.dp-canvas .dp-portrait      { animation: dp-enter-portrait 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.dp-canvas .dp-heading       { animation: dp-enter 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
.dp-canvas .dp-sub           { animation: dp-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.dp-canvas .dp-label         { animation: dp-enter 0.6s  cubic-bezier(0.22, 1, 0.36, 1) 0.42s both; }
.dp-canvas .dp-seq           { animation: dp-enter 0.6s  cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; }
.dp-canvas .dp-verify        { animation: dp-enter 0.6s  cubic-bezier(0.22, 1, 0.36, 1) 0.58s both; }
.dp-canvas .dp-assist-q      { animation: dp-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both; }
.dp-canvas .dp-assist-row    { animation: dp-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both; }
.dp-canvas .dp-close         { animation: dp-enter 0.5s  cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }