/* The vapour has its own bounds so it can rise above the photographed plate. */
.dish-visual {
  position: relative;
  isolation: isolate;
}
.dish-visual.has-vapor::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 28%;
  top: -21%;
  width: 58%;
  height: 69%;
  background: url("/assets/vapor-do-prato.webp") center / 100% 100% no-repeat;
}
.vapor-toggle {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 50%;
  color: #fff;
  background: rgb(20 45 49 / 78%);
  cursor: pointer;
}
.vapor-toggle[hidden] { display: none; }
.vapor-toggle::before {
  content: "";
  width: 10px;
  height: 12px;
  box-sizing: border-box;
  border-inline: 3px solid currentColor;
}
.vapor-toggle[aria-pressed="false"]::before {
  width: 0;
  height: 0;
  margin-left: 2px;
  border: 0;
  border-block: 6px solid transparent;
  border-left: 9px solid currentColor;
}
.vapor-toggle:focus-visible { outline-offset: 2px; }

@keyframes miramar-arrive {
  from { opacity: .24; translate: 0 var(--arrival-distance, 18px); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes miramar-coast {
  from { transform: scale(1.012); }
  to { transform: translateY(4%) scale(1.10); }
}
@keyframes miramar-heading-word {
  from { opacity: .08; transform: translateY(.44em) rotate(1.1deg); }
  to { opacity: 1; transform: none; }
}
@keyframes miramar-prose {
  from { opacity: .22; transform: translateY(15px); }
  to { opacity: 1; transform: none; }
}
@keyframes miramar-label {
  from { opacity: .25; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .title-arrive .miramar-word {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    transform-origin: left bottom;
    animation: miramar-heading-word .74s cubic-bezier(.16,.76,.2,1) backwards;
    animation-delay: calc(var(--word-order) * 57ms);
  }
  .prose-arrive { animation: miramar-prose .66s cubic-bezier(.19,.73,.24,1) 65ms backwards; }
  .label-arrive { animation: miramar-label .49s ease-out backwards; }
  .motion-enter,
  .hero-content > .btn {
    animation: miramar-arrive .72s cubic-bezier(.17,.68,.25,1) backwards;
    animation-delay: var(--arrival-delay, 0ms);
  }
  .hero-content > .btn { --arrival-delay: 175ms; }
  .arrow {
    transition: translate .26s ease-out;
  }
  :is(.text-link, .btn, .destination-row a):focus-visible .arrow {
    translate: 4px 0;
  }
  @supports (animation-timeline: view()) {
    .hero { view-timeline-name: --miramar-coast; }
    .hero-img {
      animation: miramar-coast 1s linear both;
      animation-timeline: --miramar-coast;
      animation-range: exit 0% exit 100%;
    }
  }
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  :is(.unit-card, .ev-choice, .destination-card, .bd-story-card):nth-child(2) {
    --arrival-delay: 75ms;
  }
  :is(.unit-card, .ev-choice, .destination-card):nth-child(3) {
    --arrival-delay: 145ms;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.text-link, .btn, .destination-row a):hover .arrow,
  :is(.unit-card, .ev-choice):hover .text-link .arrow {
    translate: 4px 0;
  }
  :is(.unit-card, .ev-choice) .text-link {
    background: linear-gradient(var(--gold), var(--gold)) left bottom / 0% 2px no-repeat;
    transition: background-size .38s ease-out;
  }
  :is(.unit-card, .ev-choice):is(:hover, :focus-within) .text-link {
    background-size: 100% 2px;
  }
  .main-nav a:not([aria-current])::after {
    content: "";
    position: absolute;
    inset: auto 0 3px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease-out;
  }
  .main-nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
}
@media (max-width: 760px) {
  .dish-visual.has-vapor::after {
    top: -15%;
    height: 65%;
  }
  .vapor-toggle { width: 44px; height: 44px; right: 8px; bottom: 8px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .motion-enter, .hero-content > .btn { --arrival-distance: 10px; animation-duration: .5s; }
  .title-arrive .miramar-word { animation-duration: .58s; animation-delay: calc(var(--word-order) * 40ms); }
  .prose-arrive { animation-duration: .50s; }
  .main-nav.open { --arrival-distance: -6px; animation: miramar-arrive .22s ease-out; }
}
@media (prefers-reduced-motion: reduce), print {
  .dish-visual.has-vapor::after { content: none; }
  .vapor-toggle { display: none; }
}