/* NAYA home, 2026 edition. Loaded after style.css on index.html only. */
:root {
  --bordeaux: #2a0b0a;
  --terracotta: #c46c53;
  --terracotta-deep: #a8533d;
}

/* Film grain over the whole page */
.home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Intro curtain (first visit of the session) */
.intro-curtain { display: none; }
.intro .intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--ink);
  animation: curtainUp 1s 1.5s var(--ease) forwards;
}
.intro-curtain img { width: 96px; opacity: 0; transform: translateY(12px) scale(.94); animation: introIcon 1s .15s var(--ease) forwards; }
.intro-curtain__line { width: 140px; height: 1px; background: var(--gold); transform: scaleX(0); animation: introLine 1s .5s var(--ease) forwards; }
@keyframes introIcon { to { opacity: 1; transform: none; } }
@keyframes introLine { to { transform: scaleX(1); } }
@keyframes curtainUp { to { transform: translateY(-100%); visibility: hidden; } }

/* Centered nav */
.nav--center { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; }
.nav--center .nav__links { justify-self: start; gap: 30px; }
.nav--center .nav__brand { margin: 0; justify-self: center; }
.nav--center .nav__cta { justify-self: end; }
.home .nav:not(.is-scrolled) { background: linear-gradient(180deg, rgba(20, 11, 7, .55), rgba(20, 11, 7, 0)); }

/* 1. Stage */
.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 75% at 50% 58%, #4a1b13 0%, #24100a 48%, #120806 100%);
  --p: 0;
}
.stage__glow {
  position: absolute;
  left: 50%; top: 55%;
  width: 70vh; height: 70vh;
  margin: -35vh 0 0 -35vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 201, 119, .22) 0%, rgba(233, 201, 119, 0) 65%);
  filter: blur(10px);
}
.stage__word {
  position: absolute;
  left: 0; right: 0; top: 52%;
  display: flex;
  justify-content: center;
  gap: calc(1vw + var(--p) * 10vw);
  margin: 0;
  transform: translateY(-50%);
  font-size: clamp(120px, 25vw, 500px);
  line-height: 1;
  letter-spacing: 0;
  opacity: calc(1 - var(--p) * 1.2);
}
.stage__word span {
  display: inline-block;
  background: linear-gradient(180deg, #f7e2a6 0%, #d3a243 45%, #8f6519 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .92;
}
.js .stage__word span { transform: translateY(40%); opacity: 0; transition: transform 1.6s var(--ease), opacity 1.6s var(--ease); }
.js .stage.is-ready .stage__word span { transform: none; opacity: .92; }
.stage__word span:nth-child(2) { transition-delay: .08s; }
.stage__word span:nth-child(3) { transition-delay: .16s; }
.stage__word span:nth-child(4) { transition-delay: .24s; }

.stage__object {
  position: absolute;
  left: 50%; top: 50%;
  height: min(64vh, 118vw);
  aspect-ratio: 995 / 2000;
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 10px + var(--p) * -18vh), 0)
    scale(calc(1 + var(--p) * .18))
    rotate(calc(var(--mx, 0) * 1.5deg));
}
.stage__object img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55));
  animation: float 7s ease-in-out infinite;
}
.js .stage__object img { opacity: 0; transform: translateY(8vh); transition: opacity 1.4s .3s var(--ease), transform 1.8s .3s var(--ease); animation: none; }
.js .stage.is-ready .stage__object img { opacity: 1; transform: none; animation: float 7s 2.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px); } }
.stage__object::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -2%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%);
  z-index: -1;
}

