/* Rencontre cosmique : approche, suspension, retour au portfolio. */
.qu-encounter { position:fixed; inset:0; z-index:10000; overflow:hidden; isolation:isolate; background:#03070b; color:#e9e4d7; font-family:'DM Sans',sans-serif; animation:qu-reveal .65s ease both; transition:opacity .85s ease; }
.qu-encounter *, .qu-encounter *::before { box-sizing:border-box; }
.qu-stars { position:absolute; inset:0; width:100%; height:100%; opacity:.85; }
.qu-nebula { position:absolute; inset:-35%; pointer-events:none; filter:blur(55px); opacity:.65; }
.qu-nebula--blue { background:radial-gradient(ellipse at 32% 45%,#22576b55,transparent 32%),radial-gradient(ellipse at 70% 60%,#28396c44,transparent 40%); animation:qu-cloud-blue 24s ease-in-out infinite alternate; }
.qu-nebula--amber { background:radial-gradient(ellipse at 55% 45%,#80623b30,transparent 25%),radial-gradient(ellipse at 48% 58%,#5b353025,transparent 35%); animation:qu-cloud-amber 19s ease-in-out infinite alternate; }
.qu-orbit { position:absolute; width:min(74vw,80vh); aspect-ratio:1; top:42%; left:50%; border:1px solid #c5b78d16; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 110px #648eaa08,inset 0 0 100px #648eaa08; animation:qu-orbit-in 3s ease both; }
.qu-orbit::before { content:''; position:absolute; inset:9%; border:1px dashed #bcc7cf14; border-radius:50%; animation:qu-orbit-spin 100s linear infinite; }
.qu-horizon { position:absolute; width:160%; height:60%; left:-30%; top:79%; border-radius:50%; border-top:1px solid #a4c5d02b; box-shadow:0 -14px 80px #345b6a20; background:radial-gradient(ellipse at 50% 0,#16263070,transparent 65%); animation:qu-horizon-in 2.8s ease both; }
.qu-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 42%,transparent 22%,#03070b99 80%,#03070b 110%),repeating-linear-gradient(0deg,transparent 0 3px,#0000000b 3px 4px); }
.qu-topline,.qu-bottomline { position:absolute; left:clamp(22px,4vw,64px); right:clamp(22px,4vw,64px); display:flex; align-items:center; justify-content:space-between; gap:20px; z-index:2; }
.qu-topline { top:32px; color:#8a9ba5; font:10px ui-monospace,monospace; letter-spacing:.2em; text-transform:uppercase; }
.qu-signal { display:flex; align-items:center; gap:12px; }
.qu-signal::before { content:''; width:5px; height:5px; border-radius:50%; background:#d2b17a; box-shadow:0 0 12px #d2b17a; animation:qu-signal 2.8s ease-in-out infinite; }
.qu-arrival { position:absolute; inset:0; display:grid; place-items:center; padding-bottom:16vh; pointer-events:none; animation:qu-flight 2.6s cubic-bezier(.2,.65,.3,1) both; }
.qu-parallax { transition:transform 1.8s ease-out; }
.qu-creature { position:relative; width:min(72vw,70vh,840px); height:64vh; transform-origin:50% 36%; animation:qu-hover 6s 2.6s ease-in-out infinite; }
.qu-puppet { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; }
/* Each wing uses the same local texture, clipped and hinged at its root.
   SVG view-box coordinates keep the joints aligned at every viewport size. */
.qu-wing { transform-box:view-box; animation-duration:3.8s; animation-timing-function:cubic-bezier(.45,0,.55,1); animation-iteration-count:infinite; }
.qu-wing--ul { transform-origin:458px 322px; animation-name:qu-wing-left; }
.qu-wing--ur { transform-origin:596px 322px; animation-name:qu-wing-right; }
.qu-wing--ll { transform-origin:471px 450px; animation-name:qu-wing-left; animation-delay:-.38s; }
.qu-wing--lr { transform-origin:583px 450px; animation-name:qu-wing-right; animation-delay:-.38s; }
.qu-caption { position:absolute; left:20px; right:20px; bottom:13%; text-align:center; pointer-events:none; animation:qu-caption-in 3.4s ease both; }
.qu-eyebrow { margin:0 0 14px; color:#a7b3b9; font-size:10px; letter-spacing:.25em; text-transform:uppercase; }
.qu-caption h2 { margin:0; font:400 clamp(34px,4.5vw,64px)/1.15 Georgia,'Times New Roman',serif; letter-spacing:-.045em; color:#ece6d7; }
.qu-caption h2 span { color:#bd9c68; }
.qu-subtitle { margin:14px 0 0; color:#9e998e; font:10px ui-monospace,monospace; letter-spacing:.24em; text-transform:uppercase; }
.qu-subtitle span { margin:0 12px; color:#625d53; }
.qu-bottomline { bottom:28px; color:#73808a; }
.qu-credit { font-size:10px; letter-spacing:.05em; }
.qu-dismiss { display:flex; align-items:center; gap:13px; padding:10px 0 10px 10px; color:#b2babd; border:0; background:transparent; font:11px 'DM Sans',sans-serif; cursor:pointer; transition:color .2s; }
.qu-dismiss:hover { color:#f2dfb9; }
.qu-dismiss:focus-visible { outline:1px solid #bea477; outline-offset:6px; border-radius:2px; }
.qu-escape { padding:4px 5px; border:1px solid #b2babd40; border-radius:3px; font:9px ui-monospace,monospace; }
.qu-progress { position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,#425a65,#c1a16d); transform-origin:left; animation:qu-progress 11s linear both; opacity:.55; }
.qu-encounter.qu-leaving { animation:none; opacity:0; pointer-events:none; }
@keyframes qu-reveal { from { opacity:0; } to { opacity:1; } }
/* A direct entrance from below; the image stays facing the viewer. */
@keyframes qu-flight {
  0% { opacity:0; transform:translateY(110vh); }
  12% { opacity:1; }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes qu-wing-left {
  0%,100% { transform:rotate(-2deg) skewY(-2deg) scaleX(.98); filter:brightness(1); }
  50% { transform:rotate(5deg) skewY(7deg) scaleX(.62); filter:brightness(.78); }
}
@keyframes qu-wing-right {
  0%,100% { transform:rotate(2deg) skewY(2deg) scaleX(.98); filter:brightness(1); }
  50% { transform:rotate(-5deg) skewY(-7deg) scaleX(.62); filter:brightness(.78); }
}
@keyframes qu-hover {
  0%,100% { transform:translateY(-5px); }
  50% { transform:translateY(5px); }
}
@keyframes qu-cloud-blue { from { transform:translate(-4%,3%) rotate(-17deg) scale(1); } to { transform:translate(7%,-4%) rotate(9deg) scale(1.18); } }
@keyframes qu-cloud-amber { from { transform:translate(7%,-5%) rotate(10deg); } to { transform:translate(-6%,6%) rotate(-15deg) scale(1.2); } }
@keyframes qu-orbit-in { 0%,15% { opacity:0; transform:translate(-50%,-50%) scale(.55); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes qu-orbit-spin { to { transform:rotate(360deg); } }
@keyframes qu-horizon-in { from { opacity:0; transform:translateY(10vh); } to { opacity:1; transform:translateY(0); } }
@keyframes qu-caption-in { 0%,65% { opacity:0; transform:translateY(12px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes qu-signal { 50% { opacity:.35; } }
@keyframes qu-progress { to { transform:scaleX(0); } }
@media(max-width:600px) { .qu-topline { top:24px; font-size:8px; letter-spacing:.1em; } .qu-creature { width:94vw; height:58vh; } .qu-arrival { padding-bottom:14vh; } .qu-orbit { width:88vw; } .qu-caption { bottom:16%; } .qu-eyebrow { font-size:8px; letter-spacing:.15em; } .qu-bottomline { bottom:20px; justify-content:center; } .qu-credit { display:none; } .qu-dismiss { padding:12px; } }
@media(max-height:600px) { .qu-creature { height:50vh; } .qu-arrival { padding-bottom:25vh; } .qu-caption { bottom:16%; } .qu-caption h2 { font-size:32px; } .qu-eyebrow { margin-bottom:7px; font-size:8px; } .qu-subtitle { margin-top:8px; font-size:8px; } .qu-topline { top:18px; } .qu-bottomline { bottom:14px; } }
@media(prefers-reduced-motion:reduce) { .qu-encounter { animation:none; transition-duration:.1s; } .qu-encounter *,.qu-encounter *::before { animation:none !important; } .qu-arrival,.qu-parallax,.qu-creature,.qu-wing { transform:none !important; } .qu-progress { display:none; } }