/* enhance.css — premium scroll / cursor / motion layer for varianta-7.html.
   Sits on top of base.css + photos.css. Every effect degrades gracefully:
   no JS, no libraries, reduced-motion, and touch all fall back to the
   plain index.html experience. No new copy is introduced here — visuals only. */

/* ── Lenis smooth scroll plumbing ──────────────────────────────────────── */
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: hidden; }
/* once Lenis drives scrolling, drop the native smooth-scroll from base.css */
html.lenis-on { scroll-behavior: auto; }

/* ── Reveal initial states (only while JS-enhanced, motion allowed) ─────── */
html.js:not(.reduce-motion):not(.no-enhance) [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

/* ── Scroll progress hairline ──────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 200;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--terracotta), var(--gold));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
html.enhanced .scroll-progress { opacity: 1; }

/* ── Custom cursor ─────────────────────────────────────────────────────── */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor summary,
  html.has-cursor label,
  html.has-cursor .attendance-option { cursor: none; }
  /* keep a real caret / control affordance on actual form fields */
  html.has-cursor input,
  html.has-cursor textarea,
  html.has-cursor select { cursor: auto; }

  .cursor {
    display: block;            /* re-enable on fine pointers (default is none) */
    position: fixed;
    top: 0; left: 0;
    z-index: 10000;            /* above the paper-grain overlay */
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  html.has-cursor .cursor.is-active { opacity: 1; }

  .cursor-dot {
    width: 6px; height: 6px;
    background: var(--terracotta);
  }
  .cursor-ring {
    width: 38px; height: 38px;
    border: 1px solid rgba(196,118,90,0.55);
    transition: width 0.35s cubic-bezier(0.22,1,0.36,1),
                height 0.35s cubic-bezier(0.22,1,0.36,1),
                background 0.35s ease, border-color 0.35s ease, opacity 0.3s ease;
  }
  .cursor-ring.is-hover {
    width: 64px; height: 64px;
    background: rgba(196,118,90,0.10);
    border-color: var(--terracotta);
  }
  /* fade both out while pointing at a text field */
  .cursor.is-suppressed { opacity: 0 !important; }
}

/* ── Hero polish ───────────────────────────────────────────────────────── */
html.enhanced .hero-v4 .photo-img { will-change: transform; }

/* scroll cue at the foot of the hero (decorative, fades on scroll via GSAP) */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 4;
  width: 1px;
  height: 54px;
  background: rgba(245,240,232,0.25);
  overflow: hidden;
  opacity: 1;
}
.scroll-cue::after {
  content: '';
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--terracotta-light);
  animation: cueRun 2.2s cubic-bezier(0.7,0,0.3,1) infinite;
}
@keyframes cueRun {
  0%   { transform: translateY(0); }
  100% { transform: translateY(350%); }
}
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* ── Magnetic targets sit on their own transform layer ─────────────────── */
html.enhanced .nav-cta,
html.enhanced .hero-v4-cta,
html.enhanced .btn-submit,
html.enhanced .footer-back { will-change: transform; }

/* ── Active nav link ───────────────────────────────────────────────────── */
nav ul a { position: relative; }
nav ul a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0.6;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
nav ul a.is-active { color: var(--terracotta); }
nav.nav-scrolled ul a.is-active { color: var(--terracotta); }
nav ul a.is-active::after { transform: scaleX(1); }

/* ── FAQ accordion — JS eases the answer panel open/closed ─────────────── */
html.enhanced .faq-item-v4 .faq-a {
  overflow: hidden;       /* so the height tween clips cleanly */
  will-change: height, opacity;
}
/* let the +/× marker rotate as it swaps, for a softer toggle */
html.enhanced .faq-item-v4 summary::after {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), color 0.3s ease;
}
html.enhanced .faq-item-v4[open] summary::after { transform: rotate(180deg); }

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { display: none; }
}