/* Reveals animate only after intersection; an unloaded script leaves every item visible. */
[data-reveal].will-reveal,
[data-reveal].will-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

main {
  background: var(--paper);
}

.service[open] .service-body {
  animation: none;
}

.service summary h3 {
  transition: color 180ms, transform 220ms var(--ease);
}

.service-icon {
  transform: rotate(0);
  transition: color 180ms, transform 260ms var(--ease);
}

.service[open] .service-icon {
  transform: rotate(45deg);
}

.service[open] .service-icon::before {
  content: "\f218";
}

.service-number {
  transition: color 180ms;
}

.service[open] summary .service-number,
.service[open] .service-icon,
.service summary:focus-visible .service-number,
.service summary:focus-visible .service-icon {
  color: var(--accent-ink);
}

.motion-line,
.motion-rule {
  --rule-color: var(--line);
  --rule-signal: var(--accent-ink);
  position: relative;
}

.motion-line {
  border-bottom-color: transparent;
}

.motion-rule {
  border-top-color: transparent;
}

.motion-line::before,
.motion-line::after,
.motion-rule::before,
.motion-rule::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  transform-origin: left;
  pointer-events: none;
}

.motion-rule::before,
.motion-rule::after {
  inset: -1px 0 auto;
}

.motion-line::before,
.motion-rule::before {
  background: var(--rule-color);
}

.motion-line::after,
.motion-rule::after {
  background: linear-gradient(90deg, transparent 82%, var(--rule-signal) 100%);
  opacity: 0;
}

.service-list.motion-rule {
  --rule-color: var(--ink);
}

.studio-section .motion-line,
.studio-section .motion-rule {
  --rule-color: #c3c7ce;
}

.footer-row.motion-rule {
  --rule-color: var(--line-dark);
  --rule-signal: var(--accent);
}

.is-revealing.motion-line::before,
.is-revealing.motion-rule::before {
  animation: rule-in 540ms var(--ease) var(--reveal-delay, 0ms) backwards;
}

.is-revealing.motion-line::after,
.is-revealing.motion-rule::after {
  animation: rule-signal 660ms var(--ease) var(--reveal-delay, 0ms) both;
}

@keyframes rule-in {
  from { transform: scaleX(0); opacity: 0.4; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes rule-signal {
  0% { transform: scaleX(0); opacity: 0; }
  18% { opacity: 0.7; }
  72% { opacity: 0.4; }
  100% { transform: scaleX(1); opacity: 0; }
}

.nav-contact i,
.hero-secondary i,
.explore-link i,
.back-top i {
  transition: transform 240ms var(--ease);
}

.text-link {
  position: relative;
}

.text-link::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease);
  pointer-events: none;
}

.contact-section .text-link::after {
  background: var(--accent);
}

.text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (hover: hover) and (pointer: fine) {
  .service summary:hover h3 { transform: translateX(2px); }
  .service summary:hover .service-number,
  .service summary:hover .service-icon { color: var(--accent-ink); }
  .nav-contact:hover i { transform: translate(2px, -2px); }
  .hero-secondary:hover i,
  .explore-link:hover i { transform: translateY(3px); }
  .back-top:hover i { transform: translateY(-3px); }
  .text-link:hover::after { transform: scaleX(1); transform-origin: left; }
}

@media (prefers-reduced-motion: reduce) {
  .service summary h3,
  .service-icon,
  .service-number,
  .nav-contact i,
  .hero-secondary i,
  .explore-link i,
  .back-top i,
  .text-link::after { transition: none; }
  .motion-line.is-revealing::before,
  .motion-line.is-revealing::after,
  .motion-rule.is-revealing::before,
  .motion-rule.is-revealing::after { animation: none; }
  .service summary:hover h3,
  .nav-contact:hover i,
  .hero-secondary:hover i,
  .explore-link:hover i,
  .back-top:hover i { transform: none; }
}