/* ============================================================
   PADRÃO KANNON — MOVIMENTO & NAVEGAÇÃO
   A camada que separa "limpo e correto" de "vivo e premium".
   Carrega depois de kannon-tokens.css + kannon-components.css.
   Tudo respeita prefers-reduced-motion.
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* expressivo, sem bounce */
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur:      300ms;
  --dur-slow: 700ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); overflow-x: hidden; }
section[id] { scroll-margin-top: 88px; }   /* âncora não fica embaixo do header */
img { max-width: 100%; height: auto; display: block; }

/* textura de grão sutilíssima — dá "material" sem peso */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.022; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ====== PROGRESS HAIRLINE ====== */
.pm-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--brand-strong); z-index: 80;
  transition: width 80ms linear;
}

/* ====== NAV ====== */
.pm-nav {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) clamp(1.25rem, 5vw, 3rem);
  background: oklch(0.987 0.004 85 / 0.7);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur), background var(--dur), padding var(--dur);
}
.pm-nav.scrolled { border-color: var(--line); padding-block: var(--sp-3); background: oklch(0.987 0.004 85 / 0.88); }
.pm-brand { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none;
  color: var(--ink); font-weight: 700; letter-spacing: -0.02em; font-size: var(--text-md); }
.pm-brand .jp { font-family: var(--font-jp), serif; font-weight: 500; color: var(--brand); font-size: .95em; }
.pm-links { display: flex; align-items: center; gap: var(--sp-5); }
.pm-links a { position: relative; text-decoration: none; color: var(--ink-soft);
  font-size: var(--text-sm); font-weight: 500; padding: .3rem 0; transition: color var(--dur-fast); }
.pm-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--brand-strong); transition: right var(--dur) var(--ease-out); }
.pm-links a:hover { color: var(--ink); }
.pm-links a.active { color: var(--ink); }
.pm-links a.active::after { right: 0; }
.pm-nav__cta { display: flex; align-items: center; gap: var(--sp-3); }
.pm-burger { display: none; }

/* ====== REVEAL (entrada) ====== */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms); will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="scale"] { transform: scale(0.96); }

/* ====== HERO CINEMÁTICO ====== */
.pm-hero { position: relative; z-index: 2; overflow: hidden;
  padding: clamp(4rem, 4rem + 6vw, 9rem) 0 clamp(3rem, 3rem + 4vw, 6rem); }
/* atmosfera: brilho quente da marca, bem sutil */
.pm-hero::before { content: ""; position: absolute; z-index: -1; inset: -20% -10% auto auto;
  width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; border-radius: 50%;
  background: radial-gradient(circle at 70% 30%, var(--brand-soft), transparent 62%);
  opacity: .9; pointer-events: none; }
.pm-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-7); align-items: center; }
.pm-hero__title { font-size: var(--text-4xl); line-height: 1.0; letter-spacing: -0.03em;
  font-weight: 700; margin: var(--sp-4) 0 var(--sp-5); text-wrap: balance; }
.pm-hero__title em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--brand-ink); }
.pm-hero__lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 46ch; line-height: 1.5; }

/* signature 観音 — presença composta, não marca d'água */
.pm-hero__mark { position: relative; justify-self: center;
  font-family: var(--font-jp), serif; font-weight: 500; line-height: .8;
  font-size: clamp(8rem, 6rem + 16vw, 20rem); color: var(--brand-ink);
  opacity: .14; letter-spacing: -0.04em; writing-mode: vertical-rl; user-select: none; }
.pm-hero__mark::after { /* eco de "escuta": anel que se expande uma vez */
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 1.2em; height: 1.2em;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid var(--brand); opacity: 0; }
.in .pm-hero__mark::after { animation: pm-ripple 2.6s var(--ease-out) .5s 1 forwards; }
@keyframes pm-ripple {
  0% { transform: translate(-50%,-50%) scale(.2); opacity: .5; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}

/* botão primário com seta que desliza + brilho no hover */
.pm-cta { position: relative; overflow: hidden; }
.pm-cta .arrow { display: inline-block; transition: transform var(--dur) var(--ease-out); }
.pm-cta:hover .arrow { transform: translateX(4px); }
.k-btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur), filter var(--dur); }
.k-btn--primary:hover { transform: translateY(-2px); }
.k-btn:active { transform: translateY(0) scale(.985); }

