/* waiv-gallery.css — 3D circular carousel of real waiv cards + flip detail modal. */

.pg{position:relative;overflow:hidden;padding:clamp(86px,10vw,130px) 0 clamp(70px,8vw,110px);
  --pg-bg1:#001026;--pg-bg2:#000814;--pg-accent:#ffd527;
  background:radial-gradient(120% 80% at 50% -10%,var(--pg-bg1),var(--pg-bg2) 60%);
  transition:background 1s cubic-bezier(.4,0,.2,1);}
.pg-grain{position:absolute;inset:0;background-image:var(--noise);background-size:180px;opacity:.08;mix-blend-mode:overlay;pointer-events:none;z-index:1;}
.pg-aura{position:absolute;border-radius:50%;filter:blur(95px);opacity:.42;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,var(--pg-accent),transparent 70%);transition:background 1s ease;}
.pg-aura-1{width:620px;height:620px;left:-8%;top:2%;}
.pg-aura-2{width:540px;height:540px;right:-6%;bottom:-4%;opacity:.34;}

.pg .wv-container{position:relative;z-index:3;}
.pg-head{max-width:760px;}
.pg-sub{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:rgba(230,235,255,.62);margin:20px 0 0;max-width:40em;text-wrap:pretty;}

/* ── 3D ring stage ── */
.pg3d-stage{position:relative;z-index:2;width:100%;height:clamp(330px,42vw,470px);margin-top:26px;
  perspective:1600px;perspective-origin:50% 44%;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.pg3d-stage.is-grab{cursor:grabbing;}
.pg3d-floor{position:absolute;left:50%;top:78%;transform:translateX(-50%);width:min(760px,82%);height:120px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent 72%);filter:blur(8px);}
.pg3d-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;}
.pg3d-card{position:absolute;left:0;top:0;height:auto;aspect-ratio:1.585;margin-top:-94px;width:300px;margin-left:-150px;
  border:none;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#0b1426;backface-visibility:hidden;
  transform-origin:50% 50%;will-change:transform,opacity,filter;
  box-shadow:0 30px 60px -24px rgba(0,2,12,.9),inset 0 0 0 1px rgba(230,235,255,.1);transition:box-shadow .3s;}
.pg3d-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.pg3d-card.is-front{box-shadow:0 44px 80px -26px rgba(0,2,12,.95),inset 0 0 0 1px var(--accent),0 0 70px -14px var(--accent);}

.pg3d-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:300;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(10,16,30,.6);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(230,235,255,.2);transition:background .2s,transform .2s;}
.pg3d-nav:hover{background:rgba(255,213,39,.18);box-shadow:inset 0 0 0 1px var(--pg-accent);}
.pg3d-nav svg{width:22px;height:22px;}
.pg3d-prev{left:clamp(10px,4vw,52px);}
.pg3d-next{right:clamp(10px,4vw,52px);}

/* ── caption + chip rail ── */
.pg3d-cap{text-align:center;margin-top:8px;}
.pg3d-cap h3{font-family:'Ubuntu',sans-serif;font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-.03em;color:#fff;margin:0;}
.pg3d-cap p{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(230,235,255,.5);margin:8px 0 0;}
.pg3d-cap p span{color:var(--pg-accent);}
.pg-rail{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:26px;}
.pg-chip{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:'Karla',sans-serif;font-size:13px;font-weight:600;
  color:rgba(230,235,255,.74);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(230,235,255,.12);transition:color .25s,box-shadow .25s,transform .25s,background .25s;}
.pg-chip i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px var(--accent);}
.pg-chip:hover{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-2px);}
.pg-chip.is-on{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--accent),0 0 18px -6px var(--accent);}

/* ── detail modal with flip ── */
.pg-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(0,4,12,.72);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s;}
.pg-modal.is-open{opacity:1;pointer-events:auto;}
.pg-modal-spot{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 42%,var(--pg-accent,#ffd527),transparent 70%);opacity:.14;transition:background 1s ease;}
.pg-modal-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;
  max-width:980px;width:100%;background:linear-gradient(160deg,rgba(16,26,48,.92),rgba(4,8,18,.96));border-radius:26px;padding:clamp(24px,3vw,46px);
  box-shadow:0 50px 110px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(230,235,255,.1);
  transform:translateY(24px) scale(.97);transition:transform .45s cubic-bezier(.2,.8,.3,1);}
.pg-modal.is-open .pg-modal-inner{transform:none;}
.pg-modal-x{position:absolute;top:16px;right:18px;z-index:5;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(230,235,255,.08);color:#fff;font-size:15px;box-shadow:inset 0 0 0 1px rgba(230,235,255,.16);transition:background .2s,transform .2s;}
.pg-modal-x:hover{background:rgba(255,213,39,.18);transform:rotate(90deg);}

.pg-modal-shot{display:flex;flex-direction:column;align-items:center;gap:14px;}
.pg-flip{position:relative;width:100%;aspect-ratio:1.585;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.8,.3,1);cursor:pointer;}
.pg-flip.is-flipped{transform:rotateY(180deg);}
.pg-flip-face{position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.8),inset 0 0 0 1px rgba(230,235,255,.1);}
.pg-flip-face img{width:100%;height:100%;object-fit:cover;display:block;}
.pg-flip-back{transform:rotateY(180deg);}
.pg-flip-btn{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;color:rgba(230,235,255,.7);background:rgba(230,235,255,.06);
  border:none;cursor:pointer;padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(230,235,255,.14);transition:color .2s,background .2s;}
