/* House Media — Motion System v1
   Transforms + opacity first; no layout shifts. Progressive enhancement. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: cubic-bezier(.2, .85, .25, 1);
}
body { overflow-x: clip; }
section[id] { scroll-margin-top: 82px; }

/* Navigation gets a light-weight progress bar and active-state feedback */
.nav { transition: background-color .35s ease, box-shadow .35s ease; }
.nav.is-scrolled {
  background: rgba(8, 12, 23, .96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, #A886DE, #58318F);
  box-shadow: 0 0 12px rgba(168,134,222,.42);
  pointer-events: none;
}
.brand-logo {
  transition: transform .45s var(--motion-ease), filter .45s ease;
  transform-origin: left center;
}
.brand:hover .brand-logo { transform: translateY(-2px) scale(1.035); filter: drop-shadow(0 0 12px rgba(168,134,222,.17)); }
.links a { position: relative; transition: color .25s ease; }
.links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: linear-gradient(90deg,#A886DE,#58318F);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--motion-ease);
}
.links a:hover::after, .links a.is-current::after, .links a:focus-visible::after { transform: scaleX(1); }
.links a.is-current { color: #A886DE; }

/* The hero stays dynamic without obscuring the heading */
.hero-video { transform: translate3d(0, var(--hero-parallax,0px),0) scale(1.25); transform-origin: center; }
.hero::after {
  background:
    radial-gradient(380px circle at var(--glow-x,80%) var(--glow-y,45%), rgba(168,134,222,.115), transparent 78%),
    linear-gradient(0deg,#080c17c9,transparent 32%,transparent 78%,#080c1760);
}
.hero h1 em {
  background: linear-gradient(110deg,#A886DE 5%,#C9AFF1 32%,#58318F 63%,#A886DE 92%);
  background-size: 240% 100%;
  background-position: 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hm-type-shimmer 10s ease-in-out 1.5s infinite alternate;
}
@keyframes hm-type-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes hm-hero-rise {
  from { opacity: 0; filter: blur(7px); transform: translate3d(0, 26px, 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}
.motion-ready .hero .eyebrow,
.motion-ready .hero h1,
.motion-ready .hero p,
.motion-ready .hero .actions {
  animation: hm-hero-rise .95s var(--motion-ease) both;
}
.motion-ready .hero .eyebrow { animation-delay: 100ms; }
.motion-ready .hero h1 { animation-delay: 210ms; }
.motion-ready .hero p { animation-delay: 355ms; }
.motion-ready .hero .actions { animation-delay: 500ms; }

/* Minimal scroll invitation */
.scroll-cue {
  position: absolute; z-index: 2; bottom: 27px;
  left: max(22px, calc((100vw - 1200px)/2));
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: rgba(214,228,247,.7);
  pointer-events: none;
}
.scroll-cue i {
  display: block; width: 42px; height: 1px; position: relative; overflow: hidden;
  background: rgba(255,255,255,.2);
}
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: #A886DE;
  transform-origin: left; animation: hm-cue 2.2s ease-in-out infinite;
}
@keyframes hm-cue { 0% { transform: translateX(-110%); } 64%,100% { transform: translateX(110%); } }

/* In-view reveals are enabled only after IntersectionObserver is registered */
.motion-ready .motion-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 30px, 0);
  transition:
    opacity .82s var(--motion-ease),
    filter .85s var(--motion-ease),
    transform .86s var(--motion-ease);
  transition-delay: var(--motion-delay,0ms);
}
.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0);
}

/* Small animated accent on section titles */
.sectionhead h2::after {
  content: ""; display: block; width: 61px; height: 3px; margin-top: 23px;
  background: linear-gradient(90deg,#A886DE,#58318F);
  border-radius: 20px; transform-origin: left center;
}
.motion-ready .sectionhead h2::after {
  transform: scaleX(0);
  transition: transform .9s var(--motion-ease) .34s;
}
.motion-ready .sectionhead h2.is-visible::after { transform: scaleX(1); }

/* Ambient lighting that moves slowly, never shifts layout */
.section.dark, .contact { position: relative; isolation: isolate; overflow: hidden; }
.section.dark::before, .contact::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(680px, 82vw); height: min(680px, 82vw);
  border-radius: 50%; opacity: .48;
  background: radial-gradient(circle, rgba(88,49,143,.23),rgba(168,134,222,.1) 32%,transparent 68%);
  filter: blur(18px);
  transform: translate3d(0,0,0);
  animation: hm-ambient 17s ease-in-out infinite alternate;
}
.section.dark::before { left: -25%; top: -15%; }
.contact::before { right: -25%; bottom: -55%; animation-delay: -9s; }
@keyframes hm-ambient {
  from { transform: translate3d(-3%,5%,0) scale(.93); }
  to { transform: translate3d(20%,-8%,0) scale(1.14); }
}
.section.dark > .wrap, .contact > .wrap { position: relative; z-index: 1; }

/* Hover details for service and portfolio cards */
.card, .project { position: relative; isolation: isolate; overflow: hidden; }
.card::before, .project::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(440px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(168,134,222,.16),transparent 65%);
  transition: opacity .4s ease;
}
.project::before { background: radial-gradient(480px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(88,49,143,.26),transparent 68%); }
.card:hover::before, .project:hover::before { opacity: 1; }
.card, .project { transition: border-color .3s ease, box-shadow .4s ease, transform .45s var(--motion-ease); }
.card:hover {
  border-color: rgba(168,134,222,.55);
  box-shadow: 0 26px 48px rgba(0,0,0,.23),0 0 28px rgba(168,134,222,.06);
}
.project:hover {
  border-color: rgba(88,49,143,.55);
  box-shadow: 0 26px 50px rgba(0,0,0,.25);
}
.motion-ready .card.motion-reveal.is-visible:hover,
.motion-ready .project.motion-reveal.is-visible:hover {
  transform: translate3d(0,-9px,0);
}
.card .arrow { display: inline-block; transition: transform .45s var(--motion-ease); }
.card:hover .arrow { transform: translate3d(8px,-7px,0); }
.project h3 { transition: transform .4s var(--motion-ease); }
.project:hover h3 { transform: translate3d(0,-4px,0); }

