/* ==========================================================================
   Throwable Elements  —  Mivon "tpThrowable" plugin styling
   Dalia Web & Soft Solution
   --------------------------------------------------------------------------
   Load AFTER assets/css/style.css so the overrides in section 1 win.
   Requires: assets/js/matter.js  +  assets/js/throwable.js
   ========================================================================== */


/* ==========================================================================
   1. FIX — "{ More Projects }" card was clipped
   --------------------------------------------------------------------------
   style.css line ~10356 pushed .see-more one full panel width OUTSIDE the
   horizontal-scroll track:

       .hr-sec .item-panel .see-more{ position:absolute; left:calc(100% + 15px) }

   The GSAP timeline only travels  -100% * (panels - 1),  so that extra
   virtual panel was never scrolled into view — which is why only a sliver of
   the purple card was visible.

   The card is now a REAL .item-panel in the markup, so we reset it back to a
   normal in-flow block. Same specificity (0,3,0) as the original rule, and
   this file loads later, so it wins.
   ========================================================================== */

.hr-sec .item-panel .see-more {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 70vh;           /* matches .hr-sec .fit-img */
    min-height: 480px;
}


/* ==========================================================================
   2. THE THROWABLE SCENE  (element carrying data-tp-throwable-scene)
   --------------------------------------------------------------------------
   The plugin reads offsetWidth / offsetHeight of this element on DOM-ready to
   build the Matter.js world and its four static walls. It therefore MUST have
   a resolved, non-zero size at that moment — never height:auto, never 100% of
   an unsized parent. That is why the height above is explicit.
   ========================================================================== */

.see-more[data-tp-throwable-scene] {
    position: relative;
    overflow: hidden;                 /* keeps pills inside the rounded card  */
    isolation: isolate;
    cursor: grab;
    touch-action: none;               /* let Matter own the pointer stream    */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.see-more[data-tp-throwable-scene]:active {
    cursor: grabbing;
}

/* Headline sits UNDER the pills but stays clickable */
.see-more .see-more-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    pointer-events: none;             /* only the <a> below re-enables it     */
}

.see-more .see-more-inner a {
    pointer-events: auto;
}

.see-more .see-more-inner h2 {
    margin: 0;
    line-height: 1.2;
}


/* ==========================================================================
   3. THE THROWABLE ITEMS  (elements carrying data-tp-throwable-el)
   --------------------------------------------------------------------------
   How the plugin drives these — do not fight it:

     • throwable.js measures the OUTER element with getBoundingClientRect()
       and uses that width/height as the physics body. So the outer element
       must shrink-wrap the pill exactly: absolute + auto width, no padding,
       no border, no margin.

     • gsap.quickSetter(el,"x"|"y","px") writes translate() onto the OUTER
       element, moving its top-left corner to the body's CENTRE point.

     • The INNER element (first span/div/img it finds) gets
       transform: translate(-50%,-50%) rotate(Nrad)
       which re-centres the pill on that point and applies the body's angle.

   Therefore: never set position/transform on the inner span yourself, and
   never put padding on the outer element.
   ========================================================================== */

.throwable-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;             /* Matter listens on the scene, not here */
}

[data-tp-throwable-el] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;                       /* plugin fades to 1 when in view        */
    will-change: transform;
    line-height: 0;                   /* stops inline-gap inflating the body   */
}