.stage__meta {
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
  opacity: calc(1 - var(--p) * 2);
}
.stage__tag { margin: 0; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted-light); line-height: 2; }
.stage__tag em { font: italic 400 22px/1 var(--italic); letter-spacing: .02em; text-transform: none; color: var(--sand); }
.stage__lead { grid-column: 1; margin: 0; font: italic 400 20px/1.45 var(--italic); color: var(--sand); max-width: 330px; }
.stage__link {
  grid-column: 2; grid-row: 1 / span 2;
  justify-self: end;
  font-family: var(--display);
  font-size: 30px;
  color: var(--text-light);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition: border-color .4s, color .4s;
}
.stage__link span { font: 400 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-right: 10px; vertical-align: middle; }
.stage__link:hover { color: #fff; border-color: var(--gold); }
.stage__scroll {
  position: absolute;
  left: 50%; bottom: 0;
  width: 1px; height: 64px;
  background: rgba(209, 167, 80, .25);
  overflow: hidden;
  opacity: calc(1 - var(--p) * 3);
}
.stage__scroll span { position: absolute; inset: 0; background: var(--gold); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* 2. Manifesto */
.manifesto {
  background: var(--ink);
  text-align: center;
  padding: clamp(110px, 16vw, 230px) var(--pad) clamp(90px, 12vw, 170px);
}
.manifesto__icon { width: 54px; margin: 0 auto 48px; opacity: .9; }
.manifesto__text {
  max-width: 1120px;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 58px);
  line-height: 1.28;
  color: var(--text-light);
}
.manifesto__text .w { opacity: .16; transition: opacity .25s linear; }
.manifesto__text .w.on { opacity: 1; }
.manifesto__facts {
  display: flex;
  justify-content: center;
  gap: clamp(30px, 8vw, 120px);
  margin-top: clamp(70px, 9vw, 120px);
}
.manifesto__facts strong {
  display: block;
  font: italic 400 clamp(44px, 5vw, 72px)/1 var(--italic);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.manifesto__facts span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-light); line-height: 1.7; }

/* 3. Les pièces: auto-scrolling loop */
.pieces {
  position: relative;
  background: linear-gradient(180deg, var(--ink) 0%, #1d0f0a 50%, var(--ink) 100%);
  padding: clamp(90px, 11vw, 150px) 0 clamp(100px, 12vw, 170px);
  overflow: hidden;
}
.pieces__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding: 0 var(--pad);
  margin-bottom: clamp(50px, 6vw, 80px);
}
.pieces__intro { max-width: 520px; }
.pieces__intro h2 { font-size: clamp(56px, 7vw, 110px); margin-bottom: 22px; }
.pieces__intro p { color: var(--muted-light); margin: 0; }
.pieces__marquee { position: relative; overflow: hidden; }
/* edge fades drawn on top (a mask on the moving strip would force a repaint every frame) */
.pieces__marquee::before, .pieces__marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 7vw;
  z-index: 2;
  pointer-events: none;
}
.pieces__marquee::before { left: 0; background: linear-gradient(90deg, #1d0f0a, rgba(29, 15, 10, 0)); }
.pieces__marquee::after { right: 0; background: linear-gradient(270deg, #1d0f0a, rgba(29, 15, 10, 0)); }
.pieces__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 70px);
  width: max-content;
  padding-left: clamp(28px, 4vw, 70px);
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.js .pieces__track.is-looping { animation: piecesLoop var(--loop, 46s) linear infinite; }
.pieces__marquee:hover .pieces__track,
.pieces__marquee:focus-within .pieces__track { animation-play-state: paused; }
@keyframes piecesLoop { to { transform: translate3d(calc(var(--shift, 50%) * -1), 0, 0); } }
.piece { flex: none; display: block; }
.piece--low { margin-top: 9vh; }
.piece figure { height: min(56vh, 560px); aspect-ratio: 4 / 5; overflow: hidden; background: #2a1810; }
.piece img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease), filter 1s; filter: saturate(.92); }
.piece:hover img { transform: scale(1); filter: saturate(1.05); }
.piece__cap { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; margin-top: 22px; }
.piece__num { grid-row: span 2; font: italic 400 22px/1 var(--italic); color: var(--gold); padding-top: 6px; }
.piece__cap h3 { font-size: 28px; }
.piece__cap p { margin: 4px 0 0; font-size: 13px; letter-spacing: .12em; color: var(--muted-light); }
.pieces__end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--display);
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.1;
  text-align: right;
}
.pieces__end em { font-family: var(--italic); font-style: italic; color: var(--gold); }
.pieces__end i {
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-style: normal;
  font-size: 28px;
  color: var(--gold);
  transition: background .4s, color .4s, transform .5s var(--ease);
}
.pieces__end:hover i { background: var(--gold); color: var(--ink); transform: translateX(6px); }

