/* ============================================================
   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; }

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

/* Full-window stage — centers the scaled design canvas.
   The design is scaled to CONTAIN (never cropped) so on aspect
   ratios that differ from the 1920x1050 canvas there is leftover
   space around it. Instead of black bars, we fill that space with
   a blurred, darkened copy of the background image (::before) so
   the scene appears to bleed edge-to-edge on any screen. */
.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;
}
.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;

  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 landing page: .photo cover penuh canvas */
.landing-canvas .photo {
  display: block;
  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;
}





/* ============================================================
   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 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: 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;
}

/* ============================================================
   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;
}
.page-transition.is-leaving {
  animation: pt-fade-out 0.3s ease forwards;
}
.page-transition.is-entering {
  opacity: 1;
  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; inset: 0; z-index: 9; pointer-events: none; }

/* Logo mark — Subtract.png (raised higher) */
.brand-mark {
  position: absolute;
  left: 51px;
  top: 44px;
  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 (raised to sit with the logo) */
.brand-text {
  position: absolute;
  left: 95.14px;
  top: 50px;
  width: 197px;

  font-family: "Cantarell", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20.19px;
  line-height: 29px;
  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: 1936px;
  top: 50px;
  width: 180.88px;
  height: 30px;
  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: 30px;
  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: 10px;
  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: 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: 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: 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: 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 — full screen cover semua device */
.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 765, top 188, 638×800) */
.dp-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: border + gradient overlay (centered, top 188, 638×800) */
.dp-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;
}

/* DROP POINT heading (centered, top 368, 342×66) */
.dp-heading {
  position: absolute;
  left: calc(50% - 342px / 2);
  top: 368px;
  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 439, 488×32) */
.dp-sub {
  position: absolute;
  left: calc(50% - 488px / 2);
  top: 439px;
  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 840, top 531, 171×19) */
.dp-label {
  position: absolute;
  left: 840px;
  top: 531px;
  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;
}

/* 6 input boxes — Figma spec, top 562.26, size 70.49×70.49 */
.dp-seq {
  position: absolute;
  top: 562.26px;
  left: 840px;
  width: calc(1257.51px - 840px + 70.49px); /* 487.99px */
  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;
}
.dp-seq-box:nth-child(1) { left: 0; }
.dp-seq-box:nth-child(2) { left: calc(923.5px - 840px); }
.dp-seq-box:nth-child(3) { left: calc(1007px - 840px); }
.dp-seq-box:nth-child(4) { left: calc(1090.51px - 840px); }
.dp-seq-box:nth-child(5) { left: calc(1174.01px - 840px); }
.dp-seq-box:nth-child(6) { left: calc(1257.51px - 840px); }
.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 — centered on input column (840 + 488/2 - 223/2 = 972.5px) */
.dp-verify {
  position: absolute;
  left: calc(840px + (1257.51px - 840px + 70.49px) / 2 - 223px / 2);
  top: 669px;
  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 769, 141×18) */