[data-tp-throwable-el] > span,
[data-tp-throwable-el] > div,
[data-tp-throwable-el] > img {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---- colour system ------------------------------------------------------
   Pulled from the theme so the pills belong to the card they sit on:

       card gradient  linear-gradient(135deg, #6D5EF5 -> #0EA5E9)   .main-colorbg
       --tp-ink       #141235   deep indigo-ink, reads warmer than pure black
                                against a violet/blue gradient
       --tp-accent    #9F8BE7   theme .main-color2 (violet)
       --tp-brand     #2563EB   theme .main-color  (blue)

   WHY EVERY COLOUR IS !important
   ------------------------------
   style.css line 14148 carries a blanket dark-mode override:

       body.dark h1, body.dark p, body.dark span, body.dark a { color:#fff !important }

   That is specificity (0,1,2) AND !important, so a plain .throw-pill > span
   (0,1,1) loses even with !important — which is why the solid white pills
   rendered as blank white capsules: white text on a white background.

   Scoping to .see-more .throw-pill > span gives (0,2,1), which outranks it.
   Do not simplify these selectors back down.
   ------------------------------------------------------------------------- */

.see-more[data-tp-throwable-scene] {
    --tp-ink: #141235;
    --tp-accent: #9F8BE7;
    --tp-brand: #2563EB;
}

/* ---- pill : base --------------------------------------------------------- */

.see-more .throw-pill > span {
    padding: 13px 26px;
    border: 1.5px solid transparent;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .4px;
    text-transform: uppercase;
    transition: background-color .28s cubic-bezier(.4, 0, .2, 1),
                color            .28s cubic-bezier(.4, 0, .2, 1),
                border-color     .28s cubic-bezier(.4, 0, .2, 1),
                box-shadow       .28s cubic-bezier(.4, 0, .2, 1);
}

/* Variant 1 — solid (default) */
.see-more .throw-pill > span {
    background: #ffffff;
    color: var(--tp-ink) !important;
    border-color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(15, 10, 60, .22);
}

/* Variant 2 — glass / outline */
.see-more .throw-pill.is-outline > span {
    background: rgba(255, 255, 255, .20);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 6px 18px rgba(15, 10, 60, .16);
}

/* Variant 3 — ink */
.see-more .throw-pill.is-dark > span {
    background: var(--tp-ink);
    color: #ffffff !important;
    border-color: var(--tp-ink) !important;
    box-shadow: 0 10px 26px rgba(15, 10, 60, .38);
}

/* Optional icon inside a pill */
.see-more .throw-pill > span i,
.see-more .throw-pill > span svg {
    margin-right: 8px;
    vertical-align: middle;
    font-size: 14px;
    color: inherit !important;
}


/* ---- pill : hover --------------------------------------------------------
   :hover can never fire on a pill natively — the pills live inside a
   pointer-events:none layer because Matter.js owns the pointer stream on the
   scene element. throwable-init.js hit-tests with Matter.Query.point and adds
   .is-hovered to whichever body is under the cursor, so these rules are the
   real hover state.

   No transform here on purpose: the plugin rewrites
   transform: translate(-50%,-50%) rotate(Nrad)  on this span every tick, so
   any scale() would be wiped on the next frame. Colour, border and shadow
   carry the whole interaction.
   ------------------------------------------------------------------------- */

/* solid -> ink */
.see-more .throw-pill.is-hovered > span {
    background: var(--tp-ink);
    color: #ffffff !important;
    border-color: var(--tp-ink) !important;
    box-shadow: 0 14px 34px rgba(15, 10, 60, .42);
}

/* glass -> solid white */
.see-more .throw-pill.is-outline.is-hovered > span {
    background: #ffffff;
    color: var(--tp-ink) !important;
    border-color: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15, 10, 60, .3);
}

/* ink -> theme violet */
.see-more .throw-pill.is-dark.is-hovered > span {
    background: #94C3FC;
    color: var(--tp-ink) !important;
    border-color: #94C3FC !important;
    box-shadow: 0 14px 34px rgba(15, 10, 60, .34);
}

/* ---- pill : being dragged ------------------------------------------------
   A white focus ring so the pill you are holding is unmistakable while it is
   flying over the other pills.
   ------------------------------------------------------------------------- */

.see-more .throw-pill.is-dragging > span {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .55),
                0 20px 46px rgba(15, 10, 60, .5) !important;
}

.see-more .throw-pill.is-dragging.is-outline > span {
    background: #ffffff;
    color: var(--tp-ink) !important;
    border-color: #ffffff !important;
}


/* ==========================================================================
   4. RESPONSIVE
   --------------------------------------------------------------------------
   Sizes mirror .hr-sec .fit-img at every breakpoint so the throwable card
   lines up with the portfolio images beside it.
   ========================================================================== */

/* Tablet — .hr-container wraps to 50% columns (style.css @991) */
@media (max-width: 991px) {
    .hr-sec .item-panel .see-more {
        height: 480px;
        min-height: 480px;
    }

    /* Must stay scoped with .see-more — the base rules above are (0,2,1),
       a bare .throw-pill > span is (0,1,1) and would simply lose. */
    .see-more .throw-pill > span {
        padding: 11px 20px;
        font-size: 14px;
    }
}

/* Phone — .hr-container columns go full width (style.css @767) */
@media (max-width: 767px) {
    .hr-sec .item-panel .see-more {
        height: 400px;
        min-height: 400px;
    }

    /* Push the headline above the pile instead of letting pills bury it */
    .see-more .see-more-inner {
        align-items: flex-start;
        padding: 42px 20px 20px;
    }

    .see-more .throw-pill > span {
        padding: 10px 17px;
        font-size: 12.5px;
        letter-spacing: .3px;
    }
}

@media (max-width: 480px) {
    .hr-sec .item-panel .see-more {
        height: 360px;
        min-height: 360px;
    }

    .see-more .throw-pill > span {
        padding: 9px 15px;
        font-size: 11.5px;
    }
}

/* Accessibility — no physics for users who asked for reduced motion.
   throwable-init.js also skips init entirely in that case. */
@media (prefers-reduced-motion: reduce) {
    .throwable-layer {
        display: none;
    }
}