/* ==========================================================================
   Banner — Animated Profile (FAME Page Element)
   Ported from html/fame-banner-animated-profile/css/fame-banner-animated-profile.css
   and scoped to .fame-el-banr so it cannot leak into the page/theme.

   Design canvas: 718 x 575. Every readable string is real HTML text; only the
   portrait, the student avatars, the medal and the brand mark are images.

   Colours, max width and the per-part visibility are driven by settings —
   index.php writes them as custom properties on the element root, so this file
   never has to change per instance.
   ========================================================================== */

.fame-el-banr {
    --c-ink:          #656d7f;   /* secondary / body text            */
    --c-amber:        #f8b81f;   /* "Excellence!"                    */
    --c-amber-rule:   var(--c-amber);
    --c-star:         #ffb400;   /* filled star                      */
    --c-star-empty:   #fdeccc;   /* unfilled half of the last star   */
    --c-blue:         #0063e3;   /* "234k+"                          */
    --c-blue-rule:    var(--c-blue);
    --c-green:        #49c192;   /* doctor name                      */
    --c-green-rule:   var(--c-green);
    --c-tile:         #f9f6ee;   /* medal icon tile                  */
    --fame-banr-max:  850px;     /* banner width cap                 */
    --fame-banr-pad:  24px 16px 56px;

    display: grid;
    place-items: center;
    padding: var(--fame-banr-pad);
    font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.fame-el-banr *,
.fame-el-banr *::before,
.fame-el-banr *::after {
    box-sizing: border-box;
}

/* Off-screen holder for the star symbol */
.fame-el-banr .fame-banr-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}


/* ==========================================================================
   Stage
   --------------------------------------------------------------------------
   `--px` is one design pixel expressed in container-width units, so the whole
   composition scales as one proportional unit at any container size.
   ========================================================================== */

.fame-el-banr .fame-banr-profile-banner {
    --px: 0.13928cqw;          /* 100 / 718 */

    container-type: inline-size;
    position: relative;
    width: 100%;
    max-width: var(--fame-banr-max);
    margin: 0 auto;
    aspect-ratio: 718 / 575;
    isolation: isolate;
}

@supports not (container-type: inline-size) {
    .fame-el-banr .fame-banr-profile-banner {
        --px: 0.13928vw;
    }
}

.fame-el-banr .fame-banr-profile-banner__portrait {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 22px 28px rgba(36, 24, 92, 0.12));
}

/* Rotating dashed orbit — sits above the artwork, below the cards */
.fame-el-banr .fame-banr-profile-banner__orbit {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.fame-el-banr .fame-banr-profile-banner__mark {
    position: absolute;
    top: 0;
    left: calc(619 * var(--px));
    z-index: 3;
    width: calc(63 * var(--px));
    height: auto;
}


/* ==========================================================================
   Shared card shell
   ========================================================================== */

.fame-el-banr .fame-banr-award-card,
.fame-el-banr .fame-banr-rating-card,
.fame-el-banr .fame-banr-name-card {
    position: absolute;
    z-index: 3;
    display: flex;
    box-shadow: 0 calc(4 * var(--px)) calc(14 * var(--px)) rgba(43, 37, 88, 0.05);
}

/* The thin coloured rule that peeks out below each card */
.fame-el-banr .fame-banr-award-card::after,
.fame-el-banr .fame-banr-rating-card::after,
.fame-el-banr .fame-banr-name-card::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    height: 25px;
    z-index: 0;
    width: 94%;
    border: 1px solid var(--c-amber-rule);
}


/* ==========================================================================
   Award card — "Award Winning Excellence!"
   ========================================================================== */

.fame-el-banr .fame-banr-award-card {
    top: calc(316 * var(--px));
    left: calc(23 * var(--px));
}
.fame-banr-award-card-inn {
    display: flex;
    min-width: calc(272 * var(--px));
    min-height: calc(43 * var(--px));
    align-items: center;
    gap: calc(11 * var(--px));
    padding: 0 calc(21 * var(--px)) 0 calc(23 * var(--px));
    border-radius: max(9px, calc(14 * var(--px)));
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 45%, #fffbf0 100%);
    position: relative;
    z-index: 5;
}

