/* Warm gold liquid glass, shared by every compact action in DE and FR. */
:root {
  --glass-glow: rgb(255 206 103 / 84%);
  --glass-glow-soft: rgb(232 171 42 / 64%);
  --glass-glow-ambient: rgb(221 155 24 / 34%);
  --glass-neon: 0 0 16px 2px var(--glass-glow), 0 8px 40px 8px var(--glass-glow-soft), 0 0 76px 12px var(--glass-glow-ambient);
  --glass-surface: rgb(255 252 243 / 72%);
}

html[data-theme="dark"] {
  --glass-glow: rgb(255 218 135 / 88%);
  --glass-glow-soft: rgb(245 185 59 / 62%);
  --glass-glow-ambient: rgb(237 165 30 / 36%);
  --glass-surface: rgb(42 36 27 / 76%);
}

.glass-button {
  --glass-zoom: 1.035;
  --glass-shadow: 0 3px 12px rgb(98 72 29 / 8%);
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  /* Keep dimensions, but remove outlines from legacy active/hover styles too. */
  border-color: transparent !important;
  border-radius: 999px;
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--glass-shadow);
  transition: scale 280ms var(--ease), box-shadow 350ms ease, border-color 250ms ease, background-color 250ms ease, transform 300ms var(--ease);
  -webkit-tap-highlight-color: rgb(214 174 93 / 18%);
}

/* Preserve the existing fixed and absolute positions of utility controls. */
.glass-button:where(:not(.floating-quote, .motion-toggle, .dialog-close, .intro-skip)) {
  position: relative;
}

.glass-button::before,
.glass-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
}

/* The upper reflection remains visible even when animations are paused. */
.glass-button::before {
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 20%), transparent 48%), linear-gradient(155deg, rgb(255 255 255 / 22%), transparent 48%, rgb(233 198 119 / 12%));
}

/* A single moving reflection, triggered by each hover or keyboard focus. */
.glass-button::after {
  inset: 0;
  background: linear-gradient(112deg, transparent 37%, rgb(255 255 255 / 12%) 43%, rgb(255 255 255 / 48%) 49%, rgb(255 255 255 / 10%) 55%, transparent 61%);
  background-size: 300% 100%;
  background-position: 150% 50%;
}

.glass-button:where(.text-link, .intro-replay, .footer-policy, .language button, .theme-toggle, .menu-toggle, .occasion-tabs button) {
  background-color: var(--glass-surface);
}

.text-link.glass-button { padding: 10px 18px; gap: 16px; }
.intro-replay.glass-button, .footer-policy.glass-button { padding: 9px 15px; }
.language button.glass-button { padding: 7px 5px; }
.experience-button.glass-button { padding: 9px 15px 9px 9px; background-color: rgb(255 255 255 / 9%); }
.intro-skip.glass-button { background-color: rgb(34 23 15 / 78%); }
.lightbox-nav button.glass-button { background-color: rgb(255 255 255 / 8%); }
.floating-quote.glass-button { --glass-shadow: 0 6px 24px rgb(98 72 29 / 22%); }
/* Dark lettering keeps the gold CTA readable under its bright reflections. */
html .button-gold.glass-button,
html .floating-quote.glass-button {
  color: #33250f;
  background-color: #dfbd79;
}
html .button-gold.glass-button:hover,
html .floating-quote.glass-button:hover {
  color: #33250f;
  background-color: #edd299;
}
.occasion-tabs { gap: 8px; padding: 8px 6px; }
.occasion-tabs button.glass-button { padding: 15px 16px; margin: 2px 0; }
.occasion-tabs button.glass-button[aria-selected="true"],
.language button.glass-button[aria-pressed="true"] {
  background-color: var(--gold-pale);
  box-shadow: var(--glass-shadow);
}
.menu-toggle.glass-button { align-items: center; flex-shrink: 0; }
.menu-toggle.glass-button span { width: 18px; flex-shrink: 0; }
.play-circle { border-color: transparent; }

/* Large photo controls keep their image framing and receive softer corners. */
.gallery-image,
.service-visual,
.effects-panorama,
.outdoor-story button {
  border-radius: 24px;
  overflow: hidden;
}

:is(.gallery-card, .service-visual, .effects-panorama, .outdoor-story button) {
  --glass-zoom: 1.012;
  transition: scale 400ms var(--ease), box-shadow 350ms ease;
}

/* Preserve scroll reveals while making the photo hover immediately responsive. */
.js.motion-on :is(.gallery-card, .effects-panorama).reveal:is(.awaiting, .visible) {
  transition: opacity 900ms var(--ease), transform 1100ms var(--ease), scale 400ms var(--ease), box-shadow 350ms ease;
}
.gallery-card:nth-child(2) { transition-delay: 100ms, 100ms, 0ms, 0ms !important; }
.gallery-card:nth-child(3) { transition-delay: 200ms, 200ms, 0ms, 0ms !important; }

