/* ═══════════════════════════════════════════════════════════════
   MÉTODO SAN 360 — Motion layer
   Flagship FX: Lenis smooth scroll, canvas hero, split reveal,
   magnetic cursor, tilt 3D, parallax, count-up, mouse trail.
   Todos respeitam prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,800;1,900&display=swap");

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ─── Scroll progress bar ─────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
  box-shadow: 0 0 14px rgba(64,80,245,0.55);
  z-index: 9999;
  transition: opacity .3s;
  will-change: width;
  pointer-events: none;
}

/* ─── Hero canvas ─────────────────────────────────────────────── */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: screen;
}
.hero > * { position: relative; z-index: 1; }
.hero .hero-bg,
.hero .hero-grid { opacity: 0.6; }

/* ─── Spotlight cursor (desktop hero/final) ──────────────────── */
.spotlight {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(64,80,245,0.22) 0%,
    rgba(64,80,245,0.08) 35%,
    transparent 70%);
  transition: opacity .4s;
  mix-blend-mode: screen;
}
.spotlight.active { opacity: 1; }
@media (hover: none) { .spotlight { display: none; } }

/* ─── Mouse trail dots ────────────────────────────────────────── */
.trail-dot {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-hot) 0%, var(--accent) 50%, transparent 100%);
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
@media (hover: none) { .trail-dot { display: none; } }

/* ─── Split text reveal ───────────────────────────────────────── */
[data-split]{ overflow: hidden; }
[data-split] .split-word{
  display: inline-block;
  transform: translateY(105%) rotateX(-20deg);
  opacity: 0;
  transform-origin: 0 50%;
  transition: transform .9s cubic-bezier(.19,1,.22,1), opacity .6s ease-out;
  will-change: transform, opacity;
}
[data-split].revealed .split-word{
  transform: translateY(0) rotateX(0);
  opacity: 1;
}
[data-split] .split-space{ display: inline-block; width: 0.28em; }

/* ─── Reveal on scroll (seções) ──────────────────────────────── */
[data-reveal]{
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal].in{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="left"]{ transform: translateX(-32px); }
[data-reveal="left"].in{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(32px); }
[data-reveal="right"].in{ transform: translateX(0); }
[data-reveal="scale"]{ transform: scale(0.94); }
[data-reveal="scale"].in{ transform: scale(1); }

/* ─── Magnetic buttons ────────────────────────────────────────── */
[data-magnetic]{
  transition: transform .18s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}
@media (hover: none) {
  [data-magnetic]{ transform: none !important; transition: none; }
}

/* ─── Tilt 3D cards ───────────────────────────────────────────── */
[data-tilt]{
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
[data-tilt] > *{
  transform: translateZ(0);
}
[data-tilt] .tilt-lift{ transform: translateZ(24px); }
[data-tilt] .tilt-lift-soft{ transform: translateZ(12px); }
.tilt-wrap{ perspective: 1200px; }
@media (hover: none), (max-width: 820px) {
  [data-tilt]{ transform: none !important; }
}

/* ─── Parallax element (scroll-linked) ───────────────────────── */
[data-parallax]{
  will-change: transform;
  transition: transform .05s linear;
}

/* ─── Count-up number style (when running) ───────────────────── */
[data-count].counting{
  font-variant-numeric: tabular-nums;
}

/* ─── Hero triskell: slower, continuous rotation (respects motion) ─ */
.hero-triskell[data-parallax-rotate]{
  will-change: transform;
}

/* ─── Smooth reveal of sticky "method" section (optional) ────── */
.method-sticky-reveal{
  position: relative;
  will-change: transform, opacity;
}

/* ─── System card (método — substitui .orbit) ────────────────── */
.method-inner .system-card{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1.05;
  max-width:520px;
  margin:0 auto;
  padding:clamp(22px, 4%, 36px);
  background:
    radial-gradient(ellipse 70% 60% at 30% 25%, rgba(64,80,245,0.14), transparent 65%),
    radial-gradient(ellipse 60% 55% at 75% 85%, rgba(64,80,245,0.10), transparent 65%),
    linear-gradient(160deg, #0E0E1C, #05050D);
  border:1px solid rgba(64,80,245,0.32);
  border-radius:8px;
  overflow:hidden;
  isolation:isolate;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:
    0 0 0 1px rgba(64,80,245,0.08),
    0 40px 80px -30px rgba(64,80,245,0.35),
    inset 0 1px 0 rgba(242,239,233,0.04);
}
.system-card > *{ position:relative; z-index:1; }

.sc-beam{
  position:absolute; left:-10%; right:-10%; top:46%;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(64,80,245,0.55) 50%, transparent 100%);
  box-shadow:0 0 30px 4px rgba(64,80,245,0.22);
  pointer-events:none; z-index:0;
}

.sc-eyebrow{
  display:flex; align-items:center; gap:10px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:clamp(9px, 0.9vw, 11px);
  font-weight:500;
  letter-spacing:0.32em;
  text-transform:uppercase;
}
.sc-eyebrow .sc-dash{ display:inline-block; width:clamp(14px,2vw,24px); height:1px; background:currentColor; }

.sc-manifesto{
  margin:auto 0;
  padding:clamp(10px,2vw,18px) 0;
  line-height:0.92;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.03em;
  text-transform:uppercase;
}
.sc-manifesto > span{ display:block; white-space:nowrap; }
.sc-l1{ color:var(--bone); font-size:clamp(34px, 7vw, 64px); }
.sc-l2{
  color:var(--bone);
  font-family:"Playfair Display", Georgia, serif;
  font-style:italic; font-weight:900;
  font-size:clamp(38px, 7.6vw, 72px);
  margin-left:clamp(24px, 5vw, 60px);
  margin-top:clamp(-4px,-0.4vw,-2px);
}
.sc-l3{
  color:var(--accent);
  font-size:clamp(34px, 7vw, 64px);
  margin-top:clamp(4px,0.6vw,10px);
}
.sc-l3 em{ font-style:normal; color:var(--accent); font-weight:900; }
.sc-l4{
  color:var(--bone);
  font-family:"Playfair Display", Georgia, serif;
  font-style:italic; font-weight:900;
  font-size:clamp(38px, 7.6vw, 72px);
  margin-left:clamp(24px, 5vw, 60px);
  margin-top:clamp(-4px,-0.4vw,-2px);
  color:transparent;
  -webkit-text-stroke:1.2px rgba(242,239,233,0.45);
}

.sc-pillars{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin:clamp(14px, 2.4vw, 22px) 0 clamp(12px, 2vw, 18px);
}
.sc-pillar{
  display:flex; align-items:center; gap:6px;
  padding:10px 10px;
  background:rgba(14,14,22,0.75);
  border:1px solid rgba(64,80,245,0.25);
  border-radius:4px;
  font-family:var(--font-mono);
  font-size:clamp(9px, 0.9vw, 11px);
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bone-soft);
}
.sc-pillar span{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  border:1.5px solid var(--accent);
  border-radius:50%;
  color:var(--accent);
  font-family:var(--font-display);
  font-weight:800;
  font-size:12px;
  letter-spacing:0;
  flex-shrink:0;
}

