/*
 * FilmParty — «زنگوله»: a hollow bell in the corner of the page.
 *
 * Sits beside the back arrow, in the same fixed top-corner cluster, and is
 * deliberately NOT a button: no plate, no border, no label, no counter. Just
 * the outline glyph and a tap target around it. It is a quiet preference, and
 * it should read as one.
 *
 * The glyph is the standard two-stroke bell (dome + clapper) at 24×24 with
 * round caps — the shape people already recognise from every notification
 * control they have ever used. Nothing bespoke.
 *
 * Its own file rather than an edit to movie.css because /assets/ is served
 * `immutable, max-age=30d`: changing an existing file's CONTENT without a new
 * `?v=` reaches nobody who has already visited.
 */

/*
 * Positioned to mirror `.movie-floating-page .movie-back-btn`, which is
 * `fixed; top:22px; left:22px; 46×46; z-index:6` — all `!important`, so the
 * geometry here is stated with the same weight or it simply loses.
 *
 * left = 22 (back's left) + 46 (its width) + 10 (gap) = 78.
 */
.movie-floating-page .fp-episode-bell {
    position: fixed !important;
    top: 22px !important;
    left: 78px !important;
    right: auto !important;
    width: 46px !important;
    height: 46px !important;
    z-index: 6 !important;

    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;

    /* The part that makes it an icon and not a fourth button. */
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 50% !important;

    color: rgba(255, 255, 255, .82);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.fp-episode-bell .fp-bell-glyph {
    width: 23px;
    height: 23px;
    display: block;
    overflow: visible;
    /* A bell swings from where it hangs. */
    transform-origin: 50% 12%;
}

.fp-episode-bell .fp-bell-body,
.fp-episode-bell .fp-bell-clapper {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The «you will be told» mark: nothing at all until the bell is on. */
.fp-episode-bell .fp-bell-dot {
    fill: rgb(var(--fp-brand-rgb, 255, 48, 79));
    stroke: none;
    opacity: 0;
    transform: scale(.3);
    transform-origin: 18.7px 5.3px;
    transition: opacity .18s ease, transform .2s cubic-bezier(.2, 1.5, .4, 1);
}

/* Hover / focus: the faintest possible plate, only while pointed at. */
.movie-floating-page .fp-episode-bell:hover {
    color: #fff;
    background: rgba(255, 255, 255, .10) !important;
}

.movie-floating-page .fp-episode-bell:focus-visible {
    outline: 2px solid rgba(var(--fp-brand-rgb, 255, 48, 79), .75);
    outline-offset: 2px;
}

.movie-floating-page .fp-episode-bell:active {
    transform: scale(.92) !important;
}

/*
 * ON — still hollow. The bell keeps its outline and simply turns brand-coloured
 * with the dot showing, which is what «I am subscribed» looks like everywhere
 * else. Filling it in would make it the loud control this was asked not to be.
 */
.movie-floating-page .fp-episode-bell.is-on {
    color: rgb(var(--fp-brand-rgb, 255, 48, 79));
}

.fp-episode-bell.is-on .fp-bell-dot {
    opacity: 1;
    transform: scale(1);
}

.movie-floating-page .fp-episode-bell[disabled] {
    opacity: .55;
    cursor: progress;
}

/* One short swing on switch-on — confirmation, not decoration. */
@keyframes fp-bell-ring {
    0%   { transform: rotate(0deg); }
    18%  { transform: rotate(14deg); }
    38%  { transform: rotate(-11deg); }
    58%  { transform: rotate(7deg); }
    78%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

.fp-episode-bell.is-ringing .fp-bell-glyph {
    animation: fp-bell-ring .62s ease-in-out;
}

/* Matches the back button's own mobile step: top 18, left 18, 42 wide.
   left = 18 + 42 + 8 = 68. */
@media (max-width: 520px) {
    .movie-floating-page .fp-episode-bell {
        top: 18px !important;
        left: 68px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .fp-episode-bell .fp-bell-glyph {
        width: 21px;
        height: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-episode-bell.is-ringing .fp-bell-glyph {
        animation: none;
    }

    .fp-episode-bell .fp-bell-dot {
        transition: opacity .18s ease;
    }

    .movie-floating-page .fp-episode-bell:active {
        transform: none !important;
    }
}