/* Same cursor as the portfolio: Figma arrow head + neon blaze (cursor.js, copied from website/neon-cursor.js). */
/* Decorative viewport overlay: cannot capture clicks, hover, drag, or selection. */
.neon-cursor {
 position:fixed; inset:0; width:100%; height:100%; z-index:100;
 pointer-events:none; opacity:.60; contain:strict;
}
@media(prefers-reduced-motion:reduce), (any-pointer:coarse) {
 .neon-cursor { display:none; }
}
@media (hover: hover) and (pointer: fine) { *, *::before, *::after { cursor: none !important; } }
.cursor-orbit { display: none !important; }
.neon-cursor { opacity: .95; }
.cursor-arrow {
  position: fixed;
  z-index: 101;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
  will-change: transform;
}
.cursor-arrow svg {
  position: absolute;
  /* 26×26 box; the tip of the arrow sits exactly on the pointer */
  left: -13px;
  top: -1px;
  width: 26px;
  height: 26px;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(224, 31, 253, .8)) drop-shadow(0 0 9px rgba(28, 25, 215, .6));
  transform-origin: 13px 1px;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), filter .25s ease;
}
.cursor-arrow.is-visible { opacity: 1; }
.cursor-arrow.is-hover svg {
  transform: scale(1.18);
  filter: drop-shadow(0 0 5px rgba(224, 31, 253, 1)) drop-shadow(0 0 14px rgba(28, 25, 215, .85));
}
.cursor-arrow.is-press svg { animation: cursor-press .28s ease; }
@keyframes cursor-press { 40% { transform: scale(.82); } }
@media (any-pointer: coarse), (hover: none) { .cursor-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-arrow svg { transition: none; animation: none; } }
/* 26 Sep: the vector turns to face the movement; .cursor-rot rotates around the tip (= pointer). */
.cursor-rot { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
/* 27 Sep: full opacity so the blades are as bright as the Figma "Flame" frame. */
.neon-cursor { opacity: 1; }

/* 27 Sep: extra-soft blades (Annyesha: "much softer"); the arrow head stays crisp. */
.neon-cursor { filter: blur(5px); }

/* 27 Sep: sparkles around the middle blade stay nearly sharp (Figma dots have a 1px blur); must come after the blade blur. */
.neon-sparkles { filter: blur(.5px); }
.neon-cursor { z-index: 300; } .cursor-arrow { z-index: 301; } /* above the photo lightbox (200) */

/* Annygator logo (from Figma "ANNYGATOR LOGO") replaces the text wordmark */
.wordmark { display:inline-flex; align-items:center; line-height:0; }
.wordmark .wordmark__logo { display:block; height:30px; width:auto; overflow:visible; filter:drop-shadow(0 0 8px rgba(139,66,255,.35)); transition:filter .25s ease, transform .25s ease; }
.wordmark:hover .wordmark__logo { filter:drop-shadow(0 0 8px rgba(139,66,255,.35)); }
@media (max-width:700px) { .wordmark .wordmark__logo { height:24px; } }

/* Logo click = the same glitch as "Meet the Annygators": slice jitter + magenta/cyan split, then it flickers back in. */
.wordmark { position:relative; }
.wordmark__ghost { position:absolute; inset:0; display:none; pointer-events:none; mix-blend-mode:screen; }
.wordmark__ghost svg { height:100%; width:auto; display:block; overflow:visible; filter:none !important; }
.wordmark__ghost--a path { fill:#e01ffd !important; }
.wordmark__ghost--b path { fill:#00e5ff !important; }
.wordmark.is-glitching .wordmark__ghost { display:block; }
.wordmark.is-glitching .wordmark__ghost--a { animation:lg-split-a .62s steps(1,end) forwards; }
.wordmark.is-glitching .wordmark__ghost--b { animation:lg-split-b .62s steps(1,end) forwards; }
.wordmark.is-glitching .wordmark__logo { animation:lg-main .62s steps(1,end) forwards; }
@keyframes lg-main {
  0%   { opacity:1; clip-path:inset(0 0 0 0); transform:none; }
  10%  { clip-path:inset(10% 0 58% 0); transform:translateX(-5px); }
  20%  { clip-path:inset(55% 0 18% 0); transform:translateX(6px); }
  30%  { opacity:0; clip-path:inset(0 0 82% 0); transform:translateX(-3px); }
  40%  { opacity:.85; clip-path:inset(0 0 0 0); transform:translateX(4px); }
  50%  { opacity:1; clip-path:inset(38% 0 42% 0); transform:translateX(-7px); }
  60%  { opacity:.4; clip-path:inset(70% 0 6% 0); transform:translateX(4px); }
  70%  { opacity:1; clip-path:inset(22% 0 62% 0); transform:translateX(-3px); }
  85%  { opacity:.8; clip-path:inset(0 0 0 0); transform:translateX(2px); }
  100% { opacity:1; clip-path:inset(0 0 0 0); transform:none; }
}
@keyframes lg-split-a {
  0%   { opacity:.9; clip-path:inset(62% 0 12% 0); transform:translate(-4px,0); }
  20%  { clip-path:inset(8% 0 70% 0); transform:translate(3px,0); }
  40%  { clip-path:inset(40% 0 35% 0); transform:translate(-6px,0); }
  60%  { opacity:.7; clip-path:inset(80% 0 2% 0); transform:translate(3px,0); }
  80%  { opacity:.4; clip-path:inset(15% 0 75% 0); transform:translate(-2px,0); }
  100% { opacity:0; }
}
@keyframes lg-split-b {
  0%   { opacity:.9; clip-path:inset(20% 0 55% 0); transform:translate(4px,0); }
  20%  { clip-path:inset(66% 0 10% 0); transform:translate(-3px,0); }
  40%  { clip-path:inset(0 0 78% 0); transform:translate(6px,0); }
  60%  { opacity:.7; clip-path:inset(48% 0 30% 0); transform:translate(-3px,0); }
  80%  { opacity:.4; clip-path:inset(85% 0 0 0); transform:translate(2px,0); }
  100% { opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .wordmark.is-glitching .wordmark__logo, .wordmark.is-glitching .wordmark__ghost { animation:none; } }