/* Process: a responsive moving top rule and number glow */
.step {
  background: linear-gradient(90deg, #A886DE, #58318F) left top / 0px 1px no-repeat;
  transition: background-size .65s var(--motion-ease), border-color .4s ease;
}
.step:hover { background-size: 100% 1px; border-color: transparent; }
.step strong { display: inline-block; transition: transform .45s var(--motion-ease), color .3s ease; }
.step:hover strong { transform: translateY(-3px); color: #C9AFF1; }

/* Premium but subtle button sheen */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .3s var(--motion-ease), box-shadow .3s ease, background-color .3s ease; }
.btn::before {
  content: ""; position: absolute; top: -70%; bottom: -70%; width: 35%;
  left: -58%; transform: rotate(22deg); pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transition: left .78s var(--motion-ease);
}
.btn:hover::before { left: 125%; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible, .brand:focus-visible, .whatsapp-float:focus-visible, .links a:focus-visible {
  outline: 2px solid #A886DE; outline-offset: 5px;
}
.footer-logo { transition: transform .4s var(--motion-ease), opacity .3s ease; }
.footer-logo:hover { transform: translate3d(0,-3px,0); opacity: 1; }

/* WhatsApp is noticeable once, without a permanently flashing control */
.whatsapp-float::after {
  content: ""; position: absolute; inset: -6px; border: 2px solid #25d366;
  border-radius: inherit; opacity: 0; pointer-events: none;
  animation: hm-whatsapp-ring 2s ease-out 2.2s 2;
}
@keyframes hm-whatsapp-ring {
  0% { transform: scale(.92); opacity: .6; }
  75%,100% { transform: scale(1.36); opacity: 0; }
}
@media(max-width:800px){
  .hero-video { transform: scale(1.15); }
  .scroll-cue { bottom: 20px; }
  .motion-ready .motion-reveal { transform: translate3d(0,22px,0); }
}
@media(max-width:480px){
  .scroll-cue { bottom: 15px; font-size: 10px; letter-spacing: .12em; }
  .scroll-cue i { width: 25px; }
  .motion-ready .motion-reveal { filter: none; }
  .card:hover, .project:hover { box-shadow: none; }
}
@media(hover:none){
  .card::before,.project::before { display:none; }
}
@media(prefers-reduced-motion:reduce){
  html { scroll-behavior: auto !important; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .motion-ready .motion-reveal,.motion-ready .hero .eyebrow,.motion-ready .hero h1,
  .motion-ready .hero p,.motion-ready .hero .actions {
    opacity: 1 !important; filter: none !important; transform: none !important;
  }
  .hero-video { display:none !important; }
  .sectionhead h2::after { transform: none !important; }
  .scroll-cue { display:none; }
  .whatsapp-float::after { display:none; }
}

/* Hero motion v2: letter-by-letter entrance + responsive pointer-controlled scene. */
.hero { --glow-x: 72%; --glow-y: 46%; --scene-x: 0px; --scene-y: 0px; --scene-reverse-x: 0px; --scene-reverse-y: 0px; --video-x: 0px; --video-y: 0px; }
.hero-video {
  z-index: -4;
  transform: translate3d(var(--video-x, 0px), calc(var(--hero-parallax, 0px) + var(--video-y, 0px)), 0) scale(1.28);
}
.hero-mouse-stage {
  position: absolute; inset: -4%; z-index: -3;
  pointer-events: none; overflow: hidden; isolation: isolate;
}
.hero-mouse-stage .hero-mouse-grid {
  position: absolute;
  top: -35%; left: 18%; width: 110%; height: 150%;
  background:
    linear-gradient(90deg,rgba(145,105,200,.15) 1px,transparent 1px),
    linear-gradient(0deg,rgba(145,105,200,.13) 1px,transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 70% 65% at 65% 57%,#000 5%,transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 65% 57%,#000 5%,transparent 75%);
  opacity: .36;
  transform: perspective(850px) rotateX(24deg) rotateZ(-9deg)
    translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0);
}
.hero-mouse-stage .hero-mouse-light {
  position: absolute; width: min(56vw, 680px); aspect-ratio: 1; border-radius: 50%;
  mix-blend-mode: screen; pointer-events: none;
  filter: blur(18px); opacity: .4;
}
.hero-mouse-stage .hero-mouse-light.cyan {
  top: -29%; right: -10%;
  background: radial-gradient(circle,rgba(134,81,193,.36),rgba(77,42,145,.17) 34%,transparent 68%);
  transform: translate3d(var(--scene-x,0px),var(--scene-y,0px),0);
}
.hero-mouse-stage .hero-mouse-light.violet {
  right: 15%; bottom: -48%; width: min(52vw, 610px);
  background: radial-gradient(circle,rgba(88,49,143,.42),rgba(79,39,148,.12) 39%,transparent 72%);
  transform: translate3d(var(--scene-reverse-x,0px),var(--scene-reverse-y,0px),0);
}
.hero::before { z-index: -2; }
.hero::after {
  z-index: -1;
  background:
    radial-gradient(480px circle at var(--glow-x,72%) var(--glow-y,46%),rgba(168,134,222,.20),rgba(88,49,143,.09) 33%,transparent 74%),
    linear-gradient(0deg,#080c17ca,transparent 30%,transparent 78%,#080c1764);
}
.hero .wrap { z-index: 2; }
/* The accessible heading stays in the DOM as one named heading.
   JS only splits the visual copy; words stay intact for line wrapping. */
.hero .hero-word { display: inline-block; white-space: nowrap; vertical-align: baseline; perspective: 600px; }
.hero .hero-letter { display: inline-block; transform-origin: 50% 95%; }
.hero.hero-letter-motion .hero-letter {
  animation: hm-letter-reveal .82s cubic-bezier(.18,.85,.2,1) both;
  animation-delay: var(--letter-delay,0ms);
}
@keyframes hm-letter-reveal {
  from { opacity: 0; filter: blur(4px); transform: translate3d(0,.78em,0) rotateX(-38deg); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) rotateX(0deg); }
}
/* Suppress the old whole-heading animation when the letter entrance is enabled. */
.motion-ready .hero.hero-letter-motion h1 {
  animation: none !important; opacity: 1; filter: none; transform: none;
}
/* Keep the gradient title accent visible even with per-letter markup. */
.hero.hero-letter-motion h1 em {
  background: none !important;
  -webkit-text-fill-color: #A886DE;
  color: #A886DE;
  animation: none !important;
}
.hero.hero-letter-motion h1 em .hero-letter {
  -webkit-text-fill-color: #A886DE;
  color: #A886DE;
}
@media(max-width:800px) {
  .hero-mouse-stage .hero-mouse-grid { opacity: .24; }
  .hero-mouse-stage .hero-mouse-light { opacity: .22; }
}
@media(hover:none), (pointer:coarse) {
  .hero-mouse-stage .hero-mouse-light { opacity: .22; }
  .hero-mouse-stage .hero-mouse-grid { opacity: .22; }
}
@media(prefers-reduced-motion:reduce) {
  .hero .hero-letter { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  .hero-mouse-stage { display: none !important; }
  .hero-video { transform: none !important; }
}


/* Deep-purple visual system: primary surfaces stay dark, accents become amethyst. */
:root {
  --hm-accent: #A886DE;
  --hm-accent-strong: #6540A2;
  --hm-accent-deep: #402269;
}
.hero-video { filter: brightness(.62) saturate(.85) hue-rotate(78deg); }
.hero h1 em, .hero.hero-letter-motion h1 em,
.hero.hero-letter-motion h1 em .hero-letter {
  color: #B399E8;
  -webkit-text-fill-color: #B399E8;
}
.hero::after {
  background:
    radial-gradient(490px circle at var(--glow-x,72%) var(--glow-y,46%),
      rgba(135,78,194,.27),rgba(75,37,131,.18) 38%,transparent 76%),
    linear-gradient(0deg,#080710d7,transparent 30%,transparent 77%,#0a08156d);
}
.hero-mouse-stage .hero-mouse-grid {
  background:
    linear-gradient(90deg,rgba(150,105,210,.15) 1px,transparent 1px),
    linear-gradient(0deg,rgba(150,105,210,.13) 1px,transparent 1px);
}
.hero-mouse-stage .hero-mouse-light.cyan {
  background:radial-gradient(circle,rgba(126,73,193,.43),rgba(80,39,148,.22) 36%,transparent 70%);
}
.hero-mouse-stage .hero-mouse-light.violet {
  background:radial-gradient(circle,rgba(69,32,121,.48),rgba(93,50,166,.20) 40%,transparent 75%);
}
@media(prefers-reduced-motion:reduce) {
  .hero-video { filter: none; }
}


/* NEON TRACE | "mais longe." - subtle purple glyph outline, revealed left to right.
   The filled dark-to-main-purple lettering remains untouched. */
.hero h1 em {
  -webkit-text-stroke: .85px rgba(186,116,255,.86);
  text-shadow:
    0 0 5px rgba(161,82,249,.4),
    0 0 17px rgba(104,43,186,.32);
}
.hero.hero-letter-motion h1 em .hero-letter.neon-letter {
  position: relative;
  -webkit-text-stroke: .65px rgba(187,120,255,.82);
  text-shadow:
    0 0 5px rgba(164,92,249,.4),
    0 0 14px rgba(113,51,209,.3);
}
.hero.hero-letter-motion h1 em .hero-letter.neon-letter::after {
  content: attr(data-outline);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font: inherit;
  letter-spacing: inherit;
  white-space: pre;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.4px #D3A1FF;
  text-shadow: none;
  filter:
    drop-shadow(0 0 3px rgba(189,105,255,.9))
    drop-shadow(0 0 11px rgba(137,56,241,.7));
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  animation: hm-neon-outline-draw .64s cubic-bezier(.24,.66,.24,1) var(--neon-delay,1.8s) forwards;
}
@keyframes hm-neon-outline-draw {
  0% { clip-path: inset(0 100% 0 0); opacity: .35; }
  100% { clip-path: inset(-.16em -.18em -.16em -.18em); opacity: 1; }
}
@media(max-width:480px) {
  .hero.hero-letter-motion h1 em .hero-letter.neon-letter::after {
    -webkit-text-stroke: 1.05px #D3A1FF;
    filter: drop-shadow(0 0 3px rgba(167,81,242,.78)) drop-shadow(0 0 7px rgba(128,54,209,.6));
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero.hero-letter-motion h1 em .hero-letter.neon-letter::after {
    animation: none !important;
    opacity: 1;
    clip-path: none;
  }
}