/* ==========================================================================
   Intro animée (une fois par session)
   Séquence : soie animée → emblème (fondu + zoom + reflet doré) →
   "Nina's" écrit lettre par lettre → LINGERIE → slogan → rideau qui s'ouvre.
   ========================================================================== */
html.intro-pending body { background: var(--c-blush); }
html.intro-pending body > :not(.intro) { visibility: hidden; }
html.intro-pending { overflow: hidden; }

.intro { position: fixed; inset: 0; z-index: var(--z-intro); display: grid; place-items: center; overflow: hidden; }

/* Rideau = deux panneaux de soie */
.intro__curtain { position: absolute; top: 0; bottom: 0; width: 50.5%; overflow: hidden; transition: transform 1.25s cubic-bezier(.76, 0, .24, 1); will-change: transform; }
.intro__curtain--l { left: 0; }
.intro__curtain--r { right: 0; }
.intro__curtain::before { /* fond soie commun, aligné sur tout l'écran */
  content: ""; position: absolute; top: 0; bottom: 0; width: 200%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 46px, rgba(255, 255, 255, .22) 60px, rgba(179, 124, 131, .05) 78px, rgba(255, 255, 255, 0) 92px),
    radial-gradient(70% 60% at 30% 25%, #FFF8F5 0%, rgba(255, 248, 245, 0) 60%),
    radial-gradient(60% 60% at 75% 70%, #F7D6D3 0%, rgba(247, 214, 211, 0) 65%),
    linear-gradient(160deg, #FEECE8 0%, #FCE3DF 50%, #FEECE8 100%);
}
.intro__curtain--l::before { left: 0; }
.intro__curtain--r::before { right: 0; }
.intro__curtain::after { /* reflet satiné qui ondule */
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, 0) 60%);
  animation: silkWave 5s ease-in-out infinite;
  mix-blend-mode: soft-light;
}
.intro__curtain--r::after { animation-delay: -2.5s; }
@keyframes silkWave { 0%, 100% { transform: translateX(-30%) skewX(-6deg); } 50% { transform: translateX(30%) skewX(6deg); } }

/* Halo lumineux derrière le logo */
.intro__glow { position: absolute; width: min(90vw, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 248, 245, .4) 40%, transparent 70%); filter: blur(10px); animation: breathe 4s ease-in-out infinite; transition: opacity .8s; }
@keyframes breathe { 50% { transform: scale(1.08); } }

/* Particules : pétales + étincelles */
.intro__particles { position: absolute; inset: 0; pointer-events: none; transition: opacity .8s; }
.petal { position: absolute; bottom: -40px; width: var(--s); height: calc(var(--s) * 1.25); opacity: 0; animation: petalFloat var(--dur) linear var(--delay) infinite; }
.petal svg { width: 100%; height: 100%; animation: petalSpin calc(var(--dur) / 2) ease-in-out infinite alternate; }
@keyframes petalFloat {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .9; }
  85% { opacity: .8; }
  100% { transform: translate3d(var(--dx), -115vh, 0); opacity: 0; }
}
@keyframes petalSpin { from { transform: rotate(-30deg) rotateY(0); } to { transform: rotate(40deg) rotateY(70deg); } }
.glint { position: absolute; width: var(--s); height: var(--s); color: var(--c-gold); opacity: 0; animation: glint var(--dur) ease-in-out var(--delay) infinite; filter: drop-shadow(0 0 6px rgba(232, 201, 169, .9)); }
.glint svg { width: 100%; height: 100%; }
@keyframes glint { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: .8; } }