.pg-flip-btn:hover{color:#fff;background:rgba(255,213,39,.14);}
.pg-modal-name{font-family:'Ubuntu',sans-serif;font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.03em;color:#fff;margin:14px 0 12px;}
.pg-modal-desc{font-size:16px;line-height:1.6;color:rgba(230,235,255,.66);margin:0 0 22px;text-wrap:pretty;}
.pg-modal-meta{display:flex;gap:26px;margin-bottom:26px;flex-wrap:wrap;}
.pg-modal-meta span{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(230,235,255,.45);margin-bottom:5px;}
.pg-modal-meta b{font-family:'Ubuntu',sans-serif;font-size:17px;color:#fff;font-weight:600;}
.pg-modal-cta{display:flex;gap:12px;flex-wrap:wrap;}

@media (max-width:760px){
  .pg-modal-inner{grid-template-columns:1fr;max-width:380px;max-height:88vh;overflow:auto;}
}
@media (prefers-reduced-motion: reduce){
  .pg3d-card{transition:none;}
}

/* ── particle shards ── */
.wv-particles{position:absolute;inset:0;z-index:1;pointer-events:none;}

/* ── Deck / Wall switch ── */
.pg-switch{position:relative;display:inline-flex;margin-top:26px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(230,235,255,.12);}
.pg-switch button{position:relative;z-index:2;border:none;background:none;cursor:pointer;font-family:'Ubuntu',sans-serif;
  font-size:14px;font-weight:600;color:rgba(230,235,255,.62);padding:9px 26px;border-radius:999px;transition:color .3s;}
.pg-switch button.is-on{color:var(--navy);}
.pg-switch-pill{position:absolute;z-index:1;top:5px;left:5px;width:calc(50% - 5px);height:calc(100% - 10px);border-radius:999px;
  background:var(--pg-accent,#ffd527);box-shadow:0 6px 16px -6px var(--pg-accent);transition:transform .35s cubic-bezier(.3,.8,.3,1),background .8s ease;}

/* ── caption ── */
.pg-cap{text-align:center;margin-top:30px;}
.pg-cap h3{font-family:'Ubuntu',sans-serif;font-size:clamp(24px,3vw,38px);font-weight:700;letter-spacing:-.03em;color:#fff;margin:0;}
.pg-cap p{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pg-accent);margin:8px 0 0;}

/* ── DECK: cover-flow ── */
.pg-deck-stage{position:relative;z-index:2;width:100%;height:clamp(330px,42vw,460px);margin-top:30px;
  perspective:1700px;perspective-origin:50% 50%;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.pg-deck-stage.is-grab{cursor:grabbing;}
.pg-deck-floor{position:absolute;left:50%;top:84%;transform:translateX(-50%);width:min(640px,72%);height:120px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent 72%);filter:blur(9px);z-index:1;}
.pg-deck-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;}
.pg-deck-card{position:absolute;left:0;top:0;aspect-ratio:1.585;width:270px;border:none;padding:0;border-radius:16px;overflow:hidden;
  cursor:pointer;background:#0b1426;backface-visibility:hidden;transform-origin:50% 50%;will-change:transform,opacity,filter;
  box-shadow:0 34px 64px -24px rgba(0,2,12,.92),inset 0 0 0 1px rgba(230,235,255,.1);transition:box-shadow .3s;}
.pg-deck-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.pg-deck-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 60%);
  opacity:0;transition:opacity .4s;}
.pg-deck-card.is-center{box-shadow:0 50px 90px -26px rgba(0,2,12,.95),inset 0 0 0 1px var(--accent),0 0 80px -16px var(--accent);}
.pg-deck-card.is-center .pg-deck-sheen{opacity:1;}
.pg-deck-dots{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);display:flex;gap:7px;z-index:300;}
.pg-deck-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;background:rgba(230,235,255,.2);transition:transform .25s,background .25s;}
.pg-deck-dot:hover{background:rgba(230,235,255,.5);}
.pg-deck-dot.is-on{background:var(--accent);transform:scale(1.4);box-shadow:0 0 10px var(--accent);}

/* ── WALL: magnetic tilt grid ── */
.pg-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:30px;perspective:1000px;}
.pg-wall-card{position:relative;aspect-ratio:1.585;border:none;padding:0;border-radius:15px;overflow:hidden;cursor:pointer;background:#0b1426;
  transform-style:preserve-3d;will-change:transform;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
  box-shadow:0 18px 40px -22px rgba(0,2,12,.85),inset 0 0 0 1px rgba(230,235,255,.08);}
.pg-wall-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.pg-wall:hover .pg-wall-card{opacity:.62;filter:brightness(.78);transition:opacity .35s,filter .35s,transform .12s linear,box-shadow .35s;}
.pg-wall .pg-wall-card:hover{opacity:1;filter:none;z-index:5;box-shadow:0 40px 80px -26px rgba(0,2,12,.95),inset 0 0 0 1px var(--accent),0 0 60px -16px var(--accent);}
.pg-wall-spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(180px 180px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 60%);}
.pg-wall-card:hover .pg-wall-spot{opacity:1;}
.pg-wall-name{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 10px 10px;font-family:'Ubuntu',sans-serif;font-weight:700;
  font-size:13px;color:#fff;text-align:center;background:linear-gradient(180deg,transparent,rgba(0,5,14,.82));
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;}
.pg-wall-card:hover .pg-wall-name{opacity:1;transform:none;}
@media (max-width:900px){.pg-wall{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.pg-wall{grid-template-columns:repeat(2,1fr);}}