/* 4. L'art d'offrir */
.offrir {
  display: grid;
  grid-template-columns: 46fr 54fr;
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
  background: var(--cream);
  color: var(--text-dark);
  padding: clamp(90px, 12vw, 170px) var(--pad);
}
.offrir__media { overflow: hidden; aspect-ratio: 1244 / 2000; max-height: 92vh; }
.offrir__media img { width: 100%; height: 100%; object-fit: cover; }
.js .mask-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease); }
.js .mask-reveal img { transform: scale(1.18); transition: transform 2.2s var(--ease); }
.js .mask-reveal.is-in { clip-path: inset(0 0 0 0); }
.js .mask-reveal.is-in img { transform: scale(1); }
.offrir__text { max-width: 560px; }
.offrir h2 { font-size: clamp(56px, 7.5vw, 120px); margin-bottom: 36px; }
.offrir h2 em { background-image: linear-gradient(120deg, #7a5414 0%, #b8862b 40%, #d8ae55 55%, #9a6d1d 100%); }
.offrir p { color: var(--muted-dark); margin: 0 0 36px; font-size: 18px; }
.offrir__list {
  list-style: none;
  padding: 30px 0;
  margin: 0 0 44px;
  border-block: 1px solid rgba(43, 29, 21, .14);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
}
.offrir__list li { display: flex; align-items: center; gap: 14px; font: italic 400 21px/1.3 var(--italic); color: var(--text-dark); }
.offrir__list li::before { content: ""; width: 6px; height: 6px; background: #b8862b; transform: rotate(45deg); flex: none; }

/* 5. Editorial poster */
.poster {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff4e8;
  background: var(--terracotta);
  isolation: isolate;
}
.poster__bg { position: absolute; inset: 0; z-index: -2; }
.poster__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.06); transition: transform 2.4s var(--ease); }
.poster.is-in .poster__bg img { transform: scale(1); }
.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(70, 25, 12, .38), rgba(70, 25, 12, 0) 70%),
    linear-gradient(180deg, rgba(40, 14, 8, .35) 0%, rgba(40, 14, 8, 0) 30%, rgba(40, 14, 8, 0) 62%, rgba(40, 14, 8, .5) 100%),
    radial-gradient(ellipse 45% 40% at 0% 100%, rgba(255, 238, 222, .35), rgba(255, 238, 222, 0) 70%);
}
.poster__corner {
  position: absolute;
  top: clamp(90px, 9vw, 120px);
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: .04em;
}
.poster__corner--l { left: var(--pad); }
.poster__corner--r { right: var(--pad); font-family: var(--italic); font-style: italic; }
.poster__type { align-self: start; margin-top: clamp(150px, 17vh, 220px); display: flex; align-items: flex-start; gap: clamp(14px, 1.6vw, 26px); padding: 0 var(--pad); }
.poster__word {
  position: relative;
  --fs: clamp(110px, 17vw, 330px);
  margin: 0;
  font-size: var(--fs);
  line-height: .8;
  letter-spacing: -.01em;
  color: #fff4e8;
  text-shadow: 0 10px 60px rgba(60, 20, 8, .35);
}
.poster__word small {
  position: absolute;
  /* sits in the lower opening of the E (measured: .49–.67em high, .26–.59em wide) */
  left: calc(var(--fs) * .28);
  top: calc(var(--fs) * .515);
  white-space: nowrap;
  font: italic 400 calc(var(--fs) * .054)/1.15 var(--italic);
  letter-spacing: 0;
  text-shadow: none;
}
.poster__comma { font-family: var(--italic); font-style: italic; margin-left: -.04em; }
.poster__side {
  text-shadow: 0 2px 20px rgba(60, 20, 8, .45);
  margin: .4em 0 0;
  font: 400 clamp(18px, 1.9vw, 34px)/1.12 var(--italic);
  color: #fff4e8;
}
.poster__badge {
  position: absolute;
  right: var(--pad);
  bottom: clamp(30px, 4vw, 54px);
  width: 128px;
  height: 128px;
  background: radial-gradient(circle at 40% 35%, #3a2216, #170c08 75%);
  box-shadow: 0 20px 40px -18px rgba(20, 8, 4, .7), inset 0 0 0 1px rgba(209, 167, 80, .35);
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform .6s var(--ease);
}
.poster__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.poster__badge text { fill: #ecd08a; font: 400 9.4px var(--sans); letter-spacing: .2em; }
.poster__badge img { width: 34px; }
.poster__badge:hover { transform: scale(1.08); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 6. Collection teaser tweaks on home */
.home .collection { padding-top: clamp(90px, 12vw, 170px); }

/* 7. Sur mesure */
.sur-mesure {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #fbf6ef 0%, var(--sand) 80%);
  color: var(--text-dark);
  padding: clamp(110px, 14vw, 200px) var(--pad);
  text-align: center;
}
.sur-mesure__vase { position: absolute; width: auto; filter: drop-shadow(0 40px 40px rgba(90, 60, 30, .22)); pointer-events: none; }
.sur-mesure__vase--l { height: 78%; left: max(-60px, calc(50% - 760px)); bottom: -6%; }
.sur-mesure__vase--r { height: 58%; right: max(-40px, calc(50% - 720px)); top: 10%; }
.sur-mesure__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.sur-mesure h2 { font-size: clamp(42px, 5vw, 80px); margin-bottom: 28px; }
.sur-mesure h2 em { background-image: linear-gradient(120deg, #7a5414 0%, #b8862b 40%, #d8ae55 55%, #9a6d1d 100%); }
.sur-mesure > .sur-mesure__inner > p { color: var(--muted-dark); margin: 0 auto 60px; font-size: 18px; }
.steps-line { list-style: none; padding: 0; margin: 0 0 56px; display: grid; grid-template-columns: repeat(3, 1fr); }
.steps-line li { padding: 0 18px; }
.steps-line li + li { border-left: 1px solid rgba(43, 29, 21, .15); }
.steps-line span { display: block; font: italic 400 34px/1 var(--italic); color: #a77a26; margin-bottom: 14px; }
.steps-line h3 { font-size: 22px; margin-bottom: 8px; }
.steps-line p { margin: 0; font-size: 14.5px; color: var(--muted-dark); }

/* 8. Instagram on home */
.insta--home { padding-bottom: 0; }
.insta__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 14px; max-width: 1400px; margin: 0 auto 40px; }
.insta__head h2 { font-size: clamp(34px, 4vw, 56px); }
.insta__head p { margin: 0; color: var(--muted-light); }
.insta--home .insta__grid { gap: 0; max-width: none; margin: 0 calc(var(--pad) * -1); }
/* full Instagram posts (4:5), never cropped */
.insta--home .insta__grid img { aspect-ratio: 4 / 5; object-fit: contain; }
.insta--home .insta__grid a:hover img { transform: none; opacity: .85; }

/* Footer with giant wordmark */
.foot--big { text-align: left; padding: 90px var(--pad) 30px; overflow: hidden; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1400px; margin: 0 auto 60px; }
.foot__cols h4 { margin: 0 0 18px; font: 400 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.foot__cols a, .foot__cols p { display: block; margin: 0 0 10px; color: var(--muted-light); font-size: 15px; transition: color .3s; }
.foot__cols a:hover { color: var(--text-light); }
.foot .foot__word {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--display);
  font-size: 27vw;
  line-height: .8;
  letter-spacing: .06em;
  background: linear-gradient(180deg, rgba(233, 201, 119, .5) 0%, rgba(233, 201, 119, .05) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.foot .foot__legal { text-align: center; font-size: 12px; letter-spacing: .1em; color: #7d6b5b; margin: 0; }

/* Contact on home: a touch more air */
.home .contact { padding-top: clamp(120px, 15vw, 200px); }

/* Responsive */
@media (max-width: 1280px) {
  .nav--center .nav__cta { display: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .nav--center { display: flex; }
  .nav--center .nav__brand { order: -1; margin-right: auto; }
  .nav--center .nav__links { gap: 26px; }
}
@media (max-width: 900px) {
  .nav--center { grid-template-columns: auto 1fr auto; }
  .nav--center .nav__brand { grid-column: 1; justify-self: start; }
  .nav--center .nav__burger { grid-column: 3; }
  .nav--center .nav__links { gap: 26px; }

  .stage__word { top: 42%; font-size: 23vw; gap: 2vw; }
  .stage__object { top: 42%; height: min(44vh, 92vw); }
  .stage__meta { grid-template-columns: 1fr; text-align: center; bottom: 70px; gap: 18px; }
  .stage__tag { display: none; }
  .stage__lead { font-size: 19px; }
  .stage__lead { justify-self: center; text-align: center; }
  .stage__link { grid-column: 1; grid-row: auto; justify-self: center; font-size: 26px; }

  .manifesto__facts { gap: 26px; }
  .manifesto__facts span { font-size: 10.5px; letter-spacing: .14em; }

  .pieces__head { flex-direction: column; align-items: flex-start; gap: 30px; }
  .pieces__end { text-align: left; font-size: 28px; }
  .pieces__end i { width: 64px; height: 64px; font-size: 22px; }
  .piece--low { margin-top: 40px; }
  .piece figure { height: auto; width: 68vw; }
  .piece__cap h3 { font-size: 22px; }

  .offrir { grid-template-columns: 1fr; }
  .offrir__media { max-height: none; aspect-ratio: 4 / 5; }
  .offrir__list li { font-size: 18px; }

  .poster { min-height: 92svh; }
  .poster__type { flex-direction: column; align-items: flex-start; gap: 18px; }
  .poster__word { --fs: 27vw; }
  .poster__word small { position: static; display: block; margin: 0 0 14px 4px; font-size: 19px; white-space: normal; }
  .poster__word small br { display: none; }
  .poster::before { background: linear-gradient(180deg, rgba(40, 14, 8, .45) 0%, rgba(60, 22, 10, .45) 55%, rgba(40, 14, 8, .2) 100%); }
  .poster__type { margin-top: 140px; transform: none !important; }
  .poster__side { position: absolute; left: var(--pad); bottom: 44px; margin: 0; font-size: 21px; }
  .poster__badge { width: 96px; height: 96px; }

  .sur-mesure { padding-top: 70px; }
  .sur-mesure__vase { position: static; display: inline-block; vertical-align: bottom; margin: 0 6px 40px; transform: none !important; }
  .sur-mesure__vase--l { height: 230px; }
  .sur-mesure__vase--r { height: 180px; }
  .steps-line { grid-template-columns: 1fr; gap: 30px; }
  .steps-line li + li { border-left: 0; border-top: 1px solid rgba(43, 29, 21, .15); padding-top: 30px; }

  .insta--home .insta__grid { grid-template-columns: repeat(3, 1fr); }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__cols > div:last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .offrir__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .intro .intro-curtain { display: none; }
  .js .stage__word span, .js .stage__object img { opacity: 1; transform: none; }
  .pieces__marquee { overflow-x: auto; }
  .pieces__marquee::before, .pieces__marquee::after { display: none; }
  .js .mask-reveal { clip-path: none; }
  .manifesto__text .w { opacity: 1; }
}