/* Swiss Art Gallery — Expérience V52 « Fluidité maîtrisée »
 * Une mise en scène discrète : lumière muséale, poussière d’or et profondeur.
 * Aucun effet ne modifie la structure, la navigation ou les données du site.
 */

:root {
  --sag-celestial-gold: #d7ad43;
  --sag-celestial-pale: #ffe9a4;
  --sag-celestial-ivory: #fff9e9;
  --sag-celestial-ink: #0a0805;
  --sag-light-x: 28%;
  --sag-light-y: 34%;
  --sag-hero-shift-x: 0px;
  --sag-hero-shift-y: 0px;
}

/* Couche atmosphérique : toujours passive et sans influence sur la mise en page. */
#sagExperienceCanvas {
  position: fixed;
  inset: 0;
  z-index: 18;
  width: 100vw;
  height: 100vh;
  opacity: .88;
  pointer-events: none;
  transition: opacity .28s ease;
}

body.modal-open #sagExperienceCanvas,
body.sag-experience-paused #sagExperienceCanvas {
  opacity: 0;
}

.sag-cursor-aura {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 19;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(181, 133, 27, .72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 165, .13), rgba(205, 156, 44, .035) 48%, transparent 72%);
  box-shadow: 0 0 16px rgba(206, 157, 39, .18), inset 0 0 9px rgba(255, 245, 207, .3);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: width .11s ease, height .11s ease, opacity .11s ease, border-color .11s ease, background .11s ease;
  will-change: transform;
}

html.sag-pointer-fine .sag-cursor-aura.sag-aura-visible { opacity: .78; }
html.sag-pointer-fine .sag-cursor-aura.sag-aura-interactive {
  width: 48px;
  height: 48px;
  border-color: rgba(226, 185, 78, .9);
  background: radial-gradient(circle, rgba(255, 240, 185, .2), rgba(206, 157, 39, .06) 55%, transparent 74%);
  box-shadow: 0 0 28px rgba(206, 157, 39, .25), inset 0 0 12px rgba(255, 247, 216, .4);
}

.sag-scroll-line {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10170;
  height: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #7b5510, #f4d779 44%, #fff0ae 58%, #ad7818);
  box-shadow: 0 0 12px rgba(218, 174, 62, .42);
}

/* Entrée cérémonielle, une seule fois par session. */
.sag-entrance {
  --sag-entrance-line-y: 74px;
  position: fixed;
  inset: 0;
  z-index: 10200;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f8dc83;
  background:
    radial-gradient(circle at 50% 42%, rgba(118, 82, 17, .24), transparent 30%),
    radial-gradient(circle at 50% 50%, #19140b 0, #080705 54%, #030302 100%);
  opacity: 1;
  pointer-events: none;
  animation: sagEntranceVeil 3.72s cubic-bezier(.66, 0, .24, 1) forwards;
}

.sag-entrance::before,
.sag-entrance::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.sag-entrance::before {
  inset: 12%;
  border: 1px solid rgba(213, 168, 57, .18);
  transform: scaleX(.08);
  animation: sagEntranceFrame 1.2s cubic-bezier(.22, .82, .28, 1) forwards;
}

.sag-entrance::after {
  left: 50%;
  top: 50%;
  width: min(64vw, 720px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #9a6e18 14%, #ffdf77 50%, #9a6e18 86%, transparent);
  box-shadow: 0 0 22px rgba(238, 193, 72, .38);
  transform: translate(-50%, var(--sag-entrance-line-y)) scaleX(0);
  animation: sagEntranceLine 1.25s .12s cubic-bezier(.2, .85, .3, 1) forwards;
}

.sag-entrance-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 28px;
  text-align: center;
  transform: translateY(8px);
  animation: sagEntranceMark 1.2s .08s ease forwards;
}

.sag-entrance-star {
  width: 54px;
  height: 54px;
  position: relative;
  box-shadow: 0 0 26px rgba(236, 194, 78, .22);
}

.sag-entrance-star::before,
.sag-entrance-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg, transparent, #f5d778, transparent);
  transform: translate(-50%, -50%);
}

