/* ONLYDROP / v80 — first-load composition sequence.
   Independent translate/scale preserve the existing transform, 3D title,
   category typography fitting, hover behavior and Y2K composition.
   All animations run once per initial homepage document load. */
@keyframes odEntryCity {
  from { opacity: .96; }
  to   { opacity: 0; }
}
@keyframes odEntryTop {
  from { opacity: 0; translate: 0 -12px; }
  to   { opacity: 1; translate: none; }
}
@keyframes odEntryPrimary {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: none; }
}
@keyframes odEntrySecondary {
  from { opacity: 0; translate: -22px 12px; }
  to   { opacity: 1; translate: none; }
}
@keyframes odEntryLabel {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: none; }
}
@keyframes odEntryDescription {
  from { opacity: 0; translate: 20px 0; }
  to   { opacity: 1; translate: none; }
}
@keyframes odEntryGeometry {
  from { opacity: 0; translate: 0 11px; scale: .95; }
  to   { opacity: 1; translate: none; scale: 1; }
}
@keyframes odEntryDecoration {
  from { opacity: 0; translate: 0 9px; }
  to   { opacity: 1; translate: none; }
}
/* v159 — A unified left-to-right entrance for every discipline.
   Animate the independent translate property to preserve card tilt/3D transforms. */
@keyframes odEntrySweep159 {
  from { opacity:0; translate:-32px 0; scale:.985; }
  to   { opacity:1; translate:0 0; scale:1; }
}
@keyframes odEntryFooter {
  from { opacity: 0; translate: 0 11px; }
  to   { opacity: 1; translate: none; }
}
@keyframes odEntryHeading {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: none; }
}
/* Arm in <head> so the browser never paints an unanimated frame.
   The visible state is restored automatically by a timed failsafe. */
