/* PRIMOC interaction layer. Loaded after the design and motion styles. */
:root {
  --interaction-ease: cubic-bezier(.22, 1, .36, 1);
  --interaction-fast: 280ms;
  --interaction-slow: 620ms;
}

/* Keyboard intent is as visible as pointer intent. */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid #a65d73;
  outline-offset: 5px;
}
.header :where(a, button):focus-visible,
.menu-dialog :where(a, button):focus-visible,
.contact-cta :where(a, button):focus-visible,
.project-enquiry :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible {
  outline-color: #fff;
}
.project-card:focus-visible .image-visit,
.project-card:focus-visible .card-title > span {
  opacity: 1;
  transform: translate(0, 0);
}

/* A restrained light sweep gives the primary actions an intentional finish. */
.button,
.header-cta {
  isolation: isolate;
}
.button::after,
.header-cta::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -100% auto -100% -65%;
  width: 46%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: rotate(19deg) translateX(0);
  transition: transform .8s var(--interaction-ease);
}
.button > span,
.header-cta > span {
  transition: transform 420ms var(--interaction-ease);
}
.button:where(:hover, :focus-visible)::after,
.header-cta:where(:hover, :focus-visible)::after {
  transform: rotate(19deg) translateX(570%);
}
.button:where(:hover, :focus-visible) > span,
.header-cta:where(:hover, :focus-visible) > span {
  transform: translate(3px, -3px);
}
.button.is-pressed,
.header-cta.is-pressed {
  transform: translateY(0) scale(.985);
}

/* Fine, directional feedback on text navigation. */
.desktop-nav a,
.project-subnav > div a,
.footer-nav a,
.footer-address a,
.footer-bottom a,
.contact-method > a {
  transition: color var(--interaction-fast), opacity var(--interaction-fast), transform var(--interaction-fast) var(--interaction-ease);
}
.desktop-nav a:where(:hover, :focus-visible) {
  opacity: 1;
}
.desktop-nav a:focus-visible::after,
.project-subnav > div a:focus-visible::after {
  transform: scaleX(1);
}
.project-subnav > div a {
  position: relative;
}
.project-subnav > div a::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--interaction-ease);
}
.project-subnav > div a:where(:hover, :focus-visible, .active)::after {
  transform: scaleX(1);
}
.text-link {
  position: relative;
  transition: color var(--interaction-fast), gap 420ms var(--interaction-ease), border-color var(--interaction-fast);
}
.text-link:where(:hover, :focus-visible) {
  gap: 60px;
  border-color: var(--wine);
}
.text-link > span {
  transition: transform 420ms var(--interaction-ease);
}
.text-link:where(:hover, :focus-visible) > span {
  transform: translate(4px, -4px);
}

/* Destination cards respond to the pointer without obscuring the architecture. */
.card-image::after,
.collection-visual::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(430px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,.15), transparent 64%);
  opacity: var(--spot-opacity, 0);
  transition: opacity var(--interaction-fast);
}
.card-image::after { border-radius: inherit; }
.project-card .card-image img,
.collection-visual img {
  transition: transform 950ms var(--interaction-ease), filter 700ms ease;
}
.project-card:hover .card-image img,
.project-card:focus-visible .card-image img,
.collection-visual:hover img {
  transform: scale(1.055);
  filter: saturate(1.075);
}
.project-card:hover .card-title > span,
.project-card:focus-visible .card-title > span {
  transform: translate(5px, -5px);
}
.project-card .image-visit {
  z-index: 2;
  transition: opacity 340ms ease, transform 480ms var(--interaction-ease), background 280ms;
}
.project-card:hover .image-visit,
.project-card:focus-visible .image-visit {
  opacity: 1;
  transform: translateY(0);
}
.project-card:where(:hover, :focus-visible) .card-title {
  border-color: var(--wine-soft);
}
.card-title { transition: border-color var(--interaction-fast); }
.stack-panel .stack-photo img {
  transition: filter 650ms ease;
}
.stack-panel:hover .stack-photo img {
  filter: saturate(1.13) brightness(1.045);
}
.hero-feature img { transition: transform 650ms var(--interaction-ease), filter 650ms; }
.hero-feature { overflow: hidden; }
.hero-feature:where(:hover, :focus-visible) img { transform: scale(1.055); filter: saturate(1.1); }
.hero-feature b { transition: transform 420ms var(--interaction-ease); }
.hero-feature:where(:hover, :focus-visible) b { transform: translate(4px, -4px); }
.next-project > a > span { transition: transform 560ms var(--interaction-ease); }
.next-project > a:where(:hover, :focus-visible) > span { transform: translate(9px, -9px); }

