/* SECTION */
#info {
    position: relative;
    width: 100%;
    padding: 160px 40px;
    background: linear-gradient(135deg, #fff3dc, #fdeaff);
    overflow: hidden;
    display: flex;
    justify-content: center;
}

/* Canvas für Hintergrundherzen */
#heartCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Box */
.info-container {
    position: relative;
    z-index: 3;
    width: 90%;
    max-width: 900px;
    padding: 45px 55px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 26px;
    backdrop-filter: blur(12px);
    border: 2px solid rgba(240, 200, 180, 0.35);
    box-shadow: 0 25px 55px rgba(190, 140, 160, 0.25);

    /* Sanft wachsend */
    animation: growBox 1.4s ease forwards;
}

@keyframes growBox {
    from { transform: translateY(30px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Glow folgt Maus */
.info-container::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 150, 0.45), rgba(255,255,255,0));
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-container:hover::before {
    opacity: 0.55;
}

.info-container:hover {
    transform: translateY(-2px);
}

/* Titel */
.info-title {
    font-family: 'Bilbo', 'Ms Madi', cursive;
    font-size: 3.2rem;
    text-align: center;
    color: #a05e5e;
    margin-bottom: 25px;
}

/* Typing Text */
.info-text {
    font-family: "Ms Madi", cursive;
    font-size: 2.1rem;
    line-height: 1.45;
    color: #8d5c68;
    white-space: pre-line;
}


/* Blumen-Deko */
.corner-deco {
    position: absolute;
    width: 110px;
    opacity: 0.22;
    pointer-events: none;
}

.deco-top-left {
    top: -20px;
    left: -20px;
    transform: rotate(-10deg);
}

.deco-bottom-right {
    bottom: -20px;
    right: -20px;
    transform: rotate(12deg);
}

/* Mini-Herzen bei Typewriter */
.tiny-heart {
    position: absolute;
    font-size: 20px;
    background: linear-gradient(135deg, #ffc58d, #f7b253, #f8d79b);
    -webkit-background-clip: text;
    color: transparent;
    animation: tinyFloat 0.9s ease-out forwards;
    pointer-events: none;
    z-index: 999;
}

@keyframes tinyFloat {
    0% { transform: translate(0,0) scale(1); opacity: 1; }
    100% { transform: translate(-10px, -45px) scale(0.4); opacity: 0; }
}

/* Responsive */
@media (max-width: 700px) {
    .info-title { font-size: 2.4rem; }
    .info-text { font-size: 1.45rem; }
    .info-container { padding: 10px 10px; }
    .corner-deco { width: 80px; }
}