body {
    background: linear-gradient(to bottom, #fffafa, #f0f0f0); /* color left to color right, from top to bottom */
}

/* ---------- Container Layout ---------- */

/*.container, .header, .row {
    border: 2px dashed red;
}*/

.container {
    padding: 1.5vh 0;
    width: 90vw;
    margin: 0 auto;
    opacity: 0;                     /* Starts the container slightly invisible. "FOR THE ANIMATION!" */
    transform: translateY(10px);    /* Starts the container slightly lowered. "FOR THE ANIMATION!" */
    animation: container-fade 1.5s ease-out forwards;  /* CALL THE ANIMATION! */
}

@keyframes container-fade {
    to {
        opacity: 1;                 /* Gives visibility. ANIMATION "Check .container!" */
        transform: translateY(0);   /* Gives visibility. ANIMATION "Check .container!" */
    }
}

/* ---------- Header with Button ---------- */
.header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5.5rem;                         /* same height as .row */
    margin-bottom: clamp(1.5rem, 3vh, 3rem);    /* like the gap between rows */
}


/* ---------- Title ---------- */
h1 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 700;
    text-align: center;
    color: #5c2a2a;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 1px rgba(0,0,0,0.05);
    animation: idle-float-h1 5s ease-in-out infinite alternate, texture-flicker-h1 16s ease-in-out infinite alternate;
    animation-delay: 0.2s, 0.1s;
}

@keyframes idle-float-h1 {
    from { transform: translateY(8px); }
    to { transform: translateY(-8px); }
}

@keyframes texture-flicker-h1 {
    0% { background-position: 0% 0%; }
    50% { background-position: 1% 1%; }
    100% { background-position: 0% 0%; }
}


/* ---------- Button Block ---------- */
.main-buttons {
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 2vw, 1.5rem);
    width: 90vw;
}

.row {
    display: flex;
    align-items: center;
    width: 90vw;
    gap: clamp(1rem, 1vw, 1.5rem);
}


@keyframes row-fade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Buttons ---------- */
.btn, .special-btn {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    width: 100%;

    font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: 0.05em;
    font-weight: bold;
    line-height: 1.3;

    border: none;
    border-radius: 0.85em;
    padding: 0 1rem;

    background:
        linear-gradient(to bottom, rgba(249, 194, 194, 0.9), rgba(244, 122, 122, 0.9)),
        url('../includes/assets/textures/paper-texture.jpg');
    background-size: 200%;
    background-blend-mode: overlay;

    color: #5c2a2a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    animation: idle-float 4s ease-in-out infinite alternate,
               texture-flicker 8s ease-in-out infinite alternate;
}

.btn {
    height: clamp(3.5em, 2vw, 7em); /* fixed height */  
}

.special-btn 
{
    height: clamp(2.5em, 1.6vw, 5em); /* fixed height */
}

/* ---------- Petal Shadow ---------- */
.btn::before , .special-btn::before{
    content: "";
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: url('../includes/assets/images/sakura.png') no-repeat center;
    background-size: contain;
    opacity: 0.1;
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0;
}

.btn > * , .special-btn > * {
    position: relative;
    z-index: 1;
}

/* ---------- Ripple ---------- */
.btn:hover::after, .special-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, rgba(249, 194, 194, 0.3) 50%, transparent 75%);
    border-radius: 50%;
    pointer-events: none;
    animation: petal-ripple 0.5s ease-out forwards;
}

.btn:hover, .special-btn:hover, .btn:focus, .special-btn:focus{
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background: linear-gradient(to bottom, #f9c2c2, #f6baba); /* soft sakura */
}

.btn:active, .special-btn:active {
    transform: scale(0.98) translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@keyframes petal-ripple {
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes idle-float {
    from { transform: translateY(3px); }
    to { transform: translateY(-3px); }
}

@keyframes texture-flicker {
    0% { background-position: 0% 0%; }
    50% { background-position: 1% 1%; }
    100% { background-position: 0% 0%; }
}