/*!
 * ============================================================
 * QD World AI Microphone Control
 * ------------------------------------------------------------
 * Isolated, namespaced styles for the "Talk to QD World AI"
 * microphone control that replaces the old hero-slider
 * play/pause button (.play-pause_slider / .hsc_pp / .auto_actslider).
 *
 * The control keeps the existing ".hsc_pp" class from
 * css/style.css purely so its circular white treatment
 * (background, radius, box-shadow ring, hover) carries over —
 * position and size are then intentionally overridden below to
 * sit lower/left of .hsc_pp's original spot, near the
 * Start Explore / View Our Portfolio area, per the composition
 * refinement in this pass. Everything below is scoped under
 * ".qd-ai-mic" / ".qd-ai-mic__*" and does not touch any
 * pre-existing selector outside that namespace.
 * ============================================================
 */

/* Reset native <button> chrome, keep .hsc_pp's circular/background look */
.qd-ai-mic {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* --- Position + size ---------------------------------------------------
   Moved down and left from the original right:30px/top:50% spot, and
   made ~20% larger (50px -> 60px), toward the open area below the hero
   text / near Start Explore, without covering hero copy or the bottom
   slider controls. Anchored from the bottom (like Start Explore, the
   slider pagination and the prev/next arrows already are in this
   template) rather than vertical-centered, so it stays correctly
   clear of the hero heading regardless of how tall that text renders.
   Responsive via the template's own existing breakpoints (1064px /
   764px) rather than a single hard-coded position. */
.qd-ai-mic.hsc_pp {
    top: auto;
    bottom: 185px;
    right: 150px;
    margin-top: 0;
    width: 60px;
    height: 60px;
}

.qd-ai-mic i {
    position: relative;
    z-index: 1;
    color: #1c1c1c;
    font-size: 19px;
    transition: color 0.2s ease-in-out;
}

.qd-ai-mic:focus-visible {
    outline: 2px solid #ff7a00;
    outline-offset: 3px;
}

/* --- "LET'S TALK" label --------------------------------------------------
   Generated content, not new markup: a small, uppercase, secondary
   micro-label sitting immediately below the mic, centered exactly on
   the button's own horizontal center via left:50%/translateX(-50%) —
   correct regardless of the rendered text width, at any breakpoint.
   Purely decorative: the button's own aria-label already gives it an
   accessible name, so this is intentionally not separately exposed. */
