/* ===== Yaruki Studio — couche expérience (Acte I/II/III) ===== */

/* grain */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* custom cursor */
.cursor{position:fixed;top:0;left:0;z-index:90;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(196,164,255,.6);border-radius:50%;mix-blend-mode:screen;
  transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s;will-change:transform}
.cursor span{position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--violet2)}
.cursor.hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(168,85,247,.14);border-color:transparent}
.cursor.hover span{opacity:0}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button{cursor:none}
@media(hover:none){.cursor{display:none}body.has-cursor{cursor:auto}}

/* preloader */
#pre{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center}
#pre.done{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
#preCanvas{position:absolute;inset:0;width:100%;height:100%}
.pre-meta{position:absolute;left:0;right:0;bottom:8vh;display:flex;flex-direction:column;align-items:center;gap:.4rem;pointer-events:none}
.pre-meta .pc{font-family:var(--fd);font-size:1.1rem;color:var(--violet2);letter-spacing:.1em}
.pre-meta .pl{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--faint)}

/* ===== HERO experience ===== */
.hero-x{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:center}
#liquid,#particles{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#particles{z-index:1}
.hero-x-grade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(95deg,rgba(7,5,12,.82),rgba(7,5,12,.42) 46%,transparent 76%),radial-gradient(120% 90% at 50% 40%,transparent,rgba(7,5,12,.5) 80%,var(--bg) 100%),linear-gradient(180deg,rgba(7,5,12,.55),transparent 22%,transparent 66%,var(--bg))}
.hero-x-in{position:relative;z-index:3;width:100%}
.hero-x .pill{display:inline-flex;align-items:center;gap:.6rem;background:var(--glass);border:1px solid var(--line);border-radius:100px;padding:.5em 1.1em;font-size:.78rem;color:var(--mut);backdrop-filter:blur(10px);margin-bottom:1.8rem}
.hero-x .pill b{color:var(--violet2)}
.hero-title{font-family:var(--fd);font-weight:600;font-size:clamp(2.9rem,8.4vw,7rem);line-height:.98;letter-spacing:-.03em;margin:0 0 0}
.hero-title .ln{display:block;overflow:hidden}
.hero-title .w{display:inline-block;will-change:transform}
.hero-x p{font-size:clamp(1.05rem,2.1vw,1.3rem);color:#E9E4F5;max-width:46ch;margin:1.6rem 0 2.4rem;font-weight:400;text-shadow:0 1px 18px rgba(6,4,12,.7)}
.hero-title{text-shadow:0 3px 34px rgba(5,3,10,.55)}
.hero-x .pill{text-shadow:none}
.hero-x .cta{display:flex;gap:1rem;flex-wrap:wrap}
.scrollcue{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.scrollcue span{width:1px;height:38px;background:linear-gradient(var(--violet2),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* reveal (JS driven) */
.reveal{opacity:0;transform:translateY(30px)}

/* ===== Acte II — galerie WebGL ===== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:var(--maxw);margin:clamp(2rem,5vh,3.5rem) auto 0;padding-inline:clamp(20px,5vw,40px)}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}}@media(max-width:560px){.gallery{grid-template-columns:1fr}}
.g-item{position:relative;margin:0;aspect-ratio:16/11;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--panel);cursor:none}
.g-item canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.g-item.fallback{background-size:cover;background-position:top}
.g-item figcaption{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.1rem 1.2rem;background:linear-gradient(0deg,rgba(8,6,14,.92),transparent);display:flex;justify-content:space-between;align-items:flex-end;gap:.6rem;pointer-events:none}
.g-item figcaption b{font-family:var(--fd);font-weight:500;font-size:1.05rem}
.g-item figcaption span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet2)}

/* ===== Acte III — scène 3D pinned ===== */
.act3{position:relative}
#scene3d{position:sticky;top:0;width:100%;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none;opacity:.9}
.act3::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(95deg,rgba(8,6,14,.72),rgba(8,6,14,.3) 52%,transparent 78%)}
.act3 .sec{position:relative;z-index:2}
.act3 .head h2,.act3 .head .eyebrow,.act3 .mouaid h2,.act3 .mouaid p{text-shadow:0 2px 22px rgba(6,4,12,.75)}
.act3 #mouaid .mouaid{backdrop-filter:blur(8px);background:linear-gradient(120deg,rgba(30,16,50,.72),rgba(20,10,34,.55))}

/* le CTA et le footer restent opaques : la scène 3D de l'acte 3 ne doit jamais transparaître au travers */
.ctaband{position:relative;z-index:5;background:var(--bg)}
body > footer{position:relative;z-index:5}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  #pre{display:none}
  .reveal{opacity:1;transform:none}
  #liquid,#particles,#scene3d{display:none}
  .hero-x{background:url(img/gen_liquid.jpg) center/cover}
  .scrollcue span{animation:none}
  .cursor{display:none}body.has-cursor{cursor:auto}
}