/* ============================================
   YU Studio — Premium Animation System
   Replaces AOS with custom reveals + GSAP
   ============================================ */

/* ---- Reveal Base States ---- */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

/* Variant: fade-up (default) */
[data-reveal="fade-up"] {
  transform: translateY(50px);
}

/* Variant: fade-in (opacity only) */
[data-reveal="fade-in"] {
  transform: none;
}

/* Variant: slide-left */
[data-reveal="slide-left"] {
  transform: translateX(60px);
}

/* Variant: slide-right */
[data-reveal="slide-right"] {
  transform: translateX(-60px);
}

/* Variant: clip-up — wipes upward via clip-path */
[data-reveal="clip-up"] {
  clip-path: inset(100% 0 0 0);
  transform: none;
}

/* Variant: scale-in */
[data-reveal="scale-in"] {
  transform: scale(0.92);
}

/* ---- Revealed State ---- */
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  clip-path: inset(0 0 0 0);
  transition:
    opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Stagger Delays ---- */
[data-reveal-delay="1"].revealed { transition-delay: 0.08s; }
[data-reveal-delay="2"].revealed { transition-delay: 0.16s; }
[data-reveal-delay="3"].revealed { transition-delay: 0.24s; }
[data-reveal-delay="4"].revealed { transition-delay: 0.32s; }
[data-reveal-delay="5"].revealed { transition-delay: 0.40s; }
[data-reveal-delay="6"].revealed { transition-delay: 0.48s; }
[data-reveal-delay="7"].revealed { transition-delay: 0.56s; }
[data-reveal-delay="8"].revealed { transition-delay: 0.64s; }

