/* A quiet, shared rhythm. No entrance rule hides content or delays input. */
:root { --optic-ease: cubic-bezier(.22, 1, .36, 1); }

@media (prefers-reduced-motion: no-preference) {
  .button, .primary-button {
    transition: background-color 180ms ease, color 180ms ease,
      border-color 180ms ease, box-shadow 240ms ease, transform 240ms var(--optic-ease);
  }
  .button > svg, .primary-button > span, .journal-cta .button > span {
    transition: transform 240ms var(--optic-ease);
  }
  .package-image img, .journal-feature-image img, .journal-card-image img {
    transition: transform 700ms var(--optic-ease);
  }
  .desktop-nav a { position: relative; }
  .desktop-nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 1px; background: currentColor; transform: scaleX(0);
    transform-origin: left; transition: transform 240ms var(--optic-ease);
  }
  .desktop-nav a:focus-visible::after { transform: scaleX(1); }
  .mobile-menu:not([hidden]) { animation: optic-settle 180ms var(--optic-ease); }
  .photo-dialog[open] { animation: optic-settle 220ms var(--optic-ease); }
  .photo-dialog[open]::backdrop { animation: optic-fade 180ms ease; }
  .faq details[open] > p, .package-details[open] > :not(summary) {
    animation: optic-fade 180ms ease;
  }
  #booking-form [data-panel]:not([hidden]) { animation: optic-settle 200ms var(--optic-ease); }
  .date-button, .time-option > span, .progress button > span {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }
  .mobile-book-bar { transition: transform 320ms var(--optic-ease); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover { transform: translateY(-1px); }
  .button:hover > svg, .primary-button:hover > span, .journal-cta .button:hover > span {
    transform: translateX(2px);
  }
  .button:active, .primary-button:active { transform: translateY(0); }
  .desktop-nav a:hover::after { transform: scaleX(1); }
  .package-card:hover .package-image img,
  .journal-feature:hover .journal-feature-image img,
  .journal-card:hover .journal-card-image img { transform: scale(1.015); }
}

/* Avoid persistent hover movement on touchscreens, or when motion is reduced. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .button:hover, .primary-button:active, .nav-phone:hover, .nav-phone:active,
  .package-card:hover .package-image img,
  .journal-feature:hover .journal-feature-image img,
  .journal-card:hover .journal-card-image img,
  a:hover .journal-read > span { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@keyframes optic-settle {
  from { opacity: .88; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes optic-fade { from { opacity: .8; } to { opacity: 1; } }