html.od-entry-armed:not(.motion-paused) body .topbar,
html.od-entry-armed:not(.motion-paused) body #home .index-topline,
html.od-entry-armed:not(.motion-paused) body #home .index-name-lockup .name-line,
html.od-entry-armed:not(.motion-paused) body #home .index-alias,
html.od-entry-armed:not(.motion-paused) body #home .index-description,
html.od-entry-armed:not(.motion-paused) body #home .index-3d-stage,
html.od-entry-armed:not(.motion-paused) body #home .menu-heading,
html.od-entry-armed:not(.motion-paused) body #home .od-collage,
html.od-entry-armed:not(.motion-paused) body #home .visual-language-layer,
html.od-entry-armed:not(.motion-paused) body #home .category-menu > a.category-card,
html.od-entry-armed:not(.motion-paused) body #home .index-footer,
html.od-entry-playing:not(.od-entry-cards):not(.motion-paused) body #home .category-menu > a.category-card,
html.od-entry-playing:not(.od-entry-cards):not(.motion-paused) body #home .index-footer {
  opacity: 0 !important;
}
/* The city is revealed from the existing dark backdrop; no new gradient/color. */
html.od-entry-armed:not(.motion-paused) body #home .index-atmosphere::after,
html.od-entry-playing:not(.motion-paused) body #home .index-atmosphere::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  background-color: #0b1015 !important;
  pointer-events: none;
  z-index: 1;
}
html.od-entry-armed:not(.motion-paused) body #home .index-atmosphere::after {
  opacity: .96 !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-atmosphere::after {
  animation: odEntryCity 1.42s cubic-bezier(.2,.6,.25,1) both !important;
}
/* Hero / atmosphere / layout: smooth and quiet assembly. */
html.od-entry-playing:not(.motion-paused) body .topbar {
  animation: odEntryTop .69s cubic-bezier(.21,.8,.2,1) .10s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-topline {
  animation: odEntryTop .57s cubic-bezier(.21,.8,.2,1) .19s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .od-collage {
  animation: odEntryDecoration 1.03s ease-out .37s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .visual-language-layer {
  animation: odEntryDecoration .96s ease-out .54s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-name-lockup .name-line-primary {
  animation: odEntryPrimary .90s cubic-bezier(.16,1,.3,1) .25s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-name-lockup .name-line-secondary {
  animation: odEntrySecondary .91s cubic-bezier(.16,1,.3,1) .41s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-alias {
  animation: odEntryLabel .64s cubic-bezier(.16,1,.3,1) .71s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-description {
  animation: odEntryDescription .85s cubic-bezier(.16,1,.3,1) .62s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .index-3d-stage {
  animation: odEntryGeometry .91s cubic-bezier(.16,1,.3,1) .70s both !important;
}
html.od-entry-playing:not(.motion-paused) body #home .menu-heading {
  animation: odEntryHeading .58s cubic-bezier(.16,1,.3,1) .78s both !important;
}
/* Intro reads visually left -> right, not by DOM order:
   ART 2D | ANIMATION 2D + STORYBOARD | ANIMATION 3D + PROJECTS.
   Each card drifts in from its left edge without changing its own rotation. */
html.od-entry-playing.od-entry-cards:not(.motion-paused) body #home .category-menu > a.category-card {
  animation:odEntrySweep159 .70s cubic-bezier(.18,.78,.21,1) var(--od-entry-delay,40ms) both !important;
  will-change:translate,scale,opacity !important;
}
/* Three-column desktop layout. Two cards in each right column have a tiny
   internal offset, so the wave flows horizontally without rigid simultaneity. */
@media (min-width:901px) {
  html body #home .category-menu > a.cat-art2d { --od-entry-delay:40ms; }
  html body #home .category-menu > a.cat-anim2d { --od-entry-delay:180ms; }
  html body #home .category-menu > a.cat-story { --od-entry-delay:215ms; }
  html body #home .category-menu > a.cat-anim3d { --od-entry-delay:350ms; }
  html body #home .category-menu > a.cat-projects { --od-entry-delay:385ms; }
}
/* Tablet: two columns. The final wide PROJECTS card follows both columns. */
@media (min-width:701px) and (max-width:900px) {
  html body #home .category-menu > a.cat-anim2d { --od-entry-delay:40ms; }
  html body #home .category-menu > a.cat-art2d { --od-entry-delay:85ms; }
  html body #home .category-menu > a.cat-anim3d { --od-entry-delay:220ms; }
  html body #home .category-menu > a.cat-story { --od-entry-delay:255ms; }
  html body #home .category-menu > a.cat-projects { --od-entry-delay:395ms; }
}
/* Phone: one column. Reveal top-to-bottom, always arriving from the left. */
@media (max-width:700px) {
  html body #home .category-menu > a.cat-anim2d { --od-entry-delay:40ms; }
  html body #home .category-menu > a.cat-anim3d { --od-entry-delay:165ms; }
  html body #home .category-menu > a.cat-art2d { --od-entry-delay:290ms; }
  html body #home .category-menu > a.cat-story { --od-entry-delay:415ms; }
  html body #home .category-menu > a.cat-projects { --od-entry-delay:540ms; }
}
html.od-entry-playing.od-entry-cards:not(.motion-paused) body #home .index-footer {
  animation: odEntryFooter .67s cubic-bezier(.16,1,.3,1) .91s both !important;
}
/* Motion OFF, OS reduced motion, or interrupted tab transitions:
   always leave all controls and text immediately visible and interactive. */
@media (prefers-reduced-motion: reduce) {
  html.od-entry-armed body .topbar,
  html.od-entry-armed body #home .index-topline,
  html.od-entry-armed body #home .index-name-lockup .name-line,
  html.od-entry-armed body #home .index-alias,
  html.od-entry-armed body #home .index-description,
  html.od-entry-armed body #home .index-3d-stage,
  html.od-entry-armed body #home .menu-heading,
  html.od-entry-armed body #home .od-collage,
  html.od-entry-armed body #home .visual-language-layer,
  html.od-entry-armed body #home .category-menu > a.category-card,
  html.od-entry-armed body #home .index-footer,
  html.od-entry-playing body #home .category-menu > a.category-card,
  html.od-entry-playing body #home .index-footer {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
  }
  html.od-entry-armed body #home .index-atmosphere::after,
  html.od-entry-playing body #home .index-atmosphere::after {
    content: none !important;
    display: none !important;
  }
}
html.motion-paused.od-entry-armed body #home .category-menu > a.category-card,
html.motion-paused.od-entry-playing body #home .category-menu > a.category-card,
html.motion-paused.od-entry-playing body #home .index-footer {
  opacity: 1 !important;
  translate: none !important;
  scale: 1 !important;
  animation: none !important;
}

/* Prevent entering cards from being hidden if the animation is disabled. */
@media (prefers-reduced-motion:reduce) {
  html.od-entry-playing.od-entry-cards body #home .category-menu > a.category-card {
    animation:none !important;
    opacity:1 !important;
    translate:none !important;
    scale:1 !important;
  }
}