/* ---- Cinematic Image Reveal ---- */
/* Image emerges via clip-path wipe + luminance bloom + scale settle */
.img-reveal {
  position: relative;
  overflow: hidden;
  display: block;
  clip-path: inset(12% 4% 12% 4%);
  transition: clip-path 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-reveal.revealed {
  clip-path: inset(0% 0% 0% 0%);
}

/* Image starts dark, desaturated, and zoomed — blooms into life */
.img-reveal img {
  transform: scale(1.18);
  filter: brightness(0.35) saturate(0.2);
  transition:
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 2s cubic-bezier(0.33, 1, 0.68, 1);
}

.img-reveal.revealed img {
  transform: scale(1);
  filter: brightness(1) saturate(1);
}

/* Variant: reveal from left */
.img-reveal--left {
  clip-path: inset(4% 100% 4% 0%);
}
.img-reveal--left.revealed {
  clip-path: inset(0% 0% 0% 0%);
}

/* Variant: reveal from top */
.img-reveal--top {
  clip-path: inset(0% 4% 100% 4%);
}
.img-reveal--top.revealed {
  clip-path: inset(0% 0% 0% 0%);
}

/* ---- Gold Line Grow ---- */
.line-grow {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.line-grow.revealed {
  transform: scaleY(1);
}

/* Horizontal variant */
.line-grow--h {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.line-grow--h.revealed {
  transform: scaleX(1);
}

/* ---- Split Text Word Reveal ---- */
.word-wrap {
  display: inline-block;
  vertical-align: bottom;
  /* clip-path instead of overflow:hidden — negative inset expands the
     visible area so descenders (g,y,p,f,q) and ascenders are never clipped,
     but translateY(120%) is still hidden since it's well beyond 30%. */
  clip-path: inset(-25% -5% -30% -5%);
}

.word-wrap .word {
  display: inline-block;
  transform: translateY(120%);
  will-change: transform;
}

/* ---- Footer Brand Marquee ---- */
.footer__brand {
  overflow: hidden;
}

.footer__brand-track {
  display: flex;
  white-space: nowrap;
  animation: yu-marquee 30s linear infinite;
  will-change: transform;
}

.footer__brand-track:hover {
  animation-play-state: paused;
}

.footer__brand-track span {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 11vw, 11rem);
  font-weight: 400;
  line-height: 1;
  color: var(--c-ivory);
  opacity: 0.12;
  letter-spacing: 0.02em;
  user-select: none;
  flex-shrink: 0;
  padding-right: 0.5em;
}

.footer__brand:hover .footer__brand-track span {
  opacity: 0.2;
  transition: opacity 0.4s ease;
}

@keyframes yu-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Magnetic Cursor ---- */
[data-magnetic] {
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

/* ---- Page Load Intro (hero elements hidden until GSAP fires) ---- */
.page-intro .nav {
  opacity: 0;
}

.page-intro .hero__content,
.page-intro .about-hero,
.page-intro .services-header,
.page-intro .portfolio-header,
.page-intro .contact-hero,
.page-intro .test-header,
.page-intro .prod-hero .container,
.page-intro .service-hero .container {
  opacity: 0;
}

/* Once intro completes, remove the class so CSS doesn't fight GSAP */
body:not(.page-intro) .nav {
  opacity: 1;
}

/* ---- Smooth Editorial Link Underline ---- */
.editorial-link {
  position: relative;
  border-bottom: none !important;
  padding-bottom: 5px;
}

.editorial-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.editorial-link.revealed::after,
.editorial-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- Button Hover Bloom ---- */
.btn,
.pc-form__submit,
.footer__contact-btn {
  position: relative;
  overflow: hidden;
}

.btn::before,
.pc-form__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(184,147,90,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn:hover::before,
.pc-form__submit:hover::before {
  opacity: 1;
}

/* ---- Counter Animation Placeholder ---- */
.stat-number[data-counter] {
  display: inline-block;
}

/* ---- Scroll-Scrub Text (Apple/Hermès style) ---- */
/* Words illuminate from dim → bright as you scroll through the section */
[data-scrub-text] {
  line-height: 1.3;
}

.scrub-word {
  display: inline;
  opacity: 0.12;
  will-change: opacity;
}

/* ---- Blur-to-Sharp Reveal ---- */
[data-reveal="blur-in"] {
  filter: blur(6px);
  transform: scale(1.04);
  opacity: 0;
}

[data-reveal="blur-in"].revealed {
  filter: blur(0px);
  transition:
    opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 2s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---- Paper Grain Texture ---- */
/* Subtle noise overlay for tactile postcard feel */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ---- Portfolio Card Hover Depth ---- */
.project-card,
.portfolio-item {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover,
.portfolio-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(108, 73, 51, 0.15);
}

/* ---- Journal Card Hover ---- */
.journal-card {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.journal-card:hover {
  transform: translateY(-4px);
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  .img-reveal {
    clip-path: none !important;
  }

  .img-reveal img {
    filter: none !important;
    transform: none !important;
  }

  .footer__brand-track {
    animation: none;
  }

  .word-wrap .word {
    transform: none !important;
  }

  .scrub-word {
    opacity: 1 !important;
  }

  body::after {
    display: none;
  }

  .page-intro .nav,
  .page-intro .hero__content {
    opacity: 1 !important;
  }
}

/* ---- Mobile: Disable parallax, simplify reveals ---- */
@media (max-width: 768px) {
  /* Reduce travel distances for smoother mobile experience */
  [data-reveal="fade-up"] {
    transform: translateY(20px);
  }

  [data-reveal="slide-left"],
  [data-reveal="slide-right"] {
    transform: translateY(20px);
  }

  [data-reveal="scale-in"] {
    transform: scale(0.96);
  }

  /* Faster, simpler reveals on mobile */
  [data-reveal].revealed {
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .img-reveal {
    clip-path: inset(6% 2% 6% 2%);
  }

  .img-reveal img {
    transform: scale(1.06);
    filter: brightness(0.5) saturate(0.4);
  }

  /* Faster image reveal on mobile */
  .img-reveal.revealed img {
    transition:
      transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
      filter 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .footer__brand-track span {
    font-size: clamp(2.5rem, 10vw, 5rem);
  }

  /* Reduce cinematic image reveal clip for performance */
  .img-reveal--left {
    clip-path: inset(2% 80% 2% 0%);
  }

  .img-reveal--top {
    clip-path: inset(0% 2% 80% 2%);
  }
}

/* ---- Small mobile: Minimal animations ---- */
@media (max-width: 480px) {
  [data-reveal="fade-up"] {
    transform: translateY(15px);
  }

  [data-reveal="slide-left"],
  [data-reveal="slide-right"] {
    transform: translateY(15px);
  }

  .img-reveal {
    clip-path: inset(4% 1% 4% 1%);
  }

  .img-reveal img {
    transform: scale(1.03);
    filter: brightness(0.6) saturate(0.5);
  }

  .footer__brand-track span {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }
}