.sc-foot{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono);
  font-size:clamp(9px, 0.9vw, 11px);
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--bone-mute);
  border-top:1px solid rgba(242,239,233,0.08);
  padding-top:clamp(10px, 1.6vw, 14px);
  margin-top:auto;
}

.sc-triskell{
  position:absolute;
  top:16px; right:16px;
  width:clamp(28px, 5vw, 44px); height:auto;
  color:var(--accent);
  opacity:0.5;
  z-index:1;
}
@media (max-width: 640px){
  .method-inner .system-card{ aspect-ratio:auto; padding:24px 20px; }
  .sc-pillars{ grid-template-columns:repeat(2, 1fr); gap:6px; }
  .sc-triskell{ width:32px; top:14px; right:14px; }
}

/* ─── Book poster (authority section) ────────────────────────── */
.book-poster{
  position:relative;
  aspect-ratio: 4/5;
  background:
    radial-gradient(ellipse 85% 70% at 50% 55%, #0E0E1C 0%, #05050D 75%),
    linear-gradient(145deg, var(--ink-2), var(--ink-0));
  border:1px solid rgba(64,80,245,0.32);
  border-radius:6px;
  overflow:hidden;
  padding:clamp(20px, 4%, 36px);
  display:flex; flex-direction:column; justify-content:space-between;
  isolation:isolate;
  box-shadow:
    0 0 0 1px rgba(64,80,245,0.08),
    0 40px 80px -30px rgba(64,80,245,0.35),
    inset 0 1px 0 rgba(242,239,233,0.04);
}
.book-poster::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 40% 40% at 15% 20%, rgba(64,80,245,0.18), transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 80%, rgba(64,80,245,0.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
.book-poster > *{ position:relative; z-index:1; }

.bp-beam{
  position:absolute; left:-10%; right:-10%; top:50%;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(64,80,245,0.55) 50%, transparent 100%);
  box-shadow:0 0 30px 4px rgba(64,80,245,0.22);
  transform:translateY(-0.5px);
  pointer-events:none; z-index:0;
}

.bp-eyebrow{
  display:flex; align-items:center; gap:10px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:clamp(9px, 0.95vw, 11px);
  font-weight:500;
  letter-spacing:0.32em;
  text-transform:uppercase;
}
.bp-eyebrow .bp-dash{ display:inline-block; width:clamp(14px,2vw,24px); height:1px; background:currentColor; }

.bp-title{
  position:relative;
  text-align:left;
  line-height:0.86;
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  margin:auto 0;
  padding:clamp(10px,2vw,20px) 0;
}
.bp-title > span{ display:block; white-space:nowrap; }
.bp-l1{
  color:var(--bone);
  font-size:clamp(26px, 6vw, 54px);
}
.bp-l2{
  color:var(--accent);
  font-family:"Playfair Display", "Manrope", serif;
  font-style:italic;
  font-weight:900;
  font-size:clamp(30px, 6.8vw, 62px);
  margin-left:clamp(14px, 3vw, 36px);
  margin-top:clamp(-4px, -0.4vw, -2px);
  text-shadow:0 0 40px rgba(64,80,245,0.3);
}
.bp-l3{
  display:flex; align-items:baseline;
  font-size:clamp(26px, 6vw, 54px);
  margin-top:clamp(-2px, -0.3vw, -2px);
}
.bp-l3 .bp-filled{ color:var(--bone); }
.bp-l3 .bp-outline{
  color:transparent;
  -webkit-text-stroke:1.2px rgba(242,239,233,0.32);
}
.bp-strike{
  position:absolute;
  left:-6%; right:-6%;
  bottom:22%;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent-hot) 50%, var(--accent) 80%, transparent);
  box-shadow:0 0 14px var(--accent-glow);
}

