/* ══════════════════════════════════════════════════════════════
   Collazos Marketing — Motion & Interaction Layer
   Loaded on every page after site.css. GPU-only: transform/opacity.
══════════════════════════════════════════════════════════════ */

/* Native scroll. Smooth only for anchor jumps (in-page links),
   the wheel stays 1:1 with the OS. Disabled under reduced motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Page curtain (enter wipe on every load, exit wipe via JS) ── */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #09090b;
  transform: translateY(0);
  pointer-events: none;
  animation: curtainUp 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards;
}
.page-curtain::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--green, #4DBF2A);
}
@keyframes curtainUp { to { transform: translateY(-100.5%); } }
.page-curtain.exiting {
  animation: none;
  transform: translateY(100.5%);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: auto;
}
.page-curtain.exiting.cover { transform: translateY(0); }
.page-curtain.exiting::after { bottom: auto; top: -2px; }

/* ── Custom cursor (desktop fine pointers only) ── */
@media (hover: hover) and (pointer: fine) {
  body.mn-cursor, body.mn-cursor a, body.mn-cursor button,
  body.mn-cursor input, body.mn-cursor textarea { cursor: none; }
  #mn-dot, #mn-ring {
    position: fixed;
    top: 0; left: 0;
    z-index: 10000;
    pointer-events: none;
    border-radius: 50%;
    will-change: transform;
  }
  #mn-dot {
    width: 7px; height: 7px;
    background: var(--green, #4DBF2A);
  }
  #mn-ring {
    width: 34px; height: 34px;
    border: 1.5px solid rgba(77, 191, 42, 0.65);
    transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  }
  #mn-ring.is-hover {
    width: 64px; height: 64px;
    border-color: rgba(77, 191, 42, 0.95);
  }
}
#mn-dot, #mn-ring { display: none; }
body.mn-cursor #mn-dot, body.mn-cursor #mn-ring { display: block; }

/* ── Sub-page nav: transparent on load → frosted glass on scroll ── */
body.subpage { padding-top: 0; }
body.subpage #site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease;
}
body.subpage #site-nav:not(.scrolled):not(.open) .site-nav-link { color: rgba(255,255,255,0.85); }
body.subpage #site-nav:not(.scrolled):not(.open) .site-nav-link:hover { color: #ffffff; }
body.subpage #site-nav:not(.scrolled):not(.open) .site-nav-link.active { color: var(--green, #4DBF2A); }
body.subpage #site-nav:not(.scrolled):not(.open) .nav-toggle span { background: #ffffff; }

/* Dual logo: real white SVG over the hero, dark SVG on the frosted bar (no blurry CSS invert) */
.site-nav-logo .logo-on-dark { display: none; }
body.subpage #site-nav:not(.scrolled):not(.open) .logo-on-dark { display: block; }
body.subpage #site-nav:not(.scrolled):not(.open) .logo-on-light { display: none; }
.site-nav-logo img { height: 44px; }
@media (min-width: 1024px) { .site-nav-logo img { height: 48px; } }
body.subpage #site-nav.scrolled {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
/* Active link underline glow */
body.subpage .site-nav-link { position: relative; }
body.subpage .site-nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--green, #4DBF2A);
  transition: right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.subpage .site-nav-link:hover::after,
body.subpage .site-nav-link.active::after { right: 0; }

