/* Inside-page application banner with Mauritian students in a library, plus word cloud and gear motion. */
.inside-wordcloud-banner {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #0078D4;
    border-radius: 0;
    isolation: isolate;
}
.inside-wordcloud-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(90deg,
            rgba(0,49,92,.08) 0%,
            rgba(0,73,128,.18) 32%,
            rgba(0,120,212,.58) 56%,
            rgba(0,120,212,.92) 78%,
            #0078D4 100%),
        url('../images/banner-mauritius-library.png');
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    pointer-events: none;
}
.inside-wordcloud-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,78,140,.08));
    pointer-events: none;
}
.inside-gear-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.gear-link {
    position: absolute;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.50), rgba(120,245,255,.88));
    box-shadow: 0 0 12px rgba(120,245,255,.20);
    transform-origin: left center;
    opacity: .78;
}
.gear-link--a { right: 8%; top: 47%; width: 30%; transform: rotate(-16deg); }
.gear-link--b { right: 20%; top: 60%; width: 18%; transform: rotate(12deg); }
.gear-link--c { right: 5%; top: 71%; width: 22%; transform: rotate(-24deg); }
.gear {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.82);
    background:
        radial-gradient(circle at center, rgba(255,255,255,.08) 0 32%, transparent 33% 100%),
        radial-gradient(circle at center, transparent 0 56%, rgba(120,245,255,.28) 57% 60%, transparent 61% 100%);
    box-shadow: inset 0 0 0 8px rgba(255,255,255,.06), 0 0 18px rgba(120,245,255,.22);
    opacity: .90;
    animation: bannerGearSpin 18s linear infinite;
}
.gear::before,
.gear::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.gear::before {
    inset: -10%;
    background: repeating-conic-gradient(from 0deg,
        rgba(255,255,255,.86) 0deg 8deg,
        transparent 8deg 28deg);
    -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 63% 100%);
            mask: radial-gradient(circle, transparent 0 62%, #000 63% 100%);
    opacity: .60;
}
.gear::after {
    inset: 28%;
    border: 2px solid rgba(255,255,255,.74);
}
.gear--xl { width: 136px; height: 136px; right: 6%; top: 22%; }
.gear--lg { width: 88px; height: 88px; right: 25.5%; top: 51%; animation-direction: reverse; animation-duration: 12s; }
.gear--md { width: 68px; height: 68px; right: 32%; top: 30%; animation-duration: 10s; }
.gear--sm { width: 52px; height: 52px; right: 18%; top: 17%; animation-direction: reverse; animation-duration: 8.5s; }
.gear--xs { width: 40px; height: 40px; right: 12%; top: 66%; animation-duration: 7.2s; }