.sag-entrance-star::before { width: 54px; height: 1px; }
.sag-entrance-star::after { width: 1px; height: 54px; background: linear-gradient(transparent, #f5d778, transparent); }

.sag-entrance-brand {
  font: 600 clamp(1.3rem, 3vw, 2.15rem)/1.1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.sag-entrance-whisper {
  max-width: 560px;
  color: rgba(243, 229, 192, .74);
  font-size: clamp(.66rem, 1.3vw, .79rem);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
}

@keyframes sagEntranceVeil {
  0%, 75% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes sagEntranceFrame {
  0% { opacity: 0; transform: scaleX(.08); }
  42% { opacity: .8; }
  100% { opacity: .45; transform: scaleX(1); }
}

@keyframes sagEntranceLine {
  0% { opacity: 0; transform: translate(-50%, var(--sag-entrance-line-y)) scaleX(0); }
  100% { opacity: 1; transform: translate(-50%, var(--sag-entrance-line-y)) scaleX(1); }
}

@keyframes sagEntranceMark {
  0% { opacity: 0; transform: translateY(14px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero : éclairage muséal vivant, sans dénaturer la photographie. */
html.sag-experience .hero-luxe {
  isolation: isolate;
  border: 1px solid rgba(220, 179, 72, .35);
  box-shadow: 0 30px 82px rgba(17, 12, 4, .38), 0 0 0 1px rgba(255, 245, 207, .08) inset;
}

html.sag-experience .hero-luxe::before,
html.sag-experience .hero-luxe::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

html.sag-experience .hero-luxe::before {
  inset: 15px;
  border: 1px solid rgba(255, 230, 151, .2);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(0, 0, 0, .1) inset;
}

html.sag-experience .hero-luxe::after {
  inset: -12% -55%;
  background: linear-gradient(116deg, transparent 32%, rgba(255, 235, 170, .09) 48%, transparent 64%);
  opacity: 0;
  transform: translate3d(45%, 0, 0);
  will-change: transform, opacity;
  animation: sagHeroSilk 11s 1.8s ease-in-out infinite;
}

html.sag-experience .hero-luxe-bg img {
  transform: scale(1.035) translate3d(var(--sag-hero-shift-x), var(--sag-hero-shift-y), 0);
  transform-origin: center;
  transition: transform .32s cubic-bezier(.18, .72, .22, 1);
  will-change: transform;
}

html.sag-experience .hero-luxe-overlay {
  background:
    radial-gradient(circle 430px at var(--sag-light-x) var(--sag-light-y), rgba(255, 231, 157, .34), transparent 67%),
    radial-gradient(circle at 82% 76%, rgba(191, 139, 26, .14), transparent 38%),
    linear-gradient(110deg, rgba(7, 5, 2, .16), transparent 48%, rgba(7, 5, 2, .22));
  transition: opacity .16s ease;
}

html.sag-experience .hero-luxe-content {
  animation: sagHeroContent 1.1s .18s cubic-bezier(.2, .78, .25, 1) both;
}

html.sag-experience .hero-luxe-content h1 {
  text-wrap: balance;
  text-shadow: 0 5px 24px rgba(0, 0, 0, .68), 0 0 38px rgba(218, 174, 62, .12);
}

@keyframes sagHeroSilk {
  0%, 68% { transform: translate3d(45%, 0, 0); opacity: 0; }
  76% { opacity: .72; }
  90%, 100% { transform: translate3d(-45%, 0, 0); opacity: 0; }
}

@keyframes sagHeroContent {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Révélations au défilement : comme l’ouverture progressive d’une salle. */
html.sag-motion .sag-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .82s cubic-bezier(.18, .72, .22, 1) var(--sag-reveal-delay, 0ms),
    transform .82s cubic-bezier(.18, .72, .22, 1) var(--sag-reveal-delay, 0ms);
}

html.sag-motion .sag-reveal.sag-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Œuvres : profondeur contrôlée et reflet qui suit le regard. */
html.sag-experience .art-card {
  --sag-glint-x: 50%;
  --sag-glint-y: 35%;
  transform: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

html.sag-experience .art-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background:
    radial-gradient(circle 180px at var(--sag-glint-x) var(--sag-glint-y), rgba(255, 246, 207, .24), rgba(226, 185, 76, .07) 42%, transparent 72%),
    linear-gradient(125deg, transparent 36%, rgba(255, 255, 255, .09) 48%, transparent 61%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

html.sag-experience .art-card.sag-card-active {
  border-color: rgba(185, 139, 31, .58);
  transform: none;
  box-shadow: 0 18px 38px rgba(48, 32, 5, .16), 0 0 0 1px rgba(244, 214, 127, .13) inset;
}

html.sag-experience .art-card.sag-card-active::after { opacity: .9; }
html.sag-experience .art-card:hover,
html.sag-experience .art-card:focus-within,
html.sag-experience .art-card.sag-card-active,
html.sag-experience .art-card:hover .art-main-image,
html.sag-experience .art-card:focus-within .art-main-image,
html.sag-experience .art-card.sag-card-active .art-main-image {
  transform: none;
}

/* Signatures visuelles très courtes, uniquement aux moments d’interaction. */
html.sag-experience .discovery-kicker::before {
  content: "✦";
  display: inline-block;
  margin-right: .62em;
  color: #bd8d24;
  text-shadow: 0 0 16px rgba(207, 160, 48, .24);
}

html.sag-experience .latest-heading,
html.sag-experience .discovery-heading,
html.sag-experience .section-title-gold {
  position: relative;
}

html.sag-experience .latest-heading::after,
html.sag-experience .discovery-heading::after {
  content: "✦";
  display: inline-block;
  margin-left: .32em;
  color: #c99a2c;
  font: 400 .36em/1 Georgia, serif;
  vertical-align: top;
  transform: translateY(.42em) rotate(0deg);
  animation: sagStarBreath 4.8s ease-in-out infinite;
}

@keyframes sagStarBreath {
  0%, 100% { opacity: .32; transform: translateY(.42em) rotate(0deg) scale(.85); }
  48% { opacity: .9; transform: translateY(.42em) rotate(90deg) scale(1.12); }
}

html.sag-experience .collection-portal::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35% -80%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 231, 157, .13) 49%, transparent 58%);
  transform: translateX(-38%) rotate(7deg);
  opacity: 0;
  pointer-events: none;
}

html.sag-experience .collection-portal:hover::before,
html.sag-experience .collection-portal:focus-visible::before {
  opacity: 1;
  animation: sagPortalLight .55s ease both;
}

@keyframes sagPortalLight {
  from { transform: translateX(-38%) rotate(7deg); }
  to { transform: translateX(38%) rotate(7deg); }
}

html.sag-experience .concierge-entry {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 22px 58px rgba(43, 29, 4, .19), 0 0 0 1px rgba(255, 233, 163, .06) inset;
}

html.sag-experience .concierge-entry::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60%;
  background: conic-gradient(from 180deg, transparent 0 42%, rgba(238, 199, 89, .11) 48%, transparent 54% 100%);
  animation: sagConciergeAura 14s linear infinite;
  pointer-events: none;
}

@keyframes sagConciergeAura { to { transform: rotate(1turn); } }

html.sag-experience .btn-primary,
html.sag-experience .concierge-open,
html.sag-experience .nav-cta,
html.sag-experience .gift-showcase-copy a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

html.sag-experience .btn-primary::after,
html.sag-experience .concierge-open::after,
html.sag-experience .nav-cta::after,
html.sag-experience .gift-showcase-copy a::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -70%;
  bottom: -70%;
  left: -45%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 252, 226, .62), transparent);
  transform: skewX(-18deg) translateX(-260%);
  pointer-events: none;
}

html.sag-experience .btn-primary:hover::after,
html.sag-experience .btn-primary:focus-visible::after,
html.sag-experience .concierge-open:hover::after,
html.sag-experience .concierge-open:focus-visible::after,
html.sag-experience .nav-cta:hover::after,
html.sag-experience .nav-cta:focus-visible::after,
html.sag-experience .gift-showcase-copy a:hover::after,
html.sag-experience .gift-showcase-copy a:focus-visible::after {
  animation: sagButtonGlint .48s ease forwards;
}

@keyframes sagButtonGlint { to { transform: skewX(-18deg) translateX(760%); } }

html.sag-experience .sag-magnetic {
  --sag-magnet-x: 0px;
  --sag-magnet-y: 0px;
  transform: translate3d(var(--sag-magnet-x), var(--sag-magnet-y), 0);
  transition: transform .11s cubic-bezier(.18, .72, .22, 1), box-shadow .14s ease, background .14s ease;
}

html.sag-experience .btn-primary,
html.sag-experience .concierge-open,
html.sag-experience .nav-cta,
html.sag-experience .gift-showcase-copy a {
  transition-duration: .14s;
}

html.sag-experience .site-header .nav-links a { position: relative; }
html.sag-experience .site-header .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b98924 18%, #e4c263 50%, #b98924 82%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

html.sag-experience .site-header .nav-links a:hover::after,
html.sag-experience .site-header .nav-links a:focus-visible::after { transform: scaleX(1); }

html.sag-experience .gift-showcase-seal {
  animation: sagSealFloat 6.5s ease-in-out infinite;
  box-shadow: inset 0 0 0 8px #0b0a08, inset 0 0 0 9px #73591e, 0 16px 42px rgba(212, 172, 73, .12);
}

@keyframes sagSealFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.site-header .favorites-launcher.sag-favourite-awake {
  animation: sagFavouriteAwake .48s cubic-bezier(.2, .8, .25, 1);
}

@keyframes sagFavouriteAwake {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.045); }
}

