/* Otto wordmark — SVG frame-based animation.
   Shared o-t-t lives in .otto-letters. The right-eye is layered as
   six .eye groups (1 open → 5 straight pill → 6 curved arc). JS plays
   the wink once on load, then adds .is-on to .smile so the mouth scales
   + fades in and stays there on subsequent wink loops. Frame geometry
   is lifted straight from the exported SVGs, so every pose is pixel-exact.
   Source of truth: docs/phase3/stage6_home_v3.html. */

.otto {
  display: inline-block;
  position: relative;
  color: var(--print-black);
  line-height: 0;
  user-select: none;
}
.otto-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: currentColor;
}

/* Right-eye keyframes. JS toggles inline display to cycle frames:
   1 open → 2,3,4 closing → 5 pill → 6 fully closed → 5,4,3,2 open
   → 1 pause 1s → smile fills in → loop. .eye-1 is the CSS default so
   the wordmark looks right before JS kicks in and at the start of each
   loop. */
.otto-svg .eye   { display: none; }
.otto-svg .eye-1 { display: inline; }

/* Smile: the mouth line "fills in" from the center outward —
   scaleX 0→1 on a fill-box origin, slight spring at the tail so the
   grow reads as lip-corners pulling up. Once .is-on lands it stays
   forever across subsequent wink loops. */
.otto-svg .smile {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transform-box: fill-box;
  transition:
    opacity 200ms cubic-bezier(.4, 0, .2, 1) 40ms,
    transform 520ms cubic-bezier(.34, 1.3, .64, 1);
}
.otto-svg .smile.is-on {
  opacity: 1;
  transform: scaleX(1);
}

/* Default sizes — SVG aspect is 17.01/7.09 ≈ 2.40, so height ≈ width/2.4. */
.otto.mk-nav    { width: 68px; }
.otto.mk-hero   { width: 580px; }
.otto.mk-cta    { width: 400px; color: #fff; }
.otto.mk-footer { width: 204px; }

/* The .smile path draws from y≈9.41 down to y≈11.36 — below the
   viewBox bottom of 7.09. .otto-svg uses `overflow: visible` so the
   wink renders beyond its own layout box. Reserve the vertical space
   on the wrapper via aspect-ratio so the wink doesn't overlap content
   positioned directly below the wordmark (hero H1, CTA H2, footer
   grid). 17.01 / 11.5 leaves a small buffer below the lowest curve. */
.otto.mk-hero,
.otto.mk-cta,
.otto.mk-footer {
  aspect-ratio: 17.01 / 11.5;
}

@media (max-width: 900px) {
  .otto.mk-hero   { width: 324px; }
  .otto.mk-cta    { width: 248px; }
  .otto.mk-footer { width: 164px; }
}
@media (max-width: 560px) {
  .otto.mk-hero   { width: 212px; }
  .otto.mk-cta    { width: 172px; }
  .otto.mk-footer { width: 126px; }
}

/* On-dark surfaces (CTA band, footer). */
.otto.on-dark { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .otto-svg .eye   { display: none   !important; }
  .otto-svg .eye-1 { display: inline !important; }
  .otto-svg .smile {
    transition: none     !important;
    opacity:   1         !important;
    transform: scaleX(1) !important;
  }
}