/* ══════════════════════════════════════════════════
   MOTION LAYER — shared by Home.html + Services.html
   Animations, effects, parallax.

   Self-contained tokens: pages name their accent
   differently (--gold on Home, --violet on Services)
   but both resolve to the same hues, so this layer
   owns its own palette and stays page-agnostic.

   NOTE: link this AFTER each page's inline <style>
   so it wins the cascade on shared selectors (nav…).
   ══════════════════════════════════════════════════ */

:root {
  --m-accent:       #a78bfa;
  --m-accent-light: #c4b5fd;
  --m-accent-deep:  #3a2a9e;
  --m-muted:        rgba(246, 247, 255, 0.45);
  --m-ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--m-accent-deep), var(--m-accent), var(--m-accent-light));
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.7);
  z-index: 10000;
  will-change: transform;
}

/* ── CUSTOM CURSOR ── */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--m-accent);
  margin: -3px 0 0 -3px;
  will-change: transform;
}
.cursor-ring {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(167, 139, 250, 0.5);
  transition: opacity 0.3s, width 0.28s ease, height 0.28s ease,
              margin 0.28s ease, background 0.28s ease, border-color 0.28s ease;
  will-change: transform;
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring {
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.9);
}
body.cursor-hover .cursor-dot { opacity: 0; }

/* ── NAV — condense on scroll, retract on scroll-down ── */
nav {
  transition: box-shadow 0.4s ease, background 0.4s ease,
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
}
nav.nav-scrolled {
  padding: 0.45rem 1.3rem;
  background: linear-gradient(135deg, rgba(246,247,255,0.08) 0%, rgba(167,139,250,0.06) 50%, rgba(38,24,124,0.22) 100%);
  box-shadow: 0 6px 30px rgba(5, 3, 20, 0.55), 0 1px 0 rgba(246,247,255,0.12) inset;
}
nav.nav-hidden { transform: translateX(-50%) translateY(-150%); }

