/* ==========================================================================
   Header & greeting
   ========================================================================== */
.header{
  padding:28px 22px 8px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(201,165,116,0.10), transparent 60%),
    var(--bg);
}
.logo,
.logo-img{
  height:28px;
  width:auto;
  display:block;
}
.logo{
  font-family:'Fraunces',serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:0.5px;
  color:var(--gold-bright);
}
.logo small{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--text-muted);
  font-weight:600;
  margin-top:2px;
}
.tagline{
  text-align:right;
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:11px;
  color:var(--text-muted);
  line-height:1.4;
}
.tagline b{ display:block; color:var(--gold); font-style:normal; font-family:'Inter',sans-serif; font-size:10px; letter-spacing:0.3px; }

.greeting{ padding:18px 22px 4px; }
.greeting h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:30px;
  margin:0 0 4px;
  color:var(--text);
}
.greeting p{ margin:0; font-size:13px; color:var(--text-muted); }

/* ==========================================================================
   Card stage — signature element, driven by js/card-tilt.js + js/gyroscope.js
   ========================================================================== */
.card-stage{
  margin:22px 20px 8px;
  position:relative;
  height:210px;
  perspective:900px;
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.008); }
}
.watermark-layer{
  position:absolute;
  inset:-14px;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#0d0c0a;
  transition:transform 500ms cubic-bezier(.22,1,.36,1);
}
.watermark-layer svg{
  position:absolute;
  top:50%; left:50%;
  width:180%;
  transform:translate(-50%,-50%);
  opacity:0.5;
}
.glass-card{
  position:absolute;
  inset:0;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:linear-gradient(155deg, rgba(255,255,255,0.09), rgba(255,255,255,0.015) 40%, rgba(0,0,0,0.1));
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:
    0 20px 40px -18px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform-style:preserve-3d;
  will-change:transform;
  cursor:grab;
  overflow:hidden;
}
.glass-card.dragging{ cursor:grabbing; }
.card-sheen{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,20%), rgba(255,255,255,0.22), transparent 42%);
  mix-blend-mode:overlay;
  pointer-events:none;
  transition:opacity 300ms ease;
  opacity:var(--sheen-o, 0.9);
}
.card-shimmer{
  position:absolute;
  top:-50%; left:-60%;
  width:60%; height:200%;
  background:linear-gradient(75deg, transparent 30%, rgba(240,217,171,0.16) 48%, rgba(255,255,255,0.28) 50%, rgba(240,217,171,0.16) 52%, transparent 70%);
  transform:rotate(8deg);
  animation:sweep 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%{ left:-60%; }
  35%{ left:120%; }
  100%{ left:120%; }
}
.card-content{
  position:relative;
  z-index:2;
  padding:22px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:translateZ(24px);
  background-image: url('/assets/bc-bg.svg');
  background-position: right bottom; 
}
.card-content .brand{
  font-family:'Fraunces',serif;
  font-size:13px;
  color:var(--gold);
  letter-spacing:0.5px;
}
.card-content h2{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:26px;
  margin:2px 0 0;
  color:var(--gold-bright);
  line-height:1.15;
}
.card-bottom{ display:flex; justify-content:space-between; align-items:flex-end; }
.card-name{ font-size:15px; font-weight:600; color:var(--text); }
.card-valid{ font-size:9.5px; color:var(--text-faint); margin-top:4px; letter-spacing:0.3px; }
.card-qr{
  width:52px; height:52px;
  background:var(--gold-bright);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -4px rgba(240,217,171,0.4);
}
.card-qr-label{ font-size:8px; text-align:center; color:var(--text-faint); margin-top:5px; letter-spacing:0.2px; }

/* ==========================================================================
   Card interaction affordances
   ========================================================================== */
.card-hint{
  text-align:center; font-size:10px; color:var(--text-faint); margin:10px 0 0; letter-spacing:0.3px;
}
.gyro-status{
  text-align:center;
  font-size:10px;
  color:var(--text-faint);
  margin-top:8px;
  min-height:14px;
  letter-spacing:0.2px;
}

/* ==========================================================================
   Permission Popup (Cookies + Sensors)
   ========================================================================== */
.permission-popup {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 1000;
  padding: 20px;
  display: none; /* Shown via JS */
}
.popup-content {
  background: rgba(19, 18, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  text-align: center;
}
.popup-content p {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 16px;
}
.popup-btn {
  background: var(--gold);
  color: #000;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  transition: transform 0.2s;
}
.popup-btn:active {
  transform: scale(0.97);
}