/* Corner contact tag and language switcher.
   These two controls sit on top of the theme; theme stylesheets are untouched.
   The open/close feel copies the theme's own share panel: the container appears
   first, then the items fade in one after another, .3s linear, 120ms apart,
   and dim to .6 on hover - the same numbers as .share-icon in style.css. */

:root {
    --goga-tag-bg: #111111;
    --goga-tag-fg: #ffffff;
    --goga-tag-size: 62px;
    --goga-tag-panel: 268px;
    --goga-tag-row: 46px;
    --goga-tag-ease: cubic-bezier(.22, .61, .36, 1);
    --goga-tag-open: .45s;
}

/* ------------------------------------------------------------------ *
 * Corner tag: a square flush in the page corner that opens diagonally *
 * ------------------------------------------------------------------ */

.goga-corner {
    position: fixed;
    bottom: 0;
    z-index: 60;
    font-family: inherit;
}

.goga-corner--bottom_right { right: 0; }
.goga-corner--bottom_left { left: 0; }

.goga-corner__panel {
    position: absolute;
    bottom: 0;
    width: var(--goga-tag-size);
    height: var(--goga-tag-size);
    background: var(--goga-tag-bg);
    color: var(--goga-tag-fg);
    overflow: hidden;
    transition: width var(--goga-tag-open) var(--goga-tag-ease),
                height var(--goga-tag-open) var(--goga-tag-ease);
    will-change: width, height;
}

.goga-corner--bottom_right .goga-corner__panel { right: 0; }
.goga-corner--bottom_left .goga-corner__panel { left: 0; }

/* Growing width and height together is what reads as the diagonal open. */
.goga-corner.is-open .goga-corner__panel {
    width: var(--goga-tag-panel);
    height: auto;
    min-height: var(--goga-tag-panel);
}

/* The square itself is the toggle, pinned to the corner at all times.
   The .3s ease-out and the hover inversion are taken from .show-share. */
.goga-corner__toggle {
    position: absolute;
    bottom: 0;
    width: var(--goga-tag-size);
    height: var(--goga-tag-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--goga-tag-bg);
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--goga-tag-fg);
    cursor: pointer;
    z-index: 2;
    transition: background .3s ease-out, color .3s ease-out;
    -webkit-appearance: none;
    appearance: none;
}

.goga-corner--bottom_right .goga-corner__toggle { right: 0; }
.goga-corner--bottom_left .goga-corner__toggle { left: 0; }

.goga-corner__toggle:hover {
    background: var(--goga-tag-fg);
    color: var(--goga-tag-bg);
}

/* The icons are decoration: every click has to land on the button itself. */
.goga-corner__toggle > * { pointer-events: none; }

.goga-corner__toggle i {
    font-size: 17px;
    line-height: 1;
    transition: opacity .25s ease, transform .35s var(--goga-tag-ease);
}

.goga-corner__close-icon {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
}

.goga-corner.is-open .goga-corner__open-icon { opacity: 0; transform: rotate(90deg); }
.goga-corner.is-open .goga-corner__close-icon { opacity: 1; transform: rotate(0deg); }

/* Vertical caption printed up the side of the closed square, like a tab.
   Georgian breaks up badly when the browser stacks it glyph by glyph, so the
   label is laid out as one horizontal run and the box is turned instead. The
   element still sizes itself to the label, so a longer word cannot clip. */
.goga-corner__caption {
    position: absolute;
    bottom: var(--goga-tag-size);
    right: 0;
    width: var(--goga-tag-size);
    background: var(--goga-tag-bg);
    color: var(--goga-tag-fg);
    writing-mode: vertical-rl;
    text-orientation: sideways;
    transform: rotate(180deg);
    padding: 26px 0;
    font-size: 10px;
    line-height: var(--goga-tag-size);
    letter-spacing: 2px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .3s ease;
}

.goga-corner--bottom_left .goga-corner__caption { right: auto; left: 0; }
.goga-corner.is-open .goga-corner__caption { opacity: 0; pointer-events: none; }

.goga-corner__items {
    visibility: hidden;
    padding: 30px 26px calc(var(--goga-tag-size) + 8px);
    transition: visibility 0s linear var(--goga-tag-open);
}

.goga-corner.is-open .goga-corner__items {
    visibility: visible;
    transition-delay: 0s;
}

.goga-corner__title {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    margin-bottom: 18px;
    transition: opacity .3s linear;
}

.goga-corner.is-open .goga-corner__title {
    opacity: .5;
    transition-delay: var(--goga-tag-open);
}

/* One row per contact, on the theme's share timing: .3s linear, 120ms apart,
   starting once the panel has finished opening. */
