/* ============================================================
   Header logo effects.
   The active effect is chosen on the homepage's "Logo Effect"
   tab; base.html renders `logo-effect-<slug>` on .site-logo and
   logo-effects.js drives the interactive / scroll / particle
   ones. Overlay layers are masked with the logo PNG so every
   effect follows the exact logo shape, not its bounding box.
   ============================================================ */

.site-logo a {
    position: relative;
}

/* Shared masked overlay layers (only effects listed here create one) */
.logo-effect-chrome a::before,
.logo-effect-chrome a::after,
.logo-effect-gradient-flow a::before,
.logo-effect-spotlight a::after,
.logo-effect-hover-sheen a::after,
.logo-effect-entrance-glint a::after,
.logo-effect-scroll-sheen a::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* the hero-overlap filter on the img creates a stacking context that
       would otherwise paint above these overlays */
    z-index: 1;
    -webkit-mask: url("../chamberlogo.b7e45558b10c.png") center / 100% 100% no-repeat;
    mask: url("../chamberlogo.b7e45558b10c.png") center / 100% 100% no-repeat;
}

/* ── Ambient: liquid chrome ──────────────────────────────── */
.logo-effect-chrome a {
    transition: transform .25s cubic-bezier(0, 0, .2, 1);
}
.logo-effect-chrome a:hover {
    transform: scale(1.05);
}
.logo-effect-chrome .logo-img {
    animation: logo-glow 7s ease-in-out infinite;
}
.logo-effect-chrome a::before {
    background-image: linear-gradient(
        100deg,
        #8fa7bd 0%,
        #e8eef5 15%,
        #7dc8fa 30%,
        #f7fbff 45%,
        #aebfd2 60%,
        #4f9fd8 75%,
        #e8eef5 90%,
        #8fa7bd 100%
    );
    background-size: 350% 100%;
    opacity: .92;
    animation: logo-chrome 8s ease-in-out infinite;
}
.logo-effect-chrome a::after {
    background-image: linear-gradient(
        115deg,
        transparent 40%,
        rgba(255, 255, 255, .95) 50%,
        transparent 60%
    );
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0;
    animation: logo-glint 5.5s ease-in-out infinite;
}
@keyframes logo-chrome {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes logo-glint {
    0%, 55%   { background-position: 100% 0; }
    90%, 100% { background-position: -40% 0; }
}

/* ── Ambient: gradient colour flow ───────────────────────── */
.logo-effect-gradient-flow a::before {
    background-image: linear-gradient(
        110deg,
        #1b6cb5 0%,
        #7dc8fa 30%,
        #c6ccd6 55%,
        #4f9fd8 80%,
        #1b6cb5 100%
    );
    background-size: 300% 100%;
    opacity: .9;
    animation: logo-chrome 7s ease-in-out infinite;
}

/* ── Ambient: breathing glow ─────────────────────────────── */
.logo-effect-glow .logo-img {
    animation: logo-glow 4.5s ease-in-out infinite;
}
@keyframes logo-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(125, 200, 250, .25)); }
    50%      { filter: drop-shadow(0 0 12px rgba(125, 200, 250, .6)); }
}
/* The transparent hero header inverts the logo to white via `filter`;
   glow keyframes set `filter` too, so use variants that keep the
   inversion (white drop-shadow glow reads better there as well). */
.site-header.hero-overlap .logo-effect-chrome .logo-img,
.site-header.hero-overlap .logo-effect-glow .logo-img {
    animation-name: logo-glow-hero;
}
@keyframes logo-glow-hero {
    0%, 100% { filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(160, 215, 255, .35)); }
    50%      { filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(160, 215, 255, .7)); }
}

/* ── Ambient: floating ───────────────────────────────────── */
.logo-effect-float .logo-img {
    animation: logo-float 4s ease-in-out infinite;
}
@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* ── Ambient: sail sway ──────────────────────────────────── */
.logo-effect-sway .logo-img {
    transform-origin: 50% 100%;
    animation: logo-sway 5s ease-in-out infinite;
}
@keyframes logo-sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}

