/* ==========================================================================
   AWWWARDS.CSS — Animation layer: grain · preloader · cursor · reveals
   Ulises Arvizu Portfolio
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRAIN TEXTURE
   -------------------------------------------------------------------------- */
.grain {
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.038;
  pointer-events: none;
  z-index: 9997;
  will-change: transform;
  animation: grain 8s steps(10) infinite;
}
[data-theme="light"] .grain { opacity: 0.022; }

@keyframes grain {
  0%   { transform: translate(0,    0);    }
  10%  { transform: translate(-5%,  -10%); }
  20%  { transform: translate(-15%, 5%);   }
  30%  { transform: translate(7%,   -25%); }
  40%  { transform: translate(-5%,  25%);  }
  50%  { transform: translate(-15%, 10%);  }
  60%  { transform: translate(15%,  0%);   }
  70%  { transform: translate(0%,   15%);  }
  80%  { transform: translate(3%,   35%);  }
  90%  { transform: translate(-10%, 10%);  }
}

/* --------------------------------------------------------------------------
   PRELOADER
   -------------------------------------------------------------------------- */
#preloader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.18, 1);
}
#preloader.done {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}
.preloader-logo {
  overflow: hidden;
  line-height: 0.95;
  text-align: center;
}
.preloader-word {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  transform: translateY(110%);
  animation: pl-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.preloader-word.delay { animation-delay: 0.12s; }
.preloader-word em { color: var(--purple); font-style: normal; }
.preloader-status {
  position: absolute;
  top: clamp(2rem, 5vw, 4rem);
  right: clamp(2rem, 5vw, 4rem);
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.preloader-bar-track {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border);
}
.preloader-bar {
  height: 100%;
  background: var(--purple);
  width: 0%;
  animation: pl-bar 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.1s;
}

@keyframes pl-up  { to { transform: translateY(0); } }
@keyframes pl-bar { to { width: 100%; } }

/* --------------------------------------------------------------------------
   CUSTOM CURSOR
   -------------------------------------------------------------------------- */
.c-cursor-dot,
.c-cursor-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  top: 0; left: 0;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.3s;
}
.c-cursor-dot  { width: 5px; height: 5px; background: var(--ink); margin: -2.5px 0 0 -2.5px; }
.c-cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(240, 240, 238, 0.38);
  margin: -17px 0 0 -17px;
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1),
              height 0.45s cubic-bezier(0.16,1,0.3,1),
              margin 0.45s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s,
              opacity 0.3s;
}
.c-cursor-dot.visible,
.c-cursor-ring.visible { opacity: 1; }
.c-cursor-ring.hover {
  width: 72px; height: 72px;
  margin: -36px 0 0 -36px;
  border-color: var(--purple);
}
.c-cursor-ring.hide { opacity: 0; }
[data-theme="light"] .c-cursor-ring { border-color: rgba(17,17,24,0.28); }

/* Hide cursor on touch */
@media (pointer: coarse) { .c-cursor-dot, .c-cursor-ring { display: none; } }
/* Apply custom cursor when JS adds class */
body.has-cursor,
body.has-cursor a,
body.has-cursor button { cursor: none; }

/* --------------------------------------------------------------------------
   HERO LINE REVEAL  (wraps each line in overflow:hidden + slides inner)
   -------------------------------------------------------------------------- */
