/* ---------- Global ---------- */

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: linear-gradient(rgba(255, 182, 220, 0.6), rgba(255, 182, 220, 0.6)), url("images/background.svg") center/cover no-repeat fixed;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Rotated side title */
.side-title {
    position: fixed;
    top: 20vh;
    left: 5vw;
    transform: rotate(-90deg);
    transform-origin: left top;
    display: flex;
    align-items: center;
    z-index: 9999;
}

.side-word-main {
    font-family: "Quicksand", sans-serif;
    font-size: clamp(24px, 2.5vw, 40px);
    font-weight: 900;
    color: #000;
    transition: color 0.25s ease-in-out;
}

.side-title:hover .side-word-main {
    color: #ff4d9c;
}

.side-word-sub {
    font-family: "Quicksand", sans-serif;
    font-size: clamp(16px, 1.6vw, 26px);
    font-weight: 700;
    color: #ffffff;
}

/* Desktop socials */
.social-links-desktop {
    position: fixed;
    top: 20px;
    right: 2vw;
    display: flex;
    gap: 12px;
    z-index: 9999;
}

    .social-links-desktop img {
        width: clamp(40px, 4vw, 70px);
        height: auto;
        transition: transform 0.15s ease;
    }

        .social-links-desktop img:hover {
            transform: scale(1.25);
        }

.nav-toggle {
    display: none;
}

/* Hamburger icon */
.nav-toggle-label {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 3100;
}

    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        position: absolute;
        left: 0;
        right: 0;
        height: 3px;
        background: #000;
        content: "";
        border-radius: 3px;
    }

    .nav-toggle-label span {
        top: 50%;
        transform: translateY(-50%);
    }

        .nav-toggle-label span::before {
            top: -8px;
        }

        .nav-toggle-label span::after {
            top: 8px;
        }

/* Mobile dropdown panel */
.nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: 70px 16px 16px;
    background: rgba(60, 60, 60, 0.97);
    transform: translateY(-100%);
    transition: transform 0.25s ease-out;
    z-index: 3050;
}

.nav-toggle:checked ~ .nav-panel {
    transform: translateY(0);
}

.social-links-mobile img {
    width: 60px;
    height: auto;
    margin-right: 12px;
}

/* ---------- Typing Poem on Left ---------- */
.poem-typing {
    position: fixed;
    left: 5vw;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    max-width: min(220px, 15vw);
    z-index: 50;
    pointer-events: none;
}

#poem-typer {
    font-family: "Quicksand", sans-serif;
    font-size: clamp(12px, 1.2vw, 20px);
    line-height: 1.4;
    color: #000;
    white-space: pre-wrap;
    padding-right: 4px;
}

/* ---------- Hero Layout ---------- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.hero-inner {
    position: relative;
    width: min(1200px, 90vw);
    aspect-ratio: 16 / 10;
}

/* Wojil in center */
.hero-wojil {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 62.5%;
    max-width: 800px;
}

/* ---------- Floating Items ---------- */
.float-icon {
    position: absolute;
    transform-origin: center;
}

/* Heels – top-left */
.icon-heels {
    top: 6%;
    left: 14%;
    width: min(300px, 25vw);
    transform: rotate(-19deg);
    animation: bounce-heels 7.4s linear infinite;
}

/* Mirror – left-middle */
.icon-mirror {
    top: 40%;
    left: 5%;
    width: min(100px, 8vw);
    transform: rotate(-10deg);
    animation: bounce-mirror 7.3s linear infinite;
}

/* Sunglasses – top-right */
.icon-sunglasses {
    top: 0%;
    right: 27%;
    width: min(190px, 16vw);
    transform: rotate(20deg);
    animation: bounce-sunglasses 6.7s linear infinite;
}

/* Lipstick – right-middle */
.icon-lipstick {
    top: 40%;
    right: 12%;
    width: min(170px, 14vw);
    transform: rotate(12deg);
    animation: bounce-lipstick 7.5s linear infinite;
}

