/* Shared motion. Animate opacity/transform; never size or live blur on scroll.
   Reference: https://web.dev/articles/animations-guide */
:root {
  --motion-glass: 800ms;
  --motion-panel: 420ms;
  --ease-glass: cubic-bezier(.37, 0, .63, 1);
  --control-surface: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 58%, rgba(205,232,153,.035)), rgba(27,38,30,.98);
}
.programmatic-scroll, .programmatic-scroll body { overflow-anchor: none; }
.first-screen-marker { position:absolute; top:calc(100svh + 24px); left:0; width:1px; height:1px; pointer-events:none; visibility:hidden; }
.first-screen-marker--exit { top:calc(100svh - 48px); }

/* Static translucent glass keeps scrolling content out of the blur pipeline. */
.nav-glass, .quick-actions, .quick-chat-panel, .back-to-top {
  background:var(--control-surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 24px rgba(0,0,0,.18);
}
.back-to-top {
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate3d(0,6px,0);
  transition:opacity var(--motion-glass) var(--ease-glass), transform var(--motion-glass) var(--ease-glass), visibility 0s var(--motion-glass);
}
.back-to-top.is-available {
  opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0,0,0); transition-delay:0s;
}
.quick-dock.chat-open .back-to-top { opacity:0; visibility:hidden; pointer-events:none; }
.quick-chat-panel {
  opacity:0; visibility:hidden; pointer-events:none; transform:translate3d(0,8px,0);
  transition:opacity var(--motion-panel) var(--ease-glass), transform var(--motion-panel) var(--ease-glass), visibility 0s var(--motion-panel);
}
.quick-chat-panel.is-open {
  opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0,0,0); transition-delay:0s;
}

@media(max-width:780px) {
  /* svh stays stable when a phone's browser toolbar expands or collapses. */
  .hero, .hero-inner { min-height:max(720px,100svh); }
  .inner-hero, .inner-hero-content { min-height:max(660px,85svh); }
  .glass, .primary-nav, .menu-jump { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
  .hero-media img, .inner-hero-image img { animation:none; }
  .motion-ready .reveal { opacity:1; transform:none; transition:none; }
  .ritual-panel { animation:mobile-panel-in 420ms ease both; }
  .site-header { padding:1rem; pointer-events:none; }
  .site-header .nav-glass {
    position:relative; isolation:isolate; width:100%; min-height:64px; padding:.55rem .65rem;
    gap:0; background:transparent!important; border-color:transparent; box-shadow:none; pointer-events:none;
  }
  .site-header .nav-glass:before, .site-header .menu-toggle:before {
    content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
    border:1px solid rgba(255,255,255,.23); background:var(--control-surface);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.14);
    pointer-events:none; transition:opacity var(--motion-glass) var(--ease-glass);
  }
  .site-header .nav-glass:before { opacity:1; }
  .site-header .brand {
    position:absolute; left:1rem; top:50%; transform:translateY(-50%);
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity var(--motion-glass) var(--ease-glass), visibility 0s;
  }
  .site-header .menu-toggle {
    position:relative; isolation:isolate; margin-left:auto; min-height:44px; flex-shrink:0;
    white-space:nowrap; background:transparent; border-color:transparent; pointer-events:auto;
  }
  .site-header .menu-toggle:before { inset:-1px; opacity:0; }
  .past-first-screen .site-header .nav-glass:before { opacity:0; }
  .past-first-screen .site-header .menu-toggle:before { opacity:1; }
  .past-first-screen .site-header .brand {
    opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s,var(--motion-glass);
  }
  .site-header>.primary-nav {
    display:flex; position:absolute; left:1rem; right:1rem; top:calc(100% + .3rem);
    width:auto; max-height:calc(100svh - 13rem); margin:0; overflow-y:auto; overscroll-behavior:contain;
    background:var(--control-surface); opacity:0; visibility:hidden; pointer-events:none;
    transform:translate3d(0,-6px,0);
    transition:opacity var(--motion-panel) var(--ease-glass), transform var(--motion-panel) var(--ease-glass), visibility 0s var(--motion-panel);
  }
  .site-header>.primary-nav.is-open {
    opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0,0,0); transition-delay:0s;
  }
  .site-header>.primary-nav a { min-height:44px; display:flex; align-items:center; }
  .quick-dock {
    opacity:0; visibility:hidden; pointer-events:none; transform:translate3d(0,8px,0);
    transition:opacity var(--motion-glass) var(--ease-glass), transform var(--motion-glass) var(--ease-glass), visibility 0s var(--motion-glass);
  }
  .past-first-screen .quick-dock {
    opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0,0,0); transition-delay:0s;
  }
  /* The dock already fades: do not multiply two opacity animations. */
  .back-to-top, .back-to-top.is-available {
    opacity:1; visibility:visible; transform:none;
    transition:opacity var(--motion-panel) var(--ease-glass), visibility 0s var(--motion-panel);
  }
}
@media(hover:none) {
  .button:hover, .button:active, .underlined-link:hover, .primary-nav a:hover,
  .quick-action:last-child:hover, .back-to-top:hover, .contact-method:hover,
  .ritual-panel:hover .ritual-photo img, .visit-photo:hover img { transform:none; }
}
@keyframes mobile-panel-in { from{opacity:0} to{opacity:1} }
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .motion-ready .reveal { opacity:1; transform:none; }
}
@media(prefers-reduced-transparency:reduce) {
  :root { --control-surface:#253128; }
}