/* Professional motion layer for Osteria Virgilio mockup */

:root {
  --motion-fast: 220ms;
  --motion-base: 520ms;
  --motion-slow: 900ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.33, 1, .68, 1);
}

/* Scroll progress */
.scroll-progress {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--wine);
  will-change: transform;
}

/* Initial page-load choreography. Only applies when JS is active. */
.js .concept-strip,
.js .site-header,
.js .hero .kicker,
.js .hero h1,
.js .hero-copy,
.js .hero-actions,
.js .hero-index {
  opacity: 0;
}

.js .site-header {
  transform: translateY(-16px);
}

.js .hero .kicker,
.js .hero-copy,
.js .hero-actions {
  transform: translateY(18px);
}

.js .hero h1 {
  transform: translateY(34px);
  clip-path: inset(0 0 100% 0);
}

.js .hero-index {
  transform: translateY(10px);
}

.js.page-ready .concept-strip {
  opacity: 1;
  transition: opacity .55s ease .05s;
}

.js.page-ready .site-header {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .7s var(--motion-ease) .12s,
    transform .7s var(--motion-ease) .12s,
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease,
    backdrop-filter .35s ease,
    top .35s ease;
}

.js.page-ready .hero .kicker {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease .28s, transform .8s var(--motion-ease) .28s;
}

.js.page-ready .hero h1 {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition:
    opacity .75s ease .34s,
    transform 1s var(--motion-ease) .34s,
    clip-path 1s var(--motion-ease) .34s;
}

.js.page-ready .hero-copy {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease .55s, transform .8s var(--motion-ease) .55s;
}

.js.page-ready .hero-actions {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease .65s, transform .8s var(--motion-ease) .65s;
}

.js.page-ready .hero-index {
  opacity: .72;
  transform: translateY(0);
  transition: opacity .7s ease .8s, transform .8s var(--motion-ease) .8s;
}

/* Hero depth */
.hero-image {
  will-change: transform;
  transition: filter 1s ease;
}

.js.page-ready .hero-image {
  filter: saturate(.92) contrast(1.02);
}

/* Scroll reveal system */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity .72s ease var(--reveal-delay, 0ms),
    transform .9s var(--motion-ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Slightly more editorial reveal for large headings */
.js .reveal h2,
.js .reveal .statement {
  transition: letter-spacing .8s var(--motion-ease);
}

.js .reveal.is-visible h2,
.js .reveal.is-visible .statement {
  letter-spacing: -.045em;
}

/* Buttons */
.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-base) ease,
    background var(--motion-base) ease,
    color var(--motion-base) ease;
}

.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: .08;
  transform: translateY(102%);
  transition: transform .48s var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 17, 13, .13);
  }

  .button:hover::before {
    transform: translateY(0);
  }

  .arrow-link {
    transition: opacity .25s ease, border-color .35s ease;
  }

  .arrow-link:hover {
    opacity: .72;
  }

  .proof-item {
    transition: background .35s ease, transform .35s var(--motion-ease);
  }

  a.proof-item:hover {
    transform: translateY(-2px);
  }
}

/* Menu rows */
.menu-item {
  transition:
    padding-left .34s var(--motion-ease),
    padding-right .34s var(--motion-ease),
    background .34s ease,
    border-color .34s ease;
}

.menu-item h4,
.menu-item .price,
.menu-item .pairing {
  transition: transform .34s var(--motion-ease), color .34s ease;
}

@media (hover: hover) and (pointer: fine) {
  .menu-item:hover:not(.signature-item) {
    padding-left: 10px;
    padding-right: 10px;
    background: rgba(29, 32, 25, .025);
  }

  .menu-item:hover h4 {
    transform: translateX(2px);
  }

  .menu-item:hover .price {
    transform: translateY(-2px);
  }

  .menu-item:hover .pairing {
    color: var(--wine);
  }
}

/* Pairing panel */
.pairing-panel {
  transition: transform .55s var(--motion-ease), box-shadow .55s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pairing-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(24, 28, 18, .12);
  }
}

/* Gallery */
.gallery-card {
  isolation: isolate;
}

.gallery-card img {
  transition:
    transform 1.15s var(--motion-ease),
    filter .65s ease;
  will-change: transform;
}

.gallery-card::after {
  transition: opacity .55s ease;
}

.gallery-card figcaption {
  transition: transform .55s var(--motion-ease), opacity .45s ease;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover img {
    transform: scale(1.055);
  }

  .gallery-card:hover figcaption {
    transform: translateY(-4px);
  }

  .gallery-card:hover::after {
    opacity: .88;
  }
}

/* Review cards */
.review-card {
  transition:
    transform .5s var(--motion-ease),
    box-shadow .5s ease,
    border-color .4s ease,
    background .4s ease;
}

.review-card footer a {
  transition: opacity .25s ease, transform .3s var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .14);
  }

  .review-card footer a:hover {
    opacity: .72;
    transform: translateX(2px);
  }
}

/* Wine section */
.wine-photo {
  overflow: hidden;
  background-size: cover;
  transition: background-size 1.1s var(--motion-ease), transform .65s var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .wine-photo:hover {
    transform: translateY(-3px);
  }
}

/* Navigation refinement */
.brand-mark {
  transition: transform .5s var(--motion-ease), background .3s ease, color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-mark {
    transform: rotate(-8deg) scale(1.03);
  }
}

/* Footer links */
.footer-links a,
.footer-bottom > a {
  position: relative;
  transition: opacity .25s ease;
}

.footer-links a::after,
.footer-bottom > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover::after,
  .footer-bottom > a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* Loading polish */
body {
  animation: page-background-in .7s ease both;
}

