/* ============================================================
   Franklin Roldán — sistema de estilo + micro-interacciones
   ============================================================ */
:root { --ease: cubic-bezier(.22,1,.36,1); }

html { scroll-behavior: smooth; }
body { background-color: #08080E; }
::selection { background: rgba(245,196,81,.28); color: #fff; }

/* Tipografía editorial: números grandes para kickers */
.numeral { font-variant-numeric: tabular-nums; }

/* ---------- Texto con gradiente (uso restringido) ---------- */
.text-gradient {
  background-image: linear-gradient(100deg, #F5C451, #A78BFA 50%, #22D3EE);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient.anim { animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: 220% 50%; } }

/* Subrayado de acento dibujado a mano (debajo de palabras clave) */
.ink-underline { position: relative; white-space: nowrap; }
.ink-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .09em;
  background: #F5C451; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .3s;
}
.in .ink-underline::after, .ink-underline.in::after { transform: scaleX(1); }

/* ---------- Reveal por líneas con máscara (clip) ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.lines .line > * { display: block; transform: translateY(115%); transition: transform .95s var(--ease); }
.lines.in .line > * { transform: none; }
.lines.in .line:nth-child(2) > * { transition-delay: .09s; }
.lines.in .line:nth-child(3) > * { transition-delay: .18s; }
.lines.in .line:nth-child(4) > * { transition-delay: .27s; }
.lines.in .line:nth-child(5) > * { transition-delay: .36s; }

/* ---------- Reveal de bloques (sutil, no AOS-slop) ---------- */
.rise { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.in { opacity: 1; transform: none; }
.rise[data-d="1"] { transition-delay: .08s; }
.rise[data-d="2"] { transition-delay: .16s; }
.rise[data-d="3"] { transition-delay: .24s; }
.rise[data-d="4"] { transition-delay: .32s; }

/* Reveal con clip-path para imágenes/marcos (más caro que un fade) */
.clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }
.clip-reveal.in { clip-path: inset(0 0 0% 0); }

/* ---------- Nav: subrayado que se dibuja ---------- */
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .42s var(--ease);
}
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Tarjeta: spotlight que sigue el cursor ---------- */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(167,139,250,.15), transparent 62%);
  opacity: 0; transition: opacity .45s; pointer-events: none;
}
.spot:hover::before { opacity: 1; }

/* Lift en hover */
.lift { transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.lift:hover { transform: translateY(-6px); border-color: rgba(167,139,250,.4); box-shadow: 0 30px 70px -34px rgba(139,92,246,.55); }

/* Magnético (JS escribe transform; aquí solo la vuelta suave) */
.magnetic { transition: transform .35s var(--ease); }

/* Flecha que avanza en hover */
.cta-arrow { transition: transform .35s var(--ease); }
.group:hover .cta-arrow { transform: translateX(5px); }

/* ---------- Barra de progreso de scroll ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 70;
  background: linear-gradient(90deg, #F5C451, #A78BFA, #22D3EE);
  box-shadow: 0 0 12px rgba(167,139,250,.5);
}

/* ---------- Cortina de transición entre páginas ---------- */
.page-veil {
  position: fixed; inset: 0; z-index: 100; background: #08080E;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s var(--ease); pointer-events: none;
}
.page-veil .veil-mark {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.5rem;
  opacity: 0; transition: opacity .3s; color: #F5C451;
}
.page-veil.busy .veil-mark { opacity: 1; }

/* ---------- Marquee ---------- */
.marquee-wrap { -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
                mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee { animation: marquee 34s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Float ---------- */
.float { animation: float 6.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* ---------- Aurora blobs ---------- */
.aurora { animation: aurora 18s ease-in-out infinite; }
.aurora.alt { animation-duration: 24s; }
@keyframes aurora { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-4%,0) scale(1.08); } }

/* ---------- Grid overlay ---------- */
.grid-overlay {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 35%, transparent 75%);
}

/* ---------- Focus visible artesanal ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid #F5C451; outline-offset: 3px; border-radius: 6px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .lines .line > *, .clip-reveal { transform: none !important; clip-path: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .ink-underline::after { transform: scaleX(1) !important; }
  .page-veil { display: none !important; }
}