/* Motion is an enhancement: all content and rules are visible by default. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 220ms;
}
.hero-line { display: block; overflow: hidden; padding-bottom: .13em; margin-bottom: -.13em; }
.hero-line > span { display: block; }

/* The next section passes over the monumental word before revealing the photograph. */
.mission.has-chapter-motion { overflow: visible; }
.has-chapter-motion .together-stage { height: calc(var(--monument-height) + 32vh); margin-top: calc(3 * var(--layout-unit)); }
.has-chapter-motion .together { position: sticky; top: 0; margin-top: 0; background: var(--brown); }
.mission.has-chapter-motion + .practice-section { margin-top: -32vh; }
.practice-section { position: relative; z-index: 1; background: var(--paper); }

.motion-rule {
  position: absolute;
  display: block;
  background: var(--rule);
  pointer-events: none;
  z-index: 3;
}

.motion-rule--x {
  height: 1px;
  left: 0;
  right: 0;
  transform-origin: left center;
}

.motion-rule--y {
  width: 1px;
  top: 0;
  bottom: 0;
  transform-origin: center top;
}

.rule-header-main { bottom: 0; right: 21.7%; }
.rule-header-aside { bottom: 0; left: 79.5%; }
.rule-hero-right { right: 0; }
.rule-hero-bottom { bottom: 0; left: 63.5%; }
.rule-approach-left { left: 0; bottom: calc(.6 * var(--layout-unit)); }
.rule-approach-bottom { bottom: 0; }
.rule-projects-top, .rule-link-top, .rule-principle-top, .rule-community-top { top: 0; }
.rule-aediris-left, .rule-community-left { left: 0; }
.rule-aediris-right, .rule-aegillis-right { right: 0; top: calc(.6 * var(--layout-unit)); }
.rule-aegillis-bottom { bottom: 0; }
.rule-link-top { background: #aaa79e; }
.rule-principle-top { top: -1px; background: #b8a494; }

.has-motion-rules.site-header { background: none; }
.has-motion-rules.hero::after,
.has-motion-rules.approach::before,
.has-motion-rules.approach::after,
.has-motion-rules.projects-intro::after,
.has-motion-rules.aediris::before,
.has-motion-rules.aediris::after,
.has-motion-rules.aegillis::before,
.has-motion-rules.aegillis::after,
.has-motion-rules.community-card::before,
.has-motion-rules.community-card::after { content: none; }

.approach-links .has-motion-rules,
.mission-principles .has-motion-rules {
  position: relative;
  border-top-color: transparent;
}
.mission-principles details:has(> .has-motion-rules) { border-top-color: transparent; }

/* Frames remain anchored to the layout; only artwork inside them can move. */
.project-card:hover .project-art { transform: none; }
.project-art { transition: none; }
.project-card { transition: background 280ms var(--motion-ease); }
.project-card:focus-visible { background: #f2efe6; }
.project-card:focus-visible .card-arrow { transform: translate(2px, -2px); }
.arrow { transition: transform var(--motion-quick) var(--motion-ease); }
.primary-button, .community-card { transition: background 280ms var(--motion-ease); }

@media (max-width: 760px) {
  .rule-header-main { right: 0; }
  .rule-header-aside, .rule-hero-right, .rule-approach-left { display: none; }
  .rule-hero-bottom { left: 0; }
  .rule-approach-bottom { right: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  /* ScrollTrigger restores an inline scrollBehavior after refreshing. */
  html, body { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .arrow, .project-card:focus-visible .card-arrow { transform: none !important; }
}