/* Arqvera Homes — motion system. Loaded after site.css.
 *
 * How it works
 *  - Hero / page-header sequences and small hover effects are pure CSS.
 *  - Scroll reveals: the elements in the REVEAL list below start hidden and site.js adds
 *    ".is-in" when they scroll into view. The same list lives in assets/js/site.js (REVEAL):
 *    keep the two in sync if you add new blocks.
 *  - Everything animated sits inside "prefers-reduced-motion: no-preference", so visitors who ask
 *    their device for less motion get a still page. If site.js fails to load, "fx-off" is set
 *    after 3.5s (see head.php) and everything is shown.
 */

:root { --ease: cubic-bezier(0.2, 0.7, 0.2, 1); }
html { scroll-padding-top: 96px; }
main { overflow-x: clip; }

/* ---- structural (always on) -------------------------------------------------- */
.site-header { --hh: 84px; }
.site-header.scrolled { --hh: 68px; box-shadow: 0 12px 30px -20px rgba(43, 42, 40, 0.5); }
.header-in { height: var(--hh); }
.site-header.scrolled .brand img { height: 42px; }
@media (max-width: 1020px) { .main-nav { top: var(--hh); } }

/* Headline split into words (see words() in helpers.php) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.14em; margin: 0 -0.04em -0.14em; }
.w > span { display: inline-block; }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; background: linear-gradient(90deg, var(--terra), #d98b66); transform-origin: 0 50%; transform: scaleX(0); }
.to-top { position: fixed; right: 20px; bottom: 88px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); color: var(--charcoal); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--terra); border-color: var(--terra); color: #fff; }
.to-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- animated (only when the visitor allows motion) ------------------------- */
@media (prefers-reduced-motion: no-preference) {

  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }

  /* Keyframes ("to" is the element's own natural style) */
  @keyframes fxUp    { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
  @keyframes fxUpS   { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
  @keyframes fxLeft  { from { opacity: 0; transform: translate3d(-44px, 0, 0); } }
  @keyframes fxRight { from { opacity: 0; transform: translate3d(44px, 0, 0); } }
  @keyframes fxZoom  { from { opacity: 0; transform: scale(0.94); } }
  @keyframes fxPop   { from { opacity: 0; transform: scale(0.4); } }
  @keyframes fxWord  { from { transform: translate3d(0, 112%, 0); } }
  @keyframes fxWipe  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes fxKb    { from { scale: 1.18; } to { scale: 1.06; } }
  @keyframes fxMenu  { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
  @keyframes fxPulse { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
  @keyframes fxLine  { from { transform: scaleX(0); } }

  /* ---- scroll reveal ------------------------------------------------------ */
  /* REVEAL list (keep in sync with site.js) */
  .js:not(.fx-off) :is(.rv, .section-head, .grid > *, .split > *, .cols > *, .stat, .filters, .chips, .pager, .empty, .article-cover, .article-meta, .article, .faq details, .foot-grid > *, .cta .container > *, .gallery a, .map):not(.is-in) { opacity: 0; }
  .js:not(.fx-off) :is(.rv, .section-head, .grid > *, .split > *, .cols > *, .stat, .filters, .chips, .pager, .empty, .article-cover, .article-meta, .article, .faq details, .foot-grid > *, .cta .container > *, .gallery a, .map).is-in { animation: fxUp 0.85s var(--ease) var(--d, 0s) backwards; }

  /* Variants (later + "html" prefix so they win over the default above) */
  @media (min-width: 861px) {
    html.js:not(.fx-off) .split > :first-child.is-in { animation-name: fxLeft; }
    html.js:not(.fx-off) .split > :last-child.is-in { animation-name: fxRight; }
  }
  html.js:not(.fx-off) .gallery a.is-in { animation-name: fxZoom; }
  html.js:not(.fx-off) .stat.is-in { animation-name: fxZoom; }

  /* Pictures: wipe-in for the arch image, settle-in zoom for card photos */
  .js:not(.fx-off) .split-media.is-in img { animation: fxWipe 1.2s var(--ease) 0.15s backwards; }
  .js:not(.fx-off) :is(.plot .ph img, .post > img, .svc > img, .estate-card > img, .gallery img, .pub img) { transition: transform 1.1s var(--ease); }
  .js:not(.fx-off) :is(.plot, .post, .svc, .estate-card, .gallery a):not(.is-in) :is(.ph img, > img, img) { transform: scale(1.14); }
  .js:not(.fx-off) .split-media::before { transition: transform 1s var(--ease) 0.3s, opacity 0.8s 0.3s; }
  .js:not(.fx-off) .split-media:not(.is-in)::before { transform: translate(-18px, -18px); opacity: 0; }

  /* Eyebrow rule draws itself */
  .eyebrow::before { transform-origin: 0 50%; }
  .js:not(.fx-off) :is(.section-head, .split > *, .cols > *, .rv).is-in .eyebrow::before { animation: fxLine 0.9s var(--ease) 0.35s backwards; }

  /* ---- hero & page headers (load sequence) -------------------------------- */
  .hero > img.bg, .pagehead > img.bg { translate: 0 var(--py, 0px); scale: 1.06; will-change: translate, scale; animation: fxKb 16s cubic-bezier(0.22, 0.6, 0.2, 1) both; }
  .hero .container, .pagehead .container { translate: 0 calc(var(--py, 0px) * 0.45); opacity: var(--pf, 1); }
  .hero .eyebrow { animation: fxUp 0.8s var(--ease) 0.1s backwards; }
  .hero h1 .w > span, .pagehead h1 .w > span { animation: fxWord 1s var(--ease) calc(0.25s + var(--i, 0) * 0.08s) backwards; }
  .hero p.sub { animation: fxUp 0.9s var(--ease) 0.6s backwards; }
  .hero-actions { animation: fxUp 0.9s var(--ease) 0.75s backwards; }
  .searchbar form { animation: fxUp 1s var(--ease) 0.95s backwards; }
  .pagehead .crumbs { animation: fxUp 0.7s var(--ease) 0.05s backwards; }
  .pagehead p { animation: fxUp 0.8s var(--ease) 0.55s backwards; }
  .nf .big { animation: fxZoom 0.9s var(--ease) backwards; }
  .nf h1 { animation: fxUp 0.8s var(--ease) 0.2s backwards; }
  .nf p { animation: fxUp 0.8s var(--ease) 0.3s backwards; }
  .nf .btn { animation: fxUp 0.8s var(--ease) 0.4s backwards; }

  /* ---- header, menu, floating buttons ------------------------------------- */
  .site-header { transition: box-shadow 0.3s, background 0.3s; }
  .header-in { transition: height 0.35s var(--ease); }
  .brand img { transition: height 0.35s var(--ease); }
  .scroll-progress { transition: transform 0.1s linear; }
  .to-top { transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0.3s, background 0.2s, color 0.2s, border-color 0.2s; }
  .to-top:hover { transform: translateY(-3px); }
  .wa-float { animation: fxPop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 1.4s backwards; }
  .wa-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; opacity: 0; animation: fxPulse 2.8s ease-out 2.2s infinite; pointer-events: none; }
  @media (max-width: 1020px) {
    .nav-open .main-nav { animation: fxMenu 0.3s var(--ease) both; }
    .nav-open .main-nav > * { animation: fxUpS 0.45s var(--ease) calc(0.06s + var(--i, 0) * 0.045s) backwards; }
    .main-nav > :nth-child(2) { --i: 1; } .main-nav > :nth-child(3) { --i: 2; } .main-nav > :nth-child(4) { --i: 3; }
    .main-nav > :nth-child(5) { --i: 4; } .main-nav > :nth-child(6) { --i: 5; } .main-nav > :nth-child(7) { --i: 6; } .main-nav > :nth-child(8) { --i: 7; }
  }

  /* ---- micro-interactions -------------------------------------------------- */
  .btn { position: relative; overflow: hidden; isolation: isolate; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s; }
  .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-130%); }
  .btn:hover::after { transform: translateX(130%); transition: transform 0.75s var(--ease); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn-primary:hover { box-shadow: 0 12px 24px -12px rgba(185, 83, 42, 0.7); }
  .btn-dark:hover, .btn-outline:hover { box-shadow: 0 12px 24px -14px rgba(43, 42, 40, 0.6); }

  .value, .why, .quote, .pub, .mv, .card { transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s; }
  .value:hover, .why:hover, .quote:hover, .pub:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
  .team img { transition: transform 0.5s var(--ease), border-radius 0.5s var(--ease); }
  .team:hover img { transform: scale(1.03); border-radius: var(--radius); }
  .info-list .ic { transition: transform 0.3s var(--ease), background 0.2s; }
  .info-list li:hover .ic { transform: scale(1.1) rotate(-6deg); background: var(--terra-dark); }
  .site-footer li a { display: inline-block; transition: transform 0.2s var(--ease), color 0.2s; }
  .site-footer li a:hover { transform: translateX(4px); }
  .socials a { transition: transform 0.25s var(--ease), background 0.2s, border-color 0.2s; }
  .socials a:hover { transform: translateY(-3px); }
  .chip, .pager a { transition: transform 0.2s var(--ease), border-color 0.2s, color 0.2s, background 0.2s; }
  .chip:hover, .pager a:hover { transform: translateY(-2px); }
  .plot .badge, .plot .price { transition: transform 0.4s var(--ease); }
  .plot:hover .price { transform: translateY(-3px); }
  .faq summary::after { transition: transform 0.35s var(--ease); }
  .faq summary { transition: color 0.2s; }
  .faq summary:hover { color: var(--terra); }
  .notice { animation: fxUpS 0.5s var(--ease) backwards; }
  .field input, .field select, .field textarea { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
  .field input:focus, .field select:focus, .field textarea:focus { transform: translateY(-1px); }
}