/* indicador de scroll discreto */
.pm-scrollcue { display: inline-flex; align-items: center; gap: .6rem; margin-top: var(--sp-7);
  font-size: var(--text-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.pm-scrollcue .line { width: 40px; height: 1px; background: var(--ink-mute); position: relative; overflow: hidden; }
.pm-scrollcue .line::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: translateX(-100%);
  animation: pm-sweep 2.4s var(--ease-io) infinite; }
@keyframes pm-sweep { 0%{transform:translateX(-100%)} 55%{transform:translateX(100%)} 100%{transform:translateX(100%)} }

/* ====== MARQUEE (vida sutil) ====== */
.pm-marquee { position: relative; z-index: 2; border-block: 1px solid var(--line);
  background: var(--surface); overflow: hidden; padding-block: var(--sp-4); }
.pm-marquee__track { display: flex; gap: var(--sp-7); width: max-content;
  animation: pm-marquee 28s linear infinite; }
.pm-marquee:hover .pm-marquee__track { animation-play-state: paused; }
.pm-marquee span { display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--text-sm); color: var(--ink-soft); white-space: nowrap; letter-spacing: .02em; }
.pm-marquee span::before { content: "観"; font-family: var(--font-jp), serif; color: var(--brand); opacity: .6; }
@keyframes pm-marquee { to { transform: translateX(-50%); } }

/* ====== CARDS COM MICRO-INTERAÇÃO ====== */
.pm-cards { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-7); }
.pm-card { position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur); }
.pm-card::before { content: ""; position: absolute; left: var(--sp-5); right: var(--sp-5); top: 0; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.pm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: oklch(0.84 0.02 70); }
.pm-card:hover::before { transform: scaleX(1); }
.pm-card__icon { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--brand-soft);
  color: var(--brand-ink); display: grid; place-items: center; margin-bottom: var(--sp-4);
  transition: transform var(--dur) var(--ease-out); }
.pm-card:hover .pm-card__icon { transform: scale(1.08) rotate(-3deg); }
.pm-card__icon svg { width: 23px; height: 23px; }
.pm-card h3 { font-size: var(--text-md); margin: 0 0 var(--sp-2); }
.pm-card p { margin: 0; color: var(--ink-soft); }

/* hover dos cards da vitrine/catálogo (além do .pm-card) */
/* sombra de destaque forte, perceptível em fundo claro ou surface */
:root { --shadow-lift: 0 20px 48px oklch(0.30 0.03 55 / 0.20), 0 6px 16px oklch(0.30 0.03 55 / 0.12); }

.area-card, .faco__card, .preco-card, .mock, .depo, .pm-card, .preco-plano, .faq details {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast);
}
.area-card:hover, .faco__card:hover, .preco-card:hover, .mock:hover, .depo:hover,
.pm-card:hover, .preco-plano:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand);
}
/* FAQ: item destaca borda + fundo + seta ao passar o mouse */
.faq details:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.faq summary { transition: color var(--dur-fast) var(--ease-out); }
.faq details:hover summary { color: var(--brand-ink); }
.faq details:hover summary::after { color: var(--brand); }
/* Princípios (texto, sem card): título muda de cor + sobe */
.principio { transition: transform var(--dur-fast) var(--ease-out); }
.principio h3 { transition: color var(--dur-fast) var(--ease-out); }
.principio:hover { transform: translateY(-5px); }
.principio:hover h3 { color: var(--brand-ink); }