/* ── Ambient: liquid wave (SVG filter rendered by base.html) ─ */
.logo-effect-wave a {
    filter: url(#logoWaveFilter);
}

/* ── Interactive: 3D tilt (JS sets --tilt-x / --tilt-y) ──── */
.logo-effect-tilt a {
    transform: perspective(500px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transition: transform .15s ease-out;
    will-change: transform;
}

/* ── Interactive: spotlight (JS sets --spot-x / --spot-y) ── */
.logo-effect-spotlight a::after {
    background-image: radial-gradient(
        circle 55px at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(255, 255, 255, .9),
        rgba(125, 200, 250, .35) 45%,
        transparent 72%
    );
    opacity: var(--spot-on, 0);
    transition: opacity .3s ease;
}

/* ── Interactive: magnetic pull (JS sets the transform) ──── */
.logo-effect-magnetic a {
    transition: transform .2s cubic-bezier(0, 0, .2, 1);
    will-change: transform;
}

/* ── Interactive: sheen on hover only ────────────────────── */
.logo-effect-hover-sheen a::after {
    background-image: linear-gradient(
        115deg,
        transparent 40%,
        rgba(255, 255, 255, .9) 50%,
        transparent 60%
    );
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 130% 0;
    transition: background-position .7s cubic-bezier(0, 0, .2, 1);
}
.logo-effect-hover-sheen a:hover::after {
    background-position: -30% 0;
}

/* ── Entrance: fade, rise, one glint ─────────────────────── */
.logo-effect-entrance-glint .logo-img {
    animation: logo-enter .8s cubic-bezier(0, 0, .2, 1) both;
}
.logo-effect-entrance-glint a::after {
    background-image: linear-gradient(
        115deg,
        transparent 40%,
        rgba(255, 255, 255, .9) 50%,
        transparent 60%
    );
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 130% 0;
    animation: logo-glint-once 1.1s ease-in-out .9s 1 both;
}
@keyframes logo-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes logo-glint-once {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}

/* ── Entrance: 3D unfold ─────────────────────────────────── */
.logo-effect-entrance-flip .logo-img {
    backface-visibility: hidden;
    animation: logo-unfold .9s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes logo-unfold {
    from { opacity: 0; transform: perspective(600px) rotateY(85deg); }
    to   { opacity: 1; transform: perspective(600px) rotateY(0deg); }
}

/* ── Entrance: draw-in (inline SVG traced from the logo PNG;
      logo-effects.js animates the pen strokes, then the real
      PNG cross-fades in as the "fill") ───────────────────── */
.logo-effect-draw .logo-drawin {
    transition: opacity .6s ease;
}
.logo-effect-draw img.logo-img {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    opacity: 0;
    transition: opacity .6s ease;
}
.logo-effect-draw.draw-done .logo-drawin {
    opacity: 0;
}
.logo-effect-draw.draw-done img.logo-img {
    opacity: 1;
}

/* ── Entrance: particle assembly (canvas built by JS) ────── */
.logo-effect-particles .logo-img {
    opacity: 0;
    transition: opacity .4s ease;
}
.logo-effect-particles.particles-done .logo-img {
    opacity: 1;
}
.logo-effect-particles .logo-particles {
    position: absolute;
    inset: 0;
    /* without an explicit CSS size the canvas falls back to its intrinsic
       (devicePixelRatio-scaled) size and lands offset from the logo */
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ── Scroll: shrink when scrolled (JS toggles the class) ─── */
.logo-effect-scroll-shrink .logo-img {
    transition: height .25s cubic-bezier(0, 0, .2, 1);
}
/* The header shrinks the logo 50px -> 40px on its own (mysite.css,
   .site-header.condensed). This opt-in effect only moves the trigger to 60px
   of scroll, so it must land on the same 40px -- a larger value here would
   make the logo GROW when the effect is selected.
   Excluded while the header sits over a full-screen hero: there the logo is
   meant to stay full size until the hero has passed, and this effect's 60px
   trigger would shrink it mid-hero. */
.site-header:not(.hero-overlap) .logo-effect-scroll-shrink.logo-condensed .logo-img {
    height: 40px;
}

/* ── Scroll: sheen driven by scroll (JS sets --sheen-pos) ── */
.logo-effect-scroll-sheen a::after {
    background-image: linear-gradient(
        115deg,
        transparent 40%,
        rgba(255, 255, 255, .9) 50%,
        transparent 60%
    );
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: var(--sheen-pos, 130%) 0;
}

/* ── Reduced motion: show a plain static logo ────────────── */
@media (prefers-reduced-motion: reduce) {
    .site-logo .logo-img,
    .site-logo a,
    .site-logo a::before,
    .site-logo a::after {
        animation: none !important;
        transition: none !important;
    }
    .site-logo a::before,
    .site-logo a::after {
        opacity: 0 !important;
    }
    .logo-effect-entrance-glint .logo-img,
    .logo-effect-entrance-flip .logo-img,
    .logo-effect-particles .logo-img {
        opacity: 1 !important;
        transform: none !important;
    }
    .logo-effect-draw .logo-drawin {
        display: none;
    }
    .logo-effect-draw img.logo-img {
        position: static;
        opacity: 1 !important;
    }
    .logo-effect-wave a {
        filter: none;
    }
}