/* ============================================================
   Custom Vimeo Player — Food for Shot Studios
   Dark luxury skin · Gold progress · Auto-hide controls
   ============================================================ */

/* ── Base frame setup ──────────────────────────────────────── */
.reel-frame {
    position: relative;
    background: #080604;
    user-select: none;
}

/* Iframe fills the frame; pointer-events off so our overlay handles clicks */
.reel-frame iframe {
    pointer-events: none;
}

/* ── Outer UI layer ─────────────────────────────────────────── */
.xp-ui {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ── Invisible click zone (play / pause on tap) ────────────── */
.xp-click-area {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

/* ── Big center play button (shown before first play) ────────── */
.xp-big-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(233, 188, 85, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(233, 188, 85, 0.5);
    color: #e9bc55;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.25s ease, transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.xp-big-play:hover {
    background: rgba(233, 188, 85, 0.28);
    transform: translate(-50%, -50%) scale(1.1);
}

.xp-big-play svg { width: 24px; height: 24px; margin-left: 0; }

/* Hide big play once started */
.reel-frame.xp-started .xp-big-play {
    opacity: 0;
    pointer-events: none;
}

/* Show again when paused */
.reel-frame.xp-paused .xp-big-play {
    opacity: 1;
    pointer-events: auto;
}

/* ── Center flash animation (play/pause feedback) ───────────── */
.xp-center-anim {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(233, 188, 85, 0.88);
    color: #0c0b09;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: none;
}

.xp-center-anim.pop {
    animation: xp-pop 0.55s ease forwards;
}

@keyframes xp-pop {
    0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    40%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    70%  { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

.xp-center-anim svg { width: 26px; height: 26px; margin-left: 0; }
.xp-center-anim.pause-anim svg { margin-left: 0; }

/* ── Loading spinner ────────────────────────────────────────── */
.xp-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 2px solid rgba(233, 188, 85, 0.2);
    border-top-color: #e9bc55;
    border-radius: 50%;
    animation: xp-spin 0.75s linear infinite;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.2s;
}

.reel-frame.xp-buffering .xp-spinner { opacity: 1; }

@keyframes xp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Controls bar ───────────────────────────────────────────── */
.xp-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 20px 10px 9px;
    background: linear-gradient(to top, rgba(6, 4, 1, 0.94) 0%, rgba(6, 4, 1, 0.55) 70%, transparent 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

/* Show controls on hover, when paused, or when controls-visible class is set */
.reel-frame:hover .xp-bar,
.reel-frame.xp-paused .xp-bar,
.reel-frame.xp-ended .xp-bar,
.reel-frame.xp-show-controls .xp-bar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Always show when not yet started */
.reel-frame:not(.xp-started) .xp-bar {
    opacity: 0;
    pointer-events: none;
}

/* ── Control buttons ────────────────────────────────────────── */
.xp-btn {
    background: none;
    border: none;
    padding: 4px;
    color: rgba(246, 240, 222, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.15s ease;
    cursor: pointer;
    line-height: 0;
}

.xp-btn:hover {
    color: #e9bc55;
    transform: scale(1.15);
}

.xp-btn svg { width: 15px; height: 15px; display: block; }

/* ── Icon toggle helpers ────────────────────────────────────── */
.xp-btn .icon-pause,
.xp-btn .icon-mute  { display: none; }

.reel-frame.xp-playing .xp-btn-play .icon-pause { display: block; }
.reel-frame.xp-playing .xp-btn-play .icon-play  { display: none; }

.reel-frame.xp-muted .xp-btn-mute .icon-mute { display: block; }
.reel-frame.xp-muted .xp-btn-mute .icon-vol  { display: none; }

/* ── Progress bar ───────────────────────────────────────────── */
.xp-progress {
    flex: 1;
    position: relative;
    height: 3px;
    cursor: pointer;
    border-radius: 99px;
}

/* Expand hit target on hover */
.xp-bar:hover .xp-progress { height: 5px; }

.xp-prog-bg,
.xp-prog-buf,
.xp-prog-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 99px;
    pointer-events: none;
}

.xp-prog-bg   { width: 100%; background: rgba(246, 240, 222, 0.18); }
.xp-prog-buf  { width: 0;    background: rgba(246, 240, 222, 0.14); transition: width 0.4s; }
.xp-prog-fill { width: 0;    background: #e9bc55; transition: width 0.1s linear; }

/* Thumb dot at fill end */
.xp-prog-fill::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #e9bc55;
    transition: transform 0.18s ease;
}

.xp-bar:hover .xp-prog-fill::after { transform: translateY(-50%) scale(1); }

/* Invisible range input sits on top */
.xp-seek {
    position: absolute;
    inset: -8px 0;
    width: 100%;
    height: calc(100% + 16px);
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 1;
}

/* ── Time display ────────────────────────────────────────────── */
.xp-time {
    font-size: 0.64rem;
    font-family: "DM Sans", system-ui, sans-serif;
    color: rgba(246, 240, 222, 0.65);
    white-space: nowrap;
    letter-spacing: 0.03em;
    min-width: 68px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Fullscreen adjustments ─────────────────────────────────── */
.reel-frame:fullscreen,
.reel-frame:-webkit-full-screen {
    aspect-ratio: unset;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.reel-frame:fullscreen iframe,
.reel-frame:-webkit-full-screen iframe {
    width: 100%;
    height: 100%;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 560px) {
    .xp-big-play { width: 48px; height: 48px; }
    .xp-big-play svg { width: 18px; height: 18px; }
    .xp-btn svg { width: 13px; height: 13px; }
    .xp-time { font-size: 0.58rem; min-width: 58px; }
    .xp-bar { gap: 4px; padding: 16px 8px 7px; }
}