/* Selection feels physical, while the selected state remains clear at rest. */
.filters button,
.gallery-thumbs button,
.gallery-controls button,
.lightbox button,
.menu-toggle,
.menu-close {
  transition: transform 360ms var(--interaction-ease), background 280ms, border-color 280ms, color 280ms, opacity 280ms, box-shadow 280ms;
}
.filters button:where(:hover, :focus-visible):not(.active) {
  transform: translateY(-2px);
  background: rgba(71,17,35,.075);
}
.filters button.is-pressed,
.gallery-thumbs button.is-pressed,
.gallery-controls button.is-pressed,
.lightbox button.is-pressed,
.menu-toggle.is-pressed,
.menu-close.is-pressed { transform: scale(.94); }
.gallery-thumbs button:where(:hover, :focus-visible) {
  opacity: 1;
  transform: translateY(-3px);
  border-color: rgba(71,17,35,.48);
}
.gallery-thumbs button.selected { box-shadow: 0 6px 17px rgba(71,17,35,.14); }
.gallery-controls button:where(:hover, :focus-visible),
.lightbox button:where(:hover, :focus-visible) {
  background: rgba(71,17,35,.12);
  transform: scale(1.08);
}
.lightbox button:where(:hover, :focus-visible) { background: rgba(255,255,255,.12); }
.gallery-open > img { transition: transform 950ms var(--interaction-ease), filter 600ms; }
.gallery-open:hover > img, .gallery-open:focus-visible > img { transform: scale(1.035); filter: saturate(1.07); }
.gallery-open > span { transition: transform 400ms var(--interaction-ease), background 300ms; }
.gallery-open:where(:hover, :focus-visible) > span { transform: translateY(-3px); background: rgba(71,17,35,.7); }

/* Quiet surface responses in the content. */
.amenity,
.values-list details,
.belief-grid article {
  transition: transform 550ms var(--interaction-ease), border-color 320ms, background 320ms, box-shadow 450ms;
}
.amenity { position: relative; overflow: hidden; }
.amenity::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(121,59,81,.11), transparent 70%);
  opacity: var(--spot-opacity, 0);
  transition: opacity 300ms;
}
.amenity:hover {
  transform: translateY(-5px);
  border-color: rgba(71,17,35,.25);
  box-shadow: 0 14px 30px rgba(71,17,35,.08);
}
.values-list details:hover {
  border-bottom-color: var(--wine-soft);
}
.values-list summary { transition: color 280ms; }
.values-list summary:where(:hover, :focus-visible),
.values-list details[open] summary { color: var(--wine); }
.values-list summary span,
.values-list summary .icon { transition: transform 450ms var(--interaction-ease); }
.values-list summary:hover span { transform: rotate(12deg); }
.values-list details[open] summary span,
.values-list details[open] summary:hover span { transform: rotate(45deg); }
.values-list details[open] > p { animation: detail-enter 480ms var(--interaction-ease) both; }
@keyframes detail-enter { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.belief-grid article:hover { transform: translateY(-5px); border-top-color: rgba(255,255,255,.75); }
.contact-form :where(input, select, textarea) { transition: border-color 260ms, background 260ms, box-shadow 260ms; }
.contact-form :where(input, select, textarea):focus-visible { border-bottom-color: var(--wine); background: rgba(255,255,255,.28); }
.footer-nav a:where(:hover, :focus-visible),
.footer-address a:where(:hover, :focus-visible),
.footer-bottom a:where(:hover, :focus-visible) { transform: translateX(3px); }

/* Full-screen menu gives each item an accessible, unhurried response. */
.menu-dialog nav a {
  width: fit-content;
  transition: color 300ms, transform 520ms var(--interaction-ease), opacity 300ms;
}
.menu-dialog nav a:where(:hover, :focus-visible) { transform: translateX(14px); color: #f5cbd8; }
.menu-dialog nav:has(a:hover) a:not(:hover) { opacity: .55; }
.menu-toggle:hover .icon { transform: rotate(8deg); }
.menu-close:hover .icon { transform: rotate(90deg); }

/* Touch receives clear pressed and focus states without hover-only motion. */
@media (hover: none), (pointer: coarse) {
  .button:active, .header-cta:active,
  .filters button:active, .gallery-thumbs button:active,
  .gallery-controls button:active, .menu-toggle:active,
  .menu-close:active { transform: scale(.975); }
  .project-card .image-visit { opacity: 1; transform: none; }
  .card-image::after, .collection-visual::before, .amenity::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button::after, .header-cta::after { display: none; }
  .button, .header-cta, .button > span, .header-cta > span,
  .desktop-nav a, .project-subnav > div a, .project-subnav > div a::after,
  .text-link, .text-link > span, .card-image img, .collection-visual img,
  .image-visit, .card-title > span, .hero-feature img, .hero-feature b,
  .next-project > a > span, .filters button, .gallery-thumbs button,
  .gallery-controls button, .lightbox button, .menu-toggle, .menu-close,
  .gallery-open > img, .gallery-open > span, .amenity, .values-list details,
  .values-list summary, .values-list summary span, .belief-grid article,
  .menu-dialog nav a { transition: none !important; animation: none !important; }
  .button:hover, .header-cta:hover, .project-card:hover .card-image img,
  .collection-visual:hover img, .gallery-open:hover > img, .amenity:hover,
  .belief-grid article:hover, .menu-dialog nav a:hover { transform: none !important; }
  .values-list details[open] > p { animation: none; }
}