/* Studio Galyos — effets (transitions, curseur, flèches du menu, déformation) */

/* ── rideau de transition ── */
#gx-pt,html.gx-in::before{position:fixed; inset:0; z-index:99999; background:#2b1d19; pointer-events:none}
#gx-pt{clip-path:inset(100% 0 0 0); transition:clip-path .74s cubic-bezier(.76,0,.24,1)}
html.gx-out #gx-pt{clip-path:inset(0); pointer-events:auto}
html.gx-in::before{content:""; clip-path:inset(0); transition:clip-path 1.05s cubic-bezier(.76,0,.24,1)}
html.gx-in.gx-reveal::before{clip-path:inset(0 0 100% 0)}

/* ── clé 3D : tourne sur elle-même (lacet) entre deux pages ── */
#gx-key{position:fixed; left:50%; top:50%; width:0; height:0; z-index:100000; pointer-events:none; opacity:0; perspective:620px; perspective-origin:50% 45%; transition:opacity .25s ease}
html.gx-in #gx-key,html.gx-out #gx-key{opacity:1}
html.gx-out #gx-key{transition:opacity .3s ease .32s}
html.gx-reveal #gx-key{opacity:0; transition:opacity .4s ease}
#gx-key .gx-halo{position:absolute; left:-110px; top:-110px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(206,192,150,.26) 0%, rgba(206,192,150,.08) 42%, transparent 68%); animation:gxHalo 2.8s ease-in-out infinite}
#gx-key .gx-spin{position:absolute; left:-46px; top:-46px; width:92px; height:92px; transform-style:preserve-3d; animation:gxYaw 2.8s cubic-bezier(.65,0,.35,1) infinite}
#gx-key .gx-spin img{position:absolute; left:0; top:0; width:92px; height:92px; display:block; backface-visibility:visible}
@keyframes gxYaw{0%{transform:rotateX(-10deg) rotateY(0deg)} 100%{transform:rotateX(-10deg) rotateY(360deg)}}
@keyframes gxHalo{0%,100%{opacity:.55; transform:scale(.92)} 50%{opacity:1; transform:scale(1.08)}}

