/* =========================================================
   JDC DIGITAL — universal signature easter egg
   Crafted by Jordan — JDC Digital
   ========================================================= */
:root{
  --jdc-signature-cyan:#22d9ff;
  --jdc-signature-blue:#3a7cff;
  --jdc-signature-violet:#8d45ff;
  --jdc-signature-magenta:#ff31df;
  --jdc-signature-ink:#050711;
  --jdc-signature-ease:cubic-bezier(.22,.78,.2,1);
}

.jdc-signature-trigger{
  position:fixed;
  z-index:2147482990;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(15px, env(safe-area-inset-bottom));
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  opacity:.82;
  transition:opacity 180ms ease, transform 180ms ease;
}
.jdc-signature-trigger:hover{opacity:1;transform:translateY(-1px)}
.jdc-signature-trigger:focus-visible{
  outline:1px solid rgba(98,218,255,.88);
  outline-offset:2px;
  border-radius:50%;
}
.jdc-signature-trigger__mark{
  position:relative;
  width:22px;
  height:18px;
  display:block;
}
.jdc-signature-trigger__mark i{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:15px;
  border-radius:999px;
  transform:translate(-50%,-50%) rotate(34deg);
  transform-origin:center;
  background:linear-gradient(180deg,var(--jdc-signature-cyan) 0%,var(--jdc-signature-blue) 46%,var(--jdc-signature-magenta) 100%);
  box-shadow:0 0 6px rgba(55,183,255,.45),0 0 12px rgba(185,45,255,.18);
}
.jdc-signature-trigger__mark i:nth-child(1){margin-left:-6px}
.jdc-signature-trigger__mark i:nth-child(2){margin-left:0}
.jdc-signature-trigger__mark i:nth-child(3){margin-left:6px}
.jdc-signature-trigger.is-counting{transform:scale(.93)}
.jdc-signature-trigger.is-active{
  pointer-events:none;
  opacity:0;
  transform:scale(.72);
  transition:opacity 240ms ease,transform 240ms ease;
}

.jdc-signature-overlay{
  position:fixed;
  z-index:2147483000;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  background:rgba(2,4,12,0);
  -webkit-backdrop-filter:blur(0px) saturate(100%);
  backdrop-filter:blur(0px) saturate(100%);
}
.jdc-signature-overlay::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 50% 49%, rgba(17,30,68,.16), transparent 29%),
    linear-gradient(180deg, rgba(4,6,17,.30), rgba(2,4,12,.52));
  opacity:0;
  transform:scale(1.025);
}
.jdc-signature-overlay.is-playing{
  visibility:visible;
  animation:jdcOverlaySequence 2800ms linear both;
}
.jdc-signature-overlay.is-playing::before{
  animation:jdcOverlayVeil 2800ms linear both;
}

