/* Laptop scene animations (from original portfolio) */

#cup {
    transform: scale(1.4) translateY(4px) translateX(40px);
    transform-origin: bottom;
}

#flowers {
    transform: scale(1.4) translateY(4px) translateX(60px);
    transform-origin: bottom;
}

#flowers .cls-25,
#flowers .cls-26,
#flowers .cls-28,
#flowers .cls-29,
#flowers .cls-30,
#flowers .cls-27 {
    transition: fill 0.45s ease, stroke 0.45s ease;
}

.hero:has(.flower-trigger:hover) #flowers .cls-25 { fill: #F4BB51; }
.hero:has(.flower-trigger:hover) #flowers .cls-28 { fill: #F3C5C5; }
.hero:has(.flower-trigger:hover) #flowers .cls-29 { fill: #F38181; }
.hero:has(.flower-trigger:hover) #flowers .cls-30 { fill: #FFEB55; }
.hero:has(.flower-trigger:hover) #flowers .cls-26 { fill: #8EACA2; }
.hero:has(.flower-trigger:hover) #flowers .cls-27 { stroke: #4a6b63; }

.steam1 { animation: steaming 7s linear infinite; }
.steam2 { animation: steaming 5s linear infinite; }
.steam3 { animation: steaming 9s linear infinite; }
.steam4 { animation: steaming 7.5s linear infinite; }

@keyframes steaming {
    0% { transform: translateY(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-10px); opacity: 0; }
}

#code_left line,
#code_right line {
    stroke-opacity: 0;
}

.code-animation {
    animation: line-draw 0s forwards, typing 2s forwards;
}

.code-not-animated {
    stroke-opacity: 1;
}

@keyframes typing {
    from { stroke-dashoffset: 300; }
    to { stroke-dashoffset: 0; }
}

@keyframes line-draw {
    from { stroke-opacity: 0; }
    to { stroke-opacity: 1; }
}

#typing {
    animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}