@keyframes page-background-in {
  from { background-color: #e7e0d2; }
  to { background-color: var(--paper); }
}

/* Reduced motion is a first-class mode, not an afterthought. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .js .reveal,
  .js .concept-strip,
  .js .site-header,
  .js .hero .kicker,
  .js .hero h1,
  .js .hero-copy,
  .js .hero-actions,
  .js .hero-index {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .scroll-progress {
    display: none;
  }
}

@media (max-width: 760px) {
  /* Keep phone motion lighter and faster. */
  .js .reveal {
    transform: translate3d(0, 18px, 0);
    transition-duration: .62s, .7s;
  }

  .js .reveal.is-visible {
    transform: translate3d(0, 0, 0);
  }

  .js .hero h1 {
    transform: translateY(20px);
  }

  .scroll-progress {
    height: 2px;
  }
}

/* -----------------------------------------------------------
   Refined section interactions: quiet, editorial, intentional.
   ----------------------------------------------------------- */

/* Menu: reveal dishes after their category arrives. */
.js .menu-group.reveal.is-visible .menu-item {
  animation: menu-row-in .62s var(--motion-ease) both;
}

.js .menu-group.reveal.is-visible .menu-item:nth-of-type(1) {
  animation-delay: .08s;
}

.js .menu-group.reveal.is-visible .menu-item:nth-of-type(2) {
  animation-delay: .15s;
}

.js .menu-group.reveal.is-visible .menu-item:nth-of-type(3) {
  animation-delay: .22s;
}

@keyframes menu-row-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--wine);
  transform: scaleY(0);
  transform-origin: center;
  opacity: .75;
  transition: transform .38s var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .menu-item:hover:not(.signature-item) {
    padding-left: 0;
    padding-right: 0;
    background: linear-gradient(90deg, rgba(123,61,52,.055), rgba(123,61,52,0) 58%);
  }

  .menu-item:hover::before {
    transform: scaleY(1);
  }

  .menu-item:hover h4 {
    transform: translateX(7px);
  }

  .menu-item:hover .pairing {
    transform: translateX(7px);
  }

  .menu-item:hover .price {
    color: var(--wine);
    transform: translateY(-2px);
  }
}

/* Wine pairing list: sequential reveal with minimal hover feedback. */
.js .pairing-panel.reveal.is-visible .pairing-panel-title {
  animation: wine-copy-in .65s var(--motion-ease) .06s both;
}

.js .pairing-panel.reveal.is-visible .pairing-steps > div {
  animation: wine-step-in .56s var(--motion-ease) both;
}

.js .pairing-panel.reveal.is-visible .pairing-steps > div:nth-child(1) { animation-delay: .14s; }
.js .pairing-panel.reveal.is-visible .pairing-steps > div:nth-child(2) { animation-delay: .20s; }
.js .pairing-panel.reveal.is-visible .pairing-steps > div:nth-child(3) { animation-delay: .26s; }
.js .pairing-panel.reveal.is-visible .pairing-steps > div:nth-child(4) { animation-delay: .32s; }

.js .pairing-panel.reveal.is-visible .pairing-price {
  animation: wine-copy-in .6s var(--motion-ease) .34s both;
}

@keyframes wine-step-in {
  from {
    opacity: 0;
    transform: translate3d(-8px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wine-copy-in {
  from {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.pairing-steps > div {
  position: relative;
  transition: transform .34s var(--motion-ease), opacity .3s ease;
}

.pairing-steps > div::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: rgba(255,255,255,.24);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .pairing-steps > div:hover {
    transform: translateX(4px);
  }

  .pairing-steps > div:hover::after {
    transform: scaleX(1);
  }
}

/* Gallery: artwork settles gently into frame, then responds slowly on hover. */
.js .gallery-card.reveal img {
  transform: scale(1.035);
  filter: saturate(.74) contrast(1.02);
}

.js .gallery-card.reveal.is-visible img {
  transform: scale(1);
  filter: saturate(.86) contrast(1.03);
  transition-delay: calc(var(--reveal-delay, 0ms) + 80ms);
}

.js .gallery-card.reveal figcaption {
  opacity: 0;
  transform: translateY(8px);
}

.js .gallery-card.reveal.is-visible figcaption {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--reveal-delay, 0ms) + 180ms);
}

.gallery-card figcaption span {
  transition: opacity .35s ease, letter-spacing .45s var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-card.reveal.is-visible:hover img {
    transform: scale(1.042);
    filter: saturate(.96) contrast(1.02);
    transition-delay: 0ms;
  }

  .gallery-card.reveal.is-visible:hover figcaption {
    transform: translateY(-3px);
    transition-delay: 0ms;
  }

  .gallery-card:hover figcaption span {
    opacity: .72;
    letter-spacing: .08em;
  }
}

/* Keyboard users get the same visual clarity without relying on hover. */
.menu-section a:focus-visible,
.gallery-section a:focus-visible,
.wine a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
  border-radius: 2px;
}

@media (max-width: 760px) {
  /* Keep the same hierarchy on touch devices, but remove decorative hover cues. */
  .menu-item::before,
  .pairing-steps > div::after {
    display: none;
  }

  .js .menu-group.reveal.is-visible .menu-item {
    animation-duration: .48s;
  }

  .js .gallery-card.reveal img {
    transform: scale(1.018);
  }

  .js .gallery-card.reveal.is-visible img {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .menu-group.reveal.is-visible .menu-item,
  .js .pairing-panel.reveal.is-visible .pairing-panel-title,
  .js .pairing-panel.reveal.is-visible .pairing-steps > div,
  .js .pairing-panel.reveal.is-visible .pairing-price {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .js .gallery-card.reveal img,
  .js .gallery-card.reveal figcaption {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}