/* DNA chip page opener: full-screen glamour loop, then a scroll story (collage + text that builds) */
.dh { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #d6d6d9; color: #fff; }
.dh-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--hs, 1)); transform-origin: 50% 50%; will-change: transform; }
.dh-shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5,8,18,.55) 100%), linear-gradient(0deg, rgba(5,8,18,.82) 0%, rgba(5,8,18,.4) 28%, transparent 52%), linear-gradient(180deg, rgba(5,8,18,.55), transparent 16%); }
.dh-copy { position: absolute; left: clamp(18px, 5vw, 72px); right: 18px; bottom: clamp(70px, 12vh, 120px); max-width: 860px; opacity: calc(1 - var(--hp, 0) * 1.6); transform: translateY(calc(var(--hp, 0) * -40px)); }
.dh-kick { display: inline-block; font: 600 12px 'JetBrains Mono', monospace; letter-spacing: 2.5px; text-transform: uppercase; color: #7ee8ff; padding: 6px 14px; border: 1px solid rgba(126,232,255,.45); border-radius: 999px; background: rgba(0,212,255,.1); backdrop-filter: blur(6px); }
.dh-title { margin: 14px 0 8px; font: 800 clamp(2.4rem, 8vw, 6rem)/1 Poppins, sans-serif; letter-spacing: -.03em; text-shadow: 0 6px 40px rgba(0,0,0,.45); }
.dh-title span { background: linear-gradient(100deg, #7ee8ff, #b79cff 55%, #ffb454); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dh-sub { margin: 0; font-size: clamp(1rem, 2.4vw, 1.4rem); color: #e6edf7; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.dh-copy > * { opacity: 0; transform: translateY(16px); animation: dhin .9s cubic-bezier(.2,.8,.2,1) forwards; }
.dh-copy > :nth-child(1) { animation-delay: .5s; } .dh-copy > :nth-child(2) { animation-delay: .75s; } .dh-copy > :nth-child(3) { animation-delay: 1s; }
@keyframes dhin { to { opacity: 1; transform: none; } }
.dh-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; opacity: calc(1 - var(--hp, 0) * 3); }
.dh-cue i { font-size: 1.6rem; animation: dhbob 1.6s ease-in-out infinite; }
@keyframes dhbob { 50% { transform: translateY(7px); } }

.ds { position: relative; height: 480vh; background: #050812; }
.ds-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(14px, 3vw, 48px); padding: 70px clamp(16px, 5vw, 72px) 28px;
  background: radial-gradient(900px 500px at 78% 40%, rgba(139,92,246,.22), transparent 65%), radial-gradient(700px 420px at 12% 70%, rgba(0,212,255,.14), transparent 65%), #050812; }
.ds-text { position: relative; z-index: 2; height: min(64vh, 560px); }
.ds-line { position: absolute; left: 0; right: 0; top: 50%; opacity: calc(var(--o, 0) * (1 - var(--out, 0))); transform: translateY(calc(-50% + (1 - var(--o, 0)) * 38px - var(--out, 0) * 34px)); will-change: opacity, transform; }
.ds-line .k { display: block; margin-bottom: 4px; font: 600 11px 'JetBrains Mono', monospace; letter-spacing: 2.5px; text-transform: uppercase; color: #7ee8ff; }
.ds-line p { margin: 0; font: 700 clamp(1.7rem, 4.3vw, 3.6rem)/1.12 Poppins, sans-serif; letter-spacing: -.02em; color: #fff; }
.ds-line p b { background: linear-gradient(100deg, #7ee8ff, #ffb454); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.ds-line small { display: block; margin-top: 8px; font-size: 13px; color: #8b9ab3; }
.ds-collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(8px, 1.4vw, 16px); height: min(74vh, 640px); min-height: 0; }
.ds-tile { position: relative; overflow: hidden; border-radius: 16px; background: #0c1426; border: 1px solid rgba(126,232,255,.25); box-shadow: 0 20px 60px rgba(0,0,0,.6);
  opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 60px)) scale(calc(.92 + var(--o, 0) * .08)) rotate(calc((1 - var(--o, 0)) * var(--r, 2deg))); }
.ds-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-tile:nth-child(1) { grid-row: span 2; --r: -3deg; }
.ds-tile:nth-child(2) { grid-row: span 2; --r: 3deg; }   /* two loops, side by side, each full height */
.ds-tile::after { content: 'LOOP'; position: absolute; left: 10px; top: 10px; padding: 2px 8px; border-radius: 999px; font: 600 9px 'JetBrains Mono', monospace; letter-spacing: 1.4px; color: #39ff6a; background: rgba(5,8,18,.78); }
.ds-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #00d4ff, #8b5cf6, #ffb454); z-index: 3; }
@media (max-width: 820px) {
  .ds-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46%) minmax(0, 1fr); gap: 10px; padding: 62px 14px 14px; align-items: stretch; }
  .ds-collage { height: 100%; grid-template-columns: 1.1fr .9fr; }
  .ds-text { height: 100%; }
  .ds-line p { font-size: clamp(1.45rem, 7vw, 2rem); } .ds-line .k { font-size: 10.5px; margin-bottom: 4px; } .ds-line small { font-size: 11.5px; }
  .ds-tile { border-radius: 12px; }
  .dh-copy { bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .ds { height: auto; } .ds-stage { position: relative; height: auto; min-height: 0; padding-top: 40px; padding-bottom: 40px; }
  .ds-text { height: auto; display: grid; gap: 18px; } .ds-line { position: static; opacity: 1 !important; transform: none !important; } .ds-tile { opacity: 1 !important; transform: none !important; } .dh-cue i, .dh-copy > * { animation: none; opacity: 1; transform: none; }
  .ds-collage { height: 420px; } .ds-bar { display: none; }
}

/* ===== Validation day: a full-screen photo you simply scroll down to ===== */
.sp { position: relative; background: #02030a; }
.sp-stage { position: relative; height: 100vh; height: 100svh; min-height: 440px; overflow: hidden; background: #02030a; }
.sp-photo { position: absolute; inset: 0; }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 38%; display: block; transform: scale(var(--sz, 1.1)); will-change: transform; }
.sp-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 45%, transparent 60%, rgba(2,3,10,.55) 100%), linear-gradient(0deg, rgba(2,3,10,.82), transparent 42%); }
.sp-copy { position: absolute; z-index: 3; left: clamp(18px, 5vw, 72px); right: 18px; bottom: clamp(28px, 8vh, 80px); max-width: 900px; opacity: var(--co, 0); transform: translateY(calc((1 - var(--co, 0)) * 28px)); }
.sp-k { display: inline-block; font: 600 12px 'JetBrains Mono', monospace; letter-spacing: 2.5px; text-transform: uppercase; color: #ffd9a0; padding: 6px 14px; border: 1px solid rgba(255,194,122,.5); border-radius: 999px; background: rgba(255,170,80,.1); backdrop-filter: blur(6px); }
.sp-copy h2 { margin: 12px 0 0; font: 800 clamp(1.6rem, 5vw, 3.6rem)/1.08 Poppins, sans-serif; letter-spacing: -.02em; color: #fff; text-shadow: 0 6px 36px rgba(0,0,0,.6); }
@media (max-width: 820px) { .sp-photo img { object-position: 50% 38%; } }
@media (prefers-reduced-motion: reduce) { .sp-photo img { transform: none; } .sp-copy { opacity: 1 !important; transform: none !important; } }

/* ===== reusable bits for other project pages ===== */
.dh-still { animation: dhken 26s ease-in-out infinite alternate; }       /* slow push-in while there is only a still image */
@keyframes dhken { from { scale: 1; translate: 0 0; } to { scale: 1.14; translate: -2.5% -1.5%; } }
.ds-tile img.ds-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-tile video { opacity: 0; transition: opacity .6s; } .ds-tile.live video { opacity: 1; }
.ds-tile.light { background: #eef1f6; } .ds-tile.light::after { background: rgba(5,8,18,.78); }

/* design-flow reveal (sticky section; the diagram is uncovered top to bottom) */
.fr { position: relative; height: 300vh; background: #050812; }
.fr-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(14px, 3vw, 48px); padding: 70px clamp(16px, 5vw, 72px) 24px;
  background: radial-gradient(800px 500px at 80% 40%, rgba(139,92,246,.2), transparent 65%), radial-gradient(700px 420px at 10% 80%, rgba(0,212,255,.12), transparent 65%), #050812; }
.fr-copy { position: relative; z-index: 2; }
.fr-k { display: inline-block; font: 600 12px 'JetBrains Mono', monospace; letter-spacing: 2.5px; text-transform: uppercase; color: #7ee8ff; padding: 6px 14px; border: 1px solid rgba(126,232,255,.45); border-radius: 999px; background: rgba(0,212,255,.1); }
.fr-copy h2 { margin: 14px 0 18px; font: 800 clamp(1.9rem, 5vw, 3.8rem)/1.06 Poppins, sans-serif; letter-spacing: -.025em; color: #fff; }
.fr-copy h2 span { background: linear-gradient(100deg, #7ee8ff, #b79cff 55%, #ffb454); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fr-line { margin: 0 0 8px; font: 600 clamp(1.05rem, 2.2vw, 1.5rem)/1.3 Poppins, sans-serif; color: #dbe6f6; opacity: var(--lo, 0); transform: translateX(calc((1 - var(--lo, 0)) * -22px)); }
.fr-line b { color: #ffd9a0; font-weight: 700; }
.fr-card { position: relative; margin: 0; justify-self: center; height: min(86svh, 860px); max-width: 100%; aspect-ratio: 1743 / 2048; border-radius: 18px; background: #fbfbfd; overflow: hidden; box-shadow: 0 0 0 1px rgba(126,232,255,.35), 0 0 0 7px #050812, 0 0 0 8px rgba(126,232,255,.25), 0 30px 90px rgba(0,0,0,.65), 0 0 70px rgba(139,92,246,.25); }
.fr-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; clip-path: inset(0 0 calc((1 - var(--rv, 0)) * 100%) 0); }
.fr-scan { position: absolute; left: 0; right: 0; top: calc(var(--rv, 0) * 100%); height: 3px; background: linear-gradient(90deg, transparent, #00d4ff, #8b5cf6, #ffb454, transparent); box-shadow: 0 0 22px #00d4ff; opacity: calc(1 - var(--rv, 0) * var(--rv, 0) * var(--rv, 0)); pointer-events: none; }
@media (max-width: 820px) {
  .fr-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 66px 14px 12px; align-items: start; }
  .fr-copy h2 { margin: 8px 0 8px; font-size: clamp(1.5rem, 7vw, 2rem); } .fr-line { font-size: .95rem; margin-bottom: 4px; } .fr-k { font-size: 10.5px; padding: 4px 10px; }
  .fr-card { height: auto; width: min(100%, 52svh * .85); max-height: 100%; justify-self: center; align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .dh-still { animation: none; } .fr { height: auto; } .fr-stage { position: relative; height: auto; } .fr-card img { clip-path: none; } .fr-scan { display: none; } .fr-line { opacity: 1 !important; transform: none !important; } }
/* busy colourful layout as hero: darken so the title reads */
.dh[data-video="off"] .dh-shade { background: radial-gradient(ellipse at 30% 85%, rgba(2,3,10,.92), rgba(2,3,10,.55) 55%, rgba(2,3,10,.35)), linear-gradient(0deg, rgba(2,3,10,.85), transparent 60%); }
.ds-tile:not(.live):not(:has(video[src]))::after { content: none; }  /* no LOOP badge on still images */

/* ===== generic opener (premiere.js): diagrams shown whole, LED-bar hero for pages without a photo ===== */
.ds-tile.light img.ds-still { object-fit: contain; padding: 6px; box-sizing: border-box; }
.dh-leds { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 1.4vw, 14px); padding: 0 6vw 22vh; background: radial-gradient(900px 500px at 50% 80%, rgba(0,212,255,.18), transparent 70%), #050812; }
.dh-leds i { flex: 1; max-width: 46px; height: 62%; border-radius: 6px; transform-origin: bottom; background: linear-gradient(0deg, #39ff6a 0 55%, #ffd23f 55% 80%, #ff4d6d 80%); box-shadow: 0 0 18px rgba(57,255,106,.35); animation: ledbar 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.23s); }
@keyframes ledbar { from { transform: scaleY(.12); } 30% { transform: scaleY(.7); } 60% { transform: scaleY(.35); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .dh-leds i { animation: none; transform: scaleY(.6); } }