/* Our Work: staggered two-column portfolio (layout after the reference the client sent). The left column starts lower than the right, big rounded pictures, small "year . category" line and the project name under each. Animation: pictures reveal with a rising wipe + settling zoom as they enter, the picture drifts inside its frame while scrolling, the two columns drift at different speeds, on hover the picture zooms, the name rolls over to its twin, and a round "View" cursor follows the pointer. (Previous layout: bk3/our-works-stage.html + css/work-stage.css) */
.gr { background: #f7f4ee; color: var(--ink-2); overflow: clip; }
.gr__title { margin-top: clamp(1.2rem, 2.5vw, 2.4rem); font-size: clamp(2rem, 1rem + 2.6vw, 3.8rem); font-weight: 700; letter-spacing: -.055em; line-height: 1; max-width: 14ch; color: var(--ink-2); }
.gr__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 3rem); margin-top: clamp(-5rem, -4vw, -2rem); align-items: start; }
.gr__col { display: grid; gap: clamp(2.6rem, 5vw, 5rem); }
.gr__col--l { padding-top: clamp(9rem, 17vw, 17rem); }
.gr__c { position: relative; display: block; color: inherit; }
.gr__img { position: relative; display: block; aspect-ratio: var(--ar, 1.2); border-radius: 22px; overflow: hidden; background: #e7e2d8; isolation: isolate; box-shadow: 0 24px 44px -34px rgba(30,15,60,.45); }
.gr__img img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; object-position: top center; transition: scale 1.1s var(--ease); }
.gr__c:hover .gr__img img { scale: 1.06; }
.gr__cur { position: absolute; z-index: 3; left: 0; top: 0; width: 5.2rem; height: 5.2rem; margin: -2.6rem 0 0 -2.6rem; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: .1rem; background: var(--acc, var(--purple)); color: #fff; font-size: .8rem; font-weight: 700; pointer-events: none; opacity: 0; scale: .4; translate: var(--cx, 50%) var(--cy, 50%); transition: opacity .25s, scale .4s var(--ease); } .gr__cur svg { width: 16px; height: 16px; }
.gr__c.is-hov .gr__cur { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) { .gr__c.is-hov .gr__img { cursor: none; } }
.gr__meta { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(11,11,16,.5); } .gr__meta i { font-style: normal; } .gr__meta b { font-weight: 700; }
.gr__ttl { display: block; margin-top: .35rem; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.12; }
.gr__roll { display: block; height: 1.12em; overflow: hidden; } .gr__roll b { display: block; height: 1.12em; font-weight: 700; transition: translate .6s var(--ease); } .gr__roll b + b { color: var(--acc, var(--purple)); }
.gr__c:hover .gr__roll b, .gr__c:focus-visible .gr__roll b { translate: 0 -100%; }
.gr__sum { display: block; margin-top: .25rem; color: var(--ink-3); font-size: 1rem; line-height: 1.4; max-width: 44ch; }
.gr__c:focus-visible { outline: 2px solid var(--purple); outline-offset: 6px; border-radius: 22px; }
/* reveal (only once JS is ready, so the page still works without it) */
.gr.is-ready .gr__img { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s cubic-bezier(.7, 0, .2, 1); }
.gr.is-ready .gr__img img { scale: 1.3; }
.gr.is-ready .gr__meta, .gr.is-ready .gr__ttl, .gr.is-ready .gr__sum { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease), translate .9s var(--ease); }
.gr.is-ready .gr__c.is-in .gr__img { clip-path: inset(0); }
.gr.is-ready .gr__c.is-in .gr__img img { scale: 1; transition: scale 1.7s cubic-bezier(.2, .7, .2, 1); } .gr.is-ready .gr__c.is-in:hover .gr__img img { scale: 1.06; transition: scale 1.1s var(--ease); }
.gr.is-ready .gr__c.is-in .gr__meta { opacity: 1; translate: 0 0; transition-delay: .55s; } .gr.is-ready .gr__c.is-in .gr__ttl { opacity: 1; translate: 0 0; transition-delay: .65s; } .gr.is-ready .gr__c.is-in .gr__sum { opacity: 1; translate: 0 0; transition-delay: .75s; }
@supports (animation-timeline: view()) {
  .gr__img img { animation: grDrift linear both; animation-timeline: view(); }
  @keyframes grDrift { from { translate: 0 6%; } to { translate: 0 -6%; } }
  .gr__col--l { animation: grColL linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes grColL { from { translate: 0 70px; } to { translate: 0 -50px; } }
}
@media (max-width: 760px) { .gr__cols { grid-template-columns: 1fr; margin-top: 1.6rem; } .gr__col--l { padding-top: 0; animation: none; } .gr__cols { gap: clamp(2.6rem, 5vw, 5rem); } .gr__cur { display: none; } }
@media (prefers-reduced-motion: reduce) { .gr.is-ready .gr__img { clip-path: none; transition: none; } .gr.is-ready .gr__img img, .gr__img img { scale: 1; animation: none; } .gr.is-ready .gr__meta, .gr.is-ready .gr__ttl, .gr.is-ready .gr__sum { opacity: 1; translate: none; } .gr__col--l { animation: none; } }