/* Galerie WebGL des réalisations — écrans courbes, reflets, loupe et vue projet. */
.gallery { --accent: #ff7a1a; --auto: 6000ms; position: relative; height: 100vh; height: 100svh; min-height: 720px; overflow: hidden; isolation: isolate; background: #020c13; }

/* Atmosphere behind the 3D scene */
.g-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(80% 60% at 50% -15%, rgba(46, 108, 150, .42), transparent 70%), linear-gradient(180deg, #051a27 0%, #020c13 72%); }
.g-beam { position: absolute; z-index: -1; left: 50%; top: -20%; width: 72vw; height: 96vh; translate: -50% 0; pointer-events: none; background: conic-gradient(from 180deg at 50% 0%, transparent 163deg, color-mix(in srgb, var(--accent) 24%, transparent) 180deg, transparent 197deg); filter: blur(28px); opacity: .75; transition: background 1.2s ease; animation: g-sway 10s ease-in-out infinite; }
.g-ghost { position: absolute; z-index: -1; left: 50%; top: 40%; translate: -50% -50%; white-space: nowrap; pointer-events: none; font-size: clamp(130px, 18vw, 300px); font-weight: 700; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .06); }
.g-ghost span { display: inline-block; animation: g-ghost 1.4s var(--ease) both; }
.g-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.g-canvas.grabbing { cursor: grabbing; }
.gallery.has-cursor .g-canvas { cursor: none; }
.gallery.lensing .g-canvas { cursor: none; }
.grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(1, 8, 13, .75)); }

