/* Motion enhancements for the existing site and its footer wordmark. */
#root header { background-color: hsl(var(--background)); }
section[id], #main-content { scroll-margin-top: 96px; }
:is(a, button, input, textarea):focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }
.dark .text-secondary { color: hsl(270 90% 75%); }
.dark #contact a[href*="wa.me"] { color: #052e16; }
.portfolio-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 2px solid hsl(var(--primary));
  border-radius: 8px;
  transform: translateY(-180%);
}
.portfolio-skip-link:focus { transform: translateY(0); }
@media (min-width: 768px) { .legacy-footer-row { padding-right: 48px; } }
.legacy-motion-hero { isolation: isolate; }

/* Flowing light ribbons frame the hero without crossing its central copy. */
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 72%, hsl(var(--primary) / .11), transparent 37%),
    radial-gradient(ellipse at 88% 75%, hsl(var(--secondary) / .12), transparent 40%),
    linear-gradient(145deg, hsl(var(--background)), hsl(var(--background) / .94) 52%, hsl(var(--background)));
}

.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 42% 32% at 50% 51%, hsl(var(--background) / .34), transparent),
    linear-gradient(180deg, hsl(var(--background) / .3), transparent 22%, transparent 72%, hsl(var(--background)));
}

.hero-flow-glow {
  position: absolute;
  z-index: 1;
  width: min(760px, 70vw);
  height: min(580px, 60vh);
  border-radius: 50%;
  filter: blur(40px);
  animation: hero-flow-drift 12s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.hero-flow-glow-cyan {
  left: -16%;
  bottom: -32%;
  background: radial-gradient(ellipse, hsl(var(--primary) / .17), transparent 68%);
}

.hero-flow-glow-violet {
  right: -16%;
  bottom: -38%;
  background: radial-gradient(ellipse, hsl(var(--secondary) / .18), transparent 68%);
  animation-delay: -6s;
  animation-direction: alternate-reverse;
}

.hero-flow-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.legacy-motion-hero.is-in-view .hero-flow-glow { animation-play-state: running; }
.legacy-page-hidden .hero-flow-glow { animation-play-state: paused; }

@keyframes hero-flow-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(10%, -8%, 0) scale(1.12); }
}

@media (max-width: 640px) {
  .hero-flow-glow { width: 90vw; height: 54vh; filter: blur(25px); }
  .hero-flow-glow-cyan { left: -45%; bottom: -12%; }
  .hero-flow-glow-violet { right: -50%; bottom: -20%; }
}

.legacy-motion-card {
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease, border-color .3s ease;
}

.legacy-motion-card:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

.legacy-motion-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.legacy-motion-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--motion-x, 50%) var(--motion-y, 0px), hsl(var(--primary) / .13), transparent 75%);
  opacity: .42;
  animation: legacy-footer-breathe 7s ease-in-out infinite;
  animation-play-state: paused;
  transition: opacity .75s ease;
}

.legacy-motion-footer::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--motion-x, 50%);
  width: min(190px, 42vw);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / .62), transparent);
  opacity: .45;
  transform: translateX(-50%);
  transition: left .25s ease, opacity .5s ease;
}

.legacy-motion-footer.is-pointer-active::before { animation: none; opacity: .85; }
.legacy-motion-footer.is-pointer-active::after { opacity: .9; }
.legacy-motion-footer > div { position: relative; z-index: 2; }
.legacy-footer-credit { padding-right: 64px; }

.legacy-motion-footer.is-visible .legacy-footer-row > * {
  animation: legacy-footer-settle .72s cubic-bezier(.22, 1, .36, 1) both;
}

.legacy-motion-footer.is-visible .legacy-footer-row > :nth-child(2) { animation-delay: .08s; }
.legacy-motion-footer.is-visible .legacy-footer-row > :nth-child(3) { animation-delay: .16s; }

.legacy-footer-top-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(14px, 2vw, 26px);
}

.legacy-footer-back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid hsl(var(--primary) / .38);
  border-radius: 999px;
  background: hsl(var(--card) / .72);
  color: hsl(var(--foreground));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.legacy-footer-back-to-top svg { width: 18px; height: 18px; color: hsl(var(--primary)); }
.legacy-footer-back-to-top:hover {
  transform: translateY(-3px);
  border-color: hsl(var(--primary) / .8);
  box-shadow: 0 8px 22px hsl(var(--primary) / .15);
}

.legacy-footer-name {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(24px, 3vw, 40px);
  padding: .12em 0;
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: 1;
  font-weight: 800;
}

