/* A quiet reading plane and four restrained, angled project frames. */
.overlap-panel { border-radius:0; border-top:1px solid #8fbcff24; }
#work { position:relative; padding:0; background:#080e19; isolation:isolate; }
#work .work-scene { position:relative; padding:100px 20px 80px; overflow:clip; background:radial-gradient(ellipse at center,#10213a00 30%,#030917dd 100%),radial-gradient(ellipse at 50% 42%,#12233b,#080f1c 72%); }
#work .work-scene::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(#8fbcff0d 1px,transparent 1px),linear-gradient(90deg,#8fbcff0d 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse at center,#000 15%,transparent 85%); }
#work .work-scene::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url("work-grid.svg?v=cross-joints-2") 0 0/528px 528px; filter:blur(1.5px); opacity:.45; animation:grid-breathe 4.8s ease-in-out infinite; animation-play-state:paused; }
#work .work-intro { text-align:center; max-width:900px; margin:0 auto 72px; }
#work .work-intro h2 { font-size:clamp(36px,5.8vw,74px); line-height:1.08; letter-spacing:-.035em; text-wrap:balance; }
#work .work-intro-detail p { color:#afc1d9; font-size:17px; line-height:1.6; max-width:47ch; margin:24px auto 0; }
#work .stack-stage { display:flex; flex-direction:column; gap:32px; height:auto; position:relative; align-items:center; }
#work .stack-card { position:relative; inset:auto; top:auto!important; width:min(438px,100%); height:620px; margin:0; padding:28px!important; display:flex; flex-direction:column; border:0; border-radius:0; background:#101b2b; color:var(--ink); box-shadow:none; content-visibility:visible; transform-origin:50% -20%; overflow:visible; }
/* The image height must override the shared mobile 16:9 rule. */
#work .stack-card::before { content:""; position:absolute; inset:0; z-index:2; width:auto; height:auto; filter:none; transform:none; background:url("project-frame.svg") 0 0/100% 100% no-repeat; pointer-events:none; border:0; border-radius:0; opacity:.75; }
#work .stack-card::after { content:""; position:absolute; inset:0; z-index:3; padding:0; mask:none; -webkit-mask:none; background:#050a12; opacity:var(--panel-dim,0); pointer-events:none; border-radius:0; }
#work .stack-media { --project-image-height:56%; width:100%; height:var(--project-image-height)!important; aspect-ratio:auto; flex-shrink:0; border:1px solid #8fbcff20; border-radius:0; background:#0a1320; overflow:hidden; }
#work .stack-media img { width:100%; height:100%; object-fit:cover; object-position:center; }
#work .stack-copy { margin-top:auto; padding:24px 8px 6px; text-align:left; }
#work .stack-head { margin:0!important; padding:0; display:block; }
#work .stack-meta { padding:0; }
#work .stack-title { font-family:'Figtree',sans-serif; font-size:32px; font-weight:500; letter-spacing:-.02em; line-height:1; color:#eef5ff; text-wrap:balance; margin:0 0 12px; }
#work .stack-sub { font-size:17px; letter-spacing:-.02em; line-height:1.35; color:#b3c5de; font-style:normal; }
#work .stack-tags { margin:16px 0 0; padding:0; gap:6px; }
#work .showcase-tag { border-radius:0; padding:5px 8px; font-size:10px; letter-spacing:.03em; border:1px solid #8fbcff38; background:#14253b; color:#c4d9fa; }
#work .stack-card:hover::before { opacity:1; }
#work a:focus-visible { outline:2px solid #a5c8ff; outline-offset:-4px; }
#where-next { position:relative; z-index:4; background:var(--paper); margin-top:0!important; padding-top:48px!important; }
/* The reading plane is revealed from behind the hero and stays until the stack exits. */
body.work-motion .hero { z-index:4; background:var(--paper); }
body.work-motion .overlap-panel { margin-top:-100svh; z-index:3; border-top:0; }
#work.is-scroll-scene { height:630svh; }
#work.is-scroll-scene .work-scene { position:fixed; inset:0; height:100svh; padding:0; }
#work.is-scroll-scene:not(.scene-visible) .work-scene { visibility:hidden; }
#work.is-scroll-scene .work-intro { position:absolute; top:50%; left:50%; width:calc(100% - 48px); transform:translate(-50%,-50%); margin:0; }
#work.is-scroll-scene .stack-stage { position:absolute; inset:0; display:block; pointer-events:none; perspective:400px; perspective-origin:50% 35%; }
#work.is-scroll-scene .stack-card { position:absolute; top:max(100px,calc((100svh - 620px)/2 + 20px))!important; left:50%; height:min(620px,calc(100svh - 130px)); width:min(438px,calc(100vw - 40px)); will-change:transform; pointer-events:auto; }
#work .stack-card { clip-path:polygon(18px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 18px),calc(100% - 18px) 100%,28px 100%,0 calc(100% - 28px),0 18px); }
#work.scene-visible .work-scene::after { animation-play-state:running; }
@keyframes grid-breathe { 0%,100% { opacity:.18; } 50% { opacity:.55; } }
@media(max-width:600px) {
  #work .work-intro h2 { font-size:clamp(34px,9vw,48px); }
  #work .work-intro-detail p { font-size:16px; max-width:32ch; }
  #work .stack-card { padding:26px!important; }
  #work .stack-title { font-size:28px; }
  #work .stack-sub { font-size:16px; }
  #work .stack-copy { padding:20px 4px 6px; }
  #work .stack-media { --project-image-height:53%; }
}
@media(max-height:700px) and (min-width:601px) {
  #work.is-scroll-scene .stack-card { width:340px; padding:22px!important; }
  #work .stack-title { font-size:26px; margin-bottom:8px; }
  #work .stack-sub { font-size:15px; }
  #work .stack-copy { padding:14px 4px 0; }
  #work .stack-tags { margin-top:12px; }
  #work .stack-media { --project-image-height:50%; }
}
@media(prefers-reduced-motion:reduce) { #work .stack-card { transition:none; } #work .work-scene::after { animation:none; } }
/* Approved second-fold copy is restored verbatim. */
#work .work-intro { max-width:1500px; }
#work .work-intro .eyebrow { color:#afc1d9; justify-content:center; font-size:16px; margin-bottom:28px; }
#work .work-intro > p:last-child { color:#afc1d9; font-size:17px; line-height:1.6; max-width:55ch; margin:32px auto 0; }
#work .work-intro h2 { font-size:clamp(36px,4.5vw,80px); font-weight:600; line-height:1.08; letter-spacing:-.035em; }
@media(max-width:600px) {
  #work .work-intro h2 { font-size:clamp(36px,9vw,48px); }
  #work .work-intro > p:last-child { font-size:16px; margin-top:20px; }
}
/* Compact HUD chips, with one small technical detail. */
#work .showcase-tag { display:inline-flex; align-items:center; gap:6px; border-color:#8fbcff60; color:#bed6fa; background:#15263b; clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); }
#work .showcase-tag::before { content:""; display:block; width:3px; height:3px; flex-shrink:0; background:#92baff; }

/* Echo the hero HUD through blue brackets and a quiet etched image frame. */
#work .stack-card { background:linear-gradient(115deg,#152941,#101b2b 40%,#0d1726); }
#work .stack-card::before { opacity:.92; filter:drop-shadow(0 0 3px #5b9bff55); }
#work .stack-media { position:relative; border-color:#8fbcff55; }
#work .stack-media::after { content:""; position:absolute; inset:7px; pointer-events:none; background:linear-gradient(#9cc4ff,#9cc4ff) left top/20px 1px no-repeat,linear-gradient(#9cc4ff,#9cc4ff) left top/1px 20px no-repeat,linear-gradient(#9cc4ff,#9cc4ff) right bottom/20px 1px no-repeat,linear-gradient(#9cc4ff,#9cc4ff) right bottom/1px 20px no-repeat; opacity:.65; }
#work .stack-copy { position:relative; }
#work .stack-copy::before { content:""; display:block; width:54px; height:3px; margin-bottom:12px; background:repeating-linear-gradient(110deg,#8fbcff 0 4px,transparent 4px 8px); opacity:.55; }

#work .stack-media, #work .stack-copy { opacity:var(--content-opacity,1); }
#work .stack-card:first-child:hover::before, #work .stack-card:first-child:focus-visible::before { filter:drop-shadow(0 0 7px #5b9bff) drop-shadow(0 0 14px #5b9bff88); opacity:1; }
#work .stack-card:first-child:hover { background:linear-gradient(115deg,#1a3455,#101b2b 50%,#0d1726); }
#work .stack-card::before { transition:filter .25s ease,opacity .25s ease; }
footer.galactic { z-index:4; }
@media(prefers-reduced-motion:reduce) { #work .stack-card::before { transition:none; } }

/* Grid and intersection lights share one coordinate system. */
#work .work-scene::before { background:url("work-grid.svg?v=cross-joints-2") 0 0/528px 528px; }
#work .work-scene::after { background:none; animation:none; }
#work .stack-card:hover, #work .stack-card:focus-visible { box-shadow:inset 0 0 30px #5b9bff55,inset 0 0 3px 2px #9dc7ff; }
#work .stack-card:hover::before, #work .stack-card:focus-visible::before { filter:drop-shadow(0 0 7px #74b1ff); opacity:1; }
#work .stack-card { transition:box-shadow .25s ease; }
@media(prefers-reduced-motion:reduce) { #work .stack-card { transition:none; } }

/* Each settled project has a reading interval before the next arrival. */
#work.scene-cleared .stack-stage, #work.scene-cleared .work-intro { visibility:hidden; }
#work .showcase-tag::before { content:none; }
#work .stack-tags { align-items:center; }
#work .case-read { margin-left:auto; color:#c4d9fa; font-size:12.5px; white-space:nowrap; }
#work .stack-card:hover, #work .stack-card:focus-visible { box-shadow:inset 0 -18px 28px -18px #5b9bff66,0 30px 64px -28px #000d; }
#work .stack-card:hover::before, #work .stack-card:focus-visible::before { filter:drop-shadow(0 5px 8px #5b9bff44); opacity:1; }
#where-next .teaser-card { border-radius:0; border-color:#8fbcff55; background-color:#101b2b; clip-path:polygon(14px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 14px),calc(100% - 14px) 100%,20px 100%,0 calc(100% - 20px),0 14px); }
#where-next .teaser-card::after { opacity:1!important; background:linear-gradient(110deg,#91b6ed88,#91b6ed28); }
#where-next .section-head h2 { max-width:24ch; margin-inline:auto; text-wrap:balance; }
@media(max-width:600px) { #work .stack-tags { gap:5px; } #work .showcase-tag { font-size:9px; padding:5px; } #work .case-read { font-size:12.5px; } }

#where-next .teaser-card::after { inset:0; padding:0; border-radius:0; mask:none; -webkit-mask:none; background:url("project-frame.svg") 0 0/100% 100% no-repeat; opacity:.75!important; pointer-events:none; }

#where-next .teaser-card:not(:hover)::after { opacity:.75!important; }

/* Landscape frames use fixed corner geometry rather than a stretched portrait SVG. */
#where-next .teaser-card { clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px); border:0; position:relative; isolation:isolate; }
#where-next .teaser-card::after { background:none; border:1px solid #8fbcff60; inset:5px; clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px); opacity:1!important; }
#where-next .teaser-card:not(:hover)::after { opacity:1!important; }
#where-next .teaser-card h3 { color:#edf4ff; font-weight:500; letter-spacing:-.02em; }
#where-next .teaser-card .teaser-arrow { color:#b6ccef; }
.card-inner-frame { position:absolute; inset:9px; border:1px solid #8fbcff26; pointer-events:none; clip-path:polygon(11px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 11px),calc(100% - 11px) 100%,20px 100%,0 calc(100% - 20px),0 11px); }
#where-next .card-inner-frame { inset:11px; border-color:#8fbcff1c; }
#where-next .section-head h2 { max-width:30ch; line-height:1.2; }

#where-next .teaser-card::after { inset:0; border:0; clip-path:none; background:url("teaser-frame.svg") 0 0/100% 100% no-repeat; }
#where-next .card-inner-frame { display:none; }

#where-next #uxoOpen.game-launch-card { background-image:linear-gradient(90deg,#080f18b8,#080f1840 70%,transparent),url("ux-odyssey-background.jpg")!important; }

/* Let the outgoing scene dissolve rather than be cut by an opaque panel edge. */
#where-next { background:transparent; }

/* Independent hover scale preserves the scroll-driven stack transform. */
#work .stack-card { scale:1; transition:scale .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease; }
#work .stack-card:hover, #work .stack-card:focus-visible { scale:1.018; box-shadow:0 30px 64px -28px rgba(0,0,0,.85),inset 0 -18px 28px -18px #5b9bff66; }
@media(prefers-reduced-motion:reduce) { #work .stack-card { transition:none; } }

/* Uniform preview and copy slots. The live preview owns its motion. */
#work .stack-media { --project-image-height:60%; border:1px solid #8fbcff30; border-radius:12px; clip-path:none; overflow:hidden; }
#work .stack-media::after { inset:0; opacity:1; background:none; border-radius:12px; box-shadow:inset 0 0 0 1px #8fbcff18; z-index:5; }
#work .stack-title, #work .stack-sub { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
#work .stack-title { -webkit-line-clamp:2; line-clamp:2; }
#work .stack-sub { -webkit-line-clamp:3; line-clamp:3; }
#work .stack-copy { padding-top:20px; }
#work .stack-card, #work .stack-card:hover, #work .stack-card:focus-visible { scale:1; translate:0 0; transition:box-shadow .35s ease; }
#work .ui-preview { position:relative; background:#f5f7fa; pointer-events:none; }
.preview-canvas { position:absolute; width:1440px; height:1000px; transform-origin:0 0; }
.preview-canvas iframe { width:1440px; height:1000px; border:0; display:block; pointer-events:none; }

#work .preview-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; }

/* Match the stretched SVG silhouette on mobile; fixed pixel cuts crop its edges. */
@media(max-width:600px) {
  #work .stack-card { clip-path:polygon(3.8813% 0,94.0639% 0,100% 4.4828%,100% 97.069%,96.1187% 100%,6.1644% 100%,0 95.5172%,0 2.931%); }
}