/* ── Full-screen mobile menu overlay (sub-pages) ── */
@media (max-width: 767px) {
  body.subpage #site-nav.open {
    position: fixed;
    inset: 0;
    background: #09090b;
    overflow-y: auto;
  }
  body.subpage #site-nav.open .site-nav-inner { align-content: flex-start; min-height: 100%; padding-bottom: 48px; }
  body.subpage #site-nav.open .logo-on-dark { display: block; }
  body.subpage #site-nav.open .logo-on-light { display: none; }
  body.subpage #site-nav.open .nav-toggle span { background: #ffffff; }
  body.subpage #site-nav.open .site-nav-left { padding-top: 10vh; gap: 10px; }
  body.subpage #site-nav.open .site-nav-link {
    font-family: var(--display, 'Cinzel', serif);
    font-size: 2.6rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    opacity: 0;
    transform: translateY(28px);
    animation: menuLink 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  body.subpage #site-nav.open .site-nav-link:nth-child(1) { animation-delay: 0.08s; }
  body.subpage #site-nav.open .site-nav-link:nth-child(2) { animation-delay: 0.16s; }
  body.subpage #site-nav.open .site-nav-link:nth-child(3) { animation-delay: 0.24s; }
  body.subpage #site-nav.open .site-nav-link.active { color: var(--green, #4DBF2A); }
  body.subpage #site-nav.open .site-nav-right { padding-top: 18px; opacity: 0; animation: menuLink 0.55s 0.34s cubic-bezier(0.22,1,0.36,1) forwards; }
  body.subpage #site-nav.open .site-nav-cta { font-size: 15px; padding: 14px 30px; }
}
@keyframes menuLink { to { opacity: 1; transform: translateY(0); } }
body.subpage.menu-open { overflow: hidden; }

/* ── Accent shimmer (brand green, subtle) ── */
.page-hero-title .accent,
.cta-heading .accent,
.cs-pullquote .accent {
  background: linear-gradient(100deg, #4DBF2A 0%, #8ee06a 28%, #4DBF2A 55%, #4DBF2A 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--green, #4DBF2A);
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 55% { background-position: 110% 0; }
  85%, 100% { background-position: -60% 0; }
}
/* Split headings: shimmer lives on the word spans, parent resets */
.mn-split-accent {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
  color: var(--green, #4DBF2A);
}
.mn-split-accent .mn-w {
  background: linear-gradient(100deg, #4DBF2A 0%, #8ee06a 28%, #4DBF2A 55%, #4DBF2A 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s ease-in-out infinite;
}

/* ── Sub-page hero scroll hint ── */
body.subpage .page-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 1.5px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--green, #4DBF2A));
  transform-origin: top;
  animation: scrollHint 2.1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  70%, 100% { transform: scaleY(1) translateY(18px); opacity: 0; }
}

/* ── Buttons: fill sweep + press feel ── */
.btn-primary, .site-nav-cta, .nav-cta {
  position: relative;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}
/* ::before at z:-1 paints above the button background but below its text */
.btn-primary::before, .site-nav-cta::before, .nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0d0d0f;
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.btn-primary:hover::before, .site-nav-cta:hover::before, .nav-cta:hover::before { transform: translateX(0); }
.btn-primary:hover, .site-nav-cta:hover, .nav-cta:hover { color: #ffffff; }
.btn-primary:active, .site-nav-cta:active, .nav-cta:active { transform: scale(0.97); }

/* ── Form focus glow ── */
.contact-input:focus, .contact-textarea:focus {
  outline: none;
  border-color: var(--green, #4DBF2A) !important;
  box-shadow: 0 0 0 3px rgba(77, 191, 42, 0.22), 0 0 24px rgba(77, 191, 42, 0.12);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* ── Card hover lift (tilt added by JS on desktop) ── */
.feature-card, .work-card, .faq-item {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.3s ease;
  will-change: transform;
}
@media (hover: hover) {
  .feature-card:hover { transform: translateY(-6px); border-color: rgba(77,191,42,0.45); }
  .faq-item:hover { transform: translateY(-3px); }
  .work-card:hover { box-shadow: 0 24px 64px rgba(0,0,0,0.45); }
  .footer-social-link { display: inline-block; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), color 0.2s; }
  .footer-social-link:hover { transform: scale(1.15) rotate(-4deg); }
}

/* ── Reduced motion: kill everything, content visible ── */
@media (prefers-reduced-motion: reduce) {
  .page-curtain { animation: none; transform: translateY(-101%); }
  body.subpage .page-hero::after,
  .page-hero-title .accent, .cta-heading .accent, .cs-pullquote .accent { animation: none; }
  .page-hero-title .accent, .cta-heading .accent, .cs-pullquote .accent {
    background: none; -webkit-text-fill-color: currentColor; color: var(--green, #4DBF2A);
  }
  body.subpage #site-nav.open .site-nav-link,
  body.subpage #site-nav.open .site-nav-right { animation: none; opacity: 1; transform: none; }
  .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}