/* Broad, buoyant movement for ONO's Hawaiian photographs and typography. */
main { overflow-x: clip; }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-copy > .eyebrow {
    animation: ono-copy-rise 1s .05s cubic-bezier(.16, 1, .3, 1) both;
  }
  .motion-ready .hero h1 > span {
    animation: ono-title-rise 1.35s cubic-bezier(.16, 1, .3, 1) both;
  }
  .motion-ready .hero h1 > span:nth-child(2) { animation-delay: .16s; }
  .motion-ready .hero h1 > span:nth-child(3) { animation-delay: .32s; }
  .motion-ready .hero-description,
  .motion-ready .hero-actions,
  .motion-ready .hero-meta {
    animation: ono-copy-rise 1.15s .42s cubic-bezier(.16, 1, .3, 1) both;
  }
  .motion-ready .hero-actions { animation-delay: .55s; }
  .motion-ready .hero-meta { animation-delay: .68s; }
  .motion-ready .hero-family {
    animation: ono-photo-arrive 1.65s .12s cubic-bezier(.16, 1, .3, 1) both;
  }
  .motion-ready .hero-family img {
    animation: ono-photo-breathe 10s 1.7s ease-in-out infinite alternate;
  }
  .motion-ready .hero-food {
    animation: ono-food-arrive 1.4s .55s cubic-bezier(.16, 1, .3, 1) both,
      ono-food-float 5.5s 1.95s ease-in-out infinite;
  }
  .motion-ready .aloha-stamp {
    animation: ono-stamp-arrive 1.4s .7s cubic-bezier(.22, 1.15, .36, 1) both,
      ono-stamp-sway 6s 2.1s ease-in-out infinite;
  }
  .motion-ready .hero-backdrop { animation: ono-wave 9s ease-in-out infinite alternate; }
  .motion-ready .scroll-cue > span:last-child { animation: ono-scroll 1.8s ease-in-out infinite; }
  .motion-ready .ribbon div { animation-duration: 23s; }

  .motion-ready .will-reveal {
    --reveal-x: 0px;
    --reveal-y: 90px;
    --reveal-scale: .97;
    opacity: 0;
    transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale));
    transition: opacity .85s ease, transform 1.25s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .motion-ready .will-reveal[data-motion="left"] { --reveal-x: -95px; --reveal-y: 38px; }
  .motion-ready .will-reveal[data-motion="right"] { --reveal-x: 95px; --reveal-y: 38px; }
  .motion-ready .will-reveal[data-motion="card"] { --reveal-y: 110px; --reveal-scale: .9; }
  .motion-ready .will-reveal.revealed,
  .motion-ready .will-reveal:focus-within { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  .motion-ready .will-reveal:focus-within { transition-delay: 0s; }

  .motion-ready .enjoy-image,
  .motion-ready .values > img,
  .motion-ready .contact > img {
    transform: translate3d(0, var(--scene-offset, 0px), 0) scale(1.2);
  }
  .motion-ready .enjoy.motion-in-view .enjoy-image,
  .motion-ready .values.motion-in-view > img,
  .motion-ready .contact.motion-in-view > img { will-change: transform; }

  .motion-ready .hero:not(.motion-in-view) *,
  .motion-ready .ribbon:not(.motion-in-view) div,
  .motion-suspended *, .motion-suspended *::before, .motion-suspended *::after {
    animation-play-state: paused !important;
  }
  .motion-ready .mobile-nav:not([hidden]) { animation: ono-menu-open .4s cubic-bezier(.16, 1, .3, 1) both; }
  .motion-ready .faq details[open] > p { animation: ono-answer-open .4s ease both; }

  @media (hover: hover) and (pointer: fine) {
    .button { transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s; }
    .button:hover { transform: translateY(-7px) scale(1.04); box-shadow: 0 16px 32px #00576830; }
    .button:active { transform: translateY(-2px) scale(.98); }
    .moment:hover img { transform: scale(1.14) rotate(1deg); }
    .menu-photo { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
    .lunch-item:hover .menu-photo { transform: translateY(-10px) rotate(-2deg); }
    .sweet-photo { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
    .sweet-item:hover .sweet-photo { transform: translateY(-12px) rotate(2deg); }
    .instagram-photos img { transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .3s; }
    .instagram-photos img:hover { transform: translateY(-12px) rotate(-3deg) scale(1.04); filter: brightness(1.04); }
    .ribbon:hover div { animation-play-state: paused; }
  }

  @media (max-width: 700px) {
    .motion-ready .hero h1 > span { display: inline-block; }
    .motion-ready .hero h1 > span:first-child { display: block; }
    .motion-ready .will-reveal { --reveal-y: 60px; }
    .motion-ready .will-reveal[data-motion="left"] { --reveal-x: -40px; --reveal-y: 24px; }
    .motion-ready .will-reveal[data-motion="right"] { --reveal-x: 40px; --reveal-y: 24px; }
    .motion-ready .will-reveal[data-motion="card"] { --reveal-y: 76px; }
    .motion-ready .hero-family img { animation-name: ono-photo-breathe-mobile; }
    .motion-ready .hero-food { animation-name: ono-food-arrive, ono-food-float-mobile; }
  }
}

@keyframes ono-title-rise {
  from { opacity: 0; transform: translate3d(0, 90px, 0) rotate(3deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes ono-copy-rise {
  from { opacity: 0; transform: translateY(42px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ono-photo-arrive {
  from { opacity: 0; transform: translate3d(130px, 50px, 0) rotate(9deg) scale(.78); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); }
}
@keyframes ono-photo-breathe {
  from { transform: scale(1.09) rotate(3deg); }
  to { transform: scale(1.24) rotate(1deg) translateX(-1%); }
}
@keyframes ono-photo-breathe-mobile {
  from { transform: scale(1.09) rotate(3deg); }
  to { transform: scale(1.18) rotate(2deg); }
}
@keyframes ono-food-arrive {
  from { opacity: 0; transform: translate3d(-70px, 90px, 0) rotate(-19deg) scale(.75); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(-8deg) scale(1); }
}
@keyframes ono-food-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
  50% { transform: translate3d(7px, -25px, 0) rotate(-3deg); }
}
@keyframes ono-food-float-mobile {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
  50% { transform: translate3d(3px, -15px, 0) rotate(-4deg); }
}
@keyframes ono-stamp-arrive {
  from { opacity: 0; transform: rotate(-35deg) scale(.45); }
  to { opacity: 1; transform: rotate(12deg) scale(1); }
}
@keyframes ono-stamp-sway {
  0%, 100% { transform: translateY(0) rotate(12deg); }
  50% { transform: translateY(-12px) rotate(23deg); }
}
@keyframes ono-wave {
  from { transform: translate(-3%, 0) rotate(-3deg) scale(1.05); }
  to { transform: translate(5%, 3%) rotate(3deg) scale(1.1); }
}
@keyframes ono-scroll {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(9px); }
}
@keyframes ono-menu-open {
  from { opacity: 0; transform: translateY(-22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ono-answer-open {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1 !important; transform: none !important; }
  .enjoy-image, .values > img, .contact > img { transform: none !important; }
}

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .will-reveal { opacity: 1 !important; transform: none !important; }
}