/* ==========================================================
PremiumZone
File : assets/background/frameOrnament.css
Description : Frame Ornament — 8-bit cyan sci-fi circuit rail
========================================================== */

:root{
    --frame-ornament-gap:300px;
    --frame-ornament-content-height:24px;
    --ornament-main-thickness:4px;
    --ornament-secondary-thickness:3px;
    --ornament-segment-gap:8px;
    --ornament-segment-height:20px;
    --ornament-motif-size:30px;
    --ornament-motif-border:3px;
    --ornament-cyan:#00f6ff;
    --ornament-white:#d8dde0;
    --ornament-dim:#687276;
}

.pz-frame-ornament-top,
.pz-frame-ornament-bottom{position:absolute;left:0;width:100%;height:calc(var(--frame-ornament-gap)*var(--frame-scale));z-index:30;pointer-events:none;box-sizing:border-box;}
.pz-frame-ornament-top{top:calc(-1*var(--frame-ornament-gap)*var(--frame-scale));}.pz-frame-ornament-bottom{top:100%;}

/* TEST: internal top ornament panel, 240px high, same visual rail */
.pz-frame-ornament-top-internal{
    top:0;
    left:0;
    width:100%;
    height:calc(240px*var(--frame-scale));
    background:transparent;
    pointer-events:none;
    z-index:30;
    box-sizing:border-box;
}

.pz-frame-ornament-top-internal .pz-frame-ornament-line{
    top:0;
}

.pz-frame-ornament-top-internal .pz-frame-ornament-content{
    bottom:0;
    background:transparent;
    pointer-events:none;
}

