/* Level photographic studio scenes. The physical device never moves. */
.collection-grid{gap:34px}
.collection-card,.collection-card:first-child,.collection-card:last-child{grid-column:auto;height:auto;min-height:0;padding:0;display:flex;overflow:hidden;isolation:isolate}
.card-top{order:0;padding:26px 28px 20px;min-height:92px!important}
.card-top img{max-width:175px;height:42px}.card-top>span{font-size:10px}
.studio-stage{order:1;position:relative;aspect-ratio:1.22;overflow:hidden;background:#aaa;pointer-events:none}
.studio-scene{position:absolute;width:146%;aspect-ratio:4/3;left:-23%;top:-18%}
.studio-material{position:absolute;inset:0;width:100%;height:auto;display:block;filter:grayscale(1)}
.studio-screen{position:absolute;left:24.8125%;top:24.5%;width:49.125%;height:42.584%;overflow:hidden;background:#111;border-radius:2px 2px 0 0;container-type:inline-size}
.studio-poster{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top}
.studio-screen[data-project="edenne"] .studio-poster,.studio-screen[data-project="pulse-growth-engine"] .studio-poster{height:100%;object-fit:cover}
.studio-notch{position:absolute;top:24.48%;left:46.44%;width:5.94%;height:1.7%;background:#080808;border-radius:0 0 3px 3px;z-index:3;pointer-events:none}
.studio-art{order:1;aspect-ratio:1.36;display:grid;place-items:center;overflow:hidden}
.studio-art>img{width:94%;height:94%;object-fit:contain;transform:none!important}
.card-bottom{order:2;align-items:end;padding:28px 28px 32px;min-height:166px}
.card-bottom h2{font-size:clamp(30px,2.8vw,44px);line-height:1.1;max-width:450px}
.card-bottom p{font-size:10px;line-height:1.6;margin-top:15px;letter-spacing:.07em}
.card-bottom svg{width:30px;height:30px;flex-shrink:0}
.collection-card:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.filters button{min-height:44px}.studio-control{min-height:44px;padding:8px 12px;border:1px solid currentColor;font:inherit;font-size:12px}
.studio-label{position:absolute;bottom:15px;left:18px;padding:6px 8px;background:#111c;color:#fff;font:9px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;z-index:4}
.studio-screen iframe{position:absolute;inset:0;border:0;width:1440px;height:936px;transform-origin:0 0;pointer-events:none}
.studio-screen video{width:100%;height:100%;object-fit:cover;display:block}
.studio-screen[data-project="pulse-growth-engine"] .studio-poster,.studio-screen[data-project="pulse-growth-engine"] .studio-slide{width:125%;height:125%;max-width:none;object-fit:cover;transform:translate(-12%,-2%)}
.studio-control{border:1px solid currentColor!important;padding:8px 12px!important}
.studio-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 600ms ease}
@media(min-width:1600px){.collection-grid{max-width:1700px;margin:auto}}
@media(max-width:760px){.collection-grid{gap:24px}.card-top{padding:20px 22px 16px;min-height:80px!important}.card-top img{max-width:155px;height:38px}.card-bottom{padding:24px 22px 27px;min-height:150px}.card-bottom h2{font-size:34px}.card-bottom p{font-size:9px}.studio-stage,.studio-art{aspect-ratio:1.25}.studio-scene{top:-14%}.studio-label{font-size:8px;bottom:10px;left:12px}}
@media(prefers-reduced-motion:reduce){.studio-slide{transition:none}}

/* ---- Brand-color backgrounds over the original stone scene (round 3) ---- */
#cover-robotist .studio-material{filter:grayscale(1) brightness(.78) contrast(1.14)}
#cover-wekwikgene .studio-material,#cover-gramlingo .studio-material,#cover-ancient-science-of-china .studio-material,#cover-brainybaobei .studio-material,#cover-edenne .studio-material{filter:grayscale(1) contrast(1.14)}
#cover-neolabcare .studio-material,#cover-pulse-growth-engine .studio-material{filter:grayscale(1) brightness(.7) contrast(1.14)}

.studio-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Grounding shadow under the device + gentle bottom falloff on the scene background */
.studio-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(62% 26% at 50% 91%,rgba(0,0,0,.32),transparent 66%),
 linear-gradient(to top,rgba(0,0,0,.2) 0%,transparent 20%)}
@media(max-width:760px){.studio-stage::after{background:radial-gradient(70% 30% at 50% 89%,rgba(0,0,0,.3),transparent 66%),linear-gradient(to top,rgba(0,0,0,.18) 0%,transparent 18%)}}

/* Layered collection scenes: the device moves while its set stays grounded. */
.pulse-live-mark{display:flex;align-items:center;letter-spacing:0}.pulse-live-mark img{width:112px;height:auto;max-width:none}
.studio-stage{pointer-events:auto;isolation:isolate;perspective:1200px;background:var(--scene-deep,#17202a)}
.studio-scene{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;left:0;top:0;overflow:hidden;transform-style:preserve-3d}
.studio-surface{position:absolute;inset:0;overflow:hidden;background:
 radial-gradient(58% 46% at 50% 18%,color-mix(in srgb,var(--scene-glow,#72859c) 52%,transparent),transparent 72%),
 linear-gradient(135deg,var(--scene-light,#536270),var(--scene-mid,#25313d) 52%,var(--scene-deep,#111820));}
.studio-surface::before{content:"";position:absolute;inset:0;opacity:.35;background-image:repeating-linear-gradient(100deg,rgba(255,255,255,.11) 0 1px,transparent 1px 7px),repeating-linear-gradient(8deg,rgba(0,0,0,.18) 0 1px,transparent 1px 10px);mix-blend-mode:soft-light}
.studio-surface::after{content:"";position:absolute;inset:0;background:radial-gradient(88% 42% at 50% 106%,rgba(0,0,0,.58),transparent 66%),linear-gradient(to bottom,rgba(255,255,255,.11),transparent 38%)}
.device-shadow{position:absolute;z-index:1;left:18%;right:18%;bottom:9%;height:20%;border-radius:50%;background:rgba(0,0,0,.56);filter:blur(22px);transform:translateZ(-2px);transition:transform 650ms cubic-bezier(.16,1,.3,1),opacity 650ms cubic-bezier(.16,1,.3,1)}
.studio-device{position:absolute;z-index:2;left:10%;top:12%;width:80%;aspect-ratio:1.55;transform-style:preserve-3d;transform:translateY(0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 650ms cubic-bezier(.16,1,.3,1);will-change:transform}
.device-bezel{position:absolute;inset:0 0 11%;padding:2.8%;border:1px solid rgba(255,255,255,.68);border-bottom:0;border-radius:11px 11px 2px 2px;background:linear-gradient(140deg,#d7dce0,#6e7780 52%,#20262c);box-shadow:0 20px 24px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.65);overflow:hidden}
.device-bezel::before{content:"";position:absolute;inset:2.8%;border-radius:5px 5px 0 0;background:#0b0d0f;z-index:0}
.studio-screen{z-index:1;left:3.7%;top:4.8%;width:92.6%;height:85%;border-radius:5px 5px 0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.studio-notch{z-index:3;top:4.8%;left:45.5%;width:9%;height:2.4%;background:#0b0d0f;border-radius:0 0 4px 4px}
.device-base{position:absolute;left:-2.5%;right:-2.5%;bottom:0;height:12%;border-radius:3px 3px 12px 12px;background:linear-gradient(#aab1b6,#656e75 42%,#31383e 44%,#8e979d);box-shadow:0 7px 10px rgba(0,0,0,.35)}
.device-base::after{content:"";position:absolute;left:42%;right:42%;top:0;height:18%;background:#3c444a;border-radius:0 0 4px 4px}
.studio-card.is-tilting .studio-device{transform:translateY(-6px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}.studio-card.is-tilting .device-shadow{opacity:.72;transform:translateY(9px) scale(.94)}
#cover-robotist{--scene-light:#577795;--scene-mid:#243a51;--scene-deep:#07121d;--scene-glow:#89b5d4}
#cover-neolabcare{--scene-light:#5e625f;--scene-mid:#292b29;--scene-deep:#090a09;--scene-glow:#b3a88d}
#cover-wekwikgene{--scene-light:#dce9f1;--scene-mid:#8eabbf;--scene-deep:#2f5d7d;--scene-glow:#ffffff}
#cover-gramlingo{--scene-light:#f5dfbd;--scene-mid:#c99562;--scene-deep:#59351e;--scene-glow:#fff8df}
#cover-ancient-science-of-china{--scene-light:#f3dfba;--scene-mid:#b57952;--scene-deep:#46200f;--scene-glow:#fff3d7}
#cover-brainybaobei{--scene-light:#f0d3cf;--scene-mid:#b88e8d;--scene-deep:#574249;--scene-glow:#fff1ec}
#cover-pulse-growth-engine{--scene-light:#6d70c9;--scene-mid:#302d68;--scene-deep:#0c0c1c;--scene-glow:#a7a7f6}
#cover-edenne{--scene-light:#f2bfdb;--scene-mid:#b96197;--scene-deep:#352036;--scene-glow:#ffe0f1}
@media(max-width:760px){.pulse-live-mark img{width:93px}.studio-device{left:7%;width:86%;top:14%}.device-shadow{left:13%;right:13%;bottom:10%;filter:blur(16px)}}
@media(prefers-reduced-motion:reduce){.studio-device,.device-shadow{transition:none!important;transform:none!important}.studio-card.is-tilting .studio-device,.studio-card.is-tilting .device-shadow{transform:none!important}}

/* WeKwikGene cover: use the project's own DNA ring as the visual system. */
.dna-cover{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 44%,#477e9e 0,#1d4968 32%,#09233a 68%,#061522 100%);}
.dna-cover::before{content:"";position:absolute;inset:-20%;background:repeating-radial-gradient(ellipse at 50% 48%,transparent 0 38px,rgba(181,225,239,.1) 39px 40px);transform:rotate(-16deg);opacity:.65;animation:dna-grid 18s linear infinite;}
.dna-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,transparent 25%,rgba(2,18,32,.45) 76%),linear-gradient(120deg,rgba(255,255,255,.13),transparent 32%);pointer-events:none;}
.dna-ring{position:absolute;z-index:2;width:68%;height:68%;left:16%;top:15%;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 18px rgba(71,209,255,.7)) drop-shadow(0 20px 18px rgba(0,0,0,.32));transform:translate3d(calc(var(--dna-x,0px) + var(--dna-hover,0)*5px),var(--dna-y,0px),0) rotate(var(--dna-rotate,0deg));transition:transform 650ms cubic-bezier(.16,1,.3,1);}
.dna-halo{position:absolute;z-index:1;width:48%;aspect-ratio:1;left:26%;top:25%;border-radius:50%;background:#6dd8ff;filter:blur(44px);opacity:.2;animation:dna-pulse 4.5s ease-in-out infinite;}
.dna-orbit{position:absolute;z-index:1;border:1px solid rgba(176,232,255,.46);border-radius:50%;pointer-events:none;}
.dna-orbit-a{width:78%;height:30%;left:11%;top:35%;transform:rotate(-20deg);animation:dna-orbit 10s linear infinite;}
.dna-orbit-b{width:50%;height:82%;left:25%;top:9%;transform:rotate(28deg);animation:dna-orbit 14s linear reverse infinite;}
.dna-caption{position:absolute;z-index:3;left:20px;bottom:18px;color:#d4f4ff;font:10px/1.2 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 8px #061522;}
@keyframes dna-grid{to{transform:rotate(344deg) scale(1.08)}}
@keyframes dna-pulse{50%{transform:scale(1.18);opacity:.34}}
@keyframes dna-orbit{to{transform:rotate(340deg)}}
@media(prefers-reduced-motion:reduce){.dna-cover::before,.dna-halo,.dna-orbit{animation:none}.dna-ring{transition:none;transform:none}}

/* ---- Recorded covers (2026-09-23) ----
   A silent clip of the project's own site plays over its still inside the same
   frame the poster uses. The still stays as the poster and as the reduced-motion
   and no-JS state; the clip only fades in once it is actually playing. */
.studio-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity 550ms ease;pointer-events:none;z-index:2}
.studio-clip.on{opacity:1}
.studio-art{position:relative}
.studio-art .studio-clip{inset:3%;width:94%;height:94%;object-position:center}
@media(prefers-reduced-motion:reduce){.studio-clip{transition:none}}