.nav-links a { position: relative; overflow: hidden; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0.85rem; right: 0.85rem;
  bottom: 0.25rem;
  height: 1px;
  background: var(--m-accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Mark the page you're on */
.nav-links a.is-current { color: var(--m-accent); }
.nav-links a.is-current::after { transform: scaleX(1); opacity: 0.5; }

/* ── HERO ATMOSPHERE ── */
.hero-inner { position: relative; z-index: 2; will-change: transform; }

/* Orbs drift with scroll only — no idle float. The hero stays calm and
   close to the original; parallax uses the `translate` property so it
   never clobbers Services' translateX(-50%) centring on .hero-orb-1. */
.orb, .hero-orb-1, .hero-orb-2 { will-change: transform; }

/* ── SPLIT TEXT REVEAL ──
   Unused by default (both heroes use the simpler fade-up).
   The padding/margin pair is load-bearing: display fonts like
   Cormorant have a glyph box taller than a <1 line-height, so a
   bare overflow:hidden mask shaves the caps and descenders. The
   padding gives the mask room; the negative margin cancels it
   out of layout. */
.split-text { animation: none !important; opacity: 1; }
.split-line {
  display: block;
  overflow: hidden;
  padding: 0.16em 0.08em;
  margin: -0.16em -0.08em;
}
.split-char {
  display: inline-block;
  transform: translateY(110%) rotate(6deg);
  opacity: 0;
  animation: charUp 0.9s var(--m-ease) forwards;
}
@keyframes charUp {
  to { transform: translateY(0) rotate(0); opacity: 1; }
}
.hero h1 span .split-char,
.hero h1 em .split-char { text-shadow: 0 0 40px rgba(167, 139, 250, 0.35); }

/* ── SCROLL REVEALS ──
   Gated on .js so a script failure can never leave
   the page invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s var(--m-ease), transform 0.85s var(--m-ease);
  will-change: opacity, transform;
}
.js .reveal[data-reveal="left"]  { transform: translateX(-40px) scale(0.97); }
.js .reveal[data-reveal="right"] { transform: translateX(40px) scale(0.97); }
.js .reveal.in-view { opacity: 1; transform: none; }

/* ── SECTION LABEL SHIMMER ── */
.section-label, .includes-label {
  background: linear-gradient(90deg, var(--m-accent) 0%, var(--m-accent-light) 45%, var(--m-accent) 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* ── IMAGE PARALLAX + SHEEN ── */
.about-img-wrap { overflow: hidden; border-radius: 12px; }
.about-img-wrap img {
  scale: 1.18;              /* headroom so drift never exposes an edge */
  will-change: transform;
  transition: filter 0.4s;
}
.img-sheen {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(105deg, transparent 35%, rgba(246,247,255,0.14) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 150% 0;
  pointer-events: none;
  z-index: 2;
  transition: background-position 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.about-img-wrap:hover .img-sheen { background-position: -80% 0; }

/* ── SPOTLIGHT (pointer-tracked glow) ── */
.spotlight { position: relative; overflow: hidden; }
.spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(167, 139, 250, 0.14),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.spotlight:hover::after { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ── TILT ── */
.service-card, .project-card, .type-card {
  transform-style: preserve-3d;
  transition: transform 0.4s var(--m-ease), border-color 0.3s, box-shadow 0.4s, background 0.35s;
}
.tilting { transition: border-color 0.3s, box-shadow 0.4s, background 0.35s; }
.project-card .project-info { transform: translateZ(30px); }
.project-img { will-change: transform; }

.js .project-card.reveal { transform: translateY(40px) scale(0.96); }
.js .project-card.reveal.in-view { transform: none; }

/* Numerals lift on hover */
.service-num, .type-num, .sli-num {
  transition: color 0.4s ease, transform 0.4s var(--m-ease), opacity 0.4s ease;
}
.service-card:hover .service-num {
  color: rgba(167, 139, 250, 0.5);
  transform: translateY(-4px) scale(1.05);
}
.type-card:hover .type-num { color: rgba(167, 139, 250, 0.3); transform: scale(1.08); }

/* ── MAGNETIC BUTTONS ── */
.magnetic { will-change: transform; }
.hero-cta, .hero-ghost, .btn-whatsapp, .btn-instagram, .about-link, .links a {
  transition: transform 0.35s var(--m-ease),
              background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
}

/* Shine sweep across the primary CTA */
.hero-cta { position: relative; overflow: hidden; }
.hero-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(246,247,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-cta:hover::before { left: 130%; }

/* ── SERVICES PAGE: service list rows ── */
.service-list-item { position: relative; overflow: hidden; }
.service-list-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--m-accent-deep), var(--m-accent));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.45s var(--m-ease);
}
.service-list-item:hover::before { transform: scaleY(1); }
.service-list-item { transition: background 0.3s, padding-left 0.4s var(--m-ease); }
.service-list-item:hover { padding-left: calc(40px + 12px); }
.service-list-item:hover .sli-num { opacity: 1; transform: translateX(2px); }
.sli-tag { transition: background 0.3s, border-color 0.3s, transform 0.35s var(--m-ease); }
.service-list-item:hover .sli-tag { transform: scale(1.06); border-color: rgba(167,139,250,0.6); }

/* ── SERVICES PAGE: type cards top bar ── */
.type-card::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--m-ease); }
.type-card:hover::before { transform: scaleX(1); }

/* ── SERVICES PAGE: FAQ ── */
.faq-trigger { transition: color 0.2s, padding-left 0.35s var(--m-ease); }
.faq-trigger:hover { padding-left: 8px; }

/* ── CONTACT AURORA ── */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.aurora-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(167,139,250,0.22), transparent 70%);
  top: -120px; left: -80px;
  animation: auroraDrift 18s ease-in-out infinite;
}
.aurora-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(58,42,158,0.35), transparent 70%);
  bottom: -110px; right: -60px;
  animation: auroraDrift 22s ease-in-out infinite reverse;
}
@keyframes auroraDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, 40px) scale(1.15); }
}
.contact-section > *:not(.aurora) { position: relative; z-index: 1; }

.links a { position: relative; overflow: hidden; z-index: 1; }
.links a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(167,139,250,0.25), rgba(38,24,124,0.4));
  transform: translateY(101%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.links a:hover::before { transform: translateY(0); }
.links a:hover { transform: translateY(-3px); }

/* ── CAROUSEL ARROWS ── */
.carousel-arrow { transition: transform 0.25s var(--m-ease), background 0.2s, border-color 0.2s; }
.carousel-arrow:hover { transform: scale(1.12); }

/* ── RESPONSIVE / MOTION PREFERENCES ── */
@media (max-width: 768px) {
  .cursor-dot, .cursor-ring { display: none; }
  .service-list-item:hover { padding-left: 20px; }
}

@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .split-char { opacity: 1 !important; transform: none !important; }
  .cursor-dot, .cursor-ring { display: none; }
  .about-img-wrap img { scale: 1; }
}