:root{
  --bg: #0F0710;
  --pink: #FF2E93;
  --pink-soft: #FFA1D0;
  --pink-glow: #FF6FB0;
  --glass: rgba(255,161,208,0.07);
  --glass-border: rgba(255,161,208,0.22);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
*{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
}

body{
  background: var(--bg);
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  position: relative;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ===== Ambient glow ===== */
.glow{
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.glow-1{
  width:60vw; height:60vw;
  max-width:700px; max-height:700px;
  background: radial-gradient(circle, #FF2E93, transparent 70%);
  top:-20%; left:-10%;
  animation: driftA 16s ease-in-out infinite;
}
.glow-2{
  width:50vw; height:50vw;
  max-width:600px; max-height:600px;
  background: radial-gradient(circle, #C7147A, transparent 70%);
  bottom:-15%; right:-10%;
  animation: driftB 20s ease-in-out infinite;
}
.glow-3{
  width:35vw; height:35vw;
  max-width:420px; max-height:420px;
  background: radial-gradient(circle, #FF6FB0, transparent 70%);
  top:40%; left:60%;
  animation: driftC 24s ease-in-out infinite;
  opacity:0.35;
}

@keyframes driftA{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6vw,8vh) scale(1.15); }
}
@keyframes driftB{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-7vw,-6vh) scale(1.1); }
}
@keyframes driftC{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-5vw,5vh) scale(1.2); }
}

.grain{
  position:fixed; inset:0;
  z-index:1; pointer-events:none;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Stage ===== */
#stage{
  position:relative; z-index:2;
  height:100vh; width:100vw;
  display:flex; align-items:center; justify-content:center;
  perspective:1600px;
  padding:6vh 4vw;
  filter:blur(0px);
  transition:filter 0.6s ease, brightness 0.6s ease;
}
#stage.blurred{
  filter:blur(22px) brightness(0.35) saturate(0.4);
  pointer-events:none;
}

/* ===== Stack ===== */
.stack{
  position:relative;
  width:min(320px,74vw);
  height:min(420px,58vh);
  transform-style:preserve-3d;
}
.stack.idle{ animation:floatStack 7s ease-in-out infinite; }

@keyframes floatStack{
  0%,100%{ transform:translateY(0px) rotateX(4deg) rotateY(-6deg); }
  50%{ transform:translateY(-18px) rotateX(4deg) rotateY(-6deg); }
}

/* ===== Card ===== */
.card{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,0.1),rgba(255,161,208,0.03));
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.65);
  overflow:hidden;
  cursor:pointer;
  will-change:transform,opacity,box-shadow;
  transition:
    transform 0.65s cubic-bezier(.22,.9,.32,1.15),
    opacity   0.5s ease,
    box-shadow 0.5s ease;
}
.card::after{
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,0.16),transparent);
  pointer-events:none;
}
.card::before{
  content:''; position:absolute; inset:0;
  border-radius:24px; padding:1px;
  background:linear-gradient(135deg,rgba(255,161,208,0.5),transparent 40%,rgba(255,46,147,0.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.card img,.card video{
  width:100%; height:100%;
  object-fit:cover; opacity:0.94;
  transition:transform 0.65s cubic-bezier(.22,.9,.32,1.15);
}
.card:hover img,.card:hover video{ transform:scale(1.04); }
.card.front{
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.7),
    0 0 60px -10px rgba(255,46,147,0.45);
}

.p0{ transform:translate3d(0,0,0) rotate(0deg) scale(1); z-index:6; opacity:1; }
.p1{ transform:translate3d(34px,26px,-50px) rotate(6deg) scale(0.97); z-index:5; opacity:0.92; }
.p2{ transform:translate3d(-30px,50px,-100px) rotate(-8deg) scale(0.94); z-index:4; opacity:0.82; }
.p3{ transform:translate3d(52px,74px,-150px) rotate(11deg) scale(0.91); z-index:3; opacity:0.68; }
.p4{ transform:translate3d(-54px,94px,-200px) rotate(-13deg) scale(0.88); z-index:2; opacity:0.52; }
.p5{ transform:translate3d(18px,112px,-250px) rotate(15deg) scale(0.85); z-index:1; opacity:0.36; }

.card.leaving{
  transition:transform 0.55s cubic-bezier(.4,0,.6,1), opacity 0.45s ease;
  transform:translate3d(0,-60px,260px) scale(1.08) rotate(-2deg);
  opacity:0; z-index:20;
}

#empty-state{
  position:relative; z-index:2;
  color:var(--pink-soft);
  opacity:0.4; font-size:0.85rem;
  display:none;
  animation:pulseDim 2.4s ease-in-out infinite;
}
@keyframes pulseDim{
  0%,100%{ opacity:0.25; }
  50%{ opacity:0.55; }
}

/* ===== Gate ===== */
#gate{
  position:fixed; inset:0;
  z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
#gate.hidden{ display:none; }

.gate-card{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,0.09),rgba(42,15,36,0.75));
  border:1px solid rgba(255,161,208,0.35);
  border-radius:28px;
  backdrop-filter:blur(32px) saturate(160%);
  -webkit-backdrop-filter:blur(32px) saturate(160%);
  padding:48px 40px 40px;
  max-width:360px; width:100%;
  text-align:center;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.75),
    0 0 80px -20px rgba(255,46,147,0.25),
    inset 0 1px 1px rgba(255,255,255,0.18);
  animation:gateIn 0.7s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes gateIn{
  from{ opacity:0; transform:scale(0.88) translateY(20px); }
  to{   opacity:1; transform:scale(1)    translateY(0); }
}
@keyframes gateDismiss{
  to{ opacity:0; transform:scale(0.9) translateY(-16px); }
}
.gate-card.dismiss{ animation:gateDismiss 0.5s cubic-bezier(.4,0,.6,1) forwards; }

