/* Effets de la page d'essai. Chargé seulement par essai.html, par-dessus style.css.
   Même DA (anthracite + vert menthe), on n'ajoute que du mouvement. */

/* 1. Titres qui montent mot par mot, depuis un cache */
.fx [data-split][data-reveal] { opacity: 1; transform: none; filter: none; animation: none; }
.fx [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx [data-split] .w > span { display: inline-block; transform: translate3d(0, 112%, 0) rotate(4deg); transform-origin: left bottom;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 55ms + var(--d, 0ms)); }
.fx [data-split].is-in .w > span { transform: none; }

/* 2. Fond d'accueil vivant : nappes vert menthe qui dérivent, et grain de film */
.fx-aurora { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .55; filter: blur(40px) saturate(1.1); }
.fx .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }
.fx .hero-inner { position: relative; z-index: 1; }
.fx .hero-photo { will-change: transform; }

/* 3. Boutons : le texte roule vers le haut, la flèche pivote, le bouton suit la souris */
.fx .btn .roll { display: inline-flex; flex-direction: column; height: 1.25em; overflow: hidden; line-height: 1.25; }
.fx .btn .roll > span { display: block; transition: transform .55s cubic-bezier(.25, .1, .25, 1); }
.fx .btn:hover .roll > span { transform: translateY(-100%); }
.fx .btn:hover .dot { transform: rotate(45deg); }
.fx .btn { transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s var(--ease), background-color .3s var(--ease); }

/* 4. Cartes : halo vert menthe qui suit la souris, et bord qui s'allume */
.fx .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(127, 227, 184, .13), transparent 45%);
  -webkit-mask: none; }
.fx .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(159, 240, 204, .7), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fx .card:hover::after, .fx .card:hover::before { opacity: 1; }

/* 5. Apparitions plus amples : on sort du flou, légèrement plus petit, avec un rideau sur la vidéo */
.fx [data-reveal]:not([data-split]):not(.hero [data-reveal]) { transform: translateY(46px) scale(.97); filter: blur(12px);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1), filter 1s cubic-bezier(.16, 1, .3, 1); }
.fx [data-reveal][data-delay="1"]:not([data-split]) { transition-delay: .08s; }
.fx [data-reveal][data-delay="2"]:not([data-split]) { transition-delay: .16s; }
.fx [data-reveal][data-delay="3"]:not([data-split]) { transition-delay: .24s; }
/* Même chaîne de sélecteurs que la règle du dessus, sinon elle reste plus forte et le flou ne part jamais */
.fx [data-reveal]:not([data-split]):not(.hero [data-reveal]).is-in { transform: none; filter: none; }
.fx .vid[data-reveal] { clip-path: inset(18% 8% 0 8% round 30px); transition: clip-path 1.4s cubic-bezier(.16, 1, .3, 1), opacity 1s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1), filter 1s ease; }
.fx .vid[data-reveal].is-in { clip-path: inset(0 0 0 0 round 30px); }

/* 6. Petits intitulés : une ligne qui se trace devant */
.fx .label[data-reveal]::before, .fx .center .label[data-reveal]::after { width: 0; transition: width 1.1s cubic-bezier(.16, 1, .3, 1) .25s; }
.fx .label[data-reveal].is-in::before, .fx .center .label[data-reveal].is-in::after { width: 30px; }
.fx .hero .label::before { animation: trace 1.1s cubic-bezier(.16, 1, .3, 1) .3s both; }
@keyframes trace { from { width: 0; } to { width: 30px; } }

@media (prefers-reduced-motion: reduce) {
  .fx [data-split] .w > span { transform: none; transition: none; }
  .fx-aurora, .fx .hero::after { display: none; }
  .fx .btn .roll > span, .fx .btn .dot { transition: none; }
  .fx [data-reveal] { transform: none !important; filter: none !important; clip-path: none !important; transition: opacity .3s ease !important; }
}

/* Lenis gère le défilement doux : on coupe celui du navigateur pour ne pas doubler */
html.lenis, html.lenis body { height: auto; scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* 11. Intro : le logo apparaît sur fond anthracite, puis le rideau monte (comme les anneaux au début de la vidéo) */
html.fx-intro body::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: #1b1a1d; pointer-events: none;
  animation: fx-rideau 1.9s cubic-bezier(.76, 0, .24, 1) forwards; }
html.fx-intro body::after { content: ""; position: fixed; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; z-index: 9999; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='32' x2='32' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%233FC98F'/%3E%3Cstop offset='.55' stop-color='%236ADBAB'/%3E%3Cstop offset='1' stop-color='%23A6F2D0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Cpath d='M5 23l8-8 4 4 10-10' stroke='%230F241A' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 34px rgba(127, 227, 184, .55));
  animation: fx-logo 1.9s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes fx-rideau { 0%, 60% { transform: translateY(0); } 100% { transform: translateY(-100%); visibility: hidden; } }
@keyframes fx-logo { 0% { opacity: 0; transform: scale(.4) rotate(-14deg); } 28% { opacity: 1; transform: scale(1) rotate(0); } 52% { opacity: 1; transform: scale(1); } 68%, 100% { opacity: 0; transform: scale(1.7); visibility: hidden; } }
html.fx-intro.js .hero [data-reveal] { animation-delay: 1.3s; animation-fill-mode: both; }

/* 7. Le métier qui change dans l'accueil */
.fx-rot { display: inline-grid; justify-items: start; vertical-align: bottom; overflow: hidden; height: 1.35em; color: var(--accent); transition: width .5s cubic-bezier(.16, 1, .3, 1); }
.fx-rot > span { grid-area: 1 / 1; white-space: nowrap; transform: translateY(115%); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.fx-rot > span:not(.on):not(.off) { transition: none; }
.fx-rot > span.on { transform: none; }
.fx-rot > span.off { transform: translateY(-115%); }

/* 8. Très grand mot en fond, contour vert menthe */
.fx .fx-has-giant { position: relative; overflow-x: clip; }
.fx .fx-has-giant > .wrap { position: relative; z-index: 1; }
.fx-giant { position: absolute; top: 50%; left: 0; z-index: 0; margin-top: -.5em; white-space: nowrap; pointer-events: none; will-change: transform;
  font-size: clamp(5rem, 17vw, 16rem); font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(127, 227, 184, .16); }

@media (prefers-reduced-motion: reduce) {
  html.fx-intro body::before, html.fx-intro body::after { display: none; }
}