/* premium.css — Tier R$10k · Christiana de Oliveira */

/* ── Thread visual (continuidade hero → dor) ── */
.tier-premium .scroll-thread {
  position: fixed;
  left: clamp(0.5rem, 1.8vw, 1.25rem);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(92, 107, 74, 0.12) 8%,
    rgba(92, 107, 74, 0.38) 35%,
    rgba(92, 107, 74, 0.38) 62%,
    rgba(92, 107, 74, 0.08) 88%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform-origin: top center;
  transition: opacity 0.5s ease;
}

html.motion-active.tier-premium .scroll-thread {
  opacity: 1;
}

.tier-premium .scroll-thread.is-faded {
  opacity: 0;
}

@media (max-width: 768px) {
  .tier-premium .scroll-thread {
    display: none;
  }

  .tier-premium .hero__stats {
    margin-top: var(--space-md);
    padding-bottom: var(--space-md);
  }
}

/* ── Hero cinematográfico ── */
.tier-premium .hero--premium {
  position: relative;
  overflow: clip;
}

.tier-premium .hero__visual {
  perspective: 1200px;
}

.tier-premium .hero__frame--reveal {
  transform-style: preserve-3d;
  will-change: transform, clip-path;
}

html:not(.motion-active) .tier-premium .hero__frame--reveal {
  opacity: 0;
  clip-path: inset(55% 10% 0 10% round 120px 120px 16px 16px);
  transform: scale(1.03);
}

@keyframes heroMaskReveal {
  from {
    opacity: 0;
    clip-path: inset(48% 6% 0 6% round 120px 120px 16px 16px);
    transform: scale(1.04) translateY(12px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 120px 120px 16px 16px);
    transform: scale(1) translateY(0);
  }
}

html.motion-active.tier-premium .hero__frame--reveal {
  animation: heroMaskReveal 1s cubic-bezier(0.19, 1, 0.22, 1) 0.1s both;
}

html.motion-active.tier-premium .hero__visual {
  animation: none;
  opacity: 1;
}