@media (hover: none), (pointer: coarse) {
  .sag-cursor-aura { display: none; }
  html.sag-experience .art-card.sag-card-active {
    transform: none;
    transition-duration: .12s;
  }
  html.sag-experience .hero-luxe-bg img {
    transform: scale(1.025);
    will-change: auto;
  }
}

@media (max-width: 700px) {
  .sag-entrance::before { inset: 7%; }
  .sag-entrance { --sag-entrance-line-y: 68px; }
  .sag-entrance::after { width: 82vw; }
  .sag-entrance-inner { padding: 20px; }
  .sag-entrance-brand { letter-spacing: .16em; }
  html.sag-experience .hero-luxe::before { inset: 9px; }
  html.sag-experience .hero-luxe::after { display: none; }
  html.sag-experience .latest-heading::after,
  html.sag-experience .discovery-heading::after { margin-left: .2em; }
  body::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #sagExperienceCanvas,
  .sag-cursor-aura,
  .sag-entrance,
  .sag-scroll-line { display: none !important; }

  html.sag-experience .hero-luxe::after,
  html.sag-experience .latest-heading::after,
  html.sag-experience .discovery-heading::after,
  html.sag-experience .concierge-entry::after,
  html.sag-experience .gift-showcase-seal { animation: none !important; }

  html.sag-experience .hero-luxe-bg img,
  html.sag-experience .art-card,
  html.sag-experience .art-card.sag-card-active,
  html.sag-experience .sag-magnetic,
  html.sag-motion .sag-reveal,
  html.sag-motion .sag-reveal.sag-visible {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  #sagExperienceCanvas,
  .sag-cursor-aura,
  .sag-entrance,
  .sag-scroll-line,
  html.sag-experience .art-card::after,
  html.sag-experience .hero-luxe::before,
  html.sag-experience .hero-luxe::after { display: none !important; }
}