.fame-el-banr .fame-banr-award-card::after {
    right: 0;
    bottom: calc(-6 * var(--px));
    left: 5px;
    border-color: var(--c-amber-rule);
}

.fame-el-banr .fame-banr-award-card__icon {
    flex: none;
    width: max(20px, calc(28 * var(--px)));
    height: auto;
    background: var(--c-tile);
    border-radius: max(6px, calc(8 * var(--px)));
}

.fame-el-banr .fame-banr-award-card__title {
    margin: 0;
    font-size: max(13px, calc(17 * var(--px)));
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-ink);
    white-space: nowrap;
}

.fame-el-banr .fame-banr-award-card__highlight {
    font-weight: 700;
    color: var(--c-amber);
}


/* ==========================================================================
   Rating card — students, count and star rating
   ========================================================================== */

.fame-el-banr .fame-banr-rating-card {
    --avatar: max(24px, calc(36 * var(--px)));

    top: calc(230 * var(--px));
    right: calc(24 * var(--px));
    
}
.fame-banr-rating-card-inn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: calc(215 * var(--px));
    min-height: calc(114 * var(--px));
    padding: calc(15 * var(--px)) calc(16 * var(--px)) calc(13 * var(--px)) calc(22 * var(--px));
    border-radius: max(11px, calc(18 * var(--px)));
    background: radial-gradient(103.48% 1115.66% at 0% 0%, #FFFFFF 35.58%, #EFF6FF 100%);
    box-shadow: 1.76987px 1.76987px 22.1234px rgba(8, 20, 102, 0.08);
    position: relative;
    z-index: 3;
}

.fame-el-banr .fame-banr-rating-card::after {
    right: 0;
    bottom: calc(-6 * var(--px));
    left: 5px;
    border-color: var(--c-blue-rule);
}

.fame-el-banr .fame-banr-rating-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(14 * var(--px));
    width: 100%;
}

.fame-el-banr .fame-banr-rating-card__avatars {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fame-el-banr .fame-banr-rating-card__avatar {
    flex: none;
    width: var(--avatar);
    height: var(--avatar);
}

/* Same 34% overlap as the original artwork */
.fame-el-banr .fame-banr-rating-card__avatar + .fame-banr-rating-card__avatar {
    margin-left: calc(var(--avatar) * -0.342);
}

.fame-el-banr .fame-banr-rating-card__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.fame-el-banr .fame-banr-rating-card__count {
    margin: 0;
    font-size: max(15px, calc(21 * var(--px)));
    font-weight: 800;
    line-height: 1.1;
    color: var(--c-blue);
    white-space: nowrap;
}

.fame-el-banr .fame-banr-rating-card__plus {
    margin-left: 0.26em;
}

.fame-el-banr .fame-banr-rating-card__label {
    margin: calc(6 * var(--px)) 0 0;
    font-size: max(11px, calc(14 * var(--px)));
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-ink);
    white-space: nowrap;
}

.fame-el-banr .fame-banr-rating-card__rating {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--px));
    margin-top: calc(6 * var(--px));
}

.fame-el-banr .fame-banr-rating-card__score {
    font-size: max(12px, calc(15 * var(--px)));
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-ink);
    white-space: nowrap;
}


/* ==========================================================================
   Star rating — vector shapes, not an image
   ========================================================================== */

.fame-el-banr .fame-banr-star-rating {
    display: flex;
    align-items: center;
    gap: calc(5 * var(--px));
}

.fame-el-banr .fame-banr-star {
    flex: none;
    width: max(11px, calc(14.5 * var(--px)));
    height: auto;
    fill: var(--c-star);
}

.fame-el-banr .fame-banr-star--empty {
    fill: var(--c-star-empty);
}


/* ==========================================================================
   Name card — "Dr. Hafiz Atif (C.E.O)"
   ========================================================================== */

