/* ============================================================
   Lympia Lunetier — feuille de style partagée (proto10)
   ============================================================ */

html, body { background: #FBF1E7; }
html { scroll-behavior: smooth; }

.font-logo    { font-family: 'Marcellus', serif; }
.font-display { font-family: 'Anybody', sans-serif; font-variation-settings: "wght" 900, "wdth" 100; }
.font-display-cnd { font-family: 'Anybody', sans-serif; font-variation-settings: "wght" 900, "wdth" 85; }
.font-display-ext { font-family: 'Anybody', sans-serif; font-variation-settings: "wght" 900, "wdth" 115; }

/* Marquee */
@keyframes mq { to { transform: translateX(-50%); } }
.marquee-track { animation: mq 48s linear infinite; }

/* Subtle peach gradient under hero */
.hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 90% 110%, rgba(218,162,128,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(107,124,94,0.06) 0%, transparent 55%),
    #FBF1E7;
}

/* Typo placeholder background for brand cards without a photo */
.photo-ph {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(42,36,32,0.04) 14px 15px),
    #E5DDD0;
}

/* "Open now" pulse dot */
.pulse-dot { position: relative; }
.pulse-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } }
.pulse-dot.is-static::after { animation: none; }

/* Hero "type-fenêtre" — la devanture vit dans les lettres */
.hero-cut{
  margin:0;
  background-image:url('images/5d1264b14cdc4f15833a0037_1800.jpg');
  background-size:118% auto;
  background-position:center 36%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:0 1px 1px rgba(26,23,20,.12);
  animation:heropan 22s ease-in-out infinite;
}
.hero-underline{height:10px;width:clamp(160px,34%,460px);background:var(--coral,#DAA280);border-radius:3px;
  transform-origin:left;transform:scaleX(0);animation:heroline 1.2s cubic-bezier(.2,.8,.2,1) .2s forwards;}
@keyframes heropan{
  0%{background-position:center 34%;background-size:118% auto;}
  50%{background-position:left 62%;background-size:146% auto;}
  100%{background-position:center 34%;background-size:118% auto;}
}
@keyframes heroline{to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){.hero-cut{animation:none;}.hero-underline{animation:none;transform:none;}}

/* Hero minimal — contour + bascule */
.hero-outline{ color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:2px var(--ink,#1A1714); }
@media (max-width:640px){ .hero-outline{ -webkit-text-stroke-width:1.4px; } }
.hero-dot{ -webkit-text-fill-color:var(--ink,#1A1714); color:var(--ink,#1A1714); -webkit-text-stroke:0; }
.hero-switch button{ color:rgba(26,23,20,.55); }
.hero-switch button.is-on{ background:var(--ink,#1A1714); color:var(--cream,#FBF1E7); }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-reveal-d="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-d="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-d="3"] { transition-delay: .24s; }

/* Brand-card hover enrich */
#brand-grid article .b-reveal { transform: translateY(8px); opacity: 0; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s; }
#brand-grid article:hover .b-reveal, #brand-grid article:focus-visible .b-reveal { transform: none; opacity: 1; }
#brand-grid article img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
#brand-grid article:hover img { transform: scale(1.06); }
#brand-grid.is-swapping article { opacity: 0; transform: translateY(10px); }
#brand-grid article { transition: opacity .35s ease, transform .35s ease; }

/* Nav active link */
.nav-link.is-active { color: #1A1714; }
.nav-link.is-active::after { content: ''; display: block; height: 1.5px; background: #C14921; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  #brand-grid article img, #brand-grid article:hover img { transition: none; transform: none; }
  .marquee-track { animation: none; }
  .pulse-dot::after { animation: none; }
  .eye-sig .blink { animation: none; }
  html { scroll-behavior: auto; }
}

/* Hero serif — halos colorés en fond (concept C) */
.hero-deco{ position:absolute; border-radius:50%; filter:blur(46px); opacity:.5; pointer-events:none; z-index:0; }
.hero-deco-1{ width:340px; height:340px; background:#DAA280; left:-90px; top:60px; }
.hero-deco-2{ width:300px; height:300px; background:#cdd6bf; right:-70px; bottom:20px; }
@media (max-width:768px){ .hero-deco-1{ width:220px;height:220px;left:-80px;top:30px; } .hero-deco-2{ width:200px;height:200px;right:-70px;bottom:auto;top:200px; } }
.eye-sig { display:inline-block; vertical-align:middle; }
.eye-sig .pupil-follow { transition: transform .12s ease-out; }
.eye-sig .eye-open, .eye-sig .eye-closed { transition: opacity .25s ease; }
.eye-sig .eye-closed { opacity: 0; }
[data-status][data-closed] .eye-sig .eye-open { opacity: 0; }
[data-status][data-closed] .eye-sig .eye-closed { opacity: 1; }
.eye-sig .blink { animation: eyeblink 5.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes eyeblink { 0%,90%,100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }

/* Piste 07 — Triptyque : sourcil rouge + œil-amande + larme bleue */
.eye-trip { transform: translateY(1px); }
.eye-trip .trip-tear, .eye-trip .trip-brow { transition: transform .35s cubic-bezier(.6,0,.3,1); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference){
  .eye-trip .trip-tear { animation: tripFloat 3.4s ease-in-out infinite; }
  @keyframes tripFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(1.4px); } }
}
/* fermé : la larme tombe, le sourcil se relâche */
[data-status][data-closed] .eye-trip .trip-tear { transform: translateY(3px); animation: none; }
[data-status][data-closed] .eye-trip .trip-brow { transform: translateY(1.5px); }

/* ---- Brand modal ---- */
#brand-modal { display: none; }
#brand-modal.is-open { display: flex; }
#brand-modal [data-modal-backdrop] { opacity: 0; transition: opacity 200ms ease; }
#brand-modal [data-modal-panel]    { opacity: 0; transform: translateY(12px); transition: opacity 200ms ease, transform 200ms ease; }
#brand-modal.is-open [data-modal-backdrop] { opacity: 1; }
#brand-modal.is-open [data-modal-panel]    { opacity: 1; transform: translateY(0); }

/* Verriers partenaires — désaturé au repos, couleur + zoom au survol */
.verriers-panel { box-shadow: 0 22px 50px -34px rgba(26,23,20,.45); }
.verrier-logo {
  filter: grayscale(1) opacity(.6);
  transition: filter .4s var(--ease-out, cubic-bezier(0,0,.2,1)), transform .4s var(--ease-out, cubic-bezier(0,0,.2,1));
}
.verrier { transition: background-color .3s ease; }
.verrier:hover { background-color: rgba(26,23,20,.025); }
.verrier:hover .verrier-logo,
.verrier:focus-visible .verrier-logo { filter: none; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .verrier-logo { transition: none; }
  .verrier:hover .verrier-logo { transform: none; }
}

/* Hero carousel — crossfade */
.hero-carousel .hc-slide { opacity: 0; transition: opacity 1100ms cubic-bezier(.4,0,.2,1); will-change: opacity; }
.hero-carousel .hc-slide.is-active { opacity: 1; }
.hero-carousel .hc-dot {
  width: 7px; height: 7px; border-radius: 999px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.45); transition: width .3s ease, background-color .3s ease;
}
.hero-carousel .hc-dot.is-on { width: 22px; background: #fff; }
.hero-carousel .hc-dot:hover { background: rgba(255,255,255,.8); }
@media (prefers-reduced-motion: reduce) {
  .hero-carousel .hc-slide { transition: opacity 300ms linear; }
}