.glass-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  box-shadow: var(--glass-neon), var(--glass-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .glass-button:not(:disabled):not([aria-disabled="true"]):hover {
    scale: var(--glass-zoom);
    box-shadow: var(--glass-neon), var(--glass-shadow);
    animation: gold-ignition 420ms ease-out both;
  }

  .glass-button:not(:disabled):not([aria-disabled="true"]):hover::after,
  .glass-button:focus-visible::after {
    animation: glass-reflection 850ms var(--ease) both;
  }

  :is(.gallery-card, .service-visual, .effects-panorama, .outdoor-story button):hover {
    scale: var(--glass-zoom);
  }

  :is(.service-visual, .effects-panorama, .outdoor-story button):hover,
  .gallery-card:hover .gallery-image {
    box-shadow: 0 0 32px var(--glass-glow-soft);
  }
}

.glass-button:not(:disabled):not([aria-disabled="true"]):active {
  scale: 1.012;
  box-shadow: var(--glass-neon), var(--glass-shadow);
}

@keyframes gold-ignition {
  from { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, var(--glass-shadow); }
  40% { box-shadow: 0 0 10px 1px var(--glass-glow), 0 4px 24px 3px var(--glass-glow-soft), 0 0 46px 4px var(--glass-glow-ambient), var(--glass-shadow); }
  to { box-shadow: var(--glass-neon), var(--glass-shadow); }
}

@keyframes glass-reflection {
  from { background-position: 150% 50%; }
  to { background-position: -50% 50%; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-button:where(.text-link, .intro-replay, .footer-policy, .language button, .theme-toggle, .menu-toggle, .occasion-tabs button) {
    background-color: var(--surface);
  }
}

/* Reduced motion and the site's pause control retain a static gold highlight. */
.motion-off .glass-button,
.motion-off :is(.gallery-card, .service-visual, .effects-panorama, .outdoor-story button) {
  scale: 1 !important;
}
.motion-off .glass-button { transform: none !important; }
.motion-off .glass-button::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) .glass-button,
  body:not(.motion-on) :is(.gallery-card, .service-visual, .effects-panorama, .outdoor-story button) {
    scale: 1 !important;
  }
  body:not(.motion-on) .glass-button { transform: none !important; }
  body:not(.motion-on) .glass-button::after { opacity: 0; }
}

@media (max-width: 640px) {
  .occasion-tabs button.glass-button { padding: 13px 14px; }
  .text-link.glass-button { padding: 9px 14px; }
  .gallery-image, .service-visual, .effects-panorama, .outdoor-story button { border-radius: 18px; }
}

/* Let the broad glow breathe around the occasion selector. */
@media (min-width: 901px) {
  .occasion-tabs { overflow: visible; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .occasion-tabs {
    padding: 44px 24px;
    margin: -36px -24px 2px;
    border-color: transparent;
    scroll-padding-inline: 24px;
  }
}

/* A reversible comparison control above the existing animation switch. */
.display-controls {
  position: fixed;
  left: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  pointer-events: none;
}
.display-controls .motion-toggle,
.display-controls .button-style-toggle {
  position: relative;
  inset: auto;
  pointer-events: auto;
}
.button-style-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  background-color: var(--surface);
  color: var(--gold);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.button-style-state { font-size: 11px; font-weight: 700; min-width: 20px; }
.style-switch-track {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--muted);
}
.style-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: transform 220ms var(--ease);
}
.button-style-toggle[aria-checked="true"] .style-switch-track { background: var(--gold); }
.button-style-toggle[aria-checked="true"] .style-switch-track::after { transform: translateX(12px); }

/* The surface changes independently of the existing neon, shine and zoom. */
:root { --transparent-button-ink: #33250f; }
html[data-theme="dark"] { --transparent-button-ink: #f8edd7; }

html[data-button-style="transparent"] .transparency-target {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--transparent-button-ink) !important;
}
html[data-button-style="transparent"] .transparency-target::before { opacity: .35; }
html[data-button-style="transparent"] .transparency-target :where(.social-name, small) { color: inherit; }

html[data-button-style="transparent"] :is(.hero-quote, .cinema .transparency-target, .floating-quote[data-photo-surface="true"]) {
  --transparent-button-ink: #fff;
  --focus: #fff;
  border-color: rgb(255 255 255 / 90%) !important;
  text-shadow: 0 1px 4px rgb(0 0 0 / 55%);
}

@media (max-width: 640px) {
  .display-controls { left: 12px; bottom: max(14px, env(safe-area-inset-bottom)); gap: 32px; }
  .button-style-toggle { font-size: 11px; padding: 8px 10px; }
}