/* ARIS landing motion system v2: compositor-only entrances, no scroll-linked
   photographic transforms, no competing transform animation on the popup. */

/* Preserve the original hero composition while giving the large introductory
   brand mark breathing room at the top of the page. */
.hero { padding-top:max(174px, 21svh); }
@media(max-width:720px) { .hero { padding-top:238px; } }

/* The real brand geometry uses the same seven SVG paths as src/components/Logo.tsx. */
.landing-brand-mark { display:block; width:100%; height:auto; overflow:visible; }
.landing-brand-mark .p-orange { fill:#ea580c; stroke:none; }
.landing-brand-mark .p-dark { fill:#212937; stroke:none; }
.landing-brand-tagline {
  display:block; width:100%; margin-top:-1px; text-align:center;
  white-space:nowrap; font-family:var(--display),Arial,sans-serif;
  line-height:1.25; color:#273846; font-weight:750; letter-spacing:.015em;
}
.nav .nav-brand-link {
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  align-self:stretch; padding-block:10px; text-decoration:none;
  min-width:88px;
}
.nav .landing-header-brand {
  display:flex; flex-direction:column; justify-content:center; flex:none;
  width:88px; height:58px; text-align:center;
}
.nav .landing-brand-tagline { font-size:11px; margin-top:0; }
@media(max-width:720px) {
  .nav .nav-brand-link { min-width:80px; padding-block:9px; }
  .nav .landing-header-brand { width:80px; height:54px; }
  .nav .landing-brand-tagline { font-size:10px; }
}
html.brand-pending .nav .landing-header-brand { visibility:hidden; }

/* Its single flight follows scroll only until it docks, then it is removed. */
.landing-brand-flight[hidden] { display:none!important; }
.landing-brand-flight {
  position:fixed; z-index:65; top:0;left:0; width:180px;
  pointer-events:none; transform-origin:top left;
  text-align:center; contain:layout style;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.landing-brand-flight .landing-brand-tagline { font-size:21px; }
html.brand-drawing .nav .landing-header-brand { visibility:visible; }

/* Draw the paths, then fill them once as the app's Logo.tsx does.
   Only the resting header mark animates; the flying image stays crisp and full. */
html.brand-drawing .nav .landing-logo-path {
  fill:transparent; stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  stroke-width:3;
  animation-duration:3s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}
html.brand-drawing .nav .p-orange { stroke:#ea580c; animation-name:arisBrandFillOrange; }
html.brand-drawing .nav .p-dark { stroke:#212937; stroke-width:2; animation-name:arisBrandFillDark; }
html.brand-drawing .nav .p1 { animation-delay:.09s; }
html.brand-drawing .nav .p2 { animation-delay:.16s; }
html.brand-drawing .nav .p3 { animation-delay:.20s; }
html.brand-drawing .nav .p4 { animation-delay:.25s; }
html.brand-drawing .nav .p5 { animation-delay:.3s; }
html.brand-drawing .nav .p6 { animation-delay:.36s; }
@keyframes arisBrandFillOrange {
  0% { fill:transparent; stroke-dashoffset:var(--len); }
  40% { fill:transparent; stroke-dashoffset:0; }
  55%,100% { fill:#ea580c; stroke-dashoffset:0; }
}
@keyframes arisBrandFillDark {
  0% { fill:transparent; stroke-dashoffset:var(--len); }
  40% { fill:transparent; stroke-dashoffset:0; }
  55%,100% { fill:#212937; stroke-dashoffset:0; }
}
html.brand-drawing .nav .landing-brand-tagline {
  opacity:0; clip-path:inset(0 0 0 100%);
}
html.brand-drawing.brand-typing .nav .landing-brand-tagline {
  opacity:1;
  animation:arisBrandType .95s steps(9,end) both;
}
@keyframes arisBrandType {
  from { clip-path:inset(0 0 0 100%); }
  to { clip-path:inset(0 0 0 0); }
}
html.brand-settled .nav .landing-logo-path { animation:none; stroke:none; stroke-dashoffset:0; }
html.brand-settled .nav .landing-brand-tagline { opacity:1;clip-path:none;animation:none; }

/* At most one reveal per element, only on a downward viewport entry.
   Marked cinema-skip items are immediately visible when scrolling upward. */
html.cinema-ready .cinema-reveal.cinema-in.cinema-skip,
html.cinema-ready .portal .feature-card.cinema-reveal.cinema-in.cinema-skip,
html.cinema-ready .value-card.cinema-reveal.cinema-in.cinema-skip {
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  transition-delay:0s!important;
}

/* Static photographs: no pixels are recalculated for each scroll frame. */
.portal .visual img.photo,
.portal .visual picture.photo-frame,
.parallax-story .sticky-scene picture.scene-picture,
#residents .resident-phone {
  will-change:auto!important;
}
.nav,.nav.scrolled {
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(250,249,246,.97)!important;
}
.portal .visual .caption {
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
/* The original dialog had TWO concurrent CSS animations on transform:
   an entrance and a repeating heartbeat, both claiming the same property.
   Intro now runs once, followed by two tiny pulses on the BUTTON only. */
#engineers-event.event-overlay {
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#engineers-event:not([hidden]) .event-dialog {
  animation:congressOpenOnce .58s cubic-bezier(.2,.8,.22,1) both!important;
}
@keyframes congressOpenOnce {
  from { opacity:0; transform:translate3d(0,13px,0) scale(.97); }
  to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
#engineers-event:not([hidden]) .event-actions .btn {
  animation:congressButtonBreathe 3.4s ease-in-out .9s 2 both;
}
@keyframes congressButtonBreathe {
  0%,100% { transform:translateZ(0) scale(1); }
  50% { transform:translateZ(0) scale(1.018); }
}

@media (prefers-reduced-motion:reduce) {
  .landing-brand-flight { display:none!important; }
  .nav .landing-header-brand { visibility:visible!important; }
  html.brand-drawing .nav .landing-logo-path,
  html.brand-drawing.brand-typing .nav .landing-brand-tagline,
  #engineers-event:not([hidden]) .event-dialog,
  #engineers-event:not([hidden]) .event-actions .btn {
    animation:none!important; stroke:none!important;
  }
  .nav .landing-brand-mark .p-orange { fill:#ea580c!important; }
  .nav .landing-brand-mark .p-dark { fill:#212937!important; }
  .nav .landing-brand-tagline { opacity:1!important;clip-path:none!important; }
}
html[data-a11y-motion] .landing-brand-flight { display:none!important; }
html[data-a11y-motion] .nav .landing-header-brand { visibility:visible!important; }
html[data-a11y-motion] .nav .landing-logo-path,
html[data-a11y-motion] .nav .landing-brand-tagline,
html[data-a11y-motion] #engineers-event:not([hidden]) .event-dialog,
html[data-a11y-motion] #engineers-event:not([hidden]) .event-actions .btn {
  animation:none!important;
  clip-path:none!important;
  opacity:1!important;
  stroke:none!important;
}
html[data-a11y-motion] .nav .landing-brand-mark .p-orange { fill:#ea580c!important; }
html[data-a11y-motion] .nav .landing-brand-mark .p-dark { fill:#212937!important; }

/* Contact-area brand reveal: real seven-path ARIS SVG, one draw-and-fill only
   when the visitor reaches the section. Default presentation is fully visible
   if JavaScript is disabled or reduced-motion is requested. */
.contact-brand-intro {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin-block:0 26px;
}
.contact .contact-brand-mark {
  display:block;
  width:min(255px,74%);
  height:auto;
  overflow:visible;
}
.contact .contact-brand-mark .p-orange { fill:#ea580c; stroke:none; }
.contact .contact-brand-mark .p-dark { fill:#212937; stroke:none; }
.contact .contact-brand-motto {
  display:block;
  margin:0 !important;
  font-family:var(--display),Arial,sans-serif;
  font-size:clamp(31px,3.3vw,45px) !important;
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.02em;
  color:#1a3340 !important;
}
.contact .contact-brand-motto span {
  display:block;
  color:#4d626b;
  margin-top:3px;
}
@media(max-width:720px) {
  .contact-brand-intro { gap:11px; margin-block:0 20px; }
  .contact .contact-brand-mark { width:min(220px,71%); }
  .contact .contact-brand-motto { font-size:clamp(30px,8vw,40px) !important; }
}

/* Only one compositor-free, finite vector trace. No scroll frame reads. */
.contact-brand-intro.is-animating .contact-brand-mark .contact-logo-path {
  fill:transparent;
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  stroke-width:3;
  animation-duration:2.6s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}
.contact-brand-intro.is-animating .contact-brand-mark .p-orange {
  stroke:#ea580c;
  animation-name:contactMarkOrange;
}
.contact-brand-intro.is-animating .contact-brand-mark .p-dark {
  stroke:#212937;
  stroke-width:2;
  animation-name:contactMarkDark;
}
.contact-brand-intro.is-animating .contact-brand-mark .p1 { animation-delay:.08s; }
.contact-brand-intro.is-animating .contact-brand-mark .p2 { animation-delay:.14s; }
.contact-brand-intro.is-animating .contact-brand-mark .p3 { animation-delay:.18s; }
.contact-brand-intro.is-animating .contact-brand-mark .p4 { animation-delay:.23s; }
.contact-brand-intro.is-animating .contact-brand-mark .p5 { animation-delay:.28s; }
.contact-brand-intro.is-animating .contact-brand-mark .p6 { animation-delay:.34s; }
@keyframes contactMarkOrange {
  0% { stroke-dashoffset:var(--len); fill:transparent; }
  43% { stroke-dashoffset:0; fill:transparent; }
  59%,100% { stroke-dashoffset:0; fill:#ea580c; }
}
@keyframes contactMarkDark {
  0% { stroke-dashoffset:var(--len); fill:transparent; }
  43% { stroke-dashoffset:0; fill:transparent; }
  59%,100% { stroke-dashoffset:0; fill:#212937; }
}
@media(prefers-reduced-motion:reduce) {
  .contact-brand-intro.is-animating .contact-logo-path {
    animation:none!important;stroke:none!important;
  }
  .contact-brand-intro.is-animating .p-orange { fill:#ea580c!important; }
  .contact-brand-intro.is-animating .p-dark { fill:#212937!important; }
}
html[data-a11y-motion] .contact-brand-intro.is-animating .contact-logo-path {
  animation:none!important;stroke:none!important;
}
html[data-a11y-motion] .contact-brand-intro.is-animating .p-orange { fill:#ea580c!important; }
html[data-a11y-motion] .contact-brand-intro.is-animating .p-dark { fill:#212937!important; }