/* Phase 10 micro-interactions (Batch H). Everything here reacts to a class that feel-h1.js
   already puts on the element, so a browser without JavaScript simply keeps the previous
   behaviour: nothing in this file is required for a control to work.
   Fresh filename: hCDN caches css/* for a week and ignores query strings.
   The html prefix is deliberate — several of these controls are styled by component CSS that
   links later than the layout, and an override must not depend on load order. */

html .mtv-btn:not(:disabled),
html .mtv-followbtn:not(:disabled),
html .mtv-notif-card__follow:not(:disabled),
html .mtv-bell,
html .mtv-msheet__item,
html .mtv-msheet__emoji,
html .mtv-sheet__row {
    -webkit-tap-highlight-color: transparent;
    transition: transform 260ms cubic-bezier(.2, 1.35, .3, 1),
                background-color 150ms ease, border-color 150ms ease,
                color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

/* A phone gives no haptic and no sound for a tap, so the control has to answer the finger.
   .is-press is set on touchstart and cleared after the gesture ends, which is what makes the
   spring release visible instead of a snap back. */
html .mtv-btn.is-press:not(:disabled),
html .mtv-followbtn.is-press:not(:disabled),
html .mtv-notif-card__follow.is-press:not(:disabled) { transform: scale(.93); }
html .mtv-bell.is-press { transform: scale(.86); }
html .mtv-msheet__item.is-press,
html .mtv-sheet__row.is-press { transform: scale(.985); background-color: rgba(0, 69, 116, .07); }
html .mtv-msheet__emoji.is-press { transform: scale(.8); }

/* The follow button changes state in place, so the change has to be seen. The ring is the
   confirmation and the pop is the movement; the colour itself stays with the page that owns it. */
html .mtv-btn.is-changed,
html .mtv-followbtn.is-changed,
html .mtv-notif-card__follow.is-changed { animation: mtv-follow-pop 460ms cubic-bezier(.2, 1.3, .3, 1); }
@keyframes mtv-follow-pop {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 30, 91, .34); }
    38% { transform: scale(.9); box-shadow: 0 0 0 5px rgba(216, 30, 91, .18); }
    72% { transform: scale(1.07); box-shadow: 0 0 0 9px rgba(216, 30, 91, .06); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 30, 91, 0); }
}

/* The double-tap heart already exists; these are the rays around it. One span per ray, each
   given its own end point by the script, all inside the element the heart is already in, so
   the existing removal takes them with it. */
.mtv-spark {
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 999px;
    background: #ff3d70;
    animation: mtv-spark-fly 620ms cubic-bezier(.15, .7, .2, 1) forwards;
}
.mtv-spark--b { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: #ffd0dd; }
.mtv-spark--c { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #12b8ff; }
@keyframes mtv-spark-fly {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    to { transform: translate3d(var(--h1-x, 0), var(--h1-y, 0), 0) scale(.15); opacity: 0; }
}

/* A like tapped on the button has no picture to hold the heart, so the rays get a layer of
   their own that sits over the page and leaves when the animation does. */
.mtv-sparkfield {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
}

/* A badge that changed while you were reading something else should ask to be looked at. */
[data-unread-badge].is-pop { animation: mtv-badge-pop 620ms cubic-bezier(.2, 1.4, .3, 1); }
@keyframes mtv-badge-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.38); }
    62% { transform: scale(.94); }
    100% { transform: scale(1); }
}

/* Images used to appear as a hard rectangle in the middle of a scroll. The tile keeps a flat
   ground and the picture fades onto it. html.mtv-fade is added by the script, so a reader
   without it sees the picture immediately, and the script marks every tile loaded after a
   timeout in case a load event was missed. Only grid tiles are faded: a feed card can hold a
   carousel whose later slides have no picture yet, and hiding those would be a real defect. */
html.mtv-fade .mtv-mediatile img { opacity: 0; transition: opacity 300ms ease; }
html.mtv-fade .mtv-mediatile.is-on img { opacity: 1; }

html.mtv-fade .mtv-mediatile:not(.is-on)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(100deg, #e9eef3 18%, #f6f9fb 44%, #e9eef3 68%);
    background-size: 220% 100%;
    animation: mtv-shimmer 1.2s linear infinite;
}
.mtv-mediatile__cue { z-index: 2; }
@keyframes mtv-shimmer {
    from { background-position: 140% 0; }
    to { background-position: -40% 0; }
}

/* The dock icon for the page you are on arrives rather than sitting there, which is what makes
   a reload feel like the same app you left. */
@media (max-width: 820px) {
  .mtv-dock a.active svg { animation: mtv-dock-in 320ms cubic-bezier(.2, 1.35, .3, 1); }
}
@keyframes mtv-dock-in {
    0% { transform: scale(.72); opacity: .4; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Sheets and modals rose on a plain ease-out. The same distance, with a small overshoot,
   reads as weight rather than as a rectangle moving. */
html .mtv-sheet__panel { transition: transform 340ms cubic-bezier(.16, 1.14, .3, 1); }
html .mtv-msheet__panel { transition: transform 300ms cubic-bezier(.16, 1.12, .3, 1); }

@media (prefers-reduced-motion: reduce) {
    html .mtv-btn,
    html .mtv-followbtn,
    html .mtv-notif-card__follow,
    html .mtv-bell,
    html .mtv-msheet__item,
    html .mtv-msheet__emoji,
    html .mtv-sheet__row,
    html .mtv-sheet__panel,
    html .mtv-msheet__panel { transition-duration: 1ms; }

    html .mtv-btn.is-press:not(:disabled),
    html .mtv-followbtn.is-press:not(:disabled),
    html .mtv-notif-card__follow.is-press:not(:disabled),
    html .mtv-bell.is-press,
    html .mtv-msheet__item.is-press,
    html .mtv-sheet__row.is-press,
    html .mtv-msheet__emoji.is-press { transform: none; }

    html .mtv-btn.is-changed,
    html .mtv-followbtn.is-changed,
    html .mtv-notif-card__follow.is-changed,
    [data-unread-badge].is-pop,
    .mtv-dock a.active svg { animation: none; }

    html.mtv-fade .mtv-mediatile img { opacity: 1; transition: none; }

    html.mtv-fade .mtv-mediatile:not(.is-on)::before { animation: none; }
    .mtv-spark { display: none; }
}