/* effects.css — Brand effects and motion rules: button label roll, gradient touches, popovers, exits, the switch pill, icon swaps. */

/* ---------- your own project films: the whole frame, never cropped, on a soft blurred copy of the poster ---------- */
.is-fit > img, .is-fit video, .is-fit [data-film-slot] video { object-fit: contain; }
.is-fit::before { content: ""; position: absolute; inset: -10%; background: var(--poster, none) center / cover no-repeat; filter: blur(28px) saturate(1.25) brightness(.68); pointer-events: none; }
.wtile:hover .wtile__media.is-fit, .wtile:focus-visible .wtile__media.is-fit { --zs: 1; }   /* no hover zoom: nothing gets cut off */
/* case pages: the full film with sound and controls */
.film.is-full { cursor: default; }
.film video.film__full { z-index: 3; opacity: 1; object-fit: contain; background: #000; }
.film.is-full .film__play { display: none; }

/* ---------- a Work tile grows into its case film: the picture moves (ease-in-out), the pages crossfade, the exit is shorter ---------- */
::view-transition-group(yonu-expand) { animation-duration: .5s; animation-timing-function: var(--ease-in-out); }
::view-transition-old(yonu-expand), ::view-transition-new(yonu-expand) { height: 100%; object-fit: cover; animation-duration: .5s; animation-timing-function: var(--ease-in-out); }
html.is-expanding::view-transition-old(root) { animation: vt-fade-out .2s var(--ease-in) both; }
html.is-expanding::view-transition-new(root) { animation: vt-fade-in .3s var(--ease-out) .1s both; clip-path: none; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* ---------- buttons: the label rolls — it slides up and away as a copy rolls in beneath it, in the brand colour that reads on that surface ---------- */
.btn, .add, .pick, .theme-toggle, .nav-toggle, .reel2__toggle, .segs button, .choice__label { position: relative; }
.roll { display: inline-block; overflow: hidden; vertical-align: top; }
.roll__t { display: inline-block; text-shadow: 0 var(--roll-d, 1.6em) var(--roll-c, currentColor); transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
/* gold on dark surfaces, ocean on light ones */
.btn, .add, .pick, .segs button, .choice__label { --roll-c: var(--roll-on-surface); }
.btn--light, .pick[aria-pressed="true"], .add[aria-pressed="true"], .segs button[aria-pressed="true"], .choice input:checked + .choice__label { --roll-c: var(--roll-on-fill); }
@media (hover: hover) {
  :is(.btn, .add, .pick, .segs button):hover .roll__t, .choice:hover .choice__label .roll__t { transform: translateY(calc(-1 * var(--roll-d, 1.6em))); }
  .btn:hover .icon:last-child { color: var(--roll-c); animation: arrow-through .6s cubic-bezier(.7, 0, .2, 1); }
}
:is(.btn, .add, .pick, .segs button):focus-visible .roll__t, .choice input:focus-visible ~ .choice__label .roll__t { transform: translateY(calc(-1 * var(--roll-d, 1.6em))); }
@keyframes arrow-through { 0% { transform: none; } 45% { transform: translateX(150%); opacity: 0; } 46% { transform: translateX(-150%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {   /* no slide: the label just takes the colour */
  .roll__t { transition: color .25s; }
  :is(.btn, .add, .pick, .segs button):is(:hover, :focus-visible) .roll__t, .choice:hover .choice__label .roll__t { transform: none; color: var(--roll-c); }
  .btn:hover .icon:last-child { animation: none; }
}
/* ---------- About & Services: the brand's secondary gradient, used quietly ---------- */
/* the item you’re reading: its number turns gradient and a fine gradient hairline draws across it (About, Services, Work) */
#about .col.is-current .col__n, #services .menu__row.is-current .menu__n, #work .wrow.is-current .wrow__n {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600;
}
#services .menu__row::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-grad); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); pointer-events: none; }
#services .menu__row.is-current::before { transform: scaleX(1); }
#about .cols > .col, #work .wrow, #about .cols > .col:has(.art) .col__n, #work .wtile__title { position: relative; }
#about .cols > .col:not(:has(.art))::before, #about .cols > .col:has(.art) .col__n::before, #work .wrow::before, #work .wtile__title::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line-grad); pointer-events: none;
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out);
}
#about .cols > .col:not(:has(.art))::before, #work .wrow::before { top: -1px; }
#about .cols > .col:has(.art) .col__n::before { top: -.75rem; }
#work .wtile__title::before { top: -.625rem; }
#about .col.is-current:not(:has(.art))::before, #about .col.is-current .col__n::before, #work .wrow.is-current::before, #work .wtile.is-current .wtile__title::before { transform: scaleX(1); }
/* items that share a row draw one after another, left to right */
#about .cols > .col:nth-child(4n+2)::before, #about .cols > .col:nth-child(4n+2) .col__n::before, #work .wtile:nth-child(3n+2) .wtile__title::before { transition-delay: .09s; }
#about .cols > .col:nth-child(4n+3)::before, #about .cols > .col:nth-child(4n+3) .col__n::before, #work .wtile:nth-child(3n+3) .wtile__title::before { transition-delay: .18s; }
#about .cols > .col:nth-child(4n+4)::before, #about .cols > .col:nth-child(4n+4) .col__n::before { transition-delay: .27s; }
/* 3 · a soft spill of window light off the pictures: gold above, ocean below */
#about .art--step, #about .art--wide, #services .svc-art, #services .menu__art { box-shadow: 0 1.75rem 3.5rem -2.25rem var(--spill-a), 0 -1rem 3rem -2.25rem var(--spill-b); }
/* ---------- motion rules: popovers, exits, the shared switch pill, icon swaps, the brief dot ---------- */
.cursor.is-on .cursor__label { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.cta2__tag b { transform: scale(.6); opacity: 0; transition: transform .16s var(--ease-in), opacity .16s var(--ease-in); }
.cta2__tag.is-on b { transform: none; opacity: 1; transition: transform .22s var(--ease-out) 50ms, opacity .22s var(--ease-out) 50ms; }   /* the badge settles just after the tag */
.peek { scale: .95; transform-origin: 0 0; transition: opacity .16s var(--ease-in), scale .16s var(--ease-in); }
.peek.is-on { scale: 1; transition: opacity .2s var(--ease-out), scale .2s var(--ease-out); }
.tray { transition: opacity .176s var(--ease-in), transform .176s var(--ease-in); }
.tray.is-open { transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
@media (max-width: 767.98px) {
  .js-ready .site-nav.is-open { transform-origin: 100% 0; animation: menu-in .22s var(--ease-out) both; }   /* grows from the burger */
  .js-ready .site-nav.is-closing { animation: menu-out .176s var(--ease-in) both; }                         /* and shrinks back into it */
  .js-ready .site-nav.is-open:not(.is-closing) :is(.site-nav__list > li, .site-nav__cta) { animation: row-in .22s var(--ease-out) both; }
  .js-ready .site-nav.is-open .site-nav__list > li:nth-child(2) { animation-delay: 30ms; }
  .js-ready .site-nav.is-open .site-nav__list > li:nth-child(3) { animation-delay: 60ms; }
  .js-ready .site-nav.is-open .site-nav__list > li:nth-child(4) { animation-delay: 90ms; }
  .js-ready .site-nav.is-open .site-nav__list > li:nth-child(5) { animation-delay: 120ms; }
  .js-ready .site-nav.is-open .site-nav__cta { animation-delay: 120ms; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.95); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-4px) scale(.95); } }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
/* switches: one pill slides between options; inside it, a mask reveals the inverted text */
.segs { position: relative; }
.segs__mask { position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: var(--fg-strong); pointer-events: none; clip-path: inset(50% round 9999px); }
.segs__ghost { position: absolute; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem .9375rem; font-size: .8125rem; line-height: 1.25rem; font-weight: 500; color: var(--bg); white-space: nowrap; }
.segs.has-pill button[aria-pressed="true"] { background: transparent; color: var(--fg-strong); }   /* readable on its own; the pill covers it with the inverted copy */
.film__play-icon { position: relative; }
.fly-dot { position: fixed; left: 0; top: 0; z-index: 95; width: .75rem; height: .75rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgb(253 187 45 / .25); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .js-ready .site-nav.is-open, .js-ready .site-nav.is-closing, .js-ready .site-nav.is-open :is(.site-nav__list > li, .site-nav__cta) { animation: none; }
}