/* ── curseur ── */
@media (hover:hover) and (pointer:fine){
  html.gx,html.gx *{cursor:none !important}
  #cursor-wrap{display:none !important}
}
#gx-cur{display:contents}
/* curseur : croix seule au repos ; phrase qui tourne autour sur les éléments essentiels */
.gx-ring,.gx-plus{position:fixed; left:0; top:0; width:0; height:0; z-index:99990; pointer-events:none; mix-blend-mode:difference; visibility:hidden}
#gx-cur.on .gx-ring,#gx-cur.on .gx-plus{visibility:visible}
.gx-plus{--r:0deg}
.gx-plus b{position:absolute; left:-7px; top:-.5px; width:14px; height:1px; background:#fff; transform:rotate(var(--r)); transition:transform .75s cubic-bezier(.16,1,.3,1), width .4s, height .4s, left .4s, top .4s}
.gx-plus b:last-child{left:-.5px; top:-7px; width:1px; height:14px}
#gx-cur.hov .gx-plus b{left:-11px; width:22px} #gx-cur.hov .gx-plus b:last-child{left:-.5px; top:-11px; width:1px; height:22px}
.gx-txt{position:absolute; left:-60px; top:-60px; width:120px; height:120px; overflow:visible; opacity:0; transform:scale(.45); transition:opacity .4s, transform .7s cubic-bezier(.16,1,.3,1); animation:gxSpin 16s linear infinite}
.gx-txt text{font-family:'Aboreto','Skylar Sans',serif; font-size:9.4px; letter-spacing:.1em; fill:#fff}
@keyframes gxSpin{to{rotate:360deg}}
#gx-cur.lab .gx-txt{opacity:1; transform:scale(1)}
/* anneau solaire (laiton) : sur « Des créations visuelles en 360° », la boucle de texte grandit et tourne, entourée d'une couronne de rayons laiton aux reflets doux */
.gx-ring::before,.gx-ring::after{content:""; position:absolute; border-radius:50%; opacity:0; pointer-events:none; transition:opacity .6s ease, transform 1s cubic-bezier(.16,1,.3,1)}
.gx-ring::before{left:-150px; top:-150px; width:300px; height:300px; transform:scale(.4);
  background:conic-gradient(from 20deg, #7a6a3c, #d4c79f, #a28c52, #e3d8b8, #8c7a45, #e8cf93, #7a6a3c);
  -webkit-mask:radial-gradient(circle, transparent 64%, #000 65.5%, #000 70%, transparent 71.5%), repeating-conic-gradient(#000 0 .6deg, transparent .6deg 5deg);
  -webkit-mask-composite:source-in; mask:radial-gradient(circle, transparent 64%, #000 65.5%, #000 70%, transparent 71.5%) intersect, repeating-conic-gradient(#000 0 .6deg, transparent .6deg 5deg)}
.gx-ring::after{left:-118px; top:-118px; width:236px; height:236px; transform:scale(.4); border:1px solid rgba(180,160,104,.8);
  background:radial-gradient(circle, transparent 58%, rgba(206,192,150,.10) 78%, rgba(206,192,150,.18) 100%);
  box-shadow:0 0 28px rgba(184,166,110,.16), inset 0 0 22px rgba(206,192,150,.08)}
#gx-cur.sun .gx-ring{mix-blend-mode:normal}
#gx-cur.sun .gx-txt{transform:scale(2.1)}
#gx-cur.sun .gx-txt text{fill:url(#gxBrass)}
#gx-cur.sun .gx-ring::before{opacity:.6; transform:scale(1); animation:gxSun 22s linear infinite reverse}
#gx-cur.sun .gx-ring::after{opacity:.55; transform:scale(1)}
@keyframes gxSun{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){#gx-cur.sun .gx-ring::before{animation:none}}
.gx-warp{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none}

/* ── menu : numéros et petites flèches, discrets ── */
#menu-ov .mn-list{counter-reset:mn}
#menu-ov .mn-item{counter-increment:mn}
#menu-ov .mn-item>a::after{content:""; display:inline-block; width:.27em; height:.27em; margin-left:.06em; vertical-align:top; position:relative; top:.04em; background:currentColor; opacity:0; transform:translate(-6px,6px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M2.6 1H9v6.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M2.6 1H9v6.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity .4s, transform .6s cubic-bezier(.16,1,.3,1)}
#menu-ov .mn-item.is-active>a::after,#menu-ov .mn-item>a:hover::after{opacity:.95; transform:none}
#menu-ov .mn-sub a{position:relative; transition:color .3s}
#menu-ov .mn-sub a::before{display:none}
#menu-ov .mn-sub a::after{content:""; display:inline-block; width:.85em; height:.85em; margin-left:.7em; vertical-align:.12em; background:currentColor; opacity:0; transform:translate(-4px,4px); border:0; position:static;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M2.6 1H9v6.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M2.6 1H9v6.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity .35s, transform .5s cubic-bezier(.16,1,.3,1)}
#menu-ov .mn-sub a:hover{padding-left:0}
#menu-ov .mn-sub a:hover::after{opacity:.95; transform:none}
/* ── apparition du menu : éléments en cascade ── */
#menu-ov .mn-item{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1)}
#menu-ov.is-open .mn-item{opacity:1; transform:none}
#menu-ov.is-open .mn-item:nth-child(1){transition-delay:.12s} #menu-ov.is-open .mn-item:nth-child(2){transition-delay:.18s} #menu-ov.is-open .mn-item:nth-child(3){transition-delay:.24s}
#menu-ov.is-open .mn-item:nth-child(4){transition-delay:.30s} #menu-ov.is-open .mn-item:nth-child(5){transition-delay:.36s} #menu-ov.is-open .mn-item:nth-child(6){transition-delay:.42s} #menu-ov.is-open .mn-item:nth-child(7){transition-delay:.48s}

/* ── ouverture du héros : la photo s'ouvre comme une fenêtre ── */
@keyframes gxOpen{from{clip-path:inset(9% 9% 9% 9%)} to{clip-path:inset(0)}}
.hero:not(.hero--p) .hero-ph{animation:gxOpen 1.7s cubic-bezier(.76,0,.24,1) both}
@media (prefers-reduced-motion:reduce){ #gx-pt,html.gx-in::before,#gx-key{display:none} .hero .hero-ph{animation:none} #menu-ov .mn-item{opacity:1; transform:none} }

/* ── logo de retour à l'accueil dans le menu ── */
.mn-home{position:absolute; z-index:6; top:clamp(14px,2vw,28px); left:clamp(20px,3vw,46px); display:flex; align-items:center; gap:14px; text-decoration:none; color:#f6e8dc}
.mn-home img{width:clamp(40px,3.6vw,56px); height:auto; display:block}
.mn-home span{font-family:'Aboreto','Skylar Sans',serif; font-size:.64rem; letter-spacing:.4em; text-transform:uppercase; opacity:.8; transition:opacity .3s, letter-spacing .5s cubic-bezier(.16,1,.3,1)}
.mn-home:hover span{opacity:1; letter-spacing:.55em}

/* tactile / mobile : aucun curseur personnalisé */
@media (hover:none),(pointer:coarse){#cursor-wrap,#gx-cur{display:none !important}}

/* caché pendant l'intro de chargement de l'accueil */
body:has(#loading:not([style*="display: none"])) .gx-ring,body:has(#loading:not([style*="display: none"])) .gx-plus{visibility:hidden !important}

/* curseur négatif chaud : inverse la luminosité en gardant les teintes (plus de bleu) */
.gx-neg{position:fixed; left:0; top:0; width:0; height:0; z-index:99989; pointer-events:none; visibility:hidden}
#gx-cur.on .gx-neg{visibility:visible}
.gx-neg::before{content:""; position:absolute; left:-46px; top:-46px; width:92px; height:92px; border-radius:50%; background:rgba(255,236,205,.04);
  -webkit-backdrop-filter:invert(1) hue-rotate(180deg) sepia(.35) saturate(.9) brightness(.98); backdrop-filter:invert(1) hue-rotate(180deg) sepia(.35) saturate(.9) brightness(.98);
  transform:scale(.42); transition:transform .55s cubic-bezier(.16,1,.3,1)}
#gx-cur.neg .gx-neg::before{transform:scale(1)}
#gx-cur.neg.hov .gx-neg::before{transform:scale(1.35)}
#gx-cur.down .gx-neg::before{transform:scale(.3)}
/* texte circulaire en laiton partout */
#gx-cur.lab .gx-ring{mix-blend-mode:normal}
#gx-cur.lab .gx-txt text{fill:url(#gxBrass); font-weight:700; paint-order:stroke; stroke:rgba(30,18,14,.35); stroke-width:.6px}