/* ============================================================
   CodebyCarter — finale.css
   The end-of-page crescendo: magnetic headline, paint-as-you-go
   doodle canvas, mega CTA, and a giant gradient marquee.
   ============================================================ */

.finale{
  padding:clamp(110px,13vw,180px) 0 clamp(40px,6vw,80px);
  position:relative;
}

.finale-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border:1px solid rgba(255,255,255,.10);border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:#9090A0;background:rgba(255,255,255,.04);font-weight:500;
}
.finale-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C,#06B6D4);
  background-size:200% 200%;animation:hue 6s linear infinite;
  box-shadow:0 0 16px #EC4899;
}

.finale-h{
  font-size:clamp(48px,9vw,140px);line-height:.95;letter-spacing:-.045em;font-weight:600;
  margin:24px 0 28px;color:#F5F5F7;
  user-select:none;
}
.finale-line{display:inline-block}
.finale-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#A855F7 0%,#EC4899 35%,#FB923C 65%,#06B6D4 100%);
  background-size:200% 200%;animation:hue 6s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.finale-h .magnet-letter{
  display:inline-block;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

.finale-sub{
  font-size:clamp(16px,1.4vw,20px);color:#9090A0;margin-bottom:48px;max-width:46ch;line-height:1.55;
}
.finale-sub b{color:#F5F5F7;font-weight:600}

/* ====== Doodle canvas ====== */
.doodle-wrap{
  position:relative;border-radius:28px;overflow:hidden;
  background:linear-gradient(160deg,rgba(168,85,247,.10),rgba(236,72,153,.06) 50%,rgba(6,182,212,.08));
  border:1px solid rgba(255,255,255,.10);
  height:clamp(280px,42vw,420px);
  margin-bottom:60px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.doodle{
  width:100%;height:100%;display:block;
  cursor:none;
}
.doodle-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(20px,2.4vw,30px);
  color:rgba(245,245,247,.5);
  pointer-events:none;text-align:center;line-height:1.3;
  transition:opacity .6s cubic-bezier(.16,1,.3,1);
}
.doodle-hint small{
  display:block;font-family:'JetBrains Mono',monospace;font-style:normal;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(245,245,247,.35);margin-top:10px;
}
.doodle-wrap.is-drawing .doodle-hint{opacity:0}
.doodle-clear{
  position:absolute;top:14px;right:14px;
  padding:9px 14px;border-radius:999px;
  background:rgba(15,15,20,.7);border:1px solid rgba(255,255,255,.12);
  color:#F5F5F7;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;cursor:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:all .25s cubic-bezier(.2,.8,.2,1);
}
.doodle-clear:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);transform:translateY(-1px)}

/* ====== Mega CTA ====== */
.finale-cta{
  display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;
  margin:20px 0 60px;
}
.btn-mega{
  display:inline-flex;align-items:center;gap:14px;
  padding:24px 44px;border-radius:999px;
  background:linear-gradient(135deg,#A855F7 0%,#EC4899 35%,#FB923C 65%,#06B6D4 100%);
  background-size:200% 200%;
  animation:hue 6s linear infinite, breathe 2.8s ease-in-out infinite;
  color:#0A0A0F;font-weight:700;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;
  position:relative;overflow:visible;will-change:transform;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.btn-mega::before{
  content:"";position:absolute;inset:-6px;border-radius:inherit;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C,#06B6D4,#A855F7);
  background-size:300% 300%;
  animation:hue 4s linear infinite;
  z-index:-1;filter:blur(28px);opacity:.65;
}
.btn-mega::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%);
  pointer-events:none;
}
@keyframes breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}
.btn-mega:hover{transform:scale(1.07)}
.btn-mega svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn-mega:hover svg{transform:translate(6px,-6px) rotate(-45deg)}

.finale-engagement{
  font-size:14px;color:#9090A0;
  font-family:'JetBrains Mono',monospace;letter-spacing:.06em;
}
.finale-engagement b{
  color:#F5F5F7;font-weight:600;
  background:linear-gradient(135deg,#A855F7,#06B6D4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ====== Big end marquee ====== */
.end-marquee{
  margin-top:60px;border-block:1px solid rgba(255,255,255,.10);
  padding:36px 0;overflow:hidden;
  background:rgba(0,0,0,.2);
}
.end-marquee-track{
  display:flex;gap:80px;width:max-content;
  animation:marquee 26s linear infinite;
}
.end-marquee-track:hover{animation-play-state:paused}
.end-marquee-item{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:clamp(56px,11vw,160px);line-height:1;letter-spacing:-.035em;
  background:linear-gradient(135deg,#A855F7 0%,#EC4899 30%,#FB923C 60%,#06B6D4 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hue 8s linear infinite;
  white-space:nowrap;display:inline-flex;align-items:center;gap:80px;
}
.end-marquee-item::after{
  content:"✦";font-style:normal;
  font-size:.5em;-webkit-text-fill-color:#EC4899;color:#EC4899;
  background:none;
}

/* ====== Mobile ====== */
@media (max-width:680px){
  .finale-h{font-size:clamp(40px,12vw,80px)}
  .doodle-wrap{height:280px}
  .btn-mega{padding:20px 32px;font-size:18px}
  .finale-cta{margin-bottom:40px}
}