/* Overlay interface */
.g-ui { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: auto 1fr auto; padding: 40px 56px 36px; pointer-events: none; transition: opacity .6s, translate .9s var(--ease); }
.g-ui > * > * { pointer-events: auto; }
.gallery.is-case .g-ui { opacity: 0; translate: 0 14px; }
.gallery.is-case .g-ui > * > * { pointer-events: none; }
.g-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.g-top .title { margin-top: 16px; font-size: clamp(36px, 3.4vw, 54px); }
.meter { display: flex; align-items: center; gap: 18px; }
.g-count { font: 500 13px 'Geist Mono', monospace; color: var(--mist); white-space: nowrap; }
.g-count b { display: inline-block; min-width: 64px; margin-right: 4px; font: italic 400 56px/1 'Instrument Serif', serif; color: #fff; }
.g-pause { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .04); backdrop-filter: blur(10px); transition: background .3s, color .3s; }
.g-pause:hover { background: #fff; color: var(--navy); }
.g-pause svg { width: 15px; height: 15px; }

.g-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
.g-details { max-width: 640px; }
.g-kind { display: flex; align-items: center; gap: 10px; font: 500 12px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.g-kind i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.g-name { margin-top: 10px; font-size: clamp(48px, 5vw, 86px); font-weight: 600; line-height: .95; letter-spacing: -.055em; }
.g-name .w { display: inline-block; overflow: hidden; padding-bottom: .1em; vertical-align: top; }
.g-name .w span { display: inline-block; background: linear-gradient(180deg, #fff 35%, #a9c2d2); -webkit-background-clip: text; background-clip: text; color: transparent; animation: g-letter .9s var(--ease) both; animation-delay: calc(var(--i) * 28ms); }
.g-details .chips { margin-top: 16px; }
.g-details .chips span { animation: g-fade .7s var(--ease) both; animation-delay: calc(220ms + var(--i) * 50ms); }
.g-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; animation: g-fade .7s var(--ease) .35s both; }
.btn.is-off { opacity: .55; cursor: default; }

.g-index { display: flex; gap: 4px; padding: 6px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(6, 28, 41, .55); backdrop-filter: blur(14px); }
.g-index button { position: relative; display: flex; align-items: center; height: 42px; padding: 0 13px; overflow: hidden; border-radius: 999px; color: var(--mist); font: 500 12px 'Geist Mono', monospace; transition: background .4s, color .4s; }
.g-index button:hover { color: #fff; }
.g-index button span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font: 600 13.5px 'Geist', system-ui, sans-serif; letter-spacing: -.01em; transition: max-width .7s var(--ease), opacity .4s, margin .7s var(--ease); }
.g-index button.on { background: rgba(255, 255, 255, .09); color: #fff; }
.g-index button.on b { color: var(--c); }
.g-index button.on span { max-width: 190px; margin-left: 10px; opacity: 1; }
.g-index i { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; }
.gallery.run .g-index .on i { animation: g-fill var(--auto) linear forwards; }
.gallery.paused .g-index .on i { animation-play-state: paused; }

/* Project view */
.g-case { position: absolute; z-index: 4; right: 56px; top: 50%; width: min(400px, 30vw); display: grid; gap: 18px; translate: 30px -50%; opacity: 0; pointer-events: none; transition: opacity .45s, translate .9s var(--ease); }
.gallery.is-case .g-case { opacity: 1; translate: 0 -50%; pointer-events: auto; transition-delay: .3s; }
.g-case .g-kind { font-size: 11.5px; }
.g-case h3 { font-size: clamp(42px, 3.8vw, 64px); font-weight: 600; line-height: .95; letter-spacing: -.05em; background: linear-gradient(180deg, #fff 35%, #a9c2d2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-label { margin-top: 6px; font: 500 11px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.g-mods { list-style: none; }
.g-mods li { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.g-mods li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.g-mods b { font: 500 11px 'Geist Mono', monospace; color: var(--accent); }
.gallery.is-case .g-case > * { animation: g-fade .7s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * 60ms); }
.gallery.is-case .g-mods li { animation: g-fade .7s var(--ease) both; animation-delay: calc(.45s + var(--i) * 70ms); }
.g-hint { display: flex; align-items: center; gap: 10px; font: 500 11px 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.g-hint::before { content: ''; width: 18px; height: 18px; border: 1.5px solid var(--gold); border-radius: 50%; box-shadow: 0 0 12px rgba(253, 173, 45, .5); }
.g-nav { display: flex; gap: 8px; }
.g-nav button { height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; font-size: 13.5px; font-weight: 600; transition: background .3s, color .3s; }
.g-nav button:hover { background: #fff; color: var(--navy); }
.g-close { position: absolute; z-index: 4; right: 44px; top: 36px; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(3, 17, 26, .5); backdrop-filter: blur(10px); font-size: 24px; opacity: 0; pointer-events: none; scale: .8; transition: opacity .4s, scale .6s var(--ease), background .3s, color .3s, rotate .6s var(--ease); }
.gallery.is-case .g-close { opacity: 1; pointer-events: auto; scale: 1; transition-delay: .4s, .4s, 0s, 0s, 0s; }
.g-close:hover { background: var(--gold); color: var(--navy); rotate: 90deg; }
.g-back { position: absolute; z-index: 4; left: 56px; top: 44px; display: flex; align-items: center; gap: 10px; font: 500 11px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); opacity: 0; pointer-events: none; transition: opacity .4s; }
.gallery.is-case .g-back { opacity: 1; transition-delay: .5s; }
.g-back b { color: #fff; font-weight: 500; }

/* Cursor that follows the pointer over the scene */
.g-cursor { position: fixed; left: 0; top: 0; z-index: 50; width: 96px; height: 96px; margin: -48px 0 0 -48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(255, 255, 255, .07); backdrop-filter: blur(8px); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; pointer-events: none; opacity: 0; scale: .3; transition: opacity .3s, scale .5s var(--ease), background .3s, color .3s, border-color .3s; }
.g-cursor.on { opacity: 1; scale: 1; }
.g-cursor.hot { border-color: transparent; background: var(--gold); color: var(--navy); scale: 1.08; }
.g-cursor.drag { scale: .72; }

/* Without WebGL: a plain image of the current project */
.g-fallback { position: absolute; left: 50%; top: 46%; width: min(60vw, 900px); translate: -50% -50%; display: none; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; }
.gallery.no-gl .g-fallback { display: block; }

@keyframes g-sway { 50% { transform: rotate(3deg); } }
@keyframes g-letter { from { transform: translateY(110%) rotate(6deg); } }
@keyframes g-fade { from { opacity: 0; transform: translateY(12px); } }
@keyframes g-ghost { from { opacity: 0; filter: blur(14px); transform: translateY(30px); } }
@keyframes g-fill { to { transform: scaleX(1); } }

@media (max-width: 760px) {
  .gallery { min-height: 660px; }
  .g-ui { padding: 26px 16px 20px; }
  .g-top { gap: 12px; }
  .g-top .title { font-size: 32px; }
  .g-count { display: none; }
  .g-pause { width: 46px; height: 46px; }
  .g-ghost { top: 36%; font-size: 120px; }
  .g-beam { width: 150vw; }
  .g-bottom { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .g-name { font-size: 44px; }
  .g-acts { margin-top: 16px; }
  .g-index { justify-content: space-between; }
  .g-index button { flex: 1; justify-content: center; height: 38px; padding: 0; }
  .g-index button.on span { max-width: 0; margin: 0; opacity: 0; }
  .g-index i { left: 10px; right: 10px; bottom: 5px; }
  .g-case { left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 56%; overflow-y: auto; gap: 12px; padding: 20px; translate: 0 30px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; background: rgba(3, 17, 26, .82); backdrop-filter: blur(18px); }
  .gallery.is-case .g-case { translate: 0 0; }
  .g-case h3 { font-size: 38px; }
  .g-mods li { padding: 10px 0; font-size: 15.5px; }
  .g-close { right: 16px; top: 18px; width: 46px; height: 46px; }
  .g-back { left: 16px; top: 32px; }
  .g-fallback { width: 88vw; top: 40%; }
}
@media (prefers-reduced-motion: reduce) { .gallery *, .gallery *::before, .gallery *::after { animation: none !important; transition-duration: .01ms !important; } }