.bp-foot{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono);
  font-size:clamp(10px, 1vw, 12px);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--bone-mute);
  border-top:1px solid rgba(242,239,233,0.08);
  padding-top:clamp(12px, 1.8vw, 18px);
  margin-top:auto;
}
.bp-foot b{ color:var(--bone); font-weight:700; letter-spacing:0.14em; }

.bp-triskell{
  position:absolute;
  top:16px; right:16px;
  width:clamp(28px, 5vw, 44px); height:auto;
  color:var(--accent);
  opacity:0.55;
  z-index:1;
}
@media (max-width: 640px){
  .bp-triskell{ top:14px; right:14px; }
}

/* ─── Countdown hero (oferta de lançamento) ──────────────────── */
.cd-hero{
  position:relative;
  margin:28px auto 0;
  max-width:560px;
  padding:22px 28px 20px;
  background:linear-gradient(180deg, rgba(64,80,245,0.06), rgba(64,80,245,0.02));
  border:1px solid rgba(64,80,245,0.35);
  border-radius:8px;
  box-shadow:
    0 0 0 1px rgba(64,80,245,0.08),
    0 10px 40px -12px rgba(64,80,245,0.35),
    inset 0 1px 0 rgba(242,239,233,0.05);
  overflow:hidden;
  isolation:isolate;
}
.cd-hero.ended{ opacity:0.6; filter:grayscale(0.6); }
.cd-hero.ended .cd-pulse{ display:none; }

/* Soft pulse glow at the left edge */
.cd-pulse{
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 100% at 0% 50%,
    rgba(64,80,245,0.22) 0%,
    rgba(64,80,245,0.08) 40%,
    transparent 70%);
  animation:cdPulse 2.4s ease-in-out infinite;
}
@keyframes cdPulse{
  0%,100%{opacity:0.55}
  50%{opacity:1}
}

.cd-label{
  position:relative; z-index:1;
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin-bottom:14px;
}
.cd-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--accent-hot);
  box-shadow:0 0 12px var(--accent-glow);
  animation:cdBlink 1.1s ease-in-out infinite;
}
@keyframes cdBlink{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:0.35; transform:scale(0.82)}
}

.cd-grid{
  position:relative; z-index:1;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.cd-cell{
  flex:1;
  min-width:60px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px 6px 10px;
  background:rgba(14,14,22,0.65);
  border:1px solid rgba(64,80,245,0.22);
  border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(242,239,233,0.03), 0 6px 20px -8px rgba(0,0,0,0.5);
}
.cd-num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(30px, 4.6vw, 44px);
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(64,80,245,0.18);
}
.cd-cell-seconds .cd-num{ color:var(--accent-hot); }
.cd-unit{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--bone-mute);
  margin-top:6px;
  font-weight:500;
}
.cd-sep{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(22px, 3vw, 34px);
  color:rgba(64,80,245,0.5);
  padding:0 2px 18px;
  align-self:center;
}
.cd-dates{
  position:relative; z-index:1;
  margin-top:12px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--bone-faint);
}

/* Second-tick subtle scale animation */
.cd-cell-seconds .cd-num.tick{
  animation:cdTick 0.95s cubic-bezier(.2,.8,.2,1);
}
@keyframes cdTick{
  0%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

@media (max-width:520px){
  .cd-hero{padding:18px 16px 16px;margin:22px 0 0}
  .cd-grid{gap:3px}
  .cd-cell{min-width:52px;padding:10px 4px 8px}
  .cd-sep{padding:0 0 16px}
  .cd-label{font-size:10px}
}

/* ─── Respect reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas, .spotlight, .trail-dot, .scroll-progress { display: none !important; }
  [data-split] .split-word,
  [data-reveal],
  [data-magnetic],
  [data-tilt],
  [data-parallax],
  [data-parallax-rotate]{
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
  .cd-pulse, .cd-dot, .cd-cell-seconds .cd-num.tick { animation: none !important; }
}