.dp-assist-q {
  position: absolute;
  left: calc(50% - 141px / 2 - 0.5px);
  top: 769px;
  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 (centered, top 792, 166×17) */
.dp-assist-link {
  position: absolute;
  left: calc(50% - 166px / 2 - 8px);
  top: 792px;
  width: 166px;
  height: 17px;
  z-index: 6;
  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;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.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 — sejajar vertikal dengan ACCESS ARCHIVE NOTES (left 1164, top 796, 10×10) */
.dp-assist-dot {
  position: absolute;
  left: 1164px;
  top: calc(792px + 17px / 2 - 10px / 2); /* vertically aligned with dp-assist-link */
  width: 10px;
  height: 10px;
  z-index: 6;
  border-radius: 50%;
  background: #FF1010;
  animation: none;
  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 link (sibling) */
.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 1362, top 203, 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: 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;
}
.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: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 2vw;
  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: min(89vw, 1346px);
  height: min(84vh, 671px);
  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;
}

/* Stack the dialog on narrow screens */
@media (max-width: 720px) {
  .arc-modal-dialog {
    grid-template-columns: 1fr;
    grid-template-rows: 45% 1fr;
    height: min(90vh, 760px);
  }
}

/* ============================================================
   RESPONSIVE LAYOUT
   The design is authored for wide (landscape) screens. These
   breakpoints keep it usable on laptops, tablets and phones —
   in both portrait and landscape — without black bars or
   clipped content.
   ============================================================ */

/* ============================================================
   RESPONSIVE — WIDE / LANDSCAPE SCREENS
   The design canvas is scaled proportionally (CONTAIN, via
   --scale set in script.js) so the whole design fits inside the
   viewport with no cropping and no distortion; any leftover
   space is covered by the viewport's blurred backdrop.


   RESPONSIVE — PHONES / PORTRAIT / SHORT WINDOWS (.reflow)
   On small or portrait screens a wide landscape design would
   be cropped too much, so script.js adds the .reflow class and
   the rules below turn the page into a fluid, scrollable mobile
   layout that adapts to any device.
   ============================================================ */

/* Let the page scroll when it has reflowed to a mobile layout.
   Two selector sets are provided for maximum browser coverage:
     1. .reflow-active — a class script.js adds to <html>; works in
        every browser (the reliable primary path).
     2. :has(.canvas.reflow) — a progressive enhancement for
        browsers that support :has(); harmless where they don't. */
html.reflow-active,
html.reflow-active body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}
html:has(.canvas.reflow),
body:has(.canvas.reflow) {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}
html.reflow-active .viewport,
.viewport:has(.canvas.reflow) {
  position: static;
  display: block;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

/* The canvas flows naturally and grows with its content */
.canvas.reflow {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  transform: none;
  overflow: visible;
  background: transparent;
}

/* Keep the eclipse background fixed behind the scrolling content */
.canvas.reflow .photo,
.canvas.reflow .scene,
.canvas.reflow .clouds,
.canvas.reflow .fog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

/* ---------- Landing page (index.html) reflow ---------- */
.canvas.reflow:not(.archive-canvas) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vh;
  padding: 16vh 8vw 12vh;
  text-align: center;
}

/* Brand pinned top-left, laid out inline (respects notch safe area) */
.canvas.reflow .brand {
  position: fixed;
  inset: auto;
  top: calc(2.5vh + env(safe-area-inset-top, 0px));
  left: calc(6vw + env(safe-area-inset-left, 0px));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.canvas.reflow .brand-mark {
  position: static;
  left: auto;
  top: auto;
  width: 24px;
  height: 28px;
}
.canvas.reflow .brand-text {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  font-size: 15px;
}

/* Drop point pinned top-right (respects notch safe area) */
.canvas.reflow .drop-point {
  position: fixed;
  left: auto;
  right: calc(6vw + env(safe-area-inset-right, 0px));
  top: calc(3vh + env(safe-area-inset-top, 0px));
  z-index: 10;
}
.canvas.reflow .drop-dot {
  left: auto;
  right: -18px;
}

/* Title + subtitle flow below the moon */
.canvas.reflow .title {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  max-width: 90vw;
  height: auto;
  font-size: clamp(22px, 7vw, 40px);
  line-height: 1.3;
  white-space: normal;
}
.canvas.reflow .subtitle {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  max-width: 92vw;
  height: auto;
  font-size: clamp(12px, 3.8vw, 18px);
  line-height: 1.5;
  white-space: normal;
  letter-spacing: 0.18em;
}

/* ---------- Archive page (archive.html) reflow ---------- */
.canvas.reflow.archive-canvas {
  display: block;
  padding: 13vh 6vw 14vh;
}
.canvas.reflow .arc-head {
  position: static;
  left: auto;
  top: auto;
  max-width: none;
  margin-bottom: 5vh;
}
.canvas.reflow .arc-title {
  font-size: clamp(46px, 15vw, 108px);
}
.canvas.reflow .arc-desc {
  width: auto;
  max-width: 100%;
}
.canvas.reflow .arc-gallery {
  position: static;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4vw;
  pointer-events: auto;
}
.canvas.reflow .arc-card {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 293 / 430;
}
.canvas.reflow .arc-ring {
  display: none;
}
.canvas.reflow .arc-nav {
  position: fixed;
  left: auto;
  top: auto;
  right: calc(6vw + env(safe-area-inset-right, 0px));
  bottom: calc(4vh + env(safe-area-inset-bottom, 0px));
  z-index: 12;
}

/* Single column of cards on the narrowest phones */
@media (max-width: 520px) {
  .canvas.reflow .arc-gallery {
    grid-template-columns: 1fr;
    gap: 6vw;
  }
}

@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; }

/* ============================================================
   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-link   { animation: dp-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both; }
.dp-canvas .dp-assist-dot    { 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; }