.tier-premium .hero__visual-decor [data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

@media (hover: hover) and (pointer: fine) {
  .tier-premium .hero__frame[data-tilt]:hover {
    box-shadow: 0 32px 72px rgba(92, 107, 74, 0.32);
  }
}

/* ── Stats dentro do hero — faixa clean ── */
.tier-premium .hero__stats .stats-strip {
  border-top-color: rgba(92, 107, 74, 0.14);
}

html.motion-active.tier-premium .hero__stats .stats-strip__item {
  animation: statFloatIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.motion-active.tier-premium .hero__stats .stats-strip__item:nth-child(1) { animation-delay: 0.35s; }
html.motion-active.tier-premium .hero__stats .stats-strip__item:nth-child(2) { animation-delay: 0.42s; }
html.motion-active.tier-premium .hero__stats .stats-strip__item:nth-child(3) { animation-delay: 0.49s; }
html.motion-active.tier-premium .hero__stats .stats-strip__item:nth-child(4) { animation-delay: 0.56s; }

@keyframes statFloatIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Quote reveal ── */
.tier-premium .quote-banner--reveal blockquote {
  overflow: hidden;
}

.tier-premium .quote-banner--reveal .quote-line {
  display: block;
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.tier-premium .quote-banner--reveal.is-revealed .quote-line {
  opacity: 1;
  transform: translateY(0);
}

.tier-premium .quote-banner--reveal.is-revealed .quote-line:nth-child(2) {
  transition-delay: 0.12s;
}

/* ── Método pinned (sticky stack desktop) ── */
@media (min-width: 1024px) {
  .tier-premium .method-pinned {
    position: relative;
  }

  .tier-premium .method-pinned .method-grid {
    display: block;
    max-width: 36rem;
    margin-inline: auto;
  }

  .tier-premium .method-pinned .method-card {
    position: sticky;
    top: calc(5.5rem + var(--course-bar-offset, 0px));
    margin-bottom: min(38vh, 18rem);
    box-shadow: 0 24px 56px rgba(45, 52, 38, 0.12);
    transform-origin: center top;
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.45s ease,
      opacity 0.45s ease;
  }

  .tier-premium .method-pinned .method-card.is-behind {
    transform: scale(0.94) translateY(-8px);
    opacity: 0.55;
    box-shadow: 0 8px 24px rgba(45, 52, 38, 0.06);
  }

  .tier-premium .method-pinned .method-card:last-child {
    margin-bottom: 4rem;
  }
}

/* ── Depoimentos depth ── */
.tier-premium #depoimentos {
  position: relative;
  overflow: clip;
}

.tier-premium .section-decor-ellipse {
  position: absolute;
  top: -8%;
  right: -12%;
  width: min(55vw, 28rem);
  height: min(55vw, 28rem);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 107, 74, 0.09) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.tier-premium #depoimentos .container {
  position: relative;
  z-index: 1;
}

.tier-premium .depoimentos-wrap {
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ── Premium blur-fade timing ── */
.tier-premium .blur-fade {
  --bf-blur: 8px;
  --bf-duration: 0.55s;
  --bf-y: 10px;
}

.tier-premium .course-section .blur-fade {
  --bf-blur: 10px;
  --bf-duration: 0.6s;
}

.tier-premium .course-hero__poster.blur-fade {
  --bf-delay: 0.14s;
  --bf-duration: 0.7s;
}

.tier-premium .logo-cloud.blur-fade {
  --bf-duration: 0.65s;
}

.tier-premium .scroll-velocity-band.blur-fade,
.tier-premium .scrolling-text-band.blur-fade {
  --bf-blur: 4px;
  --bf-duration: 0.5s;
}

.tier-premium .contact-card {
  transition:
    transform 0.35s var(--ease-out-soft),
    box-shadow 0.35s var(--ease-out-soft);
}

@media (hover: hover) {
  .tier-premium .contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(45, 52, 38, 0.1);
  }
}

.tier-premium .footer__content.blur-fade {
  --bf-duration: 0.6s;
}

/* ════════════════════════════════════════════════════════════
   PREMIUM POLISH v2 — refinamento de acabamento (reusável no nicho)
   Tudo token-driven (var(--color-*)) → serve de template para
   outras leads do mesmo nicho. Camada aditiva: só refina o que
   já existe, sem reescrever regras base.
   ════════════════════════════════════════════════════════════ */

/* ── Tipografia editorial ── */
.tier-premium h1,
.tier-premium h2,
.tier-premium h3,
.tier-premium .section__header h2 {
  text-wrap: balance;
  letter-spacing: -0.012em;
}

.tier-premium p,
.tier-premium .hero__lead,
.tier-premium .section__header p {
  text-wrap: pretty;
}

.tier-premium body,
.tier-premium {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Palavra em destaque com gradiente sutil (títulos) */
.tier-premium .destaque {
  background: linear-gradient(
    100deg,
    var(--color-primary) 0%,
    var(--color-primary-mid) 55%,
    var(--color-primary-dark) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-primary);
}

/* Seleção e foco com identidade da marca */
.tier-premium ::selection {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-secondary);
}

.tier-premium a:focus-visible,
.tier-premium button:focus-visible,
.tier-premium .btn:focus-visible,
.tier-premium [tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Eyebrow / label editorial ── */
.tier-premium .section__label {
  position: relative;
  padding-left: 0.25rem;
}

.tier-premium .section__label::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary));
  opacity: 0.9;
}

.tier-premium .section__header--center .section__label {
  justify-content: center;
}

/* ── Botões: profundidade tátil ── */
.tier-premium .btn--primary {
  box-shadow:
    0 1px 2px rgba(45, 52, 38, 0.12),
    0 8px 22px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.tier-premium .btn--primary:hover,
.tier-premium .btn--primary:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(45, 52, 38, 0.14),
    0 18px 40px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.tier-premium .btn:active {
  transform: translateY(0) scale(0.98);
}

.tier-premium .btn--lg {
  letter-spacing: 0.01em;
}

/* ── Hero frame: anel interno + brilho refinado ── */
.tier-premium .hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 -80px 90px -60px rgba(45, 52, 38, 0.5);
  background: linear-gradient(180deg, transparent 55%, rgba(45, 52, 38, 0.08) 100%);
}

