/* Origin fill hover effect - see js/origin-fill.js. Loaded after cv-theme.css.
   The circle sits at z-index:-1 inside an isolated stacking context, so it paints
   over the button's own background but under its text/icons with no wrapping. */
.of-btn{
  position:relative;isolation:isolate;overflow:hidden;
  --of-x:50%;--of-y:50%;--of-size:0px;
  --of-fill:#0B2F24;--of-fg:#FFFFFF;
}
:root[data-theme="dark"] .of-btn{--of-fill:#17513C;--of-fg:#F2F6F3}

/* Outline / ghost family: fill with the accent, flip the text to sit on it. */
.of-btn.studio-gallery-button,.of-btn.project-link:not(.project-link--primary),.of-btn.button--ghost,
.of-btn.xv-cta--ghost,.sys-filter button.of-btn:not([aria-pressed="true"]){--of-fill:#17513C;--of-fg:#FFFFFF}
:root[data-theme="dark"] .of-btn.studio-gallery-button,
:root[data-theme="dark"] .of-btn.project-link:not(.project-link--primary),
:root[data-theme="dark"] .of-btn.button--ghost,
:root[data-theme="dark"] .of-btn.xv-cta--ghost,
:root[data-theme="dark"] .sys-filter button.of-btn:not([aria-pressed="true"]){--of-fill:#A8CDB3;--of-fg:#0B2F24}

/* Gold hero/company buttons sit on dark bands in both themes. */
.of-btn.sys-cta,.of-btn.xv-cta:not(.xv-cta--ghost),.of-btn.xv-poster-play,.sys-filter button.of-btn[aria-pressed="true"]{--of-fg:#F2F6F3}

/* about-me-beta uses its own blue palette. */
.of-blue .of-btn{--of-fill:#0D1926;--of-fg:#F4F6FA}
:root[data-theme="dark"] .of-blue .of-btn{--of-fill:#153853;--of-fg:#F4F6FA}

.of-fill{
  position:absolute;left:var(--of-x);top:var(--of-y);width:var(--of-size);height:var(--of-size);
  margin:calc(var(--of-size) / -2) 0 0 calc(var(--of-size) / -2);
  border-radius:50%;background:var(--of-fill);pointer-events:none;z-index:-1;
  transform:scale(0);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.of-btn.of-active .of-fill{transform:scale(1)}
.of-btn.of-active{color:var(--of-fg)!important;border-color:var(--of-fill)!important}
.of-btn.of-active svg{fill:var(--of-fg)}
.of-btn.of-active svg[stroke]{stroke:var(--of-fg)}

/* Existing hover backgrounds would fight the circle. */
.of-btn.studio-gallery-button:hover{background:transparent}

/* One transition list so colour flips alongside the circle without dropping the
   lift/shadow transitions the buttons already had. */
.of-btn{transition:transform .22s,box-shadow .22s,color .3s,border-color .3s,background-color .3s}
/* entering: let the circle reach the text before it flips colour */
.of-btn.of-active{transition:transform .22s,box-shadow .22s,color .25s .12s,border-color .25s .12s,background-color .3s}
.of-btn:active{transform:scale(.985)}
.of-btn:disabled,.of-btn[aria-disabled="true"]{transform:none}

@media (prefers-reduced-motion:reduce){
  .of-btn{transition:none!important}
  .of-fill{left:0;top:0;width:100%;height:100%;margin:0;border-radius:0;transform:none;opacity:0;transition:none}
  .of-btn.of-active .of-fill{opacity:1}
}