/* Reusable components: buttons, circles, links, logo, chips, tags */

/* Pill button with expanding fill from the icon */
.btn{position:relative;font-family:var(--font-display);letter-spacing:.05em;display:inline-flex;align-items:center;gap:.6rem;height:var(--nav-h);padding:0 1.2rem 0 .45rem;border-radius:var(--pill);background:var(--white);color:var(--blue);border:0;cursor:pointer;text-decoration:none;font-weight:400;font-size:.95rem;text-transform:uppercase;letter-spacing:.02em;overflow:hidden;isolation:isolate;white-space:nowrap;transition:color .45s var(--ease)}
.btn__icon{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;flex:none}
.btn__icon svg{width:1rem;height:1rem;transition:transform .5s var(--ease)}
.btn::before{content:"";position:absolute;left:1.45rem;top:50%;width:0;height:0;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%);transition:width .6s var(--ease),height .6s var(--ease);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{width:34rem;height:34rem}
.btn:hover,.btn:focus-visible{color:var(--white)}
.btn:hover .btn__icon svg{transform:translateX(3px) rotate(-45deg)}
.btn--primary{background:var(--blue);color:var(--white)}
.btn--primary::before{background:var(--yellow)}
.btn--primary:hover,.btn--primary:focus-visible{color:var(--blue)}
.btn--yellow{background:var(--yellow);color:var(--on-yellow)}
.btn--yellow::before{background:var(--white)}
.btn--yellow:hover,.btn--yellow:focus-visible{color:var(--on-yellow)}

/* Circular icon button */
.circle{position:relative;width:var(--nav-h);height:var(--nav-h);border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--blue);overflow:hidden;isolation:isolate;border:0;cursor:pointer;flex:none;text-decoration:none;transition:color .4s var(--ease)}
.circle svg{width:1.15rem;height:1.15rem}
.circle::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .5s var(--ease);z-index:-1}
.circle:hover::before,.circle:focus-visible::before{transform:scale(1)}
.circle:hover,.circle:focus-visible{color:var(--white)}
.circle--on-blue::before{background:var(--yellow)}
.circle--on-blue:hover,.circle--on-blue:focus-visible{color:var(--blue)}


/* Underline link that wipes out and back in */
.u-link{position:relative;display:inline-block;text-decoration:none;padding-bottom:.2em}
.u-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:currentColor;transform-origin:right}
.u-link:hover::after,.u-link:focus-visible::after{animation:u-wipe .8s var(--ease)}
@keyframes u-wipe{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* Rolling label (hover swaps text upward) */
.roll{display:inline-grid;overflow:hidden;line-height:1.2}
.roll>span,.roll::after{grid-area:1/1;transition:transform .5s var(--ease)}
.roll::after{content:attr(data-label);transform:translateY(110%)}
a:hover>.roll>span,a:focus-visible>.roll>span{transform:translateY(-110%)}
a:hover>.roll::after,a:focus-visible>.roll::after{transform:translateY(0)}

/* Logo: all colour variants stacked; the body[data-surface] picks one */
.logo{position:relative;display:inline-block;line-height:0}
.logo img{height:100%;width:auto}
.logo img+img{position:absolute;inset:0 auto auto 0;opacity:0}
.logo img{transition:opacity .5s ease}
body[data-surface="blue"]   .logo--adaptive .logo__default{opacity:0}
body[data-surface="blue"]   .logo--adaptive .logo__on-blue{opacity:1}
body[data-surface="yellow"] .logo--adaptive .logo__default{opacity:0}
body[data-surface="yellow"] .logo--adaptive .logo__on-yellow{opacity:1}
body[data-surface="reel"]   .logo--adaptive .logo__default{opacity:0}
body[data-surface="reel"]   .logo--adaptive .logo__on-blue{opacity:1}

.tag{display:inline-block;align-self:flex-start;font-size:.65rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;border-radius:var(--pill);padding:.25rem .6rem}

/* Header/menu ink follows what is behind it (set by js/modules/theme.js) */
body{--nav-ink:var(--white);--nav-accent:var(--yellow)}
body[data-surface="light"]{--nav-ink:var(--blue);--nav-accent:var(--blue)}
body[data-surface="yellow"]{--nav-ink:var(--on-yellow);--nav-accent:var(--on-yellow)}
body[data-section="blue"]{--dock-ink:var(--white)}
body{--dock-ink:var(--blue)}
body[data-section="blue"],body[data-section="reel"]{--dock-ink:var(--white)}

/* Empty image block. Drop an <img> (or <video>) inside and the label disappears. */
.slot{position:relative;overflow:hidden;background:transparent;color:var(--slot-ink);display:grid;place-items:center;outline:2px dashed var(--slot-ink);outline-offset:-14px}
.slot__label{font-size:.9rem;letter-spacing:.12em}
.slot img,.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot picture{display:contents}
.slot:has(img,video){outline:0;background:none}
.slot:has(img,video) .slot__label{display:none}
.slot--bleed{outline:0;background:none}