/* =========================================================
   HOLO — Efek holografik 3D popout
   ========================================================= */

/* ---------- Layer holografik pembungkus ---------- */
.holo-layer{
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transform:translateZ(0);
  transition:
    opacity .35s ease,
    transform var(--pop-dur) var(--pop-ease);
  z-index:5;
  transform-style:preserve-3d;
  overflow:hidden;
}
.holo-layer::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1.8px;
  background:conic-gradient(from 0deg,
    #ff2e88, #ff9a00, #ffe600, #00ffa3,
    #00c2ff, #8338ec, #ff2e88);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:holoHue var(--holo-hue-speed) linear infinite;
  filter:blur(.3px) saturate(1.6);
}
.holo-layer::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(150px 150px at var(--hx,50%) var(--hy,50%),
      rgba(255,255,255,.65), rgba(255,255,255,0) 62%),
    linear-gradient(115deg,
      transparent 30%,
      rgba(255,0,180,.55) 40%,
      rgba(255,220,0,.55)  47%,
      rgba(0,255,180,.55)  54%,
      rgba(90,140,255,.55) 62%,
      transparent 72%);
  background-size:100% 100%, 260% 260%;
  background-position:center, 200% 50%;
  mix-blend-mode:screen;
  opacity:0;
}

/* ---------- Kartu popout ---------- */
.item.holo-on{
  transform:
    translateZ(var(--pop-lift))
    rotateX(8deg) rotateY(-6deg)
    scale(1.05);
  border-color:transparent !important;
  box-shadow:
    0 1px 0 rgba(180,220,255,.45) inset,
    0 0 0 1px rgba(180,220,255,.55),
    0 60px 100px -30px rgba(0,0,0,.95),
    0 90px 140px -40px rgba(79,140,255,.55),
    0 0 120px -6px rgba(124,92,255,.7);
}
.item.holo-on > .item-head{ transform: translateZ(var(--pop-head)); }
.item.holo-on > .bullets{ transform: translateZ(var(--pop-body)); }
.item.holo-on > .holo-layer{
  transform: translateZ(var(--pop-border));
  opacity:1;
}
.item.holo-on > .holo-layer::after{
  animation: holoSweep var(--holo-sweep-speed) cubic-bezier(.2,.7,.3,1) forwards;
}

/* =========================================================
   ★ FOTO ITEM POPOUT — arah mengikuti pointer ★
   ========================================================= */
.item.holo-on > .item-head > .item-photo{
  transform:
    /* 1. geser ke arah pointer (X dan Y) + dorong ke depan (Z) */
    translate3d(
      var(--pop-dir-x, 0px),
      calc(var(--pop-photo-y) + var(--pop-dir-y, 0px)),
      var(--pop-photo-z)
    )
    /* 2. rotasi menghadap pointer */
    rotateX(calc(-8deg + var(--pop-rot-x, 0deg)))
    rotateY(calc( 6deg + var(--pop-rot-y, 0deg)))
    /* 3. perbesar */
    scale(var(--pop-photo-scale));
  border-color:rgba(200,240,255,.95);
  box-shadow:
    0 0 0 2px rgba(200,240,255,.75),
    0 0 40px  rgba(140,220,255,1),
    0 0 90px  rgba(124,92,255,.95),
    0 0 160px rgba(79,140,255,.8),
    0 0 260px rgba(124,92,255,.55);
  filter:saturate(1.4) contrast(1.08) brightness(1.12);
  z-index:50;
  pointer-events:none;
}

/* Scanline + cone overlay pada foto */
.item-photo::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(140,220,255,.55) 0px,
      rgba(140,220,255,.55) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg,
      rgba(180,230,255,.16) 0%,
      transparent 30%,
      transparent 70%,
      rgba(180,230,255,.16) 100%);
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:2;
}
.item-photo::before{
  content:"";
  position:absolute;
  left:50%;top:100%;
  width:260%;height:300%;
  transform:translateX(-50%);
  background:
    linear-gradient(180deg,
      rgba(140,215,255,.75) 0%,
      rgba(124,92,255,.4) 45%,
      rgba(79,140,255,0) 100%);
  clip-path:polygon(44% 0, 56% 0, 100% 100%, 0% 100%);
  filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:-1;
}
.item.holo-on > .item-head > .item-photo::after{
  opacity:1;
  animation:holoScanline 1.2s linear infinite;
}
.item.holo-on > .item-head > .item-photo::before{
  opacity:1;
  animation:holoCone 1.1s ease-out;
}

