/* Firmitas / 24 Sep 2026
   A small connective layer over the existing homepage. The site already has
   useful interactions; this pass makes the important ones legible instead of
   adding a second, competing visual system. */

@media (min-width: 1101px) {
  /* Give the sculpture more room and let the two hero halves share a centre
     line. The previous fixed-height canvas made the right object feel pinned
     beside the headline rather than composed with it. */
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    column-gap: clamp(26px, 3.5vw, 56px);
    align-items: center;
  }
  .hero-copy {
    align-self: center;
    padding-bottom: 18px;
  }
  .sculpture {
    height: clamp(460px, 43vw, 570px);
    min-height: 0;
    margin-top: 0;
  }
  .hero-baseline {
    margin-top: 30px;
  }
}

/* A quiet registration frame gives the ribbon a little spatial context. It is
   deliberately not a glow or a badge: it reads like a drawing being worked on. */
.sculpture::before {
  content: "";
  position: absolute;
  inset: 8% 4% 10%;
  border: 1px solid rgba(255, 128, 100, .2);
  border-radius: 50%;
  transform: rotate(-8deg) scale(.97);
  opacity: .48;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .7s var(--ease), border-color .45s var(--ease);
  z-index: 0;
}
.sculpture::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 18%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--coral);
  border-radius: 50%;
  opacity: .7;
  transform: scale(.7);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.sculpture canvas { position: relative; z-index: 2; }
.sculpture.is-near::before {
  border-color: rgba(255, 128, 100, .42);
  opacity: .72;
  transform: rotate(-6deg) scale(1);
}
.sculpture.is-tensioned::before {
  border-color: rgba(255, 128, 100, .7);
  opacity: .92;
  transform: rotate(-4deg) scale(1.025);
}
.sculpture.is-tensioned::after {
  opacity: 1;
  transform: scale(1.25);
}
.hero.is-departing .sculpture::before { opacity: .22; }
.hero.is-departing .sculpture::after { opacity: .3; }

/* Section seams keep their existing layout, but gain a small moving highlight
   only while the section is in view. It is a 1px surface, not a full-page
   animation. */
.section-intro::after {
  background-size: 180% 100%;
  background-position: 0 50%;
}
.section-intro.is-live::after {
  animation: section-seam-drift 8s ease-in-out infinite alternate;
}
@keyframes section-seam-drift {
  from { background-position: 0 50%; }
  to { background-position: 100% 50%; }
}
.section-intro > div { position: relative; }
.section-intro > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -17px;
  width: 30px;
  height: 2px;
  background: var(--coral);
  transform-origin: left;
  opacity: .78;
}
.section-intro.is-shown > div::before { animation: intro-marker .65s var(--ease) both; }
@keyframes intro-marker {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: .78; }
}

/* Playground: a change in the controls gets a visible acknowledgement in the
   preview. The state class is added by JS only, so the no-JS page stays calm. */
.specimen { position: relative; }
.specimen::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--coral);
  opacity: 0;
  transform: scale(.985);
  pointer-events: none;
  z-index: 4;
}
.specimen.is-changing::after { animation: specimen-acknowledge .55s var(--ease) both; }
@keyframes specimen-acknowledge {
  0% { opacity: .75; transform: scale(.985); }
  100% { opacity: 0; transform: scale(1.015); }
}
.specimen-toolbar > span i {
  transform-origin: center;
  animation: preview-dot 2.8s ease-in-out infinite;
}
@keyframes preview-dot {
  0%, 100% { transform: scale(.85); opacity: .58; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* The film is already a real interaction. A hairline progress track makes that
   state visible without adding another control. */
.film-progress {
  height: 2px;
  margin: 0 16px;
  overflow: hidden;
  background: rgba(231, 217, 190, .18);
}
.film-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--coral);
  transform: scaleX(var(--film-progress, 0));
  transform-origin: left center;
  transition: transform .12s linear;
}

/* Ownership: the orbit is the handover made visible. It is slow, quiet, and
   pauses on interaction; the card remains the subject. */
.handover-art { isolation: isolate; }
.ownership-orbit {
  display: block;
  z-index: 0;
  width: min(320px, 72vw);
  height: auto;
  aspect-ratio: 1;
  opacity: .24;
  pointer-events: none;
  transform: rotateX(55deg) rotateZ(-20deg);
  animation: ownership-drift 10s ease-in-out infinite alternate;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.key-card { position: relative; z-index: 1; }
.handover-art.is-engaged .ownership-orbit {
  opacity: .62;
  animation-play-state: paused;
  transform: rotateX(48deg) rotateZ(10deg) scale(1.04);
}
@keyframes ownership-drift {
  from { transform: rotateX(55deg) rotateZ(-20deg) translate3d(-4px, 2px, 0); }
  to { transform: rotateX(55deg) rotateZ(-14deg) translate3d(4px, -2px, 0); }
}

/* Process cards become a quiet sequence as they pass the reading line. The
   line and number remain the content; the lift is only a state cue. */
.process-track article {
  transition: transform .45s var(--ease), border-color .35s var(--ease);
}
.process-track article::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.process-track article > span {
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.process-track article.is-active {
  transform: translate3d(0, -4px, 0);
  border-color: var(--coral);
}
.process-track article.is-active::before { opacity: 1; transform: scale(1); }
.process-track article.is-active > span { color: var(--coral); transform: translate3d(5px, 0, 0); }
.process-track article.is-active h3 { color: var(--coral); }

@media (max-width: 760px) {
  .hero-copy { padding-bottom: 0; }
  .sculpture { height: 250px; }
  .sculpture::before { inset: 7% 1% 9%; }
  .sculpture::after { right: 10%; top: 16%; }
  .section-intro > div::before { top: -14px; width: 24px; }
  .film-progress { margin-inline: 10px; }
  .ownership-orbit { width: min(230px, 68vw); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .section-intro.is-live::after,
  .section-intro.is-shown > div::before,
  .specimen.is-changing::after,
  .specimen-toolbar > span i,
  .ownership-orbit { animation: none !important; }
  .sculpture::before,
  .sculpture::after { transition: none; }
  .process-track article,
  .process-track article > span { transition: none; }
  .process-track article.is-active { transform: none; }
  .process-track article.is-active > span { transform: none; }
}