.legacy-footer-letters {
  display: flex;
  justify-content: center;
  gap: .075em;
  transform: perspective(850px) rotateX(var(--name-rx, 0deg)) rotateY(var(--name-ry, 0deg));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.legacy-footer-letter {
  display: inline-block;
  color: transparent;
  background: linear-gradient(105deg, hsl(var(--primary)), hsl(var(--secondary)));
  background-size: 600% 100%;
  background-position: calc(var(--letter) * 20%) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: legacy-name-wave 5.5s ease-in-out infinite;
  animation-delay: calc(var(--letter) * -.28s);
  animation-play-state: paused;
}

.legacy-motion-footer.is-visible .legacy-footer-name {
  animation: legacy-footer-settle 1s cubic-bezier(.22, 1, .36, 1) both;
}

.legacy-motion-footer.is-in-view::before,
.legacy-motion-footer.is-in-view .legacy-footer-letter { animation-play-state: running; }

.legacy-page-hidden .legacy-motion-footer::before,
.legacy-page-hidden .legacy-motion-footer .legacy-footer-letter { animation-play-state: paused; }

.legacy-motion-footer a {
  position: relative;
  transition: color .35s ease, background-color .35s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.legacy-motion-footer a:hover {
  transform: translate3d(var(--link-x, 0px), calc(-3px + var(--link-y, 0px)), 0);
  box-shadow: 0 5px 18px hsl(var(--primary) / .13);
}

.legacy-motion-footer a:active { transform: translateY(-1px) scale(.96); }

@keyframes legacy-footer-breathe {
  0%, 100% { opacity: .32; }
  50% { opacity: .52; }
}

@keyframes legacy-footer-settle {
  from { opacity: 0; transform: translateY(11px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes legacy-name-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 640px) {
  .legacy-motion-card:hover { transform: none; box-shadow: none; }
  .legacy-footer-name { margin-bottom: 26px; }
}

/* Light mode uses the same layout with readable accents and clear surfaces. */
.light {
  color-scheme: light;
  --background: 210 35% 98%;
  --foreground: 222 33% 15%;
  --card: 0 0% 100%;
  --card-foreground: 222 33% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 33% 15%;
  --primary: 187 84% 25%;
  --primary-foreground: 0 0% 100%;
  --secondary: 266 65% 42%;
  --secondary-foreground: 0 0% 100%;
  --muted: 214 28% 94%;
  --muted-foreground: 217 18% 36%;
  --accent: 187 84% 25%;
  --accent-foreground: 0 0% 100%;
  --border: 214 25% 81%;
  --input: 216 18% 57%;
  --ring: 187 84% 25%;
  --gradient-cyber: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  --glow-primary: 0 4px 18px hsl(var(--primary) / .18);
  --glow-secondary: 0 4px 18px hsl(var(--secondary) / .14);
}

.light .hero-flow-glow-cyan { background: radial-gradient(ellipse, hsl(185 75% 65% / .26), transparent 68%); }
.light .hero-flow-glow-violet { background: radial-gradient(ellipse, hsl(266 80% 78% / .24), transparent 68%); }

.light :is(.glass, [class~="bg-card/50"]) {
  background-color: hsl(var(--card) / .96);
  border-color: hsl(var(--border));
  box-shadow: 0 4px 18px hsl(217 30% 25% / .035);
}

.light .legacy-motion-card:hover {
  border-color: hsl(var(--primary) / .4);
  box-shadow: 0 14px 30px hsl(217 30% 25% / .09);
}

.light :is(input, textarea) {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--input));
}

.light :is(input, textarea)::placeholder { color: hsl(var(--muted-foreground)); }

.light #contact div.font-mono { background-color: hsl(var(--card) / .96); }

.light :is(a, button, input, textarea):focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

.light :is(input, textarea):focus-visible { border-color: hsl(var(--primary)); }

.light #contact a[href*="wa.me"] { background-color: #13783f; }
.light #contact a[href*="wa.me"]:hover { background-color: #0e6332; }

@media (prefers-reduced-motion: reduce) {
  .hero-flow-glow { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .legacy-motion-footer::before,
  .legacy-motion-footer.is-visible .legacy-footer-row > *,
  .legacy-motion-footer.is-visible .legacy-footer-name,
  .legacy-motion-footer .legacy-footer-letter { animation: none; }
  .legacy-motion-footer::after, .legacy-motion-card, .legacy-motion-footer a,
  .legacy-footer-back-to-top,
  .legacy-footer-letters { transition: none; }
  .legacy-footer-letters { transform: none; }
  .legacy-motion-card:hover, .legacy-motion-footer a:hover,
  .legacy-footer-back-to-top:hover { transform: none; }
}