/* ---------- Beam & sparkles kartu ---------- */
.item.holo-on::after{
  content:"";
  position:absolute;
  left:10%; right:10%; top:-14px; height:20px;
  background:linear-gradient(90deg, transparent, rgba(180,215,255,.95), transparent);
  filter:blur(7px);
  border-radius:50%;
  opacity:.95;
  animation:holoBeam var(--holo-sweep-speed) ease-out;
  pointer-events:none;
  z-index:6;
}
.item.holo-on::before,
.chip.holo-on::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(2px 2px at 18% 22%, #fff, transparent 60%),
    radial-gradient(2px 2px at 78% 30%, #b8ffe8, transparent 60%),
    radial-gradient(2px 2px at 30% 82%, #ffd6f5, transparent 60%),
    radial-gradient(2px 2px at 85% 78%, #ffe89a, transparent 60%),
    radial-gradient(2px 2px at 50% 10%, #fff, transparent 60%);
  animation:holoSparkle 1.2s ease-out forwards;
  pointer-events:none;
  z-index:7;
  transform: translateZ(calc(var(--pop-head) + 20px));
  opacity:0;
}

/* ---------- Chip popout ---------- */
.chip.holo-on{
  transform:
    translateZ(28px)
    rotateX(10deg)
    scale(1.08);
  border-color:transparent !important;
  box-shadow:
    0 0 0 1px rgba(180,220,255,.65),
    0 30px 55px -18px rgba(124,92,255,.9),
    0 0 80px -6px rgba(79,140,255,.75),
    inset 0 0 30px rgba(160,200,255,.18);
}
.chip.holo-on > span{ transform: translateZ(22px); }
.chip.holo-on > .chip-tools{ transform: translateZ(30px); }
.chip.holo-on > .holo-layer{
  transform: translateZ(14px);
  opacity:1;
}
.chip.holo-on > .holo-layer::after{
  animation: holoSweep var(--holo-sweep-speed) cubic-bezier(.2,.7,.3,1) forwards;
}

/* ---------- Avatar popout ---------- */
.hc-avatar::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    repeating-linear-gradient(180deg,
      rgba(140,220,255,.55) 0px,
      rgba(140,220,255,.55) 1px,
      transparent 1px,
      transparent 3px),
    linear-gradient(180deg,
      rgba(180,230,255,.18) 0%,
      transparent 30%,
      transparent 70%,
      rgba(180,230,255,.18) 100%);
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:4;
}
.hc-avatar::before{
  content:"";
  position:absolute;
  left:50%;top:100%;
  width:200%;height:230%;
  transform:translateX(-50%);
  background:
    linear-gradient(180deg,
      rgba(140,215,255,.75) 0%,
      rgba(124,92,255,.4) 45%,
      rgba(79,140,255,0) 100%);
  clip-path:polygon(44% 0, 56% 0, 100% 100%, 0% 100%);
  filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:-1;
}
.hc-inner.holo-on .hc-avatar{
  transform: translateZ(var(--avatar-z)) scale(var(--avatar-scale));
  border-color: rgba(200,240,255,.95);
  box-shadow:
    0 0 0 2px rgba(200,240,255,.6),
    0 0 40px  rgba(140,220,255,.95),
    0 0 90px  rgba(124,92,255,.85),
    0 0 160px rgba(79,140,255,.65),
    0 0 240px rgba(124,92,255,.45);
  filter: saturate(1.3) contrast(1.05) brightness(1.1);
}
.hc-inner.holo-on .hc-avatar::after{
  opacity:1;
  animation: holoScanline 1s linear infinite;
}
.hc-inner.holo-on .hc-avatar::before{
  opacity:.85;
  animation: holoCone 1s ease-out;
}
.hc-inner.holo-on .hc-ring{
  border-color: rgba(180,220,255,.9);
  border-style: solid;
  box-shadow:
    0 0 30px rgba(140,220,255,.7),
    0 0 80px rgba(124,92,255,.5),
    inset 0 0 30px rgba(140,220,255,.35);
  animation: spin 1.2s linear infinite;
}
.hc-inner.holo-on .hc-glow{
  animation: pulse 1.2s ease-in-out infinite;
  filter: blur(20px);
  background: radial-gradient(circle,
    rgba(140,220,255,.65),
    rgba(124,92,255,.35) 45%,
    transparent 70%);
}
.hc-inner.holo-on .hc-badge{ opacity:.35; }
.hc-inner.holo-on::after{
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  background:
    radial-gradient(3px 3px at 20% 25%, #fff,     transparent 60%),
    radial-gradient(3px 3px at 80% 30%, #b8ffe8, transparent 60%),
    radial-gradient(3px 3px at 30% 80%, #ffd6f5, transparent 60%),
    radial-gradient(3px 3px at 85% 75%, #ffe89a, transparent 60%),
    radial-gradient(2px 2px at 50% 5%,  #fff,     transparent 60%);
  animation: holoSparkle 1.3s ease-out forwards;
  opacity:0;
  z-index:20;
}

/* ---------- Keyframes ---------- */
@keyframes holoHue{ to{ filter:hue-rotate(360deg) blur(.3px) saturate(1.6); } }
@keyframes holoSweep{
  0%  { background-position:center, 200% 50%; opacity:0; }
  20% { opacity:1; }
  100%{ background-position:center, -100% 50%; opacity:0; }
}
@keyframes holoBeam{
  0%  { opacity:0; transform: translateY(8px)  scaleX(.5); }
  40% { opacity:1; transform: translateY(0)     scaleX(1); }
  100%{ opacity:0; transform: translateY(-10px) scaleX(.85); }
}
@keyframes holoSparkle{
  0%  { opacity:0; transform: translateZ(20px) scale(.6); }
  35% { opacity:1; transform: translateZ(calc(var(--pop-head) + 20px)) scale(1); }
  100%{ opacity:0; transform: translateZ(calc(var(--pop-head) + 40px)) scale(1.1); }
}
@keyframes holoScanline{
  0%  { background-position: 0 0, 0 0; }
  100%{ background-position: 0 6px, 0 0; }
}
@keyframes holoCone{
  0%  { opacity:0; transform: translateX(-50%) scaleY(.2); }
  40% { opacity:.9; }
  100%{ opacity:.7; transform: translateX(-50%) scaleY(1); }
}
/* =========================================================
   GALLERY ITEM POPOUT — efek 3D untuk foto di modal galeri
   ========================================================= */
.gallery-item{
  transform-style: preserve-3d;
  transition:
    transform var(--pop-dur) var(--pop-ease),
    box-shadow var(--pop-dur) var(--pop-ease),
    border-color .3s ease,
    filter .35s ease;
}
.gallery-item.holo-on{
  transform:
    translateZ(40px)
    rotateX(8deg) rotateY(-6deg)
    scale(1.12);
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px rgba(200,240,255,.75),
    0 0 40px  rgba(140,220,255,1),
    0 0 90px  rgba(124,92,255,.95),
    0 0 160px rgba(79,140,255,.8);
  filter: saturate(1.3) contrast(1.05) brightness(1.1);
  z-index: 50;
}
.gallery-item.holo-on > img{
  transform: translateZ(20px) scale(1.04);
  transition: transform var(--pop-dur) var(--pop-ease);
}
.gallery-item.holo-on > .holo-layer{
  transform: translateZ(var(--pop-border));
  opacity: 1;
}

/* =========================================================
   PHOTO SHOWCASE — 3D popout viewer + navigasi
   ========================================================= */
.photo-lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(79,140,255,.16), transparent 62%),
    radial-gradient(circle at 50% 42%, rgba(124,92,255,.09), transparent 80%),
    rgba(2,4,12,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:fade .25s ease;
}
.photo-lightbox[hidden]{display:none}

/* ---------- Stage 3D ---------- */
.lightbox-stage{
  position:relative;
  width:min(92vw, 780px);
  height:min(88vh, 720px);
  display:grid;
  place-items:center;
  perspective:1600px;
  perspective-origin:50% 50%;
}

/* ---------- Kartu foto (popout utama) ---------- */
.lightbox-card{
  position:relative;
  margin:0;
  max-width:100%;
  max-height:100%;
  padding:6px;
  border-radius:20px;
  background:linear-gradient(160deg,#1b2c58,#0d1730);
  border:2px solid rgba(200,240,255,.55);
  overflow:hidden;
  transform-style:preserve-3d;
  box-shadow:
    0 0 0 2px rgba(200,240,255,.35),
    0 60px 120px -20px rgba(0,0,0,.95),
    0 0 100px -10px rgba(79,140,255,.75),
    0 0 200px -30px rgba(124,92,255,.55);
  animation:lightboxIn .6s var(--pop-ease) both;
}
.lightbox-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    repeating-linear-gradient(180deg,
      rgba(140,220,255,.16) 0px,
      rgba(140,220,255,.16) 1px,
      transparent 1px,
      transparent 3px);
  mix-blend-mode:screen;
  pointer-events:none;
  opacity:.55;
}
.lightbox-card img{
  display:block;
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:14px;
  background:#050a18;
}
.lightbox-card.swap{
  animation:lightboxSwap .5s var(--pop-ease) both;
}

@keyframes lightboxIn{
  0%{
    opacity:0;
    transform:translateZ(0) rotateX(22deg) rotateY(-16deg) scale(.68);
  }
  60%{ opacity:1; }
  100%{
    opacity:1;
    transform:translateZ(80px) rotateX(6deg) rotateY(-5deg) scale(1);
  }
}
@keyframes lightboxSwap{
  0%{
    opacity:.4;
    transform:translateZ(80px) rotateX(6deg) rotateY(-5deg) scale(.94);
  }
  100%{
    opacity:1;
    transform:translateZ(80px) rotateX(6deg) rotateY(-5deg) scale(1);
  }
}

/* ---------- Navigasi prev/next ---------- */
.lightbox-nav{
  position:absolute;
  top:50%;
  width:56px;
  height:56px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(140,200,255,.55);
  background:linear-gradient(180deg, rgba(45,85,175,.8), rgba(18,34,76,.9));
  color:#dbe8ff;
  font-size:30px;
  line-height:1;
  font-family:inherit;
  cursor:pointer;
  display:grid;
  place-items:center;
  transform:translateY(-50%) translateZ(20px);
  box-shadow:
    0 12px 30px -10px rgba(0,0,0,.9),
    0 0 24px -4px rgba(140,220,255,.55);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
  z-index:10;
}
.lightbox-nav.prev{ left:max(8px, calc(50% - min(46vw, 420px))); }
.lightbox-nav.next{ right:max(8px, calc(50% - min(46vw, 420px))); }

.lightbox-nav:hover{
  transform:translateY(-50%) translateZ(20px) scale(1.1);
  border-color:rgba(220,245,255,.95);
  background:linear-gradient(180deg, rgba(90,150,255,.95), rgba(50,80,180,.95));
  box-shadow:
    0 12px 30px -10px rgba(0,0,0,.9),
    0 0 40px rgba(140,220,255,.9),
    0 0 90px rgba(124,92,255,.6);
}
.lightbox-nav:disabled{
  opacity:.25;
  pointer-events:none;
}
.lightbox-nav:focus-visible{
  outline:2px solid rgba(200,240,255,.9);
  outline-offset:3px;
}

/* ---------- Tombol tutup ---------- */
.lightbox-close{
  position:absolute;
  top:max(10px, calc(50% - min(44vh, 360px)));
  right:max(10px, calc(50% - min(46vw, 420px)));
  width:44px;
  height:44px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,140,140,.55);
  background:linear-gradient(180deg, rgba(140,40,60,.85), rgba(60,15,25,.9));
  color:#ffe0e0;
  font-size:18px;
  font-family:inherit;
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:11;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.9);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.lightbox-close:hover{
  transform:scale(1.1);
  background:linear-gradient(180deg, rgba(255,90,90,.95), rgba(120,20,40,.95));
  box-shadow:
    0 12px 30px -10px rgba(0,0,0,.9),
    0 0 30px rgba(255,120,120,.7);
}

/* ---------- Meta bawah ---------- */
.lightbox-meta{
  position:absolute;
  left:50%;
  bottom:max(10px, calc(50% - min(44vh, 360px)));
  transform:translateX(-50%);
  display:flex;
  gap:14px;
  align-items:center;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(140,200,255,.4);
  background:linear-gradient(180deg, rgba(20,34,70,.85), rgba(8,15,34,.9));
  backdrop-filter:blur(8px);
  color:#cfe0ff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.3px;
  z-index:11;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.95);
}
.lightbox-title{
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e9eefb;
}
.lightbox-counter{
  padding:2px 10px;
  border-radius:999px;
  background:rgba(79,140,255,.2);
  border:1px solid rgba(120,170,255,.35);
  color:#b8ccff;
  font-variant-numeric:tabular-nums;
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .lightbox-nav{ width:44px; height:44px; font-size:24px; }
  .lightbox-nav.prev{ left:6px; }
  .lightbox-nav.next{ right:6px; }
  .lightbox-close{ width:38px; height:38px; font-size:15px; top:10px; right:10px; }
  .lightbox-meta{ font-size:12px; padding:6px 12px; }
  .lightbox-title{ max-width:180px; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .lightbox-card,
  .lightbox-card.swap{
    animation:none !important;
    transform:translateZ(40px);
    opacity:1;
  }
  .lightbox-nav,
  .lightbox-close{ transition:none !important; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .item, .chip, .item-head, .item-photo,
  .hc-avatar, .hc-ring, .hc-glow,
  .item > *, .chip > *, .holo-layer{
    transition: none !important;
    animation: none !important;
  }
}