/* Scène centrale */
.intro__stage { position: relative; display: grid; justify-items: center; text-align: center; padding: 24px; transition: transform 1.1s var(--ease-out), opacity .7s var(--ease), filter .7s; }
.intro__logo { position: relative; width: clamp(170px, 44vw, 270px); opacity: 0; transform: scale(.86); filter: blur(10px); animation: logoIn 1.4s var(--ease-out) .15s forwards; }
.intro__logo img { width: 100%; height: auto; }
@keyframes logoIn { to { opacity: 1; transform: none; filter: none; } }
.intro__shine { position: absolute; inset: 0; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; background: linear-gradient(110deg, transparent 30%, rgba(255, 242, 222, .0) 38%, #F6E3CF 46%, #fff 50%, #E8C9A9 54%, transparent 64%); background-size: 260% 100%; background-position: 130% 0; animation: shine 1.5s cubic-bezier(.45, .05, .25, 1) 1s forwards; mix-blend-mode: screen; }
.intro__shine--fallback { -webkit-mask: none; mask: none; mix-blend-mode: soft-light; border-radius: 50%; }
@keyframes shine { to { background-position: -40% 0; } }

.intro__name { font-family: var(--f-script); font-weight: 400; font-size: clamp(4rem, 15vw, 7rem); line-height: 1; color: var(--c-wine); margin-top: -.12em; display: flex; position: relative; }
.intro__name span { display: inline-block; opacity: 0; transform: translateY(.25em) rotate(-4deg); filter: blur(6px); animation: letterIn .8s var(--ease-out) forwards; animation-delay: calc(1.05s + var(--i) * .11s); }
@keyframes letterIn { to { opacity: 1; transform: none; filter: none; } }
.intro__name::after { /* scintillement doré sur le nom */
  content: attr(data-text); position: absolute; inset: 0; color: transparent;
  background: linear-gradient(100deg, transparent 40%, rgba(246, 227, 207, .95) 50%, transparent 60%) 150% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: shine 1.4s ease 2.05s forwards;
}
.intro__heart { position: absolute; inset-inline-end: -.32em; top: .02em; width: .4em; height: .4em; color: var(--c-wine); opacity: 0; transform: scale(0); animation: heartPop .7s var(--ease-out) 1.85s forwards; }
.intro__heart svg { width: 100%; height: 100%; stroke-width: 1.6; }
@keyframes heartPop { 60% { transform: scale(1.3); opacity: 1; } to { transform: scale(1); opacity: 1; } }

.intro__sub { display: flex; align-items: center; gap: 14px; margin-top: 4px; font-family: var(--f-serif); font-size: clamp(.85rem, 2.6vw, 1.05rem); letter-spacing: .6em; margin-inline-start: .6em; color: var(--c-wine); opacity: 0; animation: fadeUp .9s var(--ease-out) 1.75s forwards; }
.intro__sub::before, .intro__sub::after { content: ""; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-wine)); animation: lineGrow 1s var(--ease-out) 1.9s forwards; }
.intro__sub::after { transform: scaleX(-1); margin-inline-start: -.6em; }
@keyframes lineGrow { to { width: clamp(30px, 10vw, 70px); } }
.intro__bow { width: 34px; height: 34px; color: var(--c-rose-deep); margin-top: 6px; opacity: 0; animation: fadeUp .8s var(--ease-out) 2.05s forwards; }
.intro__slogan { margin-top: 14px; font-family: var(--f-serif); font-style: italic; font-size: clamp(1rem, 3.2vw, 1.25rem); color: var(--c-rose-deep); opacity: 0; animation: fadeUp 1s var(--ease-out) 2.25s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.intro__skip { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); inset-inline-end: 24px; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--c-wine); padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid rgba(103, 44, 53, .2); background: rgba(255, 255, 255, .35); backdrop-filter: blur(6px); opacity: 0; animation: fadeUp .6s ease .6s forwards; transition: background .3s, color .3s; }
.intro__skip:hover { background: var(--c-wine); color: #fff; }
.intro__bar { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--g-gold); width: 0; animation: bar 3.3s linear forwards; }
@keyframes bar { to { width: 100%; } }

/* Sortie : la scène s'envole, le rideau s'ouvre */
.intro.is-leaving .intro__stage { transform: scale(1.12) translateY(-10px); opacity: 0; filter: blur(6px); }
.intro.is-leaving .intro__particles, .intro.is-leaving .intro__glow, .intro.is-leaving .intro__skip, .intro.is-leaving .intro__bar { opacity: 0; transition: opacity .5s; }
.intro.is-leaving .intro__curtain--l { transform: translateX(-102%); transition-delay: .25s; }
.intro.is-leaving .intro__curtain--r { transform: translateX(102%); transition-delay: .25s; }
.intro.is-leaving { pointer-events: none; }