@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#08090e;color:#f5f2ee;--pointer-x:0deg;--pointer-y:0deg;--light-x:50%;--light-y:50%}*{box-sizing:border-box}body{margin:0;min-height:100svh;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid #d9bcff;outline-offset:9px}.atmosphere{position:fixed;inset:0;background:radial-gradient(ellipse at 52% 48%,#25204455,transparent 55%),radial-gradient(ellipse at var(--light-x) var(--light-y),#17295235,transparent 50%);pointer-events:none}.grain{position:fixed;inset:0;z-index:5;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:35px 48px}.signature{font-size:23px;font-weight:700;letter-spacing:-1.3px}.signature span{font-weight:400;color:#999aa8}.occupation{font:9px/1.9 monospace;letter-spacing:.15em;text-align:right;color:#bebec7}.occupation span{color:#777888}main{min-height:100svh;display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden}.artwork{position:absolute;inset:0;display:grid;place-items:center;z-index:-1;pointer-events:none}.halo{width:min(86vw,1000px);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse,#51316b00 32%,#7c3ce814 50%,#547bfa0c 58%,transparent 72%);filter:blur(25px);animation:breathe 9s ease-in-out infinite}.sculpture{position:absolute;width:min(77vw,850px);aspect-ratio:1;perspective:1400px;transform:rotateX(var(--pointer-y)) rotateY(var(--pointer-x));transition:transform 1.5s cubic-bezier(.2,.7,.3,1)}.orbit{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(26deg) rotateY(-19deg) rotateZ(-25deg);animation:precess 28s ease-in-out infinite alternate}.filament{position:absolute;inset:calc(4% + var(--i)*.46%);border-radius:42% 58% 53% 47% / 48% 44% 56% 52%;border:1px solid transparent;background:conic-gradient(from var(--rotation),#93baff00 0deg,#7895ff 45deg,#cabaff 83deg,#be70ff 130deg,#7654dc55 185deg,#ffb37b 240deg,#feaaef 280deg,#93baff00 345deg) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;transform:rotateZ(calc(var(--i)*2.8deg)) rotateX(calc(var(--i)*.65deg)) translateZ(calc(var(--i)*2px));box-shadow:0 0 12px #9673ee12;animation:flow 16s linear infinite;animation-delay:calc(var(--i)*-.17s);opacity:calc(.95 - var(--i)*.009)}.filament:nth-child(4n){border-width:2px;filter:drop-shadow(0 0 5px #b491ff66)}.center-shadow{position:absolute;width:min(39vw,440px);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse,#08090ed9 25%,#08090e80 48%,transparent 71%);filter:blur(20px)}.invitation{position:relative;z-index:2;text-align:center;padding:110px 22px;animation:arrive 1.3s ease-out both}.eyebrow{font:9px/1.6 monospace;letter-spacing:.2em;color:#c2b8d2;margin:0 0 30px;display:flex;align-items:center;justify-content:center;gap:10px}.eyebrow>span{height:5px;width:5px;border-radius:50%;background:#d6baff;box-shadow:0 0 12px #c695ff}h1{font-size:clamp(75px,10vw,145px);letter-spacing:-.075em;line-height:.86;font-weight:500;margin:0;text-shadow:0 5px 50px #08090e99}h1 a{display:block}h1 .second-line{display:block;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.08em;margin-top:8px}.arrow{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:.58em;font-style:normal;font-weight:300;vertical-align:12%;margin-left:18px;color:#c2aff0;transition:transform .5s,color .5s}h1 a:hover .arrow{transform:translate(8px,-8px);color:#fff}h1 a:hover{color:#fff}.email{font-size:12px;letter-spacing:.035em;display:inline-flex;gap:28px;align-items:center;color:#d0cbd6;margin-top:36px;padding:12px 0;border-bottom:1px solid #aaa0b24d;transition:border-color .3s}.email:hover{border-color:#eee}.email span{color:#a897c4}footer{position:absolute;bottom:0;left:0;right:0;padding:30px 48px;display:flex;justify-content:space-between;align-items:center;gap:20px;font:8px/1.5 monospace;letter-spacing:.14em;color:#82818f;z-index:10}.motion-toggle{display:flex;gap:10px;align-items:center;color:#a29bad;background:transparent;border:1px solid #aaa0b225;border-radius:30px;padding:10px 14px;font:8px monospace;letter-spacing:.08em;cursor:pointer;transition:background .3s}.motion-toggle:hover{background:#ffffff0b}.pause-icon{font:12px Arial,sans-serif}.is-paused .orbit,.is-paused .filament,.is-paused .halo{animation-play-state:paused}@keyframes flow{to{--rotation:360deg}}@keyframes precess{0%{transform:rotateX(26deg) rotateY(-19deg) rotateZ(-25deg)}50%{transform:rotateX(-12deg) rotateY(22deg) rotateZ(4deg)}100%{transform:rotateX(30deg) rotateY(12deg) rotateZ(35deg)}}@keyframes breathe{50%{transform:scale(1.15);opacity:.6}}@keyframes arrive{from{opacity:0;transform:translateY(20px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@media(min-width:1600px){.sculpture{width:min(67vw,1050px)}}@media(max-width:600px){header{padding:25px 24px}.signature{font-size:21px}.occupation{font-size:7px}.sculpture{width:135vw;max-width:650px}.halo{width:145vw}.center-shadow{width:70vw}.eyebrow{font-size:7px;letter-spacing:.14em;margin-bottom:25px}h1{font-size:clamp(68px,16vw,100px)}.email{font-size:11px;margin-top:30px}footer{padding:22px 24px;font-size:7px;flex-wrap:wrap}.motion-label{display:none}.motion-toggle{padding:8px 12px}.invitation{padding-top:120px;padding-bottom:120px}}@media(max-height:620px) and (min-width:601px){main{min-height:650px}footer{position:relative;margin-top:-65px}h1{font-size:90px}.sculpture{width:600px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.sculpture{transform:none}.motion-toggle{display:none}}

