/* =========================================================
 *  FRN EFFECTS — Particle dissolve + Media sequencer
 * ========================================================= */

/* ---- Particle wrapper (wraps an image when data-particles is used) ---- */
.frn-particle-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.frn-particle-wrap > img { display: block; }
.frn-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}

/* ---- Sequencer container ---- */
.frn-sequencer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.frn-sequencer__stage {
    position: absolute;
    inset: 0;
}
.frn-sequencer__layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
}
.frn-sequencer__layer video,
.frn-sequencer__layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Timeline at bottom ---- */
.frn-sequencer__timeline {
    position: absolute;
    bottom: 20px;
    left: 5%;
    right: 5%;
    display: flex;
    gap: 6px;
    z-index: 3;
    pointer-events: auto;
}
.frn-sequencer__tick {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    transition: height .2s ease;
}
.frn-sequencer__tick:hover { height: 6px; }
.frn-sequencer__tick-fill {
    height: 100%;
    width: 0;
    background: var(--frn-accent, #d90d1e);
    box-shadow: 0 0 8px var(--frn-accent, #d90d1e);
}

/* ---- Demo standalone particle image (used in preview) ---- */
.frn-particle-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
    background: linear-gradient(180deg, #0a0a0a, #1a0606);
    color: #f4f1ea;
    text-align: center;
}
.frn-particle-demo__caption {
    font-family: 'Special Elite', monospace;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--frn-accent, #ff3344);
    margin-top: 30px;
    text-transform: uppercase;
}
.frn-particle-demo__img {
    max-width: 500px;
    cursor: pointer;
}