.jdc-signature-card{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(92vw,520px);
  min-height:240px;
  transform:translateY(-1.5vh);
}
.jdc-signature-logo{
  position:relative;
  width:clamp(100px,11vw,150px);
  height:clamp(92px,10vw,138px);
  margin-bottom:clamp(18px,2vw,26px);
}
.jdc-signature-logo span{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(5px,.42vw,7px);
  height:clamp(76px,8.2vw,112px);
  border-radius:999px;
  transform-origin:center;
  transform:translate(-50%,-50%) rotate(34deg) scaleY(0);
  opacity:0;
  background:linear-gradient(180deg,var(--jdc-signature-cyan) 0%,#30bbff 29%,var(--jdc-signature-violet) 69%,var(--jdc-signature-magenta) 100%);
  box-shadow:
    0 0 5px rgba(51,211,255,.72),
    0 0 13px rgba(77,149,255,.42),
    0 0 22px rgba(207,47,255,.22);
}
.jdc-signature-logo span:nth-child(1){margin-left:clamp(-31px,-2.3vw,-22px)}
.jdc-signature-logo span:nth-child(2){margin-left:0}
.jdc-signature-logo span:nth-child(3){margin-left:clamp(22px,2.3vw,31px)}
.jdc-signature-overlay.is-playing .jdc-signature-logo span:nth-child(1){animation:jdcStrokeReveal 2800ms linear both}
.jdc-signature-overlay.is-playing .jdc-signature-logo span:nth-child(2){animation:jdcStrokeReveal2 2800ms linear both}
.jdc-signature-overlay.is-playing .jdc-signature-logo span:nth-child(3){animation:jdcStrokeReveal3 2800ms linear both}

.jdc-signature-name,
.jdc-signature-credit{
  margin:0;
  text-align:center;
  color:#fff;
  opacity:0;
  transform:translateY(4px);
  text-shadow:0 0 11px rgba(131,194,255,.16);
}
.jdc-signature-name{
  font-family:"Poppins", "Inter", Arial, sans-serif;
  font-size:clamp(15px,1.65vw,23px);
  line-height:1.05;
  font-weight:600;
  letter-spacing:.31em;
  padding-left:.31em;
  text-transform:uppercase;
}
.jdc-signature-credit{
  margin-top:clamp(10px,1vw,14px);
  font-family:"Poppins", "Inter", Arial, sans-serif;
  font-size:clamp(9px,.95vw,13px);
  line-height:1.1;
  font-weight:400;
  letter-spacing:.12em;
  color:rgba(255,255,255,.42);
}
.jdc-signature-overlay.is-playing .jdc-signature-name{animation:jdcTextReveal 2800ms linear both}
.jdc-signature-overlay.is-playing .jdc-signature-credit{animation:jdcCreditReveal 2800ms linear both}

@keyframes jdcOverlaySequence{
  0%{opacity:0;background:rgba(2,4,12,0);-webkit-backdrop-filter:blur(0) saturate(100%);backdrop-filter:blur(0) saturate(100%)}
  12%{opacity:1;background:rgba(2,4,12,.66);-webkit-backdrop-filter:blur(5px) saturate(82%);backdrop-filter:blur(5px) saturate(82%)}
  22%{background:rgba(2,4,12,.78);-webkit-backdrop-filter:blur(8px) saturate(76%);backdrop-filter:blur(8px) saturate(76%)}
  72%{opacity:1;background:rgba(2,4,12,.78);-webkit-backdrop-filter:blur(8px) saturate(76%);backdrop-filter:blur(8px) saturate(76%)}
  92%{opacity:.18;background:rgba(2,4,12,.46);-webkit-backdrop-filter:blur(2px) saturate(94%);backdrop-filter:blur(2px) saturate(94%)}
  100%{opacity:0;background:rgba(2,4,12,0);-webkit-backdrop-filter:blur(0) saturate(100%);backdrop-filter:blur(0) saturate(100%)}
}
@keyframes jdcOverlayVeil{
  0%,5%{opacity:0;transform:scale(1.025)}
  20%,72%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.012)}
}
@keyframes jdcStrokeReveal{
  0%,15%{opacity:0;transform:translate(-50%,-50%) rotate(34deg) scaleY(.05)}
  26%{opacity:1;transform:translate(-50%,-50%) rotate(34deg) scaleY(1)}
  72%{opacity:1;transform:translate(-50%,-50%) rotate(34deg) scaleY(1)}
  91%,100%{opacity:0;transform:translate(-50%,-50%) rotate(34deg) scaleY(.82)}
}
@keyframes jdcStrokeReveal2{
  0%,20%{opacity:0;transform:translate(-50%,-50%) rotate(34deg) scaleY(.05)}
  31%{opacity:1;transform:translate(-50%,-50%) rotate(34deg) scaleY(1)}
  72%{opacity:1;transform:translate(-50%,-50%) rotate(34deg) scaleY(1)}
  91%,100%{opacity:0;transform:translate(-50%,-50%) rotate(34deg) scaleY(.82)}
}
@keyframes jdcStrokeReveal3{
  0%,25%{opacity:0;transform:translate(-50%,-50%) rotate(34deg) scaleY(.05)}
  36%{opacity:1;transform:translate(-50%,-50%) rotate(34deg) scaleY(1)}
  72%{opacity:1;transform:translate(-50%,-50%) rotate(34deg) scaleY(1)}
  91%,100%{opacity:0;transform:translate(-50%,-50%) rotate(34deg) scaleY(.82)}
}
@keyframes jdcTextReveal{
  0%,37%{opacity:0;transform:translateY(5px)}
  49%{opacity:1;transform:translateY(0)}
  72%{opacity:1;transform:translateY(0)}
  91%,100%{opacity:0;transform:translateY(-2px)}
}
@keyframes jdcCreditReveal{
  0%,42%{opacity:0;transform:translateY(4px)}
  53%{opacity:1;transform:translateY(0)}
  72%{opacity:1;transform:translateY(0)}
  90%,100%{opacity:0;transform:translateY(-1px)}
}

@media (max-width:600px){
  .jdc-signature-trigger{right:max(11px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:36px;height:36px}
  .jdc-signature-card{width:min(92vw,420px);min-height:220px;transform:translateY(-1vh)}
  .jdc-signature-logo{width:108px;height:100px;margin-bottom:18px}
  .jdc-signature-logo span{width:5px;height:80px}
  .jdc-signature-logo span:nth-child(1){margin-left:-23px}
  .jdc-signature-logo span:nth-child(3){margin-left:23px}
  .jdc-signature-name{font-size:15px;letter-spacing:.27em;padding-left:.27em}
  .jdc-signature-credit{font-size:9px;margin-top:10px;letter-spacing:.14em;color:rgba(255,255,255,.56)}
}

@media (prefers-reduced-motion:reduce){
  .jdc-signature-trigger,.jdc-signature-trigger *{transition:none!important}
  .jdc-signature-overlay.is-playing{animation:jdcOverlayReduced 1300ms ease both}
  .jdc-signature-overlay.is-playing::before{animation:none;opacity:1}
  .jdc-signature-overlay.is-playing .jdc-signature-logo span,
  .jdc-signature-overlay.is-playing .jdc-signature-name,
  .jdc-signature-overlay.is-playing .jdc-signature-credit{animation:none!important;opacity:1;transform:translate(-50%,-50%) rotate(34deg) scaleY(1)}
  .jdc-signature-overlay.is-playing .jdc-signature-name,
  .jdc-signature-overlay.is-playing .jdc-signature-credit{transform:none}
}
@keyframes jdcOverlayReduced{0%,100%{opacity:0}18%,82%{opacity:1;background:rgba(2,4,12,.8)}}