/* ART-DIRECTION-P1 — motion, depth e interaction sobre P0 */
:root {
  --p1-ease: cubic-bezier(.22,.7,.25,1);
}

/* Hero: cinco planos, conteúdo sempre estável */
.p1 .hero-plane-grid {
  transform: translate3d(calc(var(--p1-hero, 0) * -7px), calc(var(--p1-hero, 0) * -3px), 0);
  will-change: transform;
}

.p1 .hero-plane-axis {
  transform-origin: 0 50%;
  transform: rotate(-36deg) scaleX(calc(.58 + var(--p1-hero, 0) * .42));
  opacity: calc(.42 + var(--p1-hero, 0) * .38);
}

.p1 .hero-plane-mark {
  transform: translate3d(calc(var(--p1-pointer-x, 0) * 5px), calc(var(--p1-hero, 0) * -15px + var(--p1-pointer-y, 0) * 4px), 0)
    scale(calc(1 + var(--p1-hero, 0) * .025));
  will-change: transform;
}

.p1 .hero-plane-mark::before {
  transform: scaleX(.64) rotate(calc(-17deg + var(--p1-hero, 0) * 5deg));
  opacity: calc(.55 + var(--p1-hero, 0) * .35);
}

.p1 .hero-plane-mark::after {
  content: "";
  position: absolute;
  inset: 20% 8%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  transform: none;
  opacity: calc(.18 + var(--p1-hero, 0) * .72);
  background: linear-gradient(112deg,
    transparent 0%,
    transparent calc(var(--p1-light, 18%) - 15%),
    rgba(142,184,207,.05) calc(var(--p1-light, 18%) - 8%),
    rgba(226,236,241,.72) var(--p1-light, 18%),
    rgba(45,133,184,.3) calc(var(--p1-light, 18%) + 7%),
    transparent calc(var(--p1-light, 18%) + 16%),
    transparent 100%);
  -webkit-mask: url('../logo-icon.png') center / contain no-repeat;
  mask: url('../logo-icon.png') center / contain no-repeat;
  filter: blur(.2px);
  pointer-events: none;
}

.p1 .hero-plane-measure i {
  transform-origin: 0 50%;
  transform: scaleX(calc(.3 + var(--p1-hero, 0) * .7));
}

.p1 .hero-plane-measure span {
  opacity: calc(.55 + var(--p1-hero, 0) * .45);
}

.p1 .hero-exit a span {
  transform: translateY(calc(var(--p1-hero, 0) * 3px));
}

/* A linha pertence apenas à saída do hero e à entrada da lógica */
.p1 .idea-rule span {
  transform-origin: 0 50%;
  transform: scaleX(calc(.18 + var(--p1-idea, 0) * .82));
  opacity: calc(.35 + var(--p1-idea, 0) * .65);
}

/* Web: W vira objeto editorial, sem ocultar a solução */
.p1 .web-feature {
  --p1-web-light: calc(8% + var(--p1-web, 0) * 76%);
  perspective: 1100px;
}

.p1 .feature-watermark {
  color: transparent;
  background:
    linear-gradient(108deg,
      #0b1013 0%,
      #11181c calc(var(--p1-web-light) - 18%),
      #45535b calc(var(--p1-web-light) - 5%),
      #9fb5c1 var(--p1-web-light),
      #273138 calc(var(--p1-web-light) + 8%),
      #0b1013 calc(var(--p1-web-light) + 20%));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 1px 0 rgba(241,243,244,.05), -1px 0 rgba(0,0,0,.9);
  transform: translate3d(calc(var(--p1-web, 0) * -7px), calc((.5 - var(--p1-web, 0)) * 8px), -1px);
  opacity: calc(.64 + var(--p1-web, 0) * .25);
  will-change: transform, background-position;
}

.p1 .web-title-block h3 {
  transform: translate3d(0, calc((.5 - var(--p1-web, 0)) * 5px), 0);
}

.p1 .feature-baseline span {
  width: calc(15% + var(--p1-web, 0) * 20%);
}
.p1 .feature-baseline i { left: calc(15% + var(--p1-web, 0) * 20%); }

/* Care: continuidade material, uma única passagem */
.p1 .care-line {
  width: calc(24% + var(--p1-care, 0) * 56%);
  opacity: calc(.45 + var(--p1-care, 0) * .55);
}
.p1 .care-layer::after {
  content: "";
  position: absolute;
  left: calc(var(--p1-care, 0) * 72% - 8%);
  bottom: 0;
  width: 16%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ad-blue-silver), transparent);
  opacity: calc(var(--p1-care, 0) * .6);
  pointer-events: none;
}

