/* interactions.css — microinterações premium e adaptação a telas grandes
 *  - Shine effect em botões primary
 *  - Card glow follow-cursor
 *  - Image hover com clip-path reveal
 *  - Tablet / laptop / ultrawide breakpoints específicos
 */
@layer polish {
  /* ============ SHINE EFFECT NOS BOTÕES PRIMARY ============
   * Um gradient diagonal "lustroso" passa pelo botão no hover.
   */
  .btn--primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn--primary::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -120%;
    inline-size: 80%;
    background: linear-gradient(
      105deg,
      transparent 0%,
      color-mix(in oklab, #fff 25%, transparent) 50%,
      transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: inset-inline-start 700ms var(--ease-out);
    z-index: 1;
  }
  .btn--primary:hover::before {
    inset-inline-start: 120%;
  }
  .btn--primary > * { position: relative; z-index: 2; }

  /* ============ CARD GLOW FOLLOW-CURSOR ============
   * Borda gradiente que reage ao cursor. Aplicado em cards com .card-glow.
   * Usa CSS vars escritas via JS (effects.js — função separada).
   */
  .card-glow {
    position: relative;
    isolation: isolate;
  }
  .card-glow::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(
      400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      color-mix(in oklab, var(--brand) 30%, transparent),
      transparent 40%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    pointer-events: none;
    z-index: -1;
  }
  .card-glow:hover::before { opacity: 1; }

  /* ============ IMAGE HOVER — CLIP-PATH REVEAL ============
   * Aplicado em .image-reveal — overlay vermelho desliza diagonalmente no hover.
   */
  .image-reveal {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .image-reveal img {
    transition: transform 800ms var(--ease-out),
                filter    600ms var(--ease-out);
  }
  .image-reveal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--brand) 40%, transparent) 0%,
      color-mix(in oklab, var(--brand-deep) 30%, transparent) 100%);
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    transition: clip-path 700ms var(--ease-out);
    pointer-events: none;
    z-index: 1;
  }
  .image-reveal:hover img {
    transform: scale(1.06);
    filter: contrast(1.05) saturate(1.1);
  }
  .image-reveal:hover::after {
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    opacity: 0.3;
  }

  /* ============ SECTION TRANSITIONS — ANCORAS COM SCROLL-MARGIN ============ */
  section[id] {
    scroll-margin-block-start: calc(var(--header-h) + var(--sp-4));
  }

  /* ============ LINK UNDERLINE PREMIUM ============
   * Para links em texto — underline com grow elegante.
   */
  .prose a,
  p a:not(.btn):not(.nav__link):not(.devcode-credits__link) {
    background-image: linear-gradient(var(--brand), var(--brand));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    transition: background-size var(--dur-base) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
    padding-block-end: 2px;
  }
  .prose a:hover,
  p a:not(.btn):not(.nav__link):not(.devcode-credits__link):hover {
    background-size: 100% 1px;
    color: var(--brand);
  }

  /* ============ SCROLL PROGRESS BAR — barra fina no topo ============ */
  .scroll-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(
      90deg,
      var(--brand) 0%,
      var(--brand-hot) 50%,
      var(--brand) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 0 12px var(--brand-glow);
  }
}

/* ============ ULTRAWIDE & LARGE-SCREEN RESPONSIVE ============ */
@layer layout {
  /* Container expansível em telas grandes */
  @media (min-width: 1440px) {
    :root {
      --container: 1320px;
    }
    .container { padding-inline: clamp(2rem, 4vw, 4rem); }
  }
  @media (min-width: 1920px) {
    :root {
      --container: 1480px;
    }
  }

  /* Hero ganha aspect-ratio diferente em ultrawide */
  @media (min-width: 1280px) {
    .hero__inner {
      grid-template-columns: 1.1fr 0.9fr !important;
      gap: clamp(3rem, 6vw, 6rem) !important;
    }
    .hero__media {
      aspect-ratio: 4/5;
    }
  }

  /* Servicos: 3-col padrão. Em ultrawide ganha respiro extra */
  @media (min-width: 1440px) {
    .servicos__grid {
      gap: var(--sp-7);
    }
    .servico {
      padding: var(--sp-7);
    }
  }

  /* Planos: featured fica mais elevado em ultrawide */
  @media (min-width: 1280px) {
    .plano--featured {
      transform: scale(1.04);
    }
    .plano--featured:hover {
      transform: scale(1.05) translateY(-5px);
    }
  }

  /* Footer: 5 colunas em telas muito largas (atualmente 4) */
  @media (min-width: 1440px) {
    .footer__grid {
      grid-template-columns: 1.6fr repeat(3, 1fr);
      gap: clamp(3rem, 5vw, 5rem);
    }
  }
}

/* ============ TABLET PORTRAIT-LANDSCAPE TUNING ============ */
@layer layout {
  /* iPad portrait — entre mobile breakpoint e desktop. Servicos e planos ficam 2-col em vez de 3 */
  @media (min-width: 640px) and (max-width: 1023px) {
    .servicos__grid,
    .planos__grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Plano featured ocupa as 2 colunas pra ficar em destaque */
    .planos__grid > .plano--featured {
      grid-column: 1 / -1;
      max-inline-size: 600px;
      margin-inline: auto;
    }
  }
}

/* ============ HIGH-DENSITY DISPLAYS (Retina, 2x) ============ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .brand__logo,
  .footer__brand-logo {
    image-rendering: -webkit-optimize-contrast;
  }
}