/* CALIDRION — home: copy on the left, particle figures on the right (js/particulas.js). Builds on styles.css tokens. */

body {
  background:
    radial-gradient(80% 60% at 85% 20%, rgba(253, 170, 198, .22), transparent 70%),
    radial-gradient(70% 60% at 75% 85%, rgba(181, 156, 240, .14), transparent 70%),
    #f8f1f5;
  background-attachment: fixed;
}
.nav.is-solid { padding-block: 12px; }

/* particle canvas: fixed behind the copy */
.particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.particles.is-ready { opacity: 1; }
main { position: relative; z-index: 2; }
/* same place and size as the particle bird (see layout() in particulas.src.js) */
.particles-fallback {
  position: fixed; z-index: 0; left: 70%; top: 50%; width: min(52vh, 33.3vw); height: auto;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .9;
  transition: opacity .9s var(--ease);
  animation: fbBreath 4s ease-in-out infinite alternate;
}
.particles.is-ready + .particles-fallback { opacity: 0; }
@keyframes fbBreath { to { transform: translate(-50%, -50%) scale(1.02); } }

/* ---------- Portada ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 110px var(--gutter) 90px; }
.hero__copy { width: min(620px, 46vw); transform: translate3d(0, var(--copy-shift, 0px), 0); opacity: var(--copy-o, 1); }
.hero__copy h1 { font-size: clamp(42px, 5.4vw, 82px); line-height: 1; font-weight: 700; letter-spacing: -0.035em; margin-bottom: 22px; text-wrap: balance; }
.hero__copy .lead { font-size: clamp(17px, 1.35vw, 20px); max-width: 540px; color: var(--ink); margin: 0 0 16px; }
.hero .scroll-hint { position: absolute; left: var(--gutter); transform: none; align-items: flex-start; }
.js .hero__copy > * { animation: rise 1.1s var(--ease) both; }
.js .hero__copy > :nth-child(2) { animation-delay: .08s; }
.js .hero__copy > :nth-child(3) { animation-delay: .16s; }
.js .hero__copy > :nth-child(4) { animation-delay: .24s; }
.js .hero__copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* ---------- Chapters: one screen each, copy on the left ---------- */
.story { padding: 0 var(--gutter); }
.chapter { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: 90px; }
.story .panel {
  position: relative; inset: auto; top: auto; left: auto; transform: none; will-change: auto;
  width: min(520px, 44vw); opacity: 1; visibility: visible; pointer-events: auto;
  padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.story .panel::before { left: 0; right: auto; width: 56px; top: -22px; height: 3px; border-radius: 3px; }
.story .panel h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; margin-bottom: 18px; text-wrap: balance; }
.story .panel p { font-size: 17px; line-height: 1.65; }
.story .tags li { background: rgba(255, 255, 255, .85); }
.story .panel--wide { width: min(560px, 46vw); }
.promises div { background: rgba(255, 255, 255, .8); }
.promises dt span { font-variant-numeric: tabular-nums; }
.chapter--final .panel--final { width: min(620px, 46vw); }
.story .panel--final::before { display: none; }
.story .panel--final h2 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.04; }
.story .panel--final p { font-size: 18px; margin: 0 0 26px; }
.story .panel--final { text-align: left; }
.story .panel--final .actions { justify-content: flex-start; }

/* page content slides over the particles */
.content { box-shadow: 0 -30px 60px -40px rgba(10, 25, 47, .18); }
.steps span { font-variant-numeric: tabular-nums; }
.footer__legal { color: #5f6b7d; }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* rail: chapter index on the far right, over the particles */
.rail.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- Mobile: figure in the top half, copy below ---------- */
@media (max-width: 860px) {
  .hero { align-items: flex-end; padding: 0 16px 44px; }
  .hero__copy { width: auto; padding-top: 48svh; }
  .hero__copy h1 { font-size: clamp(36px, 10vw, 52px); margin-bottom: 16px; }
  .hero__copy .lead { font-size: 16px; }
  .story { padding: 0 16px; }
  .chapter { align-items: flex-end; padding: 50svh 0 56px; }
  .story .panel, .story .panel--wide, .chapter--final .panel--final { width: auto; }
  .story .panel {
    padding: 26px 22px 22px; border-radius: var(--radius);
    background: rgba(255, 255, 255, .82); box-shadow: 0 30px 60px -40px rgba(10, 25, 47, .35);
  }
  .story .panel::before { left: 22px; top: 0; border-radius: 0 0 3px 3px; }
  .story .panel h2 { font-size: 27px; }
  .story .panel p { font-size: 16px; }
  .rail { display: none; }
  .particles-fallback { left: 50%; top: 26%; width: min(37vh, 74vw); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}