.qd-ai-mic::before {
    content: "Let's Talk";
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Mukta Vaani', sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 2px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Connecting / Active (listening or speaking) states */
.qd-ai-mic--connecting,
.qd-ai-mic--active {
    background: #ff7a00;
}

.qd-ai-mic--connecting i,
.qd-ai-mic--active i {
    color: #fff;
}

.qd-ai-mic--connecting i {
    animation: qd-ai-mic-breathe 1.1s ease-in-out infinite;
}

/* Error state — icon communicates the mic is unavailable */
.qd-ai-mic--error i {
    color: #b3261e;
}

@keyframes qd-ai-mic-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Ripple rings, centered on the button, expanding outward */
.qd-ai-mic__ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 122, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

/* --- IDLE: always-on, attention-grabbing "blink + expand" pulse ---------
   This is the primary AI entry point on the page, so idle needs to
   read clearly at rest, not just be discoverable on hover. Each ring
   snaps to a brief bright "blink" early in its cycle, then expands
   outward (bigger than before) while fading — a sharp attention beat
   followed by a soft trailing ripple, not a slow uniform breathe.
   Two rings, half a cycle apart, so a blink is visible roughly every
   1.2s with no dead gap. A matching soft glow blinks on the button
   itself for extra visibility from a distance. Connecting/active below
   override this with their own animation; idle is simply what's left
   running whenever neither state class is present, so it never has to
   be "turned back on" with JS and never permanently disappears. */
.qd-ai-mic__ripple--1 {
    animation: qd-ai-mic-idle-pulse 2.4s ease-out infinite;
}

.qd-ai-mic__ripple--2 {
    animation: qd-ai-mic-idle-pulse 2.4s ease-out infinite;
    animation-delay: 1.2s;
}

@keyframes qd-ai-mic-idle-pulse {
    0% { transform: scale(1); opacity: 0; }
    15% { transform: scale(1.08); opacity: 0.85; }
    100% { transform: scale(1.9); opacity: 0; }
}

.qd-ai-mic.hsc_pp:not(.qd-ai-mic--connecting):not(.qd-ai-mic--active):not(.qd-ai-mic--error) {
    animation: qd-ai-mic-glow-blink 2.4s ease-out infinite;
}

@keyframes qd-ai-mic-glow-blink {
    0% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0); }
    15% { box-shadow: 0 0 0 10px rgba(255, 122, 0, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .qd-ai-mic__ripple--1,
    .qd-ai-mic__ripple--2 {
        animation: none;
        opacity: 0;
    }

    .qd-ai-mic.hsc_pp:not(.qd-ai-mic--connecting):not(.qd-ai-mic--active):not(.qd-ai-mic--error) {
        animation: none;
        box-shadow: none;
    }
}

/* --- CONNECTING: subtle single pulse, faster than idle ------------------ */
.qd-ai-mic--connecting .qd-ai-mic__ripple--1 {
    animation: qd-ai-mic-ripple 1.4s ease-out infinite;
}

.qd-ai-mic--connecting .qd-ai-mic__ripple--2,
.qd-ai-mic--connecting .qd-ai-mic__ripple--3 {
    display: none;
}

/* --- ACTIVE: more pronounced continuous ripple (unchanged behavior) ----- */
.qd-ai-mic--active .qd-ai-mic__ripple--1 {
    animation: qd-ai-mic-ripple 1.8s ease-out infinite;
}

.qd-ai-mic--active .qd-ai-mic__ripple--2 {
    animation: qd-ai-mic-ripple 1.8s ease-out infinite;
    animation-delay: 0.6s;
}

.qd-ai-mic--active .qd-ai-mic__ripple--3 {
    animation: qd-ai-mic-ripple 1.8s ease-out infinite;
    animation-delay: 1.2s;
}

@keyframes qd-ai-mic-ripple {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qd-ai-mic__ripple,
    .qd-ai-mic--connecting i {
        animation: none !important;
    }
}

/* Small, unobtrusive status message (e.g. mic permission needed).
   role="status" + aria-live is used for screen readers; visually it
   is a compact, auto-hiding label near the control — not a modal.
   Placed directly above the mic (the "Let's Talk" label now sits
   below it, so this space is free). */
.qd-ai-mic-status {
    position: absolute;
    right: 150px;
    bottom: calc(185px + 60px + 16px);
    max-width: 220px;
    padding: 8px 12px;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
    text-align: right;
    z-index: 21;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.qd-ai-mic-status--visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Tablet / small laptop -------------------------------------------
   Matches the template's own 1064px breakpoint (where the hero text
   and Start Explore padding already shrink) so the mic pulls in with
   the rest of the composition instead of staying pinned at desktop
   dimensions. */
@media only screen and (max-width: 1064px) {
    .qd-ai-mic.hsc_pp {
        right: 100px;
        bottom: 160px;
        width: 54px;
        height: 54px;
    }

    .qd-ai-mic i {
        font-size: 17px;
    }

    .qd-ai-mic::before {
        top: calc(100% + 12px);
        font-size: 9px;
    }

    .qd-ai-mic .qd-ai-mic__ripple {
        width: 54px;
        height: 54px;
        margin: -27px 0 0 -27px;
    }

    .qd-ai-mic-status {
        right: 100px;
        bottom: calc(160px + 54px + 16px);
    }
}

/* --- Mobile -------------------------------------------------------------
   The original control was hidden on mobile (".hsc_pp" is display:none
   at max-width:764px). Since the microphone is the only way to start
   the AI conversation, it stays visible here too — moved further down
   and slightly left so it clears the hero heading/paragraph/button
   above it, anchored from the bottom (like Start Explore and the
   slider controls already are on mobile) so it stays clear of that
   bottom control area regardless of viewport height. */
@media only screen and (max-width: 764px) {
    .qd-ai-mic.hsc_pp {
        display: flex !important;
        top: auto;
        bottom: 135px;
        right: 24px;
        margin-top: 0;
        width: 52px;
        height: 52px;
        font-size: 12px;
    }

    .qd-ai-mic i {
        font-size: 15px;
    }

    .qd-ai-mic::before {
        top: calc(100% + 10px);
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .qd-ai-mic .qd-ai-mic__ripple {
        width: 52px;
        height: 52px;
        margin: -26px 0 0 -26px;
    }

    .qd-ai-mic-status {
        right: 24px;
        bottom: calc(135px + 52px + 14px);
    }
}

/* ============================================================
 * Remove the orange "SWIPE" cursor badge
 * ------------------------------------------------------------
 * Source: the template's custom-cursor system in css/style.css
 * (".element" / ".element-item", ~line 158 onward) and the
 * hover bindings in js/scripts.js (~line 912) that add a
 * ".slider_hover" class to ".element-item" while the mouse is
 * over a .swiper-slide (i.e. the hero slider). That combination
 * is what enlarges the cursor dot and shows the "Swipe" text —
 * this is the badge being removed.
 *
 * Neither the cursor system itself, the ".close-icon" state
 * (used elsewhere for closing overlays), nor Swiper's own
 * swipe/drag handling is touched — only the ".slider_hover"
 * enlarge+label presentation is neutralized back to the
 * default small cursor dot, and only that specific state.
 * ============================================================ */
.element-item.slider_hover {
    width: 30px !important;
    height: 30px !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.element-item.slider_hover:before {
    transform: scale(1) !important;
}

.element-item.slider_hover:after {
    content: "" !important;
    opacity: 0 !important;
    transform: scale(0) !important;
}