/* Layout guides describe the canvas around the incumbent hero, without moving its content. */
.hero-guides {
  position: absolute;
  inset: -4rem calc(-1 * var(--gutter)) -3rem;
  pointer-events: none;
  overflow: hidden;
  color: var(--green);
}
.hero-copy { position: relative; z-index: 1; }
.hero-guides-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(183, 243, 74, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 243, 74, .055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000, transparent 9%, transparent 60%, #000 85%);
}
.hero-guides-composition {
  position: absolute;
  right: 0;
  top: 0;
  width: 34%;
  height: 100%;
  max-width: 400px;
  overflow: visible;
}
.hero-guides-composition path { vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: 1; }
.guide-construction { opacity: .085; }
.guide-outlines { opacity: .28; }
.guide-baselines { opacity: .35; }
.guide-anchors { fill: var(--ink-deep); opacity: .6; }
.guide-crosshairs { opacity: .22; }
@media (max-width: 64rem) {
  .hero-guides-composition { right: -4rem; width: 40%; opacity: .55; }
  .hero-guides { mask-image: linear-gradient(90deg, #000, transparent 7%, transparent 78%, #000); }
}
@media (max-width: 40rem) {
  .hero-guides { inset-block: -2rem; mask-image: linear-gradient(90deg, #000, transparent 6%, transparent 92%, #000); }
  .hero-guides-grid { background-size: 32px 32px; mask-image: none; }
  .hero-guides-composition { right: -2rem; width: 200px; opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-guides[data-motion] { animation: none; }
}

/* A repeatable tracing pass stays visible after the initial page entrance. */
.guide-outlines { opacity: .42; }
.guide-anchors { opacity: .85; }
.guide-traces { opacity: .85; }
.guide-traces path { stroke-dasharray: 18 82; stroke-dashoffset: 0; stroke-width: 1.5; }
.guide-sweep { opacity: 0; }
.hero-guides[data-motion] { animation: none; }
.hero-guides[data-motion] .guide-traces path { animation: guide-trace 8s linear infinite; animation-play-state: paused; }
.hero-guides[data-motion] .guide-traces path:nth-child(2) { animation-delay: -3s; }
.hero-guides[data-motion] .guide-sweep { animation: guide-sweep 8s cubic-bezier(.4,0,.2,1) infinite; animation-play-state: paused; }
.hero-guides[data-playing] .guide-traces path,
.hero-guides[data-playing] .guide-sweep { animation-play-state: running; }
@keyframes guide-trace { to { stroke-dashoffset: -100; } }
@keyframes guide-sweep {
  0%, 12% { transform: translateX(0); opacity: 0; }
  20% { opacity: .5; }
  70% { transform: translateX(300px); opacity: .5; }
  82%, 100% { transform: translateX(300px); opacity: 0; }
}
.motion-toggle { position:absolute; z-index:2; right:0; bottom:-2rem; border:0; padding:.45rem 0 .45rem .6rem; color:var(--on-dark-muted); background:transparent; font:400 .75rem var(--font-ui); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.motion-toggle:hover { color:var(--green); }
.motion-toggle[hidden] { display:none; }
.capability-responsive-editor header nav button { min-height:32px; border:0; border-radius:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }
.capability-responsive-editor header nav button[aria-pressed="true"] { background:var(--green); color:var(--ink); }
.capability-responsive-editor .responsive-page { transition:margin 350ms ease, padding 350ms ease; }
.capability-responsive-editor[data-demo-viewport="tablet"] .responsive-page { margin-inline:15%; padding-inline:.7rem; }
.capability-responsive-editor[data-demo-viewport="mobile"] .responsive-page { margin-inline:25%; padding:.6rem; }
.capability-responsive-editor[data-demo-viewport="mobile"] .responsive-page strong { font-size:clamp(18px,2vw,28px); }
.capability-responsive-editor[data-demo-viewport="mobile"] .northhouse-logo--responsive { max-width:100%; }
@media (max-width:40rem) {
  .hero-guides { mask-image:linear-gradient(90deg,#000,transparent 5%,transparent 89%,#000); }
  .hero-guides-composition { opacity:.7; }
  .motion-toggle { bottom:-2.1rem; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-guides[data-motion] .guide-traces path, .hero-guides[data-motion] .guide-sweep { animation:none; }
  .capability-responsive-editor .responsive-page { transition:none; }
}

/* Keep the motion control quiet; its accessible label is announced by screen readers. */
.motion-toggle { width:44px; height:44px; display:grid; place-items:center; padding:0; text-decoration:none; opacity:.6; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity:1; }
.motion-icon-play, .motion-toggle[aria-pressed="true"] .motion-icon-pause { display:none; }
.motion-toggle[aria-pressed="true"] .motion-icon-play { display:block; }