/*
 * The Camera Guys header logo morph.
 * The existing image and link remain the source of truth; this layer is visual only.
 */

#Top_bar #logo.tcg-logo-morph-ready {
    /* Entrance: 330ms morph + 80ms settle + 180ms ray + 2 x 20ms stagger = 630ms. */
    --tcg-logo-morph-duration: 330ms;
    --tcg-logo-settle-duration: 80ms;
    --tcg-logo-flash-duration: 180ms;
    --tcg-logo-flash-stagger: 20ms;
    --tcg-logo-return-duration: 220ms;
    --tcg-logo-image-fade-duration: 260ms;
    --tcg-logo-camera-reveal-delay: 100ms;
    --tcg-logo-ease: cubic-bezier(.22, .61, .36, 1);
    position: relative;
    isolation: isolate;
    overflow: visible;
}

#Top_bar #logo:focus-visible {
    outline: 3px solid #111;
    outline-offset: 3px;
}

/* Hidden by default, including when hover capability changes after initialisation. */
#Top_bar #logo .tcg-logo-morph {
    display: none;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    #Top_bar #logo.tcg-logo-morph-ready > img {
        position: relative;
        z-index: 1;
        transform-origin: 50% 50%;
        transition:
            opacity var(--tcg-logo-return-duration) var(--tcg-logo-ease),
            transform var(--tcg-logo-return-duration) var(--tcg-logo-ease);
    }

    #Top_bar #logo .tcg-logo-morph {
        --tcg-logo-width: 249px;
        --tcg-logo-height: 44px;
        position: absolute;
        display: block;
        z-index: 2;
        top: 50%;
        left: 50%;
        width: var(--tcg-logo-width);
        height: var(--tcg-logo-height);
        overflow: visible;
        opacity: 0;
        transform: translate(-50%, -50%);
        transition:
            width var(--tcg-logo-return-duration) var(--tcg-logo-ease),
            opacity var(--tcg-logo-return-duration) var(--tcg-logo-ease);
    }

    #Top_bar #logo .tcg-logo-morph__camera {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
        /* Preserve the existing icon colour; all camera and ray strokes share it. */
        color: var(--tcg-logo-icon-color, #000);
        opacity: 0;
        transform: scale(.94);
        transform-origin: 50% 55%;
        transition:
            opacity var(--tcg-logo-return-duration) var(--tcg-logo-ease),
            transform var(--tcg-logo-return-duration) var(--tcg-logo-ease);
    }

    /* Match the theme's logo visibility override so its image border also fades. */
    #Top_bar #logo.tcg-logo-morph-ready.tcg-logo-morph-active > img {
        opacity: 0 !important;
        transform: scaleX(.26);
        transition-duration: var(--tcg-logo-image-fade-duration), var(--tcg-logo-morph-duration);
    }

    #Top_bar #logo.tcg-logo-morph-active .tcg-logo-morph {
        width: calc(var(--tcg-logo-height) * 1.45);
        opacity: 1;
        transition-duration: var(--tcg-logo-morph-duration);
    }

    #Top_bar #logo.tcg-logo-morph-active .tcg-logo-morph__camera {
        opacity: 1;
        transform: scale(1);
        transition-duration: calc(var(--tcg-logo-morph-duration) - var(--tcg-logo-camera-reveal-delay)), var(--tcg-logo-morph-duration);
        transition-delay: var(--tcg-logo-camera-reveal-delay), 0ms;
    }

    #Top_bar #logo .tcg-logo-morph__ray {
        --tcg-ray-index: 0;
        --tcg-ray-x: -.5px;
        --tcg-ray-y: -1.5px;
        opacity: 0;
        pointer-events: none;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }

    #Top_bar #logo .tcg-logo-morph__ray--diagonal {
        --tcg-ray-index: 1;
        --tcg-ray-x: 1px;
        --tcg-ray-y: -1.25px;
    }

    #Top_bar #logo .tcg-logo-morph__ray--right {
        --tcg-ray-index: 2;
        --tcg-ray-x: 1.5px;
        --tcg-ray-y: -.5px;
    }

    #Top_bar #logo.tcg-logo-flash-active .tcg-logo-morph__ray {
        animation: tcg-logo-flash var(--tcg-logo-flash-duration) var(--tcg-logo-ease) both;
        animation-delay: calc(var(--tcg-logo-morph-duration) + var(--tcg-logo-settle-duration) + var(--tcg-ray-index) * var(--tcg-logo-flash-stagger));
        animation-iteration-count: 1;
    }
}

@keyframes tcg-logo-flash {
    0% {
        opacity: 0;
        stroke-dashoffset: 1;
        transform: translate(0, 0);
    }
    35% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    65% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    100% {
        opacity: 0;
        stroke-dashoffset: 0;
        transform: translate(var(--tcg-ray-x), var(--tcg-ray-y));
    }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
    #Top_bar #logo.tcg-logo-morph-ready > img {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    #Top_bar #logo .tcg-logo-morph {
        display: none !important;
    }

    #Top_bar #logo .tcg-logo-morph__ray {
        animation: none !important;
    }
}