.fame-el-banr .fame-banr-name-card {
    top: calc(448 * var(--px));
    left: calc(355 * var(--px));
    translate: -50% 0;
}
.fame-banr-name-card-inn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(4 * var(--px));
    min-width: calc(288 * var(--px));
    min-height: calc(95 * var(--px));
    padding: calc(10 * var(--px)) calc(20 * var(--px));
    border-radius: max(11px, calc(16 * var(--px)));
    background: linear-gradient(90deg, #ffffff 0%, #fdfffe 50%, #f5fffb 100%);
    text-align: center;
    position: relative;
    z-index: 2;
}

.fame-el-banr .fame-banr-name-card::after {
    right: 0;
    bottom: calc(-6 * var(--px));
    left: 5px;
    border-color: var(--c-green-rule);
}

.fame-el-banr .fame-banr-name-card__name {
    margin: 0;
    font-size: max(17px, calc(24 * var(--px)));
    font-weight: 800;
    line-height: 1.28;
    color: var(--c-green);
    white-space: nowrap;
}

.fame-el-banr .fame-banr-name-card__name a {
    color: inherit;
    text-decoration: none;
}

.fame-el-banr .fame-banr-name-card__name a:hover,
.fame-el-banr .fame-banr-name-card__name a:focus {
    text-decoration: underline;
}

.fame-el-banr .fame-banr-name-card__role {
    font-weight: inherit;
    color: inherit;
}

.fame-el-banr .fame-banr-name-card__credentials {
    margin: 0;
    font-size: max(13px, calc(18 * var(--px)));
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
    white-space: nowrap;
}


/* ==========================================================================
   Decorative motion layers
   --------------------------------------------------------------------------
   Paint order matches the original stacking: glows (1) → particles (2) →
   artwork, orbit, cards and brand mark (3, in document order) → shine (4) →
   sparkles (5).
   ========================================================================== */

.fame-el-banr .fame-banr-glow {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
    opacity: 0.42;
}

.fame-el-banr .fame-banr-glow-one {
    top: 16%;
    left: 20%;
    width: 48%;
    aspect-ratio: 1;
    background: rgba(126, 90, 226, 0.24);
    animation: fameBanrGlowPulse 4s ease-in-out infinite;
}

.fame-el-banr .fame-banr-glow-two {
    top: 38%;
    right: 4%;
    width: 28%;
    aspect-ratio: 1;
    background: rgba(41, 126, 237, 0.16);
    animation: fameBanrGlowPulse 4.8s ease-in-out infinite reverse;
}

.fame-el-banr .fame-banr-particle {
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
}

.fame-el-banr .fame-banr-particle-one {
    top: 18%;
    left: 9%;
    background: #f1b927;
    animation: fameBanrParticleOne 4s ease-in-out infinite;
}

.fame-el-banr .fame-banr-particle-two {
    top: 8%;
    right: 20%;
    background: #7d59df;
    animation: fameBanrParticleTwo 5s ease-in-out infinite;
}

.fame-el-banr .fame-banr-particle-three {
    right: 8%;
    bottom: 25%;
    border: 2px solid #40c59d;
    animation: fameBanrParticleThree 5.5s ease-in-out infinite;
}

.fame-el-banr .fame-banr-shine {
    position: absolute;
    z-index: 4;
    top: 4%;
    left: 14%;
    width: 55%;
    height: 83%;
    overflow: hidden;
    border-radius: 45%;
    pointer-events: none;
}

.fame-el-banr .fame-banr-shine::after {
    content: "";
    position: absolute;
    top: -25%;
    left: -70%;
    width: 24%;
    height: 150%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.34),
        transparent
    );
    transform: rotate(15deg);
    animation: fameBanrShineMove 6.5s ease-in-out infinite;
}

.fame-el-banr .fame-banr-spark {
    position: absolute;
    z-index: 5;
    display: block;
    line-height: 1;
    pointer-events: none;
    animation: fameBanrSparkle 2.4s ease-in-out infinite;
}

.fame-el-banr .fame-banr-spark::before {
    content: "\2726";
}

.fame-el-banr .fame-banr-spark-one {
    bottom: 13%;
    left: 14%;
    color: #f3bd33;
    font-size: clamp(20px, 4vw, 38px);
}