.tier-premium .hero__frame {
  box-shadow:
    0 0 0 1px rgba(92, 107, 74, 0.06),
    0 30px 60px -20px rgba(92, 107, 74, 0.28),
    0 12px 24px -12px rgba(45, 52, 38, 0.18);
}

/* ── Cards (método): profundidade + acento superior no hover ── */
.tier-premium .method-card {
  box-shadow: 0 1px 2px rgba(45, 52, 38, 0.04), 0 6px 20px -12px rgba(45, 52, 38, 0.12);
  overflow: hidden;
}

.tier-premium .method-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out-soft);
  z-index: 2;
}

@media (hover: hover) {
  .tier-premium .method-card:hover {
    box-shadow:
      0 2px 4px rgba(45, 52, 38, 0.06),
      0 24px 50px -18px rgba(92, 107, 74, 0.3);
  }

  .tier-premium .method-card:hover::before {
    transform: scaleX(1);
  }
}

/* ── Stats: hover sutil + números com peso premium ── */
.tier-premium .stats-strip__item {
  border-radius: var(--radius-md);
  transition: transform 0.35s var(--ease-out-soft), background 0.35s ease;
}

@media (hover: hover) {
  .tier-premium .stats-strip__item:hover {
    transform: translateY(-4px);
  }
}

.tier-premium .stats-strip__value {
  letter-spacing: -0.02em;
}

/* ── Marca d'água de textura sutil nas seções alt (riqueza sem clutter) ── */
.tier-premium .section--alt {
  position: relative;
  background-color: var(--color-background-alt);
  background-image: radial-gradient(
      circle at 15% 12%,
      color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
      transparent 42%
    ),
    radial-gradient(
      circle at 85% 88%,
      color-mix(in srgb, var(--color-primary-mid) 5%, transparent) 0%,
      transparent 42%
    );
}

/* ── Links em prosa: sublinhado que revela ── */
.tier-premium .section__header p a,
.tier-premium .prose a {
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left 100%;
  transition: background-size 0.35s var(--ease-out-soft);
  padding-bottom: 1px;
}

.tier-premium .section__header p a:hover,
.tier-premium .prose a:hover {
  background-size: 100% 1.5px;
}

