/* Vila Flamuri: motion. Loaded on every page after styles.css.

   The finished page is what styles.css draws; this file only adds how things arrive and change. Every
   moving rule sits inside prefers-reduced-motion: no-preference, so a visitor who asks for less motion
   gets the finished page at once (the global reduce block in styles.css also zeroes every duration).
   Only transform, opacity and stroke-dashoffset animate; verify.py check 18 holds that. */

:root {
  --t-reveal: 700ms;
  --t-draw: 1200ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- states that are not motion: they apply whatever the preference ---------- */
.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(0, 54, 66, 0.12); border-bottom-color: transparent; }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- page transitions (Chromium and recent Safari; others navigate normally) ---------- */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: vt-out 180ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

  /* ---------- header ---------- */
  .site-header { transition: box-shadow var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease); }

  /* ---------- entrance: the first heading block rises once fonts are ready, by transform only
     (a keyframe through opacity 0 can stick on iOS Safari and leave the heading invisible) ---------- */
  .js:not(.is-entered) .entrance > * { transform: translateY(14px); }
  .js.is-entered .entrance > * { transition: transform var(--t-reveal) var(--ease-out); }
  .js.is-entered .entrance > :nth-child(2) { transition-delay: 70ms; }
  .js.is-entered .entrance > :nth-child(3) { transition-delay: 140ms; }
  .js.is-entered .entrance > :nth-child(4) { transition-delay: 210ms; }
  .js.is-entered .entrance > :nth-child(n + 5) { transition-delay: 280ms; }

  /* ---------- reveal: JS adds .reveal only to elements below the fold ---------- */
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity var(--t-reveal) var(--ease-out) var(--d, 0ms), transform var(--t-reveal) var(--ease-out) var(--d, 0ms);
  }

  /* ---------- the wave rule draws itself ---------- */
  .js .wave path { stroke-dasharray: 1; }
  .js .wave:not(.is-drawn) path { stroke-dashoffset: 1; }
  .js .wave.is-drawn path { animation: draw var(--t-draw) var(--ease-out) both; }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  /* ---------- the pennant on the postcard lifts in once, like a flag catching the wind ---------- */
  .js .hero__tab { transform-origin: left center; }
  .js:not(.is-entered) .hero__tab { transform: scaleX(0.2); opacity: 0; }
  .js.is-entered .hero__tab { transition: transform 900ms var(--ease-out) 250ms, opacity 400ms var(--ease-out) 250ms; }

  /* ---------- mobile drawer: the links follow one another in ---------- */
  @media (max-width: 1080px) {
    .js .site-nav .nav-menu > li { opacity: 0; transform: translateY(10px); transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
    .js .nav-open .site-nav .nav-menu > li { opacity: 1; transform: none; }
    .js .nav-open .site-nav .nav-menu > li:nth-child(2) { transition-delay: 40ms; }
    .js .nav-open .site-nav .nav-menu > li:nth-child(3) { transition-delay: 80ms; }
    .js .nav-open .site-nav .nav-menu > li:nth-child(4) { transition-delay: 120ms; }
    .js .nav-open .site-nav .nav-menu > li:nth-child(n + 5) { transition-delay: 160ms; }
  }

  /* ---------- hover and press, only where a pointer can hover ---------- */
  @media (hover: hover) {
    .link-arrow .icon { transition: transform var(--t-ui) var(--ease-out); }
    .link-arrow:hover .icon { transform: translateX(4px); }
    .card__media img { transition: transform 600ms var(--ease-out); }
    .card:hover .card__media img { transform: scale(1.04); }
  }
  .btn { transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-fast) var(--ease); }
  .btn:active { transform: scale(0.98); }

  /* ---------- forms ---------- */
  .form-success.is-shown { transition: opacity 400ms var(--ease-out), display 400ms allow-discrete; }
  @starting-style { .form-success.is-shown { opacity: 0; } }

  .toast { transition: opacity var(--t-ui) var(--ease-out); }

  /* ---------- lightbox: the backdrop fades in from the discrete display change ---------- */
  .lightbox { transition: opacity var(--t-ui) var(--ease-out), display var(--t-ui) allow-discrete; }
  @starting-style { .lightbox.is-open { opacity: 0; } }
}

/* ?static (main.js sets html.is-static) shows exactly the reduced-motion page whatever the visitor's
   setting, so the QA hook and the real preference can be compared side by side. */
.is-static *, .is-static *::before, .is-static *::after { animation: none !important; transition: none !important; }
:root.is-static, .is-static .site-header { view-transition-name: none; }

/* Print is not a screen: every block prints whether or not it has been scrolled into view yet. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .wave path { stroke-dashoffset: 0 !important; }
  .call-bar, .nav-toggle, .lightbox, .g-filters, .toast { display: none !important; }
  /* the answers print whether or not their question was opened (main.js opens them too, for browsers
     without ::details-content) */
  details::details-content { content-visibility: visible; }
  .faq__q::after { display: none; }
}