/* =========================================
   INTRO: BUKET + FLOWER BLOOM
   (semua nama diawali "gift"/"gi-" supaya tidak bentrok dengan template)
========================================= */

html.gi-lock,
html.gi-lock body { overflow: hidden; }

/* Layar awal: buket yang bisa disentuh */
#giftIntro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
    background: var(--bg-gradient, linear-gradient(180deg, #f5ead6 0%, #eedfc3 50%, #e2cba5 100%)); /* sama dengan background halaman */
}

#giftBouquetBtn {
    all: unset;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform-origin: 50% 100%;
    animation: giSway 4.5s ease-in-out infinite;
}

#giftBouquetBtn img {
    display: block;
    height: min(66vh, 105vw);
    width: auto;
    user-select: none;
    -webkit-user-drag: none;
}

#giftBouquetBtn:active { animation-play-state: paused; transform: scale(.97); }
#giftBouquetBtn:focus-visible { outline: 3px solid var(--primary-sage, #536345); outline-offset: 8px; border-radius: 12px; }

@keyframes giSway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}

.gi-hint {
    margin: 0;
    font-family: 'Milky Cream', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--primary-sage, #536345);
}

/* Lapisan bunga */
#giftBloom {
    position: fixed;
    inset: 0;
    z-index: 10001;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}
#giftBloom.go { visibility: visible; pointer-events: auto; }

.gi-flower {
    position: absolute;
    left: var(--x);
    top: var(--y);
    translate: -50% -50%;
    width: var(--size);
    height: auto;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

/* Fase 1: mekar dari buket ke seluruh layar */
#giftBloom.go .gi-flower {
    animation: giBloom .85s var(--d) cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes giBloom {
    from { transform: scale(0) rotate(calc(var(--r) * -1)); opacity: 0; }
    to   { transform: scale(var(--s)) rotate(0deg);          opacity: 1; }
}

/* Fase 2: bunga membesar & memudar, langsung masuk ke "I LOVE YOU" */
#giftBloom.open { pointer-events: none; }
#giftBloom.open .gi-flower {
    animation: giLeave .75s calc(var(--d) * .3) ease-out both;
}
@keyframes giLeave {
    from { transform: scale(var(--s)) rotate(0deg);                 opacity: 1; }
    to   { transform: scale(calc(var(--s) * 1.8)) rotate(var(--r)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #giftBouquetBtn { animation: none; }
    #giftBloom.go .gi-flower   { animation: none; opacity: 1; transform: scale(var(--s)); }
    #giftBloom.open .gi-flower { animation: none; opacity: 0; transition: opacity .4s; }
}