:root {
    /* --bg: linear-gradient(135deg, #4b0082, #6e5bb8); */
    /* --bg: linear-gradient(135deg, #2e1a63, #6655aa); */

    /* --bg: linear-gradient(135deg, #4b0082, #6e5bb8);
            --card: #0b1220;
            --accent: #60a5fa;
            --muted: #94a3b8; */


    --bg: linear-gradient(135deg, #4b0082, #6e5bb8);
    /* your gradient */
    --card: rgba(89, 16, 95, 0.5);
    /* dark, slightly cool for contrast against the gradient */
    --accent: #ff79c6;
    /* vibrant pink/purple accent to pop against bg */
    --muted: #a0aec0;
    /* soft gray-blue for secondary text/elements */

}

/* * {
            box-sizing: border-box;
        } */

html,
body {
    min-height: 100svh;
    margin: 0;
    padding: 0;
    font-family: Inter, sans-serif;

    color: #000;
    /* background-color: hsl(300, 100%, 0%); */
}

body {}

.animated-h1 {
    transition: opacity 10.25s ease, transform 10.25s ease;
}

.animated-h1.animate {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
}


.center {
    align-content: center;
    justify-content: center;
    align-items: center;
}

.center-text {
    text-align: center;
}

.container {
    width: 100%;
    min-height: 100vh;
    color: #000000;
    background-color: #ffffff;

    display: flex;
    flex-direction: column;

    background-image: url("https://img.freepik.com/premium-photo/white-background_1129442-449.jpg?semt=ais_hybrid&w=740&q=80");
}

.container-header {
    width: 100%;
    background-color: #4b0082;
}

.container-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}


header::before {
    content: "";
    position: absolute;
    border-radius: 32px;
    inset: 0;
    background:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.02) 1px,
            rgba(0, 0, 0, 0.02) 2px);
    pointer-events: none;
}


h2 {
    margin: 0;
    padding: 0;

    text-align: center;
}

header {
    position: fixed;
    top: 28px;
    left: 28px;
    right: 28px;

    padding: 24px;

    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(10px);

    /* box-shadow: 0 1px 0 rgba(0,0,0,0.06); */

    box-sizing: border-box;
    z-index: 100;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    border-radius: 24px;
}









.btn {

    all: unset;
    min-width: 10%;
    box-sizing: border-box;


    padding: 14px 10px;
    border-radius: 14px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease;

    display: flex;
    align-items: center;
    /* vertical centering */
    justify-content: center;
    /* horizontal centering */
}

.btn img {
    margin-right: 14px;
    width: 18px;
    height: 18px;
}

.btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.btn-cpu {
    background: #f5b83b;
    color: #ffffff;
}

.btn-player {
    background: #3fc6be;
    color: #ffffff;
}


.display {
    transition: opacity 200ms ease;
    opacity: 1;
}

.display.fade-out {
    opacity: 0;
}

.display {
    
    position: relative;
    height: 100svh;
    overflow: hidden;
    /* keeps nav from leaking */
}

.display .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    overflow-y: auto;
    background: #fff;
}


.content {
    transition: opacity 200ms ease;
    opacity: 1;
}

.content.fade-out {
    opacity: 0;
}



.display .navigation {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    /* background-color: #ffffff; */
    background-color: rgba(255, 255, 255, 0.91);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;

    align-items: center;
    border-radius: 8px 8px 0px 0px;
    box-shadow: 2px 13px 16px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
}




.display .content::-webkit-scrollbar {
    display: none;
}

/* .display .navigation {
            width: 100%;
            max-width: 100%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            background-color: #ffffff;
            box-sizing: border-box;

            align-items: center;
            border-radius: 8px 8px 0px 0px;
            box-shadow: 0px -7px 16px 8px rgba(0, 0, 0, 0.2);
            z-index: 10;

            position: sticky;
            bottom: 0;
        } */

.display .navigation .item {
    text-align: center;
    display: flex;
    flex-direction: column;

    font-size: 11px;
    overflow: hidden;
    /* prevent content from spilling out */
    word-wrap: break-word;
    /* break long words */

    align-items: center;
    margin-top: 8px;
    margin-bottom: 8px;
}

.display .navigation p {
    padding: 0;
    margin: 0;
    margin-top: 8px;
}






.reels {
    height: 100svh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;

    /* hide scrollbars */
    scrollbar-width: none;
    /* Firefox */
}

.reels::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

.reel {
    height: 100svh;
    scroll-snap-align: start;
    position: relative;
    background: black;
}

.reel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}




.profileHeader {
    position: fixed;
    height: 64px;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    /* background-color: #ffffff; */
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;

    align-items: center;
    border-radius: 0px 0px 8px 8px;
    box-shadow: -8px -17px 16px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
}



/* CUSTOM POPUP */
.popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.popup.show {
    display: flex;
}


.popup-content {
    background: var(--bg);
    padding: 24px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
}


































/* //DELET */

.feed {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
}

.post {
    display: flex;
    padding: 14px;
    border-bottom: 1px solid #e6ecf0;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    margin-right: 12px;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feedcontent {
    flex: 1;
}

.header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.name {
    font-weight: 700;
    color: #0f1419;
}

.handle,
.time {
    color: #536471;
}

.dot {
    color: #536471;
}

.media {
    margin-top: 8px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

.media img {
    width: 100%;
    display: block;
    max-height: 320px;
    object-fit: cover;
}







/* HTML: <div class="loader"></div> */
.loader {
  height: 80px;
  aspect-ratio: 1;
  display: grid;
}
.loader:before,
.loader:after {
  content: "";
  --c:no-repeat linear-gradient(#fff 0 0);
  background: var(--c), var(--c);
  background-size: 25% 50%;
  animation: l5 1.5s infinite linear;
}
.loader:after {
  transform: scale(-1);
}
@keyframes l5 {
  0%,
  5%   {background-position:33.4% 100%,66.6% 100%}
  25%  {background-position:33.4% 100%,100% 0}
  50%  {background-position:0 0,100% 0}
  75%  {background-position:0 0,66.6% 100%}
  95%,
  100% {background-position:33.4% 100%,66.6% 100%}
} 



.centriraj {
    display: flex;               /* important! makes it a flex container */
    flex-direction: column;
    color: #ffffff;
    justify-content: center;     /* horizontal centering */
    align-items: center;         /* vertical centering */
    min-width: 100%;
    min-height: 100vh;
    background-color: #f5b83b;
}