.hero-line {
  display: block;
  overflow: hidden;
  line-height: 1.02;
}
.hl-inner {
  display: block;
  transform: translateY(110%);
  animation: hl-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-line:nth-child(1) .hl-inner { animation-delay: 0.9s;  }
.hero-line:nth-child(2) .hl-inner { animation-delay: 1.05s; }
.hero-line:nth-child(3) .hl-inner { animation-delay: 1.2s;  }
.hero-line:nth-child(4) .hl-inner { animation-delay: 1.35s; }

.hero-desc {
  opacity: 0;
  transform: translateY(14px);
  animation: hl-fade 0.7s ease forwards 1.45s;
}
.hero-scroll-wrapper {
  opacity: 0;
  animation: hl-fade 0.7s ease forwards 1.6s;
}

@keyframes hl-up   { to { transform: translateY(0); } }
@keyframes hl-fade { to { opacity: 1; transform: translateY(0); } }


/* --------------------------------------------------------------------------
   SCROLL WORD REVEAL  (split-reveal class + .word spans via JS)
   -------------------------------------------------------------------------- */
.split-reveal { overflow: hidden; }
.split-reveal .word {
  display: inline-block;
  transform: translateY(106%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.split-reveal.in-view .word                    { transform: translateY(0); }
.split-reveal.in-view .word:nth-child(2)       { transition-delay: 0.07s; }
.split-reveal.in-view .word:nth-child(3)       { transition-delay: 0.14s; }
.split-reveal.in-view .word:nth-child(4)       { transition-delay: 0.21s; }
.split-reveal.in-view .word:nth-child(5)       { transition-delay: 0.28s; }
.split-reveal.in-view .word:nth-child(6)       { transition-delay: 0.35s; }
.split-reveal.in-view .word:nth-child(7)       { transition-delay: 0.42s; }
.split-reveal.in-view .word:nth-child(8)       { transition-delay: 0.49s; }
.split-reveal.in-view .word:nth-child(n+9)     { transition-delay: 0.56s; }

/* --------------------------------------------------------------------------
   IMPROVED FADE-UP (smoother easing)
   -------------------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Stagger children of fade-up */
.fade-up > *:nth-child(2) { transition-delay: 0.08s; }
.fade-up > *:nth-child(3) { transition-delay: 0.16s; }
.fade-up > *:nth-child(4) { transition-delay: 0.24s; }

/* --------------------------------------------------------------------------
   PROJECT CARD — enhanced hover
   -------------------------------------------------------------------------- */
.project-list-card { transition: background 0.3s; }

.project-list-card .project-image { overflow: hidden; }
.project-list-card .project-image img {
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
}
.project-list-card:hover .project-image img { transform: scale(1.05); }

.project-list-card .project-info {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-list-card:hover .project-info { transform: translateY(-3px); }

/* Top accent line on hover */
.project-list-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--purple);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.project-list-card:hover::before { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   NAV LINK — animated underline
   -------------------------------------------------------------------------- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   MAGNETIC ELEMENTS  (transform set by JS on mousemove)
   -------------------------------------------------------------------------- */
.nav-cta, .next-arrow-btn {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s,
              border-color 0.2s,
              background 0.2s !important;
}

/* --------------------------------------------------------------------------
   STAT COUNT-UP  (numbers pulse in)
   -------------------------------------------------------------------------- */
.stat-num.counting { color: var(--purple); }

/* --------------------------------------------------------------------------
   TICKER — pause on hover
   -------------------------------------------------------------------------- */
.hero-wrapper:hover .ticker-inner { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   QUOTE — bigger, bolder reveal
   -------------------------------------------------------------------------- */
.quote-section { position: relative; overflow: hidden; }

/* --------------------------------------------------------------------------
   FOOTER BRAND — hover glitch hint
   -------------------------------------------------------------------------- */
.footer-brand:hover span { color: var(--ink); transition: color 0.3s; }

/* --------------------------------------------------------------------------
   SCROLL INDICATOR PULSE
   -------------------------------------------------------------------------- */
.scroll-line {
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 1; transform: scaleX(1); transform-origin: right; }
  50%       { opacity: 0.4; transform: scaleX(0.5); }
}

/* --------------------------------------------------------------------------
   ARTICLE CARD — stagger on load
   -------------------------------------------------------------------------- */
.article-card, .article-item {
  transition: border-color 0.25s, background 0.25s;
}

/* --------------------------------------------------------------------------
   SECTION LABEL — slide in from left
   -------------------------------------------------------------------------- */
.section-label {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.section-label.in-view { opacity: 1; transform: translateX(0); }