/* Onlydrop v81 — geometric masking for the index presentation.
   The wordmark and subtitle are revealed as one horizontal composition.
   Then a vertical guide draws downward and the bio emerges from its edge.
   Other sections keep their individual v80 entrance animation. */
@keyframes odBrandMaskReveal {
  /* Expand the reveal plane beyond Dirtyline's glyph overhangs.
     Start entirely outside the left edge, then sweep to the right. */
  from { clip-path:inset(-48px calc(100% + 48px) -48px -48px); }
  to   { clip-path:inset(-48px -48px -48px -48px); }
}
@keyframes odBioRuleReveal {
  from { clip-path:inset(0 0 100% 0); }
  to   { clip-path:inset(0 0 0 0); }
}
@keyframes odBioReveal {
  from { clip-path:inset(0 100% 0 0); translate:-12px 0; }
  to   { clip-path:inset(0 0 0 0); translate:none; }
}
/* One visibility clock for the whole About group.
   The title is no longer held back by a separate opacity animation. */
@keyframes odBioGroupReveal {
  from { opacity:0; }
  to   { opacity:1; }
}
/* The vertical accent is a real separate element, so its direction
   is independent of the copy clipping and of the wordmark typography. */
html body #home .index-description {
  position:relative !important;
  isolation:isolate;
}
html body #home .index-description > p {
  border-left:0 !important;
  padding-left:18px !important;
}
html body #home .index-description::before {
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:100%;
  background-color:#7ce7f5;
  pointer-events:none;
}
html body #home .index-description .od-bio-copy {
  display:block;
  overflow:visible;
  color:inherit;
}
/* The head boot class is set before layout. Never flash the original text
   before the new clipping animations are armed. */
html.od-entry-armed:not(.motion-paused) body #home .index-name-block {
  clip-path:inset(-48px calc(100% + 48px) -48px -48px) !important;
}
html.od-entry-armed:not(.motion-paused) body #home .index-description::before {
  clip-path:inset(0 0 100% 0) !important;
}
html.od-entry-armed:not(.motion-paused) body #home .index-description .od-bio-copy {
  clip-path:inset(0 100% 0 0) !important;
}
/* Disable the earlier staggered fade / translation for the brand.
   The shared parent mask replaces both line fades and the subtitle fade. */
html.od-entry-playing:not(.motion-paused) body #home .index-name-lockup .name-line-primary,
html.od-entry-playing:not(.motion-paused) body #home .index-name-lockup .name-line-secondary,
html.od-entry-playing:not(.motion-paused) body #home .index-name-block .index-alias {
  animation:none !important;
  opacity:1 !important;
  translate:none !important;
  scale:1 !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-name-block {
  animation:odBrandMaskReveal 1.2s cubic-bezier(.62,0,.18,1) .19s both !important;
  opacity:1 !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-description {
  animation:odBioGroupReveal .46s cubic-bezier(.22,.74,.25,1) .36s both !important;
  /* Do not set opacity !important here: it defeats opacity keyframes. */
  translate:none !important;
}
/* Title and subtitle are completely legible before the line starts.
   The copy then unfolds horizontally from that line, without opacity fades. */
html.od-entry-playing:not(.motion-paused) body #home .index-description::before {
  animation:odBioRuleReveal .38s cubic-bezier(.2,.72,.22,1) .34s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-description .od-bio-heading {
  animation:none !important;
  opacity:1 !important;
  visibility:visible !important;
  clip-path:none !important;
  translate:none !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-description .od-bio-copy {
  animation:odBioReveal .72s cubic-bezier(.35,.07,.18,1) .39s both !important;
}
/* Reduced-motion and disabled-animation users see the complete block
   immediately; no clip remains on the wordmark, guide or description. */
@media (prefers-reduced-motion:reduce) {
  html.od-entry-armed body #home .index-name-block,
  html.od-entry-playing body #home .index-name-block,
  html.od-entry-playing:not(.motion-paused) body #home .index-description,
  html.od-entry-armed body #home .index-description::before,
  html.od-entry-playing body #home .index-description::before,
  html.od-entry-armed body #home .index-description .od-bio-copy,
  html.od-entry-playing body #home .index-description .od-bio-copy,
  html.od-entry-armed body #home .index-description .od-bio-heading,
  html.od-entry-playing body #home .index-description .od-bio-heading {
    animation:none !important;
    clip-path:none !important;
    translate:none !important;
    opacity:1 !important;
  }
}
html.motion-paused.od-entry-armed body #home .index-name-block,
html.motion-paused.od-entry-playing body #home .index-name-block,
html.motion-paused.od-entry-playing body #home .index-description,
html.motion-paused.od-entry-armed body #home .index-description::before,
html.motion-paused.od-entry-playing body #home .index-description::before,
html.motion-paused.od-entry-armed body #home .index-description .od-bio-copy,
html.motion-paused.od-entry-playing body #home .index-description .od-bio-copy,
html.motion-paused.od-entry-armed body #home .index-description .od-bio-heading,
html.motion-paused.od-entry-playing body #home .index-description .od-bio-heading {
  animation:none !important;
  clip-path:none !important;
  translate:none !important;
  opacity:1 !important;
}

/* v83 / Gentle cinematic zoom-out during the initial homepage reveal.
   Individual scale preserves the existing backdrop crop, mask and fade. */
@keyframes odCityZoomSettle {
  from { scale:1.055; }
  to   { scale:1; }
}
html.od-entry-armed:not(.motion-paused) body #home .index-atmosphere {
  scale:1.055 !important;
  transform-origin:50% 26% !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-atmosphere {
  transform-origin:50% 26% !important;
  animation:odCityZoomSettle 2.85s cubic-bezier(.19,.71,.24,1) both !important;
}
@media (prefers-reduced-motion:reduce) {
  html.od-entry-armed body #home .index-atmosphere,
  html.od-entry-playing body #home .index-atmosphere {
    animation:none !important;
    scale:1 !important;
  }
}
html.motion-paused.od-entry-armed body #home .index-atmosphere,
html.motion-paused.od-entry-playing body #home .index-atmosphere {
  animation:none !important;
  scale:1 !important;
}