/* ── Reduced motion (polish v2) ── */
@media (prefers-reduced-motion: reduce) {
  .tier-premium .method-card::before,
  .tier-premium .stats-strip__item,
  .tier-premium .btn {
    transition: none;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .tier-premium .hero__frame--reveal,
  html.motion-active.tier-premium .hero__frame--reveal {
    animation: none;
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .tier-premium .scroll-thread,
  .tier-premium .section-decor-ellipse[data-parallax] {
    display: none;
  }

  .tier-premium .hero__stats .stats-strip__item {
    animation: none;
  }

  .tier-premium .quote-banner--reveal .quote-line {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .tier-premium .method-pinned .method-card {
    position: static;
    margin-bottom: var(--space-sm);
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PREMIUM POLISH v3 — ritmo/espaçamento + seções com mais "wow"
   Camada aditiva, 100% token-driven → reusável no nicho.
   ════════════════════════════════════════════════════════════ */

/* ── Ritmo vertical: mais respiro entre seções ── */
.tier-premium .section {
  padding-block: clamp(4rem, 8.5vw, 7.5rem);
}

.tier-premium .section__header {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.tier-premium .section__header h2 {
  font-size: clamp(2rem, 5.2vw, 3.35rem);
  line-height: 1.02;
}

.tier-premium .section__header p {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--color-text-mid);
  max-width: 42rem;
}

.tier-premium .section__header--center p {
  margin-inline: auto;
}

.tier-premium .section__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

/* Grids com mais folga */
.tier-premium .incluso-grid {
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.tier-premium .faq-layout,
.tier-premium .sobre-grid {
  gap: clamp(2rem, 4.5vw, 3.5rem);
}

/* ── Depoimentos: cards com aspas decorativas + profundidade ── */
.tier-premium .dep-card {
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(45, 52, 38, 0.04), 0 10px 30px -18px rgba(45, 52, 38, 0.22);
  transition: transform 0.4s var(--ease-out-soft), box-shadow 0.4s var(--ease-out-soft),
    border-color 0.4s var(--ease-out-soft);
}

.tier-premium .dep-card--text {
  position: relative;
  padding: 1.75rem 1.5rem 1.35rem;
  overflow: hidden;
}

.tier-premium .dep-card--text::before {
  content: "\201D";
  position: absolute;
  top: -0.55rem;
  right: 0.75rem;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.tier-premium .dep-card--text .dep-card__quote,
.tier-premium .dep-card--text .dep-card__foot,
.tier-premium .dep-card--text .dep-card__stars {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  .tier-premium .dep-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 6px rgba(45, 52, 38, 0.06), 0 26px 50px -20px rgba(92, 107, 74, 0.32);
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  }
}

.tier-premium .dep-card__avatar--photo {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.tier-premium .dep-card__stars {
  filter: drop-shadow(0 1px 1px rgba(244, 180, 0, 0.35));
}

/* ── Incluso: lista com micro-hover + destaque em vidro ── */
.tier-premium .incluso-list li {
  gap: 0.85rem;
  font-size: 1rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background 0.3s ease, transform 0.3s var(--ease-out-soft);
}

@media (hover: hover) {
  .tier-premium .incluso-list li:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    transform: translateX(4px);
  }
}

.tier-premium .check {
  background: var(--gradient-cta);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.tier-premium .incluso-highlight {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(245, 243, 238, 0.82));
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(45, 52, 38, 0.05), 0 30px 60px -28px rgba(92, 107, 74, 0.4);
}

.tier-premium .incluso-highlight::after {
  content: "";
  position: absolute;
  bottom: -35%;
  right: -20%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tier-premium .incluso-highlight > * {
  position: relative;
  z-index: 1;
}

/* ── FAQ: hover + reveal suave do corpo ── */
.tier-premium .faq-item {
  border-radius: var(--radius-md);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out-soft);
}

@media (hover: hover) {
  .tier-premium .faq-item:not([open]):hover {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    box-shadow: 0 8px 24px -14px rgba(45, 52, 38, 0.25);
  }
}

.tier-premium .faq-item[open] {
  box-shadow: 0 12px 32px -18px rgba(92, 107, 74, 0.35);
}

@keyframes faqBodyReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

html.motion-active .tier-premium .faq-item[open] .faq-item__body {
  animation: faqBodyReveal 0.35s var(--ease-out-soft) both;
}

.tier-premium .faq-item summary::after {
  transition: transform 0.35s var(--ease-out-soft), background 0.3s ease, color 0.3s ease;
}

@media (hover: hover) {
  .tier-premium .faq-item summary:hover::after {
    background: var(--color-primary);
    color: var(--color-white);
  }
}

.tier-premium .faq-sidebar {
  box-shadow: 0 2px 8px rgba(45, 52, 38, 0.05), 0 30px 60px -30px rgba(92, 107, 74, 0.38);
}

/* ── Cartões de contato: acento superior ── */
.tier-premium .contact-card {
  position: relative;
  overflow: hidden;
}

.tier-premium .contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-soft);
}

@media (hover: hover) {
  .tier-premium .contact-card:hover::before {
    transform: scaleX(1);
  }
}

/* ── Quote banner: marca maior e brilho ── */
.tier-premium .quote-banner__mark {
  font-size: 6.5rem;
  opacity: 0.9;
  background: linear-gradient(135deg, var(--color-white), var(--color-secondary-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── CTA final: profundidade extra ── */
.tier-premium .cta-band--final {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.tier-premium .cta-band--final .btn--white {
  box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.35);
}

/* ── Reduced motion (polish v3) ── */
@media (prefers-reduced-motion: reduce) {
  html.motion-active .tier-premium .faq-item[open] .faq-item__body {
    animation: none;
  }

  .tier-premium .dep-card,
  .tier-premium .incluso-list li,
  .tier-premium .contact-card::before,
  .tier-premium .faq-item {
    transition: none;
  }
}