.gate-icon{
  width:64px; height:64px;
  border-radius:20px;
  background:linear-gradient(135deg, var(--pink), #C7147A);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 24px;
  box-shadow:0 12px 30px -8px rgba(255,46,147,0.7);
  color:#fff;
}
.gate-icon svg{ width:28px; height:28px; stroke-width:2; }

.gate-title{
  font-size:1.35rem; font-weight:700;
  color:#fff; margin-bottom:12px;
  letter-spacing:-0.02em;
}
.gate-desc{
  font-size:0.9rem;
  color:rgba(255,161,208,0.75);
  line-height:1.6; margin-bottom:32px;
}

.gate-btn{
  width:100%; padding:16px;
  border-radius:16px; border:none;
  background:linear-gradient(135deg, var(--pink), #C7147A);
  color:#fff; font-size:1rem; font-weight:600;
  cursor:pointer; letter-spacing:-0.01em;
  box-shadow:0 10px 30px -8px rgba(255,46,147,0.7);
  transition:transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color:transparent;
  position:relative; overflow:hidden;
}
.gate-btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.18),transparent);
  pointer-events:none;
}
.gate-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -6px rgba(255,46,147,0.85); }
.gate-btn:active{ transform:scale(0.97); opacity:0.88; }
.gate-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }
.gate-btn.loading{ pointer-events:none; }
.gate-btn .btn-text{ transition:opacity 0.2s ease; }
.gate-btn.loading .btn-text{ opacity:0; }

.spinner{
  display:none; position:absolute; inset:0;
  align-items:center; justify-content:center;
}
.gate-btn.loading .spinner{ display:flex; }
.spinner svg{
  width:22px; height:22px;
  stroke:#fff; stroke-width:2.5;
  animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.gate-status{
  margin-top:16px; font-size:0.82rem;
  color:rgba(255,161,208,0.6);
  min-height:20px; transition:opacity 0.3s ease;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.gate-status svg{ width:14px; height:14px; flex-shrink:0; }
.gate-status.err{ color:#FF6B6B; }
.gate-status.ok{ color:#7DFFB3; }

/* ===== Responsive ===== */
@media (max-width:640px){
  .stack{ width:min(280px,80vw); height:min(360px,52vh); }
  .gate-card{ padding:40px 28px 32px; }
}
@media (max-width:380px){
  .stack{ width:88vw; height:48vh; }
}
@media (orientation:landscape) and (max-height:500px){
  .stack{ height:78vh; width:40vh; }
  .gate-card{ padding:24px 28px; }
  .gate-icon{ width:48px; height:48px; margin-bottom:12px; }
  .gate-icon svg{ width:22px; height:22px; }
  .gate-title{ font-size:1.05rem; }
  .gate-desc{ margin-bottom:18px; font-size:0.82rem; }
}