/* ============================================================
   HERO: Pico del Cuco ridgelines + scroll spiral (home page only)
   Loaded after styles.css on index.html.
   ============================================================ */
/* ================= SCROLL SPIRAL (outside → in) ================= */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 30rem), rgba(0,0,0,.35) calc(50% - 22rem), rgba(0,0,0,.35) calc(50% + 22rem), #000 calc(50% + 30rem), #000 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 30rem), rgba(0,0,0,.35) calc(50% - 22rem), rgba(0,0,0,.35) calc(50% + 22rem), #000 calc(50% + 30rem), #000 100%); }
.bd-tint { position: absolute; inset: 0; }
.bd-dawn { background: radial-gradient(ellipse 70% 60% at 50% 65%, rgba(140,106,79,0.09) 0%, rgba(140,106,79,0) 70%); }
.bd-day  { background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(110,143,130,0.08) 0%, rgba(110,143,130,0) 70%); opacity: 0; }
.bd-spiral { position: absolute; left: 50%; top: 50%; width: max(115vw, 115vh); height: max(115vw, 115vh); transform: translate(-50%, -50%); }
.bd-spiral path { fill: none; stroke-linecap: round; transition: stroke-opacity 1.5s ease; }
#spMain { stroke: #EDEAD9; stroke-opacity: 0.063; stroke-width: 1.2; }
#spEcho { stroke: #6E8F82; stroke-opacity: 0.088; stroke-width: 1; }
.backdrop.complete #spMain { stroke-opacity: 0.122; }
.backdrop.complete #spEcho { stroke-opacity: 0.16; }
.sparkle { position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(237,234,217,0.8) 0%, rgba(237,234,217,0) 70%);
  animation: float ease-in-out infinite; }
.sparkle.warm { background: radial-gradient(circle, rgba(196,160,110,0.8) 0%, rgba(196,160,110,0) 70%); }
@keyframes float {
  0% { transform: translate(0,0); opacity: 0; } 25% { opacity: 0.3; }
  50% { transform: translate(var(--dx), var(--dy)); opacity: 0.18; } 75% { opacity: 0.32; }
  100% { transform: translate(calc(var(--dx) * -0.4), calc(var(--dy) * 1.6)); opacity: 0; } }
@media (max-width: 700px) {
  .backdrop { -webkit-mask-image: none; mask-image: none; }
  .bd-spiral { width: max(100vw, 101vh); height: max(100vw, 101vh); }
  #spMain { stroke-opacity: 0.053; } #spEcho { stroke-opacity: 0.075; }
  .backdrop.complete #spMain { stroke-opacity: 0.113; } .backdrop.complete #spEcho { stroke-opacity: 0.144; }
}

/* ================= HERO ================= */
.hero { display: block; padding: 0; text-align: center; position: relative; z-index: 2; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  background: linear-gradient(to bottom, #11150F 0%, #131811 35%, #161b13 60%, #11150F 100%); }
.depth { position: absolute; inset: 0; pointer-events: none; }
.pp { position: absolute; inset: 0; }
.pp > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
/* scroll-linked motion runs on the compositor where supported (smooth on phones) */
@supports (animation-timeline: scroll()) {
  .depth { animation: sink linear both; animation-timeline: scroll(root block); animation-range: 0px 100vh; }
}
@keyframes sink { from { transform: translate3d(0,0,0); } to { transform: translate3d(0, calc(var(--s) * 100vh), 0); } }

/* birds far off in the sky */
.birds { position: absolute; inset: 0; }
.bird { position: absolute; left: 0; animation: fly var(--fd) linear infinite; }
.bird .bob { animation: bob var(--bd, 7s) ease-in-out infinite; }
.bird svg { display: block; overflow: visible; }
@keyframes fly { 0% { transform: translateX(-8vw); } 80%, 100% { transform: translateX(108vw); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(var(--by, 12px)) rotate(2deg); } }

.title-depth .pp { display: flex; align-items: center; justify-content: center; }
.hero-content { position: relative; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; margin-top: -12svh; padding: 0 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-content::before { content: ""; position: absolute; inset: -30% -10%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(17,21,15,0.5) 0%, rgba(17,21,15,0) 65%); }
@media (max-aspect-ratio: 11/10) { .hero-content { margin-top: -30svh; } }


/* ---------- home page: sits above the spiral, no divider lines ---------- */
body.home main, body.home .site-footer { position: relative; z-index: 1; }
body.home .teaser,
body.home .teaser-alt,
body.home .participar,
body.home .contact-block,
body.home .site-footer { border-top: none; }
.hero .eyebrow, .hero .hero-title, .hero .hero-sub { z-index: auto; }

@media (prefers-reduced-motion: reduce) {
  .depth, .sparkle { animation: none !important; }
  .birds { display: none; }
}