/* Brand logo on hover, "flip" style (assets/js/brand-hover.js): brand names in the page text carry a dotted underline
   in their brand colour; on hover (a tap on touch screens) the word flips away and its logo flips in, in the same spot. */
.brand-name {
    display: inline-block;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.18em;
    -webkit-text-decoration-skip: none;
    text-decoration-skip-ink: none;
    cursor: default;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(.3, .1, .3, 1), opacity 0.25s;
    transition: transform 0.3s cubic-bezier(.3, .1, .3, 1), opacity 0.25s;
}
.brand-name[data-brand="adcrest"] { text-decoration-color: rgba(2, 75, 191, 0.6); }
.brand-name[data-brand="trendlabs"] { text-decoration-color: rgba(104, 40, 144, 0.65); }
.brand-name[data-brand="bajugali"] { text-decoration-color: rgba(208, 28, 28, 0.6); }
.text-white .brand-name { text-decoration-color: rgba(255, 255, 255, 0.6); }
.brand-name.is-active { -webkit-transform: perspective(240px) rotateX(90deg); transform: perspective(240px) rotateX(90deg); opacity: 0; }

/* the logo: one element in <body>, placed with position: fixed right on top of the hovered name */
.brand-pop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: perspective(240px) rotateX(-90deg);
    transform: perspective(240px) rotateX(-90deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: -webkit-transform 0.34s cubic-bezier(.2, .9, .3, 1.15) 0.12s, opacity 0.12s 0.12s;
    transition: transform 0.34s cubic-bezier(.2, .9, .3, 1.15) 0.12s, opacity 0.12s 0.12s;
}
.brand-pop.is-open { opacity: 1; -webkit-transform: none; transform: none; }
.brand-pop__card {
    display: block;
    padding: 4px 8px;
    line-height: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(2, 24, 70, 0.16);
}
.brand-pop__card img { display: block; max-width: none; }

@media (prefers-reduced-motion: reduce) {
    .brand-name, .brand-pop { -webkit-transition: opacity 0.01s; transition: opacity 0.01s; }
    .brand-name.is-active { -webkit-transform: none; transform: none; }
    .brand-pop { -webkit-transform: none; transform: none; }
}