/* Processo permanece deliberadamente estático */
.p1 .process,
.p1 .process * { transform: none; }

/* Partners: profundidade de superfície, sem espetáculo */
.p1 .partners::before {
  transform: scaleX(.6) translate3d(calc(var(--p1-partners, 0) * -8px), 0, 0);
  opacity: calc(.58 + var(--p1-partners, 0) * .3);
}
.p1 .partners::after {
  background-position: calc(var(--p1-partners, 0) * 24px) 0;
}

/* Gramática de resposta funcional */
.p1 a,
.p1 button,
.p1 input,
.p1 select,
.p1 textarea { -webkit-tap-highlight-color: rgba(0,79,132,.2); }

.p1 .action-link span,
.p1 .quiet-link span,
.p1 .header-contact span,
.p1 .contact-direct > a span {
  display: inline-block;
  transition: transform .18s var(--p1-ease), color .18s ease;
}
.p1 .action-link:hover span,
.p1 .action-link:focus-visible span,
.p1 .quiet-link:hover span,
.p1 .quiet-link:focus-visible span,
.p1 .header-contact:hover span,
.p1 .header-contact:focus-visible span,
.p1 .contact-direct > a:hover span,
.p1 .contact-direct > a:focus-visible span { transform: translate3d(3px,-2px,0); }

.p1 .field {
  position: relative;
}
.p1 .field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ad-blue), var(--ad-blue-silver));
  transition: right .22s var(--p1-ease);
  pointer-events: none;
}
.p1 .field:focus-within::after { right: 0; }
.p1 .field:focus-within label { color: var(--ad-silver-0); }
.p1 .form-actions button:active,
.p1 .contact-direct > a:active { transform: translateY(1px); }

/* Sem JS: estado final estático; conteúdo e materiais completos */
html:not(.p1) .hero-plane-mark::after { display: none; }

@media (max-width: 700px) {
  .p1 .hero-plane-grid,
  .p1 .hero-plane-mark,
  .p1 .hero-plane-mark::before,
  .p1 .web-title-block h3 { transform: none; }
  .p1 .hero-plane-mark::after {
    inset: 18% 6%;
    opacity: calc(.12 + var(--p1-hero, 0) * .38);
  }
  .p1 .feature-watermark { display: none; }
  .p1 .web-feature { perspective: none; }
  .p1 .care-line { width: calc(30% + var(--p1-care, 0) * 50%); }
  .p1 .partners::before { transform: scaleX(.6); }
}

@media (prefers-reduced-motion: reduce) {
  .p1 .hero-plane-grid,
  .p1 .hero-plane-axis,
  .p1 .hero-plane-mark,
  .p1 .hero-plane-mark::before,
  .p1 .hero-plane-measure i,
  .p1 .hero-exit a span,
  .p1 .idea-rule span,
  .p1 .feature-watermark,
  .p1 .web-title-block h3,
  .p1 .partners::before { transform: none; }
  .p1 .hero-plane-mark::after { opacity: .28; --p1-light: 58%; }
  .p1 .feature-watermark { background: #12191d; -webkit-background-clip: text; background-clip: text; opacity: .82; }
  .p1 .feature-baseline span { width: 28%; }
  .p1 .feature-baseline i { left: 28%; }
  .p1 .care-line { width: 72%; opacity: .8; }
  .p1 .care-layer::after { display: none; }
  .p1 .action-link span,
  .p1 .quiet-link span,
  .p1 .header-contact span,
  .p1 .contact-direct > a span,
  .p1 .field::after { transition: none; }
}