.pz-frame-ornament-line{position:absolute;left:0;width:100%;height:calc(44px*var(--frame-scale));display:flex;align-items:center;justify-content:center;overflow:visible;box-sizing:border-box;}
.pz-frame-ornament-top .pz-frame-ornament-line{top:0;}.pz-frame-ornament-bottom .pz-frame-ornament-line{bottom:0;}
.pz-frame-ornament-top-rail{position:relative;display:flex;align-items:center;justify-content:space-between;flex:1 1 0;min-width:0;height:calc(32px*var(--frame-scale));gap:calc(5px*var(--frame-scale));overflow:visible;}.pz-frame-ornament-top-segment{position:relative;display:block;flex:1 1 0;min-width:0;height:100%;overflow:visible;}.pz-frame-ornament-top-rail.is-mirror .pz-frame-ornament-top-segment{transform:scaleX(-1);}
.pz-frame-ornament-top-rail::before{content:"";position:absolute;top:50%;width:calc(32px*var(--frame-scale));height:calc(9px*var(--frame-scale));background:var(--ornament-cyan);transform:translateY(-50%);box-shadow:0 calc(-7px*var(--frame-scale)) 0 var(--ornament-cyan),0 calc(7px*var(--frame-scale)) 0 var(--ornament-dim);z-index:4;}.pz-frame-ornament-top-rail:not(.is-mirror)::before{left:0;}.pz-frame-ornament-top-rail.is-mirror::before{right:0;}
.pz-frame-ornament-top-rail::after{content:"";position:absolute;top:calc(50% + 17px*var(--frame-scale));width:calc(14px*var(--frame-scale));height:calc(46px*var(--frame-scale));z-index:5;opacity:.95;background:radial-gradient(circle,var(--ornament-cyan) 0 100%,transparent 101%) center top/calc(11px*var(--frame-scale)) calc(11px*var(--frame-scale)) no-repeat,radial-gradient(circle,var(--ornament-cyan) 0 100%,transparent 101%) center calc(13px*var(--frame-scale))/calc(9px*var(--frame-scale)) calc(9px*var(--frame-scale)) no-repeat,radial-gradient(circle,var(--ornament-cyan) 0 100%,transparent 101%) center calc(24px*var(--frame-scale))/calc(8px*var(--frame-scale)) calc(8px*var(--frame-scale)) no-repeat,radial-gradient(circle,var(--ornament-cyan) 0 100%,transparent 101%) center calc(34px*var(--frame-scale))/calc(7px*var(--frame-scale)) calc(7px*var(--frame-scale)) no-repeat;}.pz-frame-ornament-top-rail:not(.is-mirror)::after{left:calc(-2px*var(--frame-scale));}.pz-frame-ornament-top-rail.is-mirror::after{right:calc(-2px*var(--frame-scale));}
.pz-frame-ornament-top-segment.is-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:calc(4px*var(--frame-scale));background:var(--ornament-white);transform:translateY(-50%);}.pz-frame-ornament-top-segment.is-line::after{content:"";position:absolute;left:18%;width:calc(14px*var(--frame-scale));top:calc(8px*var(--frame-scale));height:calc(3px*var(--frame-scale));background:var(--ornament-cyan);}.pz-frame-ornament-top-segment.is-block::before{content:"";position:absolute;left:20%;top:50%;width:calc(22px*var(--frame-scale));height:calc(10px*var(--frame-scale));background:var(--ornament-cyan);transform:translateY(-50%);box-shadow:calc(8px*var(--frame-scale)) calc(-8px*var(--frame-scale)) 0 var(--ornament-dim),calc(8px*var(--frame-scale)) calc(8px*var(--frame-scale)) 0 var(--ornament-cyan);}.pz-frame-ornament-top-segment.is-dots::before{content:"";position:absolute;left:22%;top:50%;width:calc(6px*var(--frame-scale));height:calc(6px*var(--frame-scale));background:var(--ornament-cyan);transform:translateY(-50%);box-shadow:calc(14px*var(--frame-scale)) 0 0 var(--ornament-white),calc(28px*var(--frame-scale)) 0 0 var(--ornament-cyan),calc(18px*var(--frame-scale)) calc(-8px*var(--frame-scale)) 0 var(--ornament-dim);}.pz-frame-ornament-top-segment.is-step::before{content:"";position:absolute;left:8%;top:50%;width:70%;height:calc(4px*var(--frame-scale));background:var(--ornament-white);transform:translateY(-50%);box-shadow:calc(8px*var(--frame-scale)) calc(-7px*var(--frame-scale)) 0 var(--ornament-cyan),calc(24px*var(--frame-scale)) calc(-7px*var(--frame-scale)) 0 var(--ornament-cyan);}.pz-frame-ornament-top-segment.is-step::after{content:"";position:absolute;right:6%;top:calc(5px*var(--frame-scale));width:calc(18px*var(--frame-scale));height:calc(3px*var(--frame-scale));background:var(--ornament-dim);}.pz-frame-ornament-top-segment.is-double::before,.pz-frame-ornament-top-segment.is-double::after{content:"";position:absolute;left:4%;right:4%;height:calc(3px*var(--frame-scale));background:var(--ornament-white);}.pz-frame-ornament-top-segment.is-double::before{top:calc(7px*var(--frame-scale));}.pz-frame-ornament-top-segment.is-double::after{bottom:calc(7px*var(--frame-scale));background:var(--ornament-dim);}.pz-frame-ornament-top-segment.is-ticks::before{content:"";position:absolute;left:8%;top:50%;width:calc(7px*var(--frame-scale));height:calc(10px*var(--frame-scale));background:var(--ornament-cyan);transform:translateY(-50%);box-shadow:calc(13px*var(--frame-scale)) 0 0 var(--ornament-white),calc(26px*var(--frame-scale)) 0 0 var(--ornament-cyan),calc(39px*var(--frame-scale)) 0 0 var(--ornament-dim);}.pz-frame-ornament-top-segment.is-block-dots::before{content:"";position:absolute;left:10%;top:50%;width:calc(12px*var(--frame-scale));height:calc(12px*var(--frame-scale));background:var(--ornament-cyan);transform:translateY(-50%);box-shadow:calc(17px*var(--frame-scale)) 0 0 var(--ornament-white),calc(30px*var(--frame-scale)) 0 0 var(--ornament-cyan),calc(42px*var(--frame-scale)) calc(-7px*var(--frame-scale)) 0 var(--ornament-dim);}
.pz-frame-ornament-side{position:relative;display:flex;align-items:center;justify-content:space-between;flex:1 1 0;min-width:0;height:100%;overflow:visible;gap:calc(var(--ornament-segment-gap)*var(--frame-scale));}.pz-frame-ornament-side::before{content:"";position:absolute;top:50%;width:calc(30px*var(--frame-scale));height:calc(8px*var(--frame-scale));background:var(--ornament-cyan);transform:translateY(-50%);box-shadow:0 calc(-8px*var(--frame-scale)) 0 var(--ornament-cyan),0 calc(8px*var(--frame-scale)) 0 var(--ornament-dim);}.pz-frame-ornament-side.is-left::before{left:0;}.pz-frame-ornament-side.is-right::before{right:0;}.pz-frame-ornament-side.is-middle::before{left:50%;width:calc(9px*var(--frame-scale));height:calc(9px*var(--frame-scale));background:var(--ornament-cyan);transform:translate(-50%,-50%);box-shadow:calc(-10px*var(--frame-scale)) 0 0 var(--ornament-dim),calc(10px*var(--frame-scale)) 0 0 var(--ornament-dim);}.pz-frame-ornament-side::after{content:"";position:absolute;top:50%;width:calc(9px*var(--frame-scale));height:calc(9px*var(--frame-scale));background:#000;border:calc(3px*var(--frame-scale)) solid var(--ornament-cyan);transform:translateY(-50%);box-sizing:border-box;}.pz-frame-ornament-side.is-left::after{left:calc(36px*var(--frame-scale));}.pz-frame-ornament-side.is-right::after{right:calc(36px*var(--frame-scale));}.pz-frame-ornament-side.is-middle::after{display:none;}.pz-frame-ornament-segment{position:relative;display:block;flex:1 1 0;min-width:0;height:calc(var(--ornament-segment-height)*var(--frame-scale));background:transparent;}.pz-frame-ornament-segment::before{content:"";position:absolute;left:0;right:0;top:calc(3px*var(--frame-scale));height:calc(var(--ornament-main-thickness)*var(--frame-scale));background:var(--ornament-white);}.pz-frame-ornament-segment::after{content:"";position:absolute;left:0;right:0;bottom:calc(2px*var(--frame-scale));height:calc(var(--ornament-secondary-thickness)*var(--frame-scale));background:var(--ornament-dim);}.pz-frame-ornament-segment.is-accent::before{left:calc(3px*var(--frame-scale));right:calc(3px*var(--frame-scale));height:calc(6px*var(--frame-scale));top:calc(2px*var(--frame-scale));background:var(--ornament-cyan);}.pz-frame-ornament-segment.is-accent::after{left:20%;right:20%;background:var(--ornament-cyan);}.pz-frame-ornament-segment.is-short::before{left:22%;right:22%;height:calc(3px*var(--frame-scale));background:var(--ornament-dim);}.pz-frame-ornament-segment.is-short::after{left:35%;right:35%;height:calc(3px*var(--frame-scale));background:var(--ornament-cyan);}
.pz-frame-ornament-motif{position:relative;flex:0 0 auto;height:calc(76px*var(--frame-scale));width:calc(96px*var(--frame-scale));display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:"Noto Sans Mono","DejaVu Sans Mono",monospace;font-size:calc(56px*var(--frame-scale));line-height:1;font-weight:700;color:var(--ornament-cyan);text-shadow:0 0 calc(7px*var(--frame-scale)) rgba(0,246,255,.55);background:linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) left top/calc(14px*var(--frame-scale)) calc(2px*var(--frame-scale)) no-repeat,linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) left top/calc(2px*var(--frame-scale)) calc(14px*var(--frame-scale)) no-repeat,linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) right top/calc(14px*var(--frame-scale)) calc(2px*var(--frame-scale)) no-repeat,linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) right top/calc(2px*var(--frame-scale)) calc(14px*var(--frame-scale)) no-repeat,linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) left bottom/calc(14px*var(--frame-scale)) calc(2px*var(--frame-scale)) no-repeat,linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) left bottom/calc(2px*var(--frame-scale)) no-repeat,linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) right bottom/calc(14px*var(--frame-scale)) calc(2px*var(--frame-scale)) no-repeat,linear-gradient(var(--ornament-cyan),var(--ornament-cyan)) right bottom/calc(2px*var(--frame-scale)) no-repeat;}.pz-frame-ornament-motif::before,.pz-frame-ornament-motif::after{display:none;}.pz-frame-ornament-motif.is-top{margin-left:calc(9px*var(--frame-scale));margin-right:calc(9px*var(--frame-scale));}.pz-frame-ornament-motif.is-bottom{height:calc(76px*var(--frame-scale));width:calc(96px*var(--frame-scale));margin-left:calc(6px*var(--frame-scale));margin-right:calc(6px*var(--frame-scale));color:var(--ornament-cyan);}.pz-frame-ornament-motif.is-bottom::after{display:none;}
.pz-frame-ornament-content{position:absolute;left:0;width:100%;height:calc(var(--frame-ornament-content-height)*var(--frame-scale));display:flex;align-items:center;min-width:0;min-height:0;box-sizing:border-box;pointer-events:auto;}.pz-frame-ornament-top .pz-frame-ornament-content{bottom:0;}.pz-frame-ornament-bottom .pz-frame-ornament-content{top:0;}.pz-frame-ornament-bottom .pz-frame-ornament-segment{height:calc(24px*var(--frame-scale));}.pz-frame-ornament-bottom .pz-frame-ornament-segment::before{top:calc(3px*var(--frame-scale));height:calc(5px*var(--frame-scale));}.pz-frame-ornament-bottom .pz-frame-ornament-segment::after{bottom:calc(2px*var(--frame-scale));height:calc(4px*var(--frame-scale));}.pz-frame-ornament-bottom .pz-frame-ornament-segment.is-accent::before{top:calc(2px*var(--frame-scale));height:calc(7px*var(--frame-scale));}.pz-frame-ornament-bottom .pz-frame-ornament-segment.is-accent::after{height:calc(4px*var(--frame-scale));}

.pz-frame-ornament-top-internal .pz-frame-ornament-line{height:calc(44px*var(--frame-scale));}
.pz-frame-ornament-top-internal .pz-frame-ornament-content{height:calc(240px*var(--frame-scale));bottom:0;}