/* v60: motion adapted to the existing portfolio content. */
/* Preserve a scrollable, non-animated row when motion is reduced. */
.visual-track,.visual-group{display:flex;width:max-content}
.visual-group{gap:36px;align-items:center;padding-right:36px}
@media (prefers-reduced-motion: reduce){.visual-group[aria-hidden="true"]{display:none}.visual-band.is-marquee{overflow-x:auto}}
@media (prefers-reduced-motion: no-preference){
 .works-stage .work-panel[data-transition^="in-"]{z-index:2;animation:reel-in .72s cubic-bezier(.22,1,.36,1) both}
 .works-stage .work-panel[data-transition^="out-"]{z-index:1;animation:reel-out .72s cubic-bezier(.22,1,.36,1) both}
 .works-stage .work-panel[data-transition$="backward"]{--direction:-1}
 @keyframes reel-in{from{opacity:.65;transform:translateX(calc(var(--direction,1) * 12%)) scale(1.04)}to{opacity:1;transform:translateX(0) scale(1)}}
 @keyframes reel-out{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:.5;transform:translateX(calc(var(--direction,1) * -8%)) scale(.97)}}
 @keyframes work-arrive{from{opacity:.35;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}
 .work-tab{transition:flex-basis .5s cubic-bezier(.22,1,.36,1)}
 .work-thumb{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
 @media (hover:hover) and (min-width:761px){.works-tabs:hover .work-tab,.works-tabs:focus-within .work-tab{flex-basis:86px}}
 .story-intro-deck li{transform:translate3d(var(--deck-x,0px),calc(var(--lift) + var(--deck-y,0px)),0) rotate(calc(var(--turn) * var(--deck-fan,1))) scale(var(--deck-scale,1));will-change:transform}
 .story-intro-badges,.story-intro h2{transform:translate3d(0,var(--story-copy-y,0px),0);will-change:transform}
 .practice-tags.is-physics{position:relative;display:block;max-width:760px;height:205px;touch-action:pan-y}
 .practice-tags.is-physics li{position:absolute;left:0;top:0;white-space:nowrap;transform:translate3d(var(--x,0px),var(--y,0px),0) rotate(var(--r,0deg));will-change:transform;cursor:grab;user-select:none;touch-action:none}
 .practice-tags.is-physics li:active{cursor:grabbing}
 .visual-band.is-marquee{overflow:hidden;padding-inline:0}
 .visual-track{display:flex;width:max-content;animation:visual-flow 80s linear infinite;animation-play-state:paused;will-change:transform}
 .visual-band--bottom .visual-track{animation-direction:reverse}
 .visual-band.is-visible .visual-track{animation-play-state:running}
 .visual-band:hover .visual-track,.visual-band:focus-within .visual-track{animation-play-state:paused}
 .visual-band.is-marquee:has(.visual-tile:focus-visible){overflow-x:auto}
 .visual-band:has(.visual-tile:focus-visible) .visual-track{animation:none;transform:none}
 .visual-group{display:flex;gap:36px;align-items:center;padding-right:36px}
 @keyframes visual-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
 .contact-section.motion-visible .contact-orbit{animation:orbit-turn 32s linear infinite}
 .contact-section.motion-visible .contact-object{animation:contact-float 5s ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
 .contact-object--2{--delay:-1.5s}.contact-object--3{--delay:-3s}.contact-object--4{--delay:-4s}
 @keyframes orbit-turn{to{transform:rotate(335deg)}}
 @keyframes contact-float{from{translate:0 -7px}to{translate:0 7px}}
 @media(max-width:1100px){.visual-group{gap:28px;padding-right:28px}}
 @media(max-width:760px){.visual-group{gap:22px;padding-right:22px}.practice-tags.is-physics{height:220px}.visual-track{animation-duration:60s}}
}
/* v61: the reference uses long, pinned scenes and cards that travel between them. */
.visual-sticky{position:relative;height:100%}
.continuity-gallery{display:none}
.practice-anchor{position:absolute;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
 .works:not([data-view="entry"]){height:180svh;padding:0;position:relative}
 .works:not([data-view="entry"]) .works-viewport{position:sticky;top:0;height:100svh;overflow:hidden;overflow:clip;isolation:isolate}
 .works:not([data-view="entry"]) .works-stage{position:relative;top:calc((100svh - var(--reel-frame-height,675px))/2 - 30px);width:min(1200px,calc(100% - 64px),calc((100svh - 84px)*16/9));transform:none!important;will-change:auto}
 .works:not([data-view="entry"]) .works-frame{transform:scale(var(--reel-scale,1));border-radius:var(--reel-radius,0px);transform-origin:center;will-change:transform}
 .works:not([data-view="entry"]) .works-caption{opacity:var(--reel-ui,1);transform:translate3d(0,var(--reel-ui-y,0px),0)}
 .story-continuity{height:380svh;position:relative}
 .story-continuity-sticky{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
 .story-continuity .story-intro{position:absolute;inset:0;height:100%;min-height:0;max-height:none;padding:0;display:block;overflow:visible;pointer-events:none}
 .story-continuity .story-intro-badges{position:absolute;left:50%;top:37%;transform:translate(-50%,-50%);width:min(55vw,700px);justify-content:space-between;gap:0;margin:0;opacity:var(--story-title-opacity,1)}
 .story-continuity .story-intro h2{position:absolute;top:45%;left:50%;width:95%;transform:translate(-50%,-50%);font-size:clamp(36px,4vw,64px);opacity:var(--story-title-opacity,1)}
 .story-continuity .story-intro-deck{position:absolute;inset:0;margin:0;padding:0;height:auto;display:block}
 .story-continuity .story-intro-deck li{position:absolute;left:50%;top:50%;width:clamp(140px,13vw,205px);height:clamp(190px,18vw,273px);aspect-ratio:auto;margin:0;transform:translate(-50%,-50%) translate3d(var(--seq-x,0px),var(--seq-y,0px),0) rotate(var(--seq-rotation,0deg)) scale(var(--seq-scale,1));will-change:transform;border-radius:22px}
 .story-continuity .practice{position:absolute;inset:0 51% 0 0;min-height:0;display:flex;align-items:center;padding:6vw;opacity:var(--practice-opacity,0);transform:translate3d(0,var(--practice-y,35px),0);pointer-events:var(--practice-events,none)}
 .story-continuity .practice h2{font-size:clamp(36px,4vw,60px)}
 .story-continuity .practice-tags.is-physics{height:185px}
 .continuity-gallery{display:block;position:absolute;left:50%;right:6%;top:12%;bottom:9%;border-radius:28px;background:#fff;opacity:var(--gallery-opacity,0);transform:translate3d(0,var(--gallery-y,75px),0);overflow:hidden}
 .continuity-gallery-heading{height:11%;min-height:50px;padding:16px 24px;font-size:clamp(18px,2vw,28px);display:flex;justify-content:space-between;align-items:center}
 .continuity-gallery-heading button{border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:12px;padding:10px 15px;background:#f1f2f6;border-radius:999px}
 .continuity-gallery-body{position:absolute;inset:11% 0 0;border-radius:26px;background:#252b35;padding:20px 24px;color:white;font-size:clamp(17px,1.8vw,26px)}
 .practice-anchor{top:275svh;left:0;width:1px;height:1px}
 .visual-work{height:165svh;max-height:none;min-height:0;overflow:clip}
 .visual-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
 .visual-copy h2 span:first-child{opacity:var(--visual-title-a,1);filter:blur(var(--visual-blur-a,0px))}
 .visual-copy h2 span:last-child{opacity:var(--visual-title-b,1);filter:blur(var(--visual-blur-b,0px))}
 .visual-copy p,.visual-copy .graphic-collection-link{opacity:var(--visual-description,1)}
 .visual-band--top{transform:translate3d(var(--visual-top-x,0px),0,0)}
 .visual-band--bottom{transform:translate3d(var(--visual-bottom-x,0px),0,0)}
 @media(max-width:760px){
  .works:not([data-view="entry"]) .works-stage{top:calc((100svh - var(--reel-frame-height,201px))/2 - 21px);width:min(1200px,calc(100% - 32px),calc((100svh - 66px)*16/9))}
  .story-continuity{height:350svh}
  .story-continuity .story-intro-badges{width:70%;top:35%}
  .story-continuity .story-intro h2{top:44%;font-size:clamp(30px,7vw,45px);width:94%}
  .story-continuity .story-intro-deck li{width:clamp(85px,24vw,140px);height:clamp(113px,32vw,186px);border-radius:15px}
  .story-continuity .practice{inset:9% 0 48%;display:block;padding:18px 26px;overflow:hidden}
  .story-continuity .practice h2{font-size:clamp(28px,7vw,40px)}
  .story-continuity .practice-copy>p{font-size:13px;line-height:1.45;margin-top:12px}
  .story-continuity .practice .story-symbol{margin-bottom:12px}
  .story-continuity .practice-tags.is-physics{height:125px;margin-top:8px}
  .continuity-gallery{left:7%;right:7%;top:52%;bottom:5%;border-radius:18px}
  .continuity-gallery-heading{min-height:36px;padding:8px 14px;font-size:16px}
  .continuity-gallery-heading button{border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:10px;padding:6px 10px}
  .continuity-gallery-body{border-radius:15px;padding:12px 14px;font-size:15px}
  .practice-anchor{top:255svh}
  .visual-work{height:155svh;max-height:none;min-height:0}
 }
}
@media (prefers-reduced-motion:no-preference){.story-continuity .story-intro{z-index:2}.story-continuity .practice{z-index:3}.continuity-gallery{z-index:1}}

@media (prefers-reduced-motion:no-preference){
 .story-continuity .story-intro-deck{z-index:2}
 .works:not([data-view="entry"]) .work-case-link{opacity:var(--reel-ui,1);pointer-events:var(--reel-links,none)}
}

.contact-meteors{display:none}
@media (prefers-reduced-motion:no-preference){
 .contact-section{position:relative}
 .contact-meteors{display:block;position:absolute;inset:auto 0 -75px;height:200px;overflow:hidden;pointer-events:none}
 .contact-meteors i{position:absolute;left:var(--x);top:-90px;height:90px;width:1px;opacity:0;background:linear-gradient(transparent,rgba(12,121,251,.25),transparent);animation:contact-meteor var(--duration) linear var(--delay) infinite;animation-play-state:paused}
 .contact-section.motion-visible .contact-meteors i{animation-play-state:running}
 @keyframes contact-meteor{0%{opacity:0;transform:translateY(0)}15%{opacity:.7}75%{opacity:.5}100%{opacity:0;transform:translateY(290px)}}
}

/* v65: contain the Falling Text stage while retaining the original tag styling. */
@media (prefers-reduced-motion:no-preference){.practice-tags.is-physics{overflow:hidden}.practice-tags.is-physics li{will-change:auto}.practice-tags.is-physics.is-falling li{will-change:transform}}
@media (prefers-reduced-motion:no-preference){.practice-tags.falling-ready:not(.is-physics) li{visibility:hidden}}

/* v66: lower the tag landing area without moving the Practice copy. */
@media (prefers-reduced-motion:no-preference){.story-continuity .practice-tags.is-physics{translate:0 48px}@media(max-width:760px){.story-continuity .practice-tags.is-physics{translate:0 12px}}}

/* v67: mobile practice copy readability; story overlap restored in v68. */
@media(prefers-reduced-motion:no-preference) and (max-width:760px){
 .story-continuity .practice-copy>p{font-size:14px;line-height:1.55;color:#555b64}
}
@media(prefers-reduced-motion:no-preference){
 .visual-band:not(.is-visible) .visual-track{will-change:auto}
 .story-continuity:not(.scene-in-view) .story-intro-deck li,.story-continuity:not(.scene-in-view) .story-intro-badges,.story-continuity:not(.scene-in-view) .story-intro h2{will-change:auto}
 .works:not(.scene-in-view) .works-frame{will-change:auto}
}

/* v68: retain the original title-under-cards composition and scroll timing. */

/* v1.11: let tile shadows breathe vertically while the sticky stage clips row edges. */
@media (prefers-reduced-motion:no-preference){
 .visual-sticky{overflow-x:clip;overflow-y:visible}
 .visual-band.is-marquee{overflow:visible}
 .visual-band.is-marquee:has(.visual-tile:focus-visible){overflow-x:auto;overflow-y:visible}
}
@media (prefers-reduced-motion:reduce){
 .visual-band.is-marquee{overflow-x:auto;overflow-y:visible}
}
@media (prefers-reduced-motion:no-preference){
 .visual-band.is-marquee:has(.visual-tile:focus-visible){padding-block:72px;margin-block:-36px}
}
@media (prefers-reduced-motion:reduce){
 .visual-band.is-marquee{padding-block:72px;margin-block:-36px}
}