/* PREENCHIMENTO DE COR no hover (blocos de destaque com icone) */
.pm-card, .area-card, .faco__card {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              border-color var(--dur-fast), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.pm-card:hover, .area-card:hover, .faco__card:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.pm-card:hover h3, .area-card:hover h3, .faco__card:hover h3,
.pm-card:hover .k-benefit__title, .faco__card:hover .k-benefit__title { color: var(--paper); }
.pm-card:hover p, .area-card:hover p, .faco__card:hover p,
.pm-card:hover .k-benefit__text, .faco__card:hover .k-benefit__text { color: oklch(0.84 0.01 80); }
/* ícone "acende" na cor da marca */
.pm-card:hover .pm-card__icon,
.faco__card:hover .k-benefit__icon { background: var(--brand); color: #fff; transform: scale(1.08) rotate(-3deg); }
.pm-card__icon, .k-benefit__icon { transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }

/* ====== MOMENTO DARK (quebra de ritmo + gravidade) ====== */
.pm-dark { position: relative; z-index: 2; background: var(--ink); color: var(--paper); overflow: hidden;
  padding-block: clamp(5rem, 4rem + 8vw, 9rem); }
.pm-dark::before { content: "観音"; position: absolute; right: -2vw; bottom: -8vh; z-index: 0;
  font-family: var(--font-jp), serif; font-size: clamp(14rem, 30vw, 34rem); line-height: .8;
  color: var(--paper); opacity: .04; writing-mode: vertical-rl; pointer-events: none; }
.pm-dark .k-container { position: relative; z-index: 1; }
.pm-dark__eyebrow { font-size: var(--text-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); opacity: .9; margin-bottom: var(--sp-5); }
.pm-dark__statement { font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-3xl); line-height: 1.2; max-width: 22ch; text-wrap: balance; color: var(--paper); }
.pm-dark__statement b { font-style: normal; font-weight: 600; color: var(--brand); }
.pm-dark__sub { color: oklch(0.78 0.01 80); max-width: 52ch; margin-top: var(--sp-6); font-size: var(--text-lg); }

/* ====== MOMENTO MÉTRICA (assimétrico, número gigante) ====== */
.pm-metric { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-7); align-items: center; }
.pm-metric__n { font-family: var(--font-display); font-weight: 600; line-height: .85;
  font-size: clamp(5rem, 4rem + 10vw, 11rem); letter-spacing: -0.04em; color: var(--brand-ink); }
.pm-metric__n .unit { font-size: .32em; color: var(--ink-mute); }
.pm-metric__txt h2 { font-size: var(--text-2xl); margin: 0 0 var(--sp-3); letter-spacing: -0.02em; }
.pm-metric__txt p { color: var(--ink-soft); max-width: 44ch; margin: 0; }

/* ====== CTA FINAL ====== */
.pm-final { text-align: center; }
.pm-final .k-container { max-width: 680px; }
.pm-final h2 { font-size: var(--text-3xl); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 var(--sp-4); text-wrap: balance; }
.pm-final h2 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--brand-ink); }
.pm-final p { color: var(--ink-soft); font-size: var(--text-lg); margin: 0 auto var(--sp-6); max-width: 44ch; }

/* ====== RODAPÉ leve ====== */
.pm-foot { border-top: 1px solid var(--line); padding-block: var(--sp-6); color: var(--ink-mute);
  font-size: var(--text-sm); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); }

/* ====== MOBILE ====== */
.pm-sheet { display: none; }
@media (max-width: 820px) {
  .pm-hero__grid { grid-template-columns: 1fr; }
  .pm-hero__mark { display: none; }
  .pm-cards { grid-template-columns: 1fr; }
  .pm-metric { grid-template-columns: 1fr; gap: var(--sp-4); text-align: left; }
  .pm-links { display: none; }
  .pm-burger { display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; }
  .pm-burger span { width: 18px; height: 2px; background: var(--ink); position: relative; }
  .pm-burger span::before, .pm-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
  .pm-burger span::before { top: -6px; } .pm-burger span::after { top: 6px; }
  .pm-sheet { display: grid; position: fixed; inset: 0; z-index: 90; background: var(--paper);
    padding: var(--sp-8) var(--sp-6); gap: var(--sp-4); align-content: start;
    transform: translateY(-100%); transition: transform var(--dur) var(--ease-io); }
  .pm-sheet.open { transform: translateY(0); }
  .pm-sheet a { font-size: var(--text-xl); text-decoration: none; color: var(--ink); font-weight: 600; }
  .pm-sheet__close { position: absolute; top: var(--sp-5); right: var(--sp-5); background: none; border: 0;
    font-size: 2rem; cursor: pointer; color: var(--ink); line-height: 1; }
}

/* ====== ACESSIBILIDADE / MOVIMENTO REDUZIDO ====== */
.pm-skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; border-radius: 0 0 var(--r-sm) 0; }
.pm-skip:focus { left: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* sem deslize, mas mantém um fade suave (ainda perceptível e acessível) */
  [data-reveal] { transform: none !important;
    transition: opacity var(--dur-slow) var(--ease-out) !important; transition-delay: var(--d, 0ms) !important; }
  .pm-marquee__track, .pm-scrollcue .line::after, .in .pm-hero__mark::after { animation: none !important; }
  /* hover (provocado pelo usuário, pequeno) continua ativo mesmo aqui */
}