/* Purse – middle-left-ish */
.icon-purse {
    top: 25%;
    right: 65%;
    width: min(220px, 18vw);
    transform: rotate(-25deg);
    animation: bounce-purse 6s linear infinite;
}

/* Ring – mid-right-ish */
.icon-ring {
    top: 28%;
    left: 70%;
    width: min(75px, 6vw);
    transform: rotate(25deg);
    animation: bounce-ring 8s linear infinite;
}

/* Arrow Icons */
.icon-arrow1 {
    top: 18%;
    left: 32%;
    width: min(90px, 7.5vw);
    transform: rotate(14deg);
    animation: bounce-arrow1 6.2s linear infinite;
}

.icon-arrow2 {
    top: 22%;
    left: 63%;
    width: min(40px, 3.5vw);
    transform: rotate(12deg);
    animation: bounce-arrow2 7.4s linear infinite;
}

.icon-arrow3 {
    top: -4%;
    left: 44%;
    width: min(50px, 4vw);
    transform: rotate(-10deg);
    animation: bounce-arrow3 7.9s linear infinite;
}

/* Solana Icon */
.icon-solana {
    top: 15%;
    left: 78%;
    width: min(160px, 13vw);
    transform: rotate(8deg);
    animation: bounce-solana 7.1s linear infinite;
}

/* ---------- Bounce Animations ---------- */
@keyframes bounce-heels {
    0%, 100% {
        top: 6%;
    }

    50% {
        top: 3.5%;
    }
}

@keyframes bounce-mirror {
    0%, 100% {
        top: 40%;
    }

    50% {
        top: 37%;
    }
}

@keyframes bounce-sunglasses {
    0%, 100% {
        top: 1%;
    }

    50% {
        top: -1%;
    }
}

@keyframes bounce-lipstick {
    0%, 100% {
        top: 40%;
    }

    50% {
        top: 37%;
    }
}

@keyframes bounce-purse {
    0%, 100% {
        top: 29%;
    }

    50% {
        top: 27%;
    }
}

@keyframes bounce-ring {
    0%, 100% {
        top: 28%;
    }

    50% {
        top: 25%;
    }
}

@keyframes bounce-arrow1 {
    0%, 100% {
        top: 16%;
    }

    50% {
        top: 14%;
    }
}

@keyframes bounce-arrow2 {
    0%, 100% {
        top: 22%;
    }

    50% {
        top: 19%;
    }
}

@keyframes bounce-arrow3 {
    0%, 100% {
        top: -4%;
    }

    50% {
        top: -7%;
    }
}

@keyframes bounce-solana {
    0%, 100% {
        top: 15%;
    }

    50% {
        top: 12.5%;
    }
}

/* Buy Button */
.buy-button-svg {
    position: absolute;
    top: 99%;
    right: 15%;
    width: min(400px, 33vw);
    transform: rotate(-2deg);
    transition: transform 0.25s ease;
}

    .buy-button-svg:hover {
        transform: rotate(-2deg) scale(1.06);
    }

.buy-link {
    position: absolute;
    right: 8%;
    bottom: 12%;
    display: inline-block;
}

.buy-image {
    width: min(210px, 17.5vw);
    transition: transform 0.2s ease;
}

.buy-link:hover .buy-image {
    transform: translateY(-4px) rotate(-2deg);
}

/* Dark Wojil */
.dark-wojil {
    position: fixed;
    bottom: 2vh;
    left: 6vw;
    width: min(180px, 12vw);
    z-index: 999;
    pointer-events: none;
    transform: rotate(2deg);
    opacity: 0.95;
}