/* Variante argent : mouvement porté par les transformations compositées. */
:root{background:#0b0d0f;color:#f3f3ef}
.atmosphere{background:radial-gradient(ellipse at 50% 50%,#30383b55,transparent 62%)}
.grain{display:none}
.halo{background:radial-gradient(ellipse,transparent 35%,#d7e4e608 53%,transparent 70%);filter:none;animation:none}
.orbit{will-change:transform;animation:precess 32s ease-in-out infinite alternate}
.filament{inset:calc(4% + var(--i)*.78%);background:conic-gradient(from calc(var(--i)*12deg),transparent,#737f83 45deg,#f0f3ef 95deg,#9daaad88 150deg,#434c5055 195deg,#dedfd4 260deg,#9ba9ad 300deg,transparent) border-box;animation:none;filter:none;box-shadow:none;transform:rotateZ(calc(var(--i)*4.7deg)) rotateX(calc(var(--i)*1deg)) translateZ(calc(var(--i)*3px))}
.filament:nth-child(4n){border-width:1.5px;filter:none}
.center-shadow{filter:none;background:radial-gradient(ellipse,#0b0d0fd9 25%,#0b0d0f80 48%,transparent 71%)}
.invitation{animation:none}
.eyebrow{color:#aeb7b8}.eyebrow>span{background:#e2e8df;box-shadow:0 0 9px #d8e2df44}
.arrow,.email span{color:#aebcbd}.email{color:#d5dad6}.motion-toggle{color:#a7afaf}.signature span{color:#949d9f}
h1{text-shadow:none}a:focus-visible,button:focus-visible{outline-color:#e3e9e4}

.orbit{animation:none;will-change:auto}.sculpture{transition:transform .18s ease-out;will-change:transform}

/* Trou noir stylisé : disque d’accrétion et anneau de lumière chaude. */
:root{background:#080807;color:#fff5e8}.atmosphere{background:radial-gradient(ellipse at 50% 50%,#63341425,transparent 65%)}
.halo{background:radial-gradient(ellipse,transparent 30%,#ff7a1512 46%,transparent 68%)}
.black-hole{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.event-horizon{position:absolute;width:54%;height:54%;border-radius:50%;background:#020202;box-shadow:0 0 22px 5px #000,inset 0 0 20px #000;z-index:2}
.photon-ring{position:absolute;width:56%;height:56%;border-radius:50%;border:3px solid #fff3c9;box-shadow:0 0 5px 2px #fff7df,0 0 14px 5px #ffc16e,0 0 35px 9px #e9662270,inset 0 0 12px #ffbd77;z-index:3}
.accretion{position:absolute;width:108%;height:108%;border-radius:50%;transform:rotateZ(-18deg) rotateX(73deg);background:radial-gradient(ellipse,transparent 32%,#ffefc9 34%,#ffc472 36%,#9c3308 37%,#ffb04b 38%,#d46020 40%,#ffe0a0 41%,#b5401166 43%,#ff8c3a 44%,#6c220844 48%,#e7652244 51%,transparent 57%);box-shadow:0 0 30px #ff8b1812;z-index:4}
.orbit{transform:rotateX(14deg) rotateY(-12deg) rotateZ(-18deg);z-index:1}
.filament{background:conic-gradient(from calc(var(--i)*12deg),transparent,#a9461c 45deg,#ffdda2 95deg,#eea25b88 150deg,#66331d55 195deg,#fff3cd 260deg,#d97e39 300deg,transparent) border-box}
.center-shadow{background:none}.eyebrow{color:#bfb3a5}.eyebrow>span{background:#ffd39e;box-shadow:0 0 9px #fca34e66}.arrow,.email span{color:#e7bc89}.email{color:#e4d5c4}.signature span{color:#a59a8c}h1{text-shadow:0 2px 18px #000,0 0 45px #000}.invitation{z-index:5}.email,.eyebrow{text-shadow:0 1px 8px #000}

/* Composition plane pour éviter les intersections entre surfaces 3D. */
.black-hole{transform-style:flat;isolation:isolate;z-index:2}
.accretion{width:108%;height:32%;transform:rotate(-18deg);background:radial-gradient(ellipse,transparent 32%,#ffefc9 34%,#ffc472 36%,#9c3308 37%,#ffb04b 38%,#d46020 40%,#ffe0a0 41%,#b5401166 43%,#ff8c3a 44%,#6c220844 48%,#e7652244 51%,transparent 57%);box-shadow:none}
.orbit{position:absolute;inset:0;transform-style:flat;transform:rotate(-18deg);z-index:1}
.filament{transform:rotate(calc(var(--i)*4.7deg));backface-visibility:hidden}

/* Profondeurs distinctes, avec chaque surface lumineuse isolée. */
.sculpture{transform:none;transition:none;perspective:1000px}
.black-hole{transform:rotateY(var(--pointer-x)) rotateX(var(--pointer-y));transition:transform .22s ease-out;will-change:transform}
.orbit{transform:rotate(-18deg) rotateY(calc(var(--pointer-x) * -.65)) rotateX(calc(var(--pointer-y) * -.65));transition:transform .3s ease-out;will-change:transform}
.accretion{transform:translate(var(--disk-x,0px),var(--disk-y,0px)) rotate(calc(-18deg + var(--disk-roll,0deg))) scaleY(var(--disk-scale,1));transition:transform .18s ease-out;transform-origin:50% 50%}
.photon-ring{transform:translate(var(--ring-x,0px),var(--ring-y,0px));transition:transform .2s ease-out}
@media(prefers-reduced-motion:reduce){.black-hole,.orbit,.accretion,.photon-ring{transform:none;will-change:auto}}