.inside-wordcloud {
    position: absolute;
    z-index: 2;
    right: clamp(18px, 4vw, 72px);
    top: 18px;
    width: min(49vw, 650px);
    height: 214px;
    transform: scale(.75);
    transform-origin: right center;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    text-shadow: 0 1px 8px rgba(0,45,85,.24);
}
.wc {
    position: absolute;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    opacity: .58;
    font-weight: 600;
    letter-spacing: .01em;
    animation: wordFloat 12s ease-in-out infinite alternate;
}
.wc-vertical { writing-mode: vertical-rl; text-orientation: mixed; }
.wc-1 { right:26%; top:33%; font-size:40px; font-weight:800; opacity:.96; animation-duration:11.2s; }
.wc-2 { right:3%; top:13%; font-size:23px; opacity:.83; animation-duration:12.6s; animation-delay:-3s; }
.wc-3 { right:1%; top:44%; font-size:20px; opacity:.57; animation-duration:11.7s; animation-delay:-7s; }
.wc-4 { right:55%; top:8%; font-size:22px; opacity:.74; animation-duration:12.9s; animation-delay:-4s; }
.wc-5 { right:2%; top:73%; font-size:18px; opacity:.68; animation-duration:11.8s; animation-delay:-5s; }
.wc-6 { right:42%; top:73%; font-size:18px; opacity:.70; animation-duration:13s; animation-delay:-8s; }
.wc-7 { right:40%; top:18%; font-size:17px; opacity:.63; animation-duration:11.4s; animation-delay:-2s; }
.wc-8 { right:66%; top:56%; font-size:18px; opacity:.75; animation-duration:12.2s; animation-delay:-9s; }
.wc-9 { right:18%; top:58%; font-size:16px; opacity:.54; animation-duration:11.9s; animation-delay:-6s; }
.wc-10 { right:89%; top:14%; font-size:15px; opacity:.50; animation-duration:12.7s; animation-delay:-2s; }
.wc-11 { right:65%; top:29%; font-size:14px; opacity:.60; animation-duration:11.5s; animation-delay:-8s; }
.wc-12 { right:13%; top:34%; font-size:18px; opacity:.64; animation-duration:12.8s; animation-delay:-1s; }
.wc-13 { right:49%; top:52%; font-size:14px; opacity:.48; animation-duration:11.3s; animation-delay:-4s; }
.wc-14 { right:78%; top:78%; font-size:14px; opacity:.50; animation-duration:12.3s; animation-delay:-6s; }
.wc-15 { right:70%; top:4%; font-size:15px; opacity:.59; animation-duration:11.6s; animation-delay:-5s; }
.wc-16 { right:26%; top:4%; font-size:14px; opacity:.49; animation-duration:12.5s; animation-delay:-7s; }
.wc-17 { right:7%; top:48%; font-size:13px; opacity:.54; animation-duration:11.1s; animation-delay:-3s; }
.wc-18 { right:49%; top:88%; font-size:13px; opacity:.50; animation-duration:12.4s; animation-delay:-10s; }
.wc-19 { right:74%; top:43%; font-size:13px; opacity:.52; animation-duration:11.7s; animation-delay:-4s; }
.wc-20 { right:35%; top:3%; font-size:12px; opacity:.47; animation-duration:12.1s; animation-delay:-8s; }
.wc-21 { right:21%; top:86%; font-size:13px; opacity:.51; animation-duration:11.4s; animation-delay:-5s; }
.wc-22 { right:7%; top:88%; font-size:12px; opacity:.48; animation-duration:12.8s; animation-delay:-6s; }
.wc-23 { right:94%; top:54%; font-size:12px; opacity:.47; animation-duration:11.9s; animation-delay:-9s; }
.wc-24 { right:57%; top:40%; font-size:12px; opacity:.49; animation-duration:12.6s; animation-delay:-3s; }
.wc-25 { right:82%; top:3%; font-size:12px; opacity:.47; animation-duration:11.5s; animation-delay:-7s; }
.wc-26 { right:34%; top:65%; font-size:12px; opacity:.47; animation-duration:12.2s; animation-delay:-1s; }
.wc-27 { right:1%; top:3%; font-size:11px; opacity:.45; animation-duration:11.8s; animation-delay:-9s; }
.wc-28 { right:84%; top:89%; font-size:12px; opacity:.50; animation-duration:12.9s; animation-delay:-4s; }

@keyframes bannerGearSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes wordFloat {
    0% { transform: translate3d(-3px, 4px, 0) scale(.96); opacity: .46; }
    45% { transform: translate3d(4px, -3px, 0) scale(1.025); }
    100% { transform: translate3d(-1px, -6px, 0) scale(1.06); opacity: .90; }
}
@media (max-width: 820px) {
    .inside-wordcloud-banner { height: 210px; }
    .inside-wordcloud-banner::before {
        background-image:
            linear-gradient(90deg, rgba(0,78,140,.25), rgba(0,120,212,.86) 58%, #0078D4 100%),
            url('../images/banner-mauritius-library.png');
        background-position: 34% center;
    }
    .inside-wordcloud { width: 84vw; right: -20px; top: 0; opacity: .95; transform: scale(.66); }
    .gear--xl { width: 94px; height: 94px; right: 2%; top: 18%; }
    .gear--lg { width: 64px; height: 64px; right: 24%; top: 53%; }
    .gear--md { width: 52px; height: 52px; right: 37%; top: 30%; }
    .gear--sm { width: 40px; height: 40px; right: 18%; top: 18%; }
    .gear--xs { width: 30px; height: 30px; right: 11%; top: 67%; }
}
@media (prefers-reduced-motion: reduce) {
    .gear, .wc { animation: none !important; }
}