.fame-el-banr .fame-banr-spark-two {
    top: 10%;
    right: 15%;
    color: #7e5ae2;
    font-size: clamp(14px, 2.4vw, 24px);
    animation-delay: -0.8s;
}

.fame-el-banr .fame-banr-spark-three {
    top: 37%;
    left: 5%;
    color: #40c59d;
    font-size: clamp(12px, 2vw, 20px);
    animation-delay: -1.4s;
}

.fame-el-banr .fame-banr-orbit {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.72;
    animation: fameBanrOrbitSpin 16s linear infinite;
}

.fame-el-banr .fame-banr-orbit-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: fameBanrDotPulse 1.8s ease-in-out infinite;
}

.fame-el-banr .fame-banr-orbit-dot--delayed {
    animation-delay: -0.8s;
}


/* ==========================================================================
   Animated elements
   --------------------------------------------------------------------------
   The three cards only ever scale UP, so they never uncover their slot in the
   artwork. The "Animations" setting adds .fame-banr-static, which freezes the
   whole composition without changing any layout.
   ========================================================================== */

.fame-el-banr .fame-banr-profile-banner       { animation: fameBanrStageFloat  5.5s ease-in-out infinite; }
.fame-el-banr .fame-banr-award-card           { animation: fameBanrAwardPulse  3.6s ease-in-out infinite; }
.fame-el-banr .fame-banr-rating-card          { animation: fameBanrRatingPulse 4.4s ease-in-out infinite; }
.fame-el-banr .fame-banr-name-card            { animation: fameBanrNamePulse   4.8s ease-in-out infinite; }
.fame-el-banr .fame-banr-profile-banner__mark { animation: fameBanrLogoSpin     12s linear      infinite; }

.fame-el-banr .fame-banr-award-card,
.fame-el-banr .fame-banr-rating-card,
.fame-el-banr .fame-banr-name-card,
.fame-el-banr .fame-banr-profile-banner__mark {
    transform-origin: center;
}

.fame-el-banr.fame-banr-static,
.fame-el-banr.fame-banr-static *,
.fame-el-banr.fame-banr-static *::before,
.fame-el-banr.fame-banr-static *::after {
    animation: none !important;
}

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

@keyframes fameBanrAwardPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.025) rotate(-0.45deg); }
}

@keyframes fameBanrRatingPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.03) rotate(0.55deg); }
}

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

@keyframes fameBanrLogoSpin {
    to { transform: rotate(360deg); }
}

@keyframes fameBanrOrbitSpin {
    to { transform: rotate(360deg); }
}

@keyframes fameBanrDotPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.75); }
    50%      { opacity: 1;    transform: scale(1.4); }
}

@keyframes fameBanrGlowPulse {
    0%, 100% { opacity: 0.28; transform: scale(0.92); }
    50%      { opacity: 0.56; transform: scale(1.08); }
}

@keyframes fameBanrSparkle {
    0%, 100% { opacity: 0.45; transform: scale(0.72) rotate(0deg); }
    50%      { opacity: 1;    transform: scale(1.18) rotate(24deg); }
}

@keyframes fameBanrParticleOne {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(18px, -15px); }
}

@keyframes fameBanrParticleTwo {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-14px, 16px) scale(1.35); }
}

@keyframes fameBanrParticleThree {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(-16px, -13px) rotate(180deg); }
}

@keyframes fameBanrShineMove {
    0%, 22%   { left: -70%; }
    55%, 100% { left: 155%; }
}

@media (prefers-reduced-motion: reduce) {
    .fame-el-banr *,
    .fame-el-banr *::before,
    .fame-el-banr *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   Small screens
   --------------------------------------------------------------------------
   The type floors above stop the text shrinking past legibility; the cards
   grow to fit it. A little extra breathing room keeps the grown name card
   clear of whatever follows the banner.
   ========================================================================== */

@media (max-width: 600px) {
    .fame-el-banr {
        --fame-banr-pad: 24px 16px 72px;
    }

    .fame-el-banr .fame-banr-rating-card,
    .fame-el-banr .fame-banr-name-card,
    .fame-el-banr .fame-banr-award-card {
        box-shadow: 0 3px 10px rgba(43, 37, 88, 0.07);
    }
}