/* ======================================================
   BRISTOL CRYSTAL NOTIFICATION
   Version 2.0
====================================================== */

/* ===========================
   BACKDROP
=========================== */

#bristolModal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px;

    z-index:999999;

}

.bristol-backdrop{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.28);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

/* ===========================
   CONTAINER
=========================== */

.bristol-container{

    position:relative;

    width:min(92vw,640px);

    z-index:2;
    
    perspective:1200px;

}

/* ===========================
   CRYSTAL CARD
=========================== */

.bristol-card{

    position:relative;

    max-width:680px;

    width:100%;

    overflow:visible;

}

.bristol-panel{

    outline:1px solid rgba(255,255,255,.05);
    
    outline-offset:-1px;
    
    position:relative;

    min-height:240px;

    border-radius:36px;

    overflow:hidden;
    
    transform-style:preserve-3d;

    transform:rotateX(0deg) rotateY(0deg);

    transition:
        transform .25s ease-out;
    
    isolation:isolate; 

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.06)
        );

    border:1px solid rgba(255,255,255,.16);

    box-shadow:

    0 30px 80px rgba(0,0,0,.32),

    inset 0 1px 1px rgba(255,255,255,.45),

    inset 0 -1px 2px rgba(255,255,255,.06),

    inset 0 0 0 1px rgba(255,255,255,.08),

    0 0 0 1px rgba(255,255,255,.05);

}

/* ======================================================
   TOP NOTCH MASK
====================================================== */

.bristol-panel::before{

    content:"";

    position:absolute;

    left:50%;

    top:-20px;

    transform:translateX(-50%);

    width:96px;

    height:74px;

    background:inherit;

    backdrop-filter:inherit;
    -webkit-backdrop-filter:inherit;

    border-left:1px solid rgba(255,255,255,.16);
    border-right:1px solid rgba(255,255,255,.16);
    border-bottom:1px solid rgba(255,255,255,.16);

    border-bottom-left-radius:48px;
    border-bottom-right-radius:48px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 4px 12px rgba(0,0,0,.08);

    z-index:2;

}

.bristol-panel::after{

    content:"";

    position:absolute;

    inset:2px;

    border-radius:34px;

    pointer-events:none;

    background:

        radial-gradient(

            circle at top left,

            rgba(255,255,255,.28),

            transparent 22%

        ),

        radial-gradient(

            circle at bottom right,

            rgba(255,255,255,.08),

            transparent 30%

        );

    mix-blend-mode:screen;

    opacity:.9;
    
    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    
    inset 0 1px 0 rgba(255,255,255,.18),
    
    inset 0 -1px 0 rgba(0,0,0,.08);
    
    filter:brightness(1.05);

}

.bristol-panel .crystal-rim{

    position:absolute;

    inset:8px;

    border-radius:30px;

    pointer-events:none;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.12),

        inset 0 -1px 0 rgba(0,0,0,.06);

}

/* ======================================================
   CONTENT
====================================================== */

.bristol-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:95px 55px 45px;

}

.bristol-content h2{

    margin:0;

    color:#ffffff;

    font-family:"Cormorant Garamond", serif;

    font-size:2.7rem;

    font-weight:600;

    letter-spacing:.5px;

}

.bristol-content p{

    margin:24px 0 0;

    max-width:500px;

    color:rgba(255,255,255,.92);

    font-size:1.08rem;

    line-height:1.8;

}

/* ======================================================
   DIVIDER
====================================================== */

.bristol-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    width:100%;

    margin:26px 0;

}

.bristol-divider span{

    width:90px;

    height:1px;

    background:linear-gradient(

        to right,

        transparent,

        rgba(212,175,55,.85),

        transparent

    );

}

.diamond{

    width:8px;

    height:8px;

    background:#D4AF37;

    transform:rotate(45deg);

    border-radius:1px;

}

/* ======================================================
   MEDALLION
====================================================== */

.bristol-medallion{

    position:absolute;

    left:50%;

    top:0;

    transform:translate(-50%,-18%);

    width:92px;

    height:92px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:10;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255,255,255,.45),
            rgba(255,255,255,.08) 55%,
            rgba(212,175,55,.10)
        );

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.28);

    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.55),

        0 15px 40px rgba(0,0,0,.30);
        
        box-shadow:

    inset 0 1px 1px rgba(255,255,255,.55),

    0 12px 25px rgba(0,0,0,.18),

    0 0 0 4px rgba(255,255,255,.03);
    
    transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.bristol-medallion img{

    width:56px;

    height:auto;

    display:block;
    
    transition:
    
    transform .25s ease,
    
    filter .25s ease;

}

/* ======================================================
   REFERENCE CARD
====================================================== */

.bristol-reference{

    margin-top:38px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.bristol-reference small{

    font-size:.82rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:rgba(255,255,255,.65);

}

.bristol-reference strong{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:300px;

    min-height:62px;

    padding:0 32px;

    border-radius:18px;

    font-size:1.15rem;

    font-weight:600;

    letter-spacing:1px;

    color:#fff;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.16),

            rgba(255,255,255,.05)

        );

    border:1px solid rgba(212,175,55,.25);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.35),

        0 10px 25px rgba(0,0,0,.18);

}

/* ======================================================
   CRYSTAL BUTTON
====================================================== */

.bristol-button{

    margin-top:34px;

    min-width:180px;

    height:54px;

    border-radius:999px;

    border:1px solid rgba(212,175,55,.35);

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

    color:#D4AF37;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.05)
        );

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.35),
        0 8px 20px rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

    box-shadow:

        0 12px 28px rgba(181,140,44,.28);

    transition:

        transform .25s ease,

        box-shadow .25s ease;

}

.bristol-button:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.08)
        );

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        0 14px 28px rgba(212,175,55,.20);

}

/* ======================================================
   CRYSTAL LIGHT SWEEP
====================================================== */

.bristol-light{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    border-radius:inherit;

}

.bristol-light::before{

    content:"";

    position:absolute;

    top:-40%;

    left:-35%;

    width:35%;

    height:180%;
    
    will-change: transform, opacity;

    transition:
    
    transform .18s ease-out,
    
    opacity .18s ease-out;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        rgba(255,255,255,.35),

        rgba(255,255,255,.18),

        transparent

    );

    transform:rotate(18deg);

    animation:crystalSweep 10s linear infinite;

}

@keyframes crystalSweep{

    0%{

        transform:
            translateX(-180%)
            rotate(18deg);

    }

    100%{

        transform:
            translateX(420%)
            rotate(18deg);

    }

}

/* ======================================================
   REFRACTION LAYER
====================================================== */

.bristol-refraction{

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:inherit;

    overflow:hidden;

}

.bristol-refraction::before{

    content:"";

    position:absolute;

    inset:-25px;

    border-radius:inherit;

    background:

        radial-gradient(
            circle at top left,
            rgba(255,255,255,.12),
            transparent 35%
        ),

        radial-gradient(
            circle at top right,
            rgba(255,255,255,.10),
            transparent 30%
        ),

        radial-gradient(
            circle at bottom,
            rgba(212,175,55,.08),
            transparent 45%
        );

    filter:

        blur(18px)

        saturate(120%)

        contrast(108%);

    mix-blend-mode:screen;

    opacity:.65;

}