/* =========================================================================
   LANYARD CREDENTIAL  (pure CSS + a little JS, no build step)
   A hanging exhibitor pass carrying the event facts and the live countdown.
   Sits in-flow below the hero text and hangs down; idly sways and can be
   grabbed and swung (physics-lite in assets/js/lanyard.js).
   ========================================================================= */
.lanyard{
  position:relative;
  width:250px;
  margin:38px 0 0 4px;
  pointer-events:none;            /* only the card is grabbable */
  -webkit-user-select:none;user-select:none;
}
.lanyard-pivot{
  position:relative;
  transform-origin:top center;
  will-change:transform;
  animation:lanyardSway 6s ease-in-out infinite;
}
.lanyard.is-dragging .lanyard-pivot,
.lanyard.is-settling .lanyard-pivot{animation:none}
@keyframes lanyardSway{
  0%,100%{transform:rotate(-2.6deg)}
  50%{transform:rotate(2.6deg)}
}
@media (prefers-reduced-motion:reduce){ .lanyard-pivot{animation:none} }

/* pinned nub at the very top */
.lanyard-pin{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#eef4fb,#9fb2c9 70%,#6d8199);
  box-shadow:0 1px 3px rgba(8,22,44,.4);z-index:4;
}

/* two woven straps converging into the clip */
.lanyard-band{position:relative;height:118px;margin:0 auto;width:100%}
.lanyard-strap{
  position:absolute;top:6px;width:24px;height:104px;
  background:
    repeating-linear-gradient(-38deg,rgba(255,255,255,.16) 0 2px,transparent 2px 9px),
    linear-gradient(180deg,#0E4260,#123A5C);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.lanyard-strap.left{left:calc(50% - 38px);transform-origin:top center;transform:rotate(11deg);border-radius:3px 3px 0 0}
.lanyard-strap.right{left:calc(50% + 14px);transform-origin:top center;transform:rotate(-11deg);border-radius:3px 3px 0 0}
.lanyard-strap.right::after{
  content:"GFF 2026 • NETWIN • GFF 2026 •";
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-family:var(--fh);font-size:8px;font-weight:700;letter-spacing:.12em;
  color:rgba(255,255,255,.5);white-space:nowrap;
}

/* metal clip */
.lanyard-clip{position:absolute;top:96px;left:50%;transform:translateX(-50%);width:22px;height:34px;z-index:3}
.lanyard-clip::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;border:3px solid #b9c6d6;
  box-shadow:0 1px 2px rgba(8,22,44,.35);
}
.lanyard-clip::after{
  content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:12px;height:22px;border-radius:3px;
  background:linear-gradient(180deg,#e6ecf3,#aebccd 60%,#8496aa);
  box-shadow:0 2px 4px rgba(8,22,44,.35);
}

/* the badge card (in-flow so it reserves height and never gets clipped) */
.lanyard-card{
  position:relative;margin:-6px auto 0;
  width:240px;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 26px 50px rgba(12,28,60,.30),0 2px 6px rgba(12,28,60,.14);
  pointer-events:auto;cursor:grab;border:1px solid rgba(16,42,80,.06);
}
.lanyard.is-dragging .lanyard-card{cursor:grabbing}
.lanyard-card::before{           /* punched hole */
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:40px;height:9px;border-radius:6px;background:#dbe4ef;
  box-shadow:inset 0 1px 2px rgba(8,22,44,.35);z-index:2;
}
.lc-header{
  padding:24px 16px 13px;position:relative;
  display:flex;align-items:center;justify-content:space-between;
  background:
    radial-gradient(120% 120% at 100% 0,rgba(0,206,255,.35),transparent 55%),
    linear-gradient(135deg,#0C1B36,#14336E 60%,#1F5FE6);
}
.lc-header img{height:15px;width:auto;display:block}
.lc-badgeword{
  font-family:var(--fh);font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#0C1B36;background:linear-gradient(90deg,#F6891F,#FFB65C);border-radius:20px;padding:4px 9px;
}
.lc-hairline{height:3px;background:linear-gradient(90deg,#1F5FE6,#00CEFF 55%,#F6891F)}

.lc-body{padding:15px 16px 6px}
.lc-event{font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-.01em;color:#12233F;line-height:1.12}
.lc-event b{color:#1F5FE6}
.lc-place{font-family:var(--fb);font-size:11px;color:#5B6472;margin-top:4px}

.lc-rows{margin-top:13px}
.lc-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-top:1px dashed #e0e8f2}
.lc-row:first-child{border-top:0}
.lc-row .k{font-family:var(--fb);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8794A6}
.lc-row .v{font-family:var(--fh);font-size:12.5px;font-weight:700;color:#12233F}
.lc-row .v.hot{color:#E9790F}

/* countdown block */
.lc-count{margin:13px 0 0;background:#F4F8FD;border:1px solid #E3ECF6;border-radius:10px;padding:10px 8px 9px;text-align:center}
.lc-count .lbl{font-family:var(--fb);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8794A6}
.lc-count .cells{display:flex;justify-content:center;gap:6px;margin-top:7px}
.lc-count .cell{flex:1;background:#fff;border:1px solid #E3ECF6;border-radius:7px;padding:5px 0 4px}
.lc-count .cell b{display:block;font-family:var(--fh);font-size:17px;font-weight:700;color:#12233F;line-height:1;font-variant-numeric:tabular-nums}
.lc-count .cell i{display:block;font-style:normal;font-family:var(--fb);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:#98A2B2;margin-top:3px}

.lc-barcode{height:24px;margin:13px 16px 15px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#12233F 0 2px,transparent 2px 4px,#12233F 4px 5px,transparent 5px 9px);opacity:.85}

/* on narrow screens the hero stacks; centre the pass under the text */
@media (max-width:920px){ .lanyard{margin-left:auto;margin-right:auto} }