/* =========================================================
   HAZWANN. — lanyard.css
   Interactive 3D ID badge / lanyard — ABOUT PAGE ONLY.
   Reuses existing design tokens from style.css.
   Does not touch any other section, page, or component.
========================================================= */

/* sits in the existing gap between the About hero and My Journey —
   no heading, no border, minimal padding so it doesn't add extra
   page height beyond what the card itself needs */
.lanyard-section{
  padding:20px 0 0;
}

/* ---------- scene / stage ---------- */
.lanyard-scene{
  --rope-rot:0deg;
  position:relative;
  height:570px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  perspective:1400px;
}

.lanyard-pivot{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform-origin:top center;
  transform:rotate(var(--rope-rot));
  will-change:transform;
}

/* ---------- strap ---------- */
.lanyard-strap{
  position:relative;
  width:32px;
  height:92px;
  background:linear-gradient(180deg, var(--surface-2) 0%, #0c0c0c 100%);
  border-left:1px solid var(--border-strong);
  border-right:1px solid var(--border-strong);
}
.lanyard-strap::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  width:4px; margin-left:-2px;
  background:var(--red);
}
.lanyard-strap::after{
  content:"";
  position:absolute; inset:0 5px;
  background:repeating-linear-gradient(180deg, transparent 0 10px, rgba(242,234,216,0.08) 10px 11px);
  pointer-events:none;
}
.strap-label{
  position:absolute;
  top:14px; left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:0.12em;
  color:var(--cream);
  opacity:0.55;
  white-space:nowrap;
}

/* ---------- clip / connector ---------- */
.lanyard-clip{
  position:relative;
  width:26px; height:16px;
  background:var(--red);
  border-radius:2px 2px 6px 6px;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}
.lanyard-clip::before{
  content:"";
  position:absolute; left:50%; top:-6px;
  width:10px; height:10px;
  margin-left:-5px;
  border:2px solid var(--surface-2);
  border-radius:50%;
  background:var(--bg);
}

/* ---------- badge ---------- */
.id-badge{
  --rx:0deg; --ry:0deg; --tx:0px; --ty:0px;
  position:relative;
  width:264px;
  aspect-ratio:0.6;
  margin-top:-2px;
  background:linear-gradient(165deg, var(--surface) 0%, #0b0b0b 100%);
  border:1px solid var(--border-strong);
  transform-style:preserve-3d;
  transform:translate(var(--tx),var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));
  touch-action:none;
  cursor:grab;
  box-shadow:0 26px 50px -22px rgba(0,0,0,0.75);
  will-change:transform;
  overflow:hidden;
}
.id-badge.is-dragging{ cursor:grabbing; }
.id-badge::before{
  /* comic-panel frame */
  content:"";
  position:absolute; inset:8px;
  border:1px solid var(--border);
  pointer-events:none;
  z-index:2;
}
.id-badge::after{
  /* subtle speed lines, bottom-left */
  content:"";
  position:absolute; left:-12px; bottom:26%;
  width:70px; height:40px;
  background:repeating-linear-gradient(115deg, rgba(242,234,216,0.05) 0 2px, transparent 2px 9px);
  transform:rotate(-6deg);
  pointer-events:none;
  z-index:1;
}

.badge-glare{
  position:absolute; inset:0;
  background:radial-gradient(circle 150px at var(--hx,50%) var(--hy,50%), rgba(242,234,216,0.16), transparent 60%);
  opacity:0;
  transition:opacity var(--transition-fast);
  pointer-events:none;
  z-index:3;
}
.id-badge:hover .badge-glare,
.id-badge.is-dragging .badge-glare{ opacity:1; }

.badge-corner{
  position:absolute; top:0; right:0;
  width:60px; height:60px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:6px 7px 0 0;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:0.05em;
  color:var(--cream);
}
.badge-corner::before{
  content:"";
  position:absolute; top:-30px; right:-30px;
  width:60px; height:60px;
  background:var(--red);
  transform:rotate(45deg);
  z-index:-1;
}

.badge-top{
  position:relative;
  z-index:1;
  padding:10px 12px 8px;
  background:
    radial-gradient(circle, rgba(242,234,216,0.14) 1px, transparent 1.2px) 0 0/8px 8px,
    var(--surface-2);
  border-bottom:2px solid var(--red);
}
.badge-top-label{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--red);
}

/* photo area reuses .card-photo / .photo-slot from style.css,
   overridden here to fit the badge's own layout */
.id-badge .card-photo{
  position:relative;
  inset:auto;
  height:132px;
  z-index:1;
}
.id-badge .photo-slot{ font-size:9px; gap:5px; }
.id-badge .photo-slot svg{ width:22px; height:22px; }

.badge-body{
  position:relative;
  z-index:1;
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.badge-name{
  font-family:var(--font-display);
  font-size:21px;
  color:var(--cream);
}
.badge-role{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.badge-role.accent{ color:var(--red); }
.badge-tags{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--muted);
}

/* ---------- shadow ---------- */
.badge-shadow{
  position:absolute;
  left:50%; bottom:8px;
  width:150px; height:22px;
  margin-left:-75px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
  filter:blur(2px);
  transform:translateX(var(--shadow-x,0px));
  pointer-events:none;
}

/* ---------- idle sway keeps transitions off while JS drives every frame ---------- */
.lanyard-pivot,
.id-badge{ transition:none; }

/* ---------- reduced motion: fully static ---------- */
@media (prefers-reduced-motion:reduce){
  .lanyard-pivot{ transform:none !important; }
  .id-badge{ transform:none !important; }
  .badge-shadow{ transform:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .lanyard-scene{ height:500px; }
  .id-badge{ width:230px; }
  .lanyard-strap{ height:80px; }
}
@media (max-width:768px){
  .lanyard-scene{ height:455px; }
  .id-badge{ width:208px; }
  .lanyard-strap{ height:70px; }
}
@media (max-width:430px){
  .lanyard-scene{ height:400px; }
  .id-badge{ width:182px; }
  .lanyard-strap{ height:60px; width:28px; }
  .badge-name{ font-size:18px; }
  .id-badge .card-photo{ height:100px; }
}

/* never let the badge/shadow push the page wider than the viewport */
.lanyard-scene{ max-width:100%; }