/* ---------- News Panel ---------- */
.news-panel {
    position: fixed;
    top: 20vh;
    right: 2vw;
    width: min(300px, 22vw);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-header h2 {
    margin: 0;
    font-size: clamp(18px, 1.8vw, 28px);
    font-weight: 800;
    font-family: system-ui, sans-serif;
}

.news-header {
    text-align: center;
    width: 100%;
}

.news-subtitle {
    margin-top: 2px;
    font-size: clamp(11px, 0.9vw, 14px);
    opacity: 0.8;
}

.news-box {
    margin-top: 12px;
    height: min(400px, 45vh);
    border: 3px solid #ffffff;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.33);
    overflow: hidden;
}

    .news-box iframe {
        width: 100% !important;
        height: 100% !important;
    }

/* ---------- Tablet Layout (max 1024px) ---------- */
@media (max-width: 1024px) {
    .side-title {
        left: 2vw;
    }

    .poem-typing {
        display: none;
    }

    .dark-wojil {
        display: none;
    }

    .news-panel {
        display: none;
    }
}

/* ---------- Phone Layout (max 768px) ---------- */
@media (max-width: 768px) {
    body {
        overflow-y: auto;
    }

    .social-links-desktop {
        display: none;
    }

    .nav-toggle-label {
        display: block;
    }

    .nav-panel {
        background: rgba(60, 60, 60, 0.97);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 2050;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-family: "Quicksand", sans-serif;
        font-size: 20px;
        font-weight: 700;
    }

        .mobile-menu a {
            text-decoration: none;
            color: #ffffff;
        }

            .mobile-menu a:hover {
                color: #ff4d9c;
            }

    /* Show side title on mobile */
    .side-title {
        position: static;
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 80px 16px 20px;
        z-index: 1;
    }

    .side-word-main {
        font-size: 32px;
        line-height: 1.2;
    }

    .side-word-sub {
        font-size: 20px;
    }

    .hero {
        min-height: auto;
        padding: 0 16px 40px;
        align-items: flex-start;
    }

    .hero-inner {
        position: relative;
        width: 100%;
        aspect-ratio: auto;
        min-height: auto;
    }

    .hero-wojil {
        position: relative;
        left: 50%;
        top: auto;
        transform: translateX(-50%);
        width: 70%;
        max-width: 300px;
        margin-bottom: 24px;
    }

    /* Show only select floating icons on mobile - smaller */
    .float-icon {
        display: none;
    }

    .icon-heels,
    .icon-sunglasses,
    .icon-lipstick,
    .icon-purse,
    .icon-ring,
    .icon-arrow1,
    .icon-arrow2,
    .icon-arrow3 {
        display: block;
        position: absolute;
    }

    /* Reposition icons for mobile - smaller sizes */
    .icon-heels {
        top: 0%;
        left: 2%;
        width: 20vw;
        max-width: 80px;
    }

    .icon-sunglasses {
        top: 2%;
        right: 2%;
        width: 18vw;
        max-width: 70px;
    }

    .icon-ring {
        top: 22%;
        right: 0%;
        width: 12vw;
        max-width: 50px;
    }

    .icon-lipstick {
        bottom: 15%;
        right: 0%;
        width: 16vw;
        max-width: 65px;
    }

    .icon-purse {
        bottom: 18%;
        left: 0%;
        width: 18vw;
        max-width: 75px;
    }

    /* Arrow icons - small and positioned around center */
    .icon-arrow1 {
        top: 15%;
        left: 20%;
        width: 12vw;
        max-width: 50px;
    }

    .icon-arrow2 {
        top: 20%;
        right: 10%;
        width: 8vw;
        max-width: 35px;
    }

    .icon-arrow3 {
        top: 8%;
        left: 40%;
        transform: translateX(-50%) rotate(-10deg);
        width: 10vw;
        max-width: 40px;
    }

    .buy-link {
        position: static;
        display: block;
        margin: 0 auto 32px;
        text-align: center;
    }

    .buy-button-svg {
        position: static;
        width: 70%;
        max-width: 280px;
        transform: rotate(-2deg);
    }

    /* Hide poem and dark wojil on mobile */
    .poem-typing {
        display: none;
    }

    .dark-wojil {
        display: none;
    }

    .news-panel {
        position: relative;
        top: auto;
        right: auto;
        width: 90vw;
        max-width: 500px;
        margin: 0 auto 60px;
        display: flex;
    }

    .news-box {
        height: 500px;
    }
}