/* ============================================================
   CodebyCarter — creative.css
   Three small "wait how?" features:
     1) Eyes that follow your cursor
     2) Magnetic letters on chapter intro headlines
     3) Self-drawing signature
   ============================================================ */

/* ============================================================
   1) FOLLOWING EYES (in workshop)
   ============================================================ */
.eyes{
  position:absolute;
  top:24px;left:50%;transform:translateX(-50%);
  display:flex;gap:12px;
  z-index:5;
  pointer-events:none;
}
.eye{
  width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FFFFFF, #F0F0F0 70%);
  border:2.5px solid #0A0A08;
  position:relative;
  box-shadow:0 4px 12px rgba(0,0,0,.30);
}
.eye-pupil{
  position:absolute;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #4A4A4A 0%, #0A0A08 60%);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  transition:transform .12s cubic-bezier(.2,.8,.2,1);
}
.eye-pupil::after{
  content:"";position:absolute;
  width:4px;height:4px;border-radius:50%;
  background:#FFFFFF;
  top:25%;left:25%;
}

/* Closed/blinking state */
.eye.is-blinking{
  height:4px;
  margin-top:18px;
  background:#0A0A08;
}
.eye.is-blinking .eye-pupil{display:none}

@media (max-width:760px){
  .eye{width:32px;height:32px;border-width:2px}
  .eye-pupil{width:11px;height:11px}
}

/* ============================================================
   2) MAGNETIC LETTERS (chapter intro headlines)
   ============================================================ */
[data-magnetic]{
  display:inline-block;
}
[data-magnetic] .letter{
  display:inline-block;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), color .35s ease;
  will-change:transform;
}
[data-magnetic] .letter.is-space{
  /* preserve space width */
}

/* Reduced motion users get no magnetic effect */
@media (prefers-reduced-motion:reduce){
  [data-magnetic] .letter{transition:none !important;transform:none !important}
}

/* ============================================================
   3) SELF-DRAWING SIGNATURE
   ============================================================ */
.signature-block{
  text-align:center;
  padding:60px 24px 40px;
  position:relative;
}
.signature-block-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(245,239,224,.45);font-weight:600;
  margin-bottom:18px;display:inline-flex;align-items:center;gap:12px;
}
.signature-block-eyebrow::before,
.signature-block-eyebrow::after{
  content:"";width:36px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,169,81,.40), transparent);
}

.signature-svg{
  display:block;margin:0 auto;
  max-width:340px;width:100%;
  height:auto;
  filter:drop-shadow(0 4px 14px rgba(212,164,55,.18));
}
.signature-svg path{
  fill:none;
  stroke:url(#sig-gradient);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  transition:stroke-dashoffset 2.6s cubic-bezier(.65,0,.35,1);
}
.signature-block.is-drawn .signature-svg path{
  stroke-dashoffset:0;
}

.signature-block-tag{
  margin-top:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,239,224,.40);font-weight:600;
  opacity:0;transition:opacity .8s ease .8s;
}
.signature-block.is-drawn .signature-block-tag{opacity:1}

/* Smaller signature on mobile */
@media (max-width:600px){
  .signature-svg{max-width:280px}
  .signature-block{padding:50px 20px 30px}
}