.goga-corner__link {
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--goga-tag-row);
    color: var(--goga-tag-fg);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .3s linear;
}

.goga-corner__link:last-child { border-bottom: 0; }

.goga-corner.is-open .goga-corner__link {
    opacity: 1;
    transition-delay: calc(var(--goga-tag-open) + var(--goga-item-order, 0) * 120ms);
}

.goga-corner.is-open .goga-corner__link:hover { opacity: .6; }
.goga-corner__link i { width: 17px; text-align: center; font-size: 14px; }

/* The theme paints every <a> black; these live on a dark panel. */
.goga-corner a,
.goga-corner a:hover { color: var(--goga-tag-fg); }

/* Attention cue. The tag is flush in the corner, so the cue is a ring pushed
   out of the square rather than a movement that would detach it from the edge. */
.goga-corner__toggle::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--goga-tag-fg);
    opacity: 0;
    pointer-events: none;
}

.goga-corner--pulse:not(.is-open) .goga-corner__toggle::after {
    animation: gogaTagPulse 2.4s ease-out infinite;
}

.goga-corner--float:not(.is-open) .goga-corner__open-icon {
    animation: gogaTagBreathe 3.4s ease-in-out infinite;
}

@keyframes gogaTagPulse {
    from { opacity: .45; transform: scale(1); }
    to { opacity: 0; transform: scale(1.7); }
}

@keyframes gogaTagBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.16); }
}

@media (max-width: 768px) {
    :root { --goga-tag-panel: 232px; }
    .goga-corner__caption { display: none; }
}

/* ------------------------------------------------------------ *
 * Language switcher: the same corner square, opposite the tag    *
 * ------------------------------------------------------------ */

/* Kept off the header on purpose: with eight menu items the header row is
   already full at 1200px, and anything added there overlaps the navigation. */
.goga-corner--lang { --goga-tag-panel: 224px; }

.goga-corner__code {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: opacity .25s ease;
}

.goga-corner--lang .goga-corner__link i { opacity: 0; transition: opacity .25s ease; }
.goga-corner--lang .goga-corner__link.is-active i { opacity: .55; }
.goga-corner.is-open .goga-corner__code { opacity: 0; }

/* Plain text pair in the header, for sites that prefer it there. */
.goga-lang--inline {
    position: absolute;
    right: 165px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 30;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.goga-lang__flat { text-transform: uppercase; }
.goga-lang__flat.is-active { opacity: .4; }
.goga-lang__sep { opacity: .35; }

/* ------------------------------------- *
 * Previous round launcher, kept optional *
 * ------------------------------------- */

.goga-bubble { position: fixed; bottom: 26px; z-index: 60; }
.goga-bubble--bottom_right { right: 26px; }
.goga-bubble--bottom_left { left: 26px; }

.goga-bubble__items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
    visibility: hidden;
    transition: visibility 0s linear .3s;
}

.goga-bubble--bottom_left .goga-bubble__items { align-items: flex-start; }
.goga-bubble.is-open .goga-bubble__items { visibility: visible; transition-delay: 0s; }

.goga-bubble__link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .3s linear;
}

.goga-bubble.is-open .goga-bubble__link {
    opacity: 1;
    transition-delay: calc(var(--goga-item-order, 0) * 120ms);
}

.goga-bubble.is-open .goga-bubble__link:hover { opacity: .6; }
.goga-bubble__link span { background: #fff; padding: 7px 12px; box-shadow: 0 6px 22px rgba(0, 0, 0, .13); }

.goga-bubble__launcher {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 0;
    background: var(--goga-tag-bg);
    color: var(--goga-tag-fg);
    cursor: pointer;
    font-size: 17px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    -webkit-appearance: none;
    appearance: none;
}

.goga-bubble__launcher > * { pointer-events: none; }

.goga-bubble--float:not(.is-open) .goga-bubble__launcher {
    animation: gogaBubbleFloat 3.4s ease-in-out infinite;
}

.goga-bubble--pulse:not(.is-open) .goga-bubble__launcher {
    animation: gogaBubblePulse 2.2s ease-out infinite;
}

@keyframes gogaBubbleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes gogaBubblePulse {
    0% { box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 0 0 0 rgba(0, 0, 0, .28); }
    100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 0 0 18px rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .goga-corner__panel,
    .goga-corner__link,
    .goga-corner__title,
    .goga-bubble__link { transition-duration: .01ms; transition-delay: 0ms; }

    .goga-corner__toggle::after,
    .goga-corner__open-icon,
    .goga-bubble__launcher { animation: none !important; }
}