.phones-wrapper > div { 
animation: none !important; 
} .phones-wrapper {
will-change: transform;
animation: idle-drift 6s ease-in-out infinite;
transform-style: preserve-3d;
perspective: 2000px; overflow: visible; }
@keyframes idle-drift {
0%, 100% { transform: translate3d(0, 0, 0); }
50%      { transform: translate3d(0, -3px, 0); }
} .phone-screen .ui-layer {
opacity: 0;
transform: translateY(12px);
}
.phone-screen .animate-fadeInUp {
opacity: 1 !important;
transform: translateY(0) !important;
transition: opacity 500ms ease, transform 500ms ease;
} .phone-screen {
position: relative;
box-shadow: inset 0 -6px 8px -4px rgba(0,0,0,.15);
overflow: hidden;
border-radius: 28px;
}
.shimmer { 
background: #e5e7eb; 
}
.phone-frame {
position: relative;
border-radius: 36px;
box-shadow:
inset 0 1px 2px rgba(255,255,255,0.2),
inset 0 -1px 2px rgba(0,0,0,0.4),
0 10px 30px rgba(0,0,0,0.35),
0 4px 12px rgba(0,0,0,0.25);
}
.phone-frame::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(0,0,0,0.2));
mix-blend-mode: overlay;
}
.phone-screen::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(120deg, rgba(255,255,255,0.25) 0%, transparent 60%);
pointer-events: none;
} .glass-pane {
filter: blur(20px) saturate(120%);
}  .countup {
opacity: 0;
transform: translateY(8px);
}
.countup.visible {
opacity: 1;
transform: translateY(0);
transition: opacity 400ms ease, transform 400ms ease;
} .progress-bar {
transform-origin: left;
transform: scaleX(0);
transition: transform 800ms ease-out;
}
.progress-bar.filled { 
transform: scaleX(1); 
} .dinner-img {
opacity: 0;
transform: scale(0.98);
transition: opacity 600ms ease, transform 600ms ease;
}
.dinner-img.visible {
opacity: 1;
transform: scale(1);
} .hero-pill {
opacity: 0;
transform: translateY(6px) scale(0.95);
transition: opacity 400ms ease, transform 400ms ease;
}
.hero-pill.visible {
opacity: 1;
transform: translateY(0) scale(1);
}  .phone-screen .ui-layer:last-child {
margin-top: auto !important;
} .phone-screen .ui-layer:nth-last-of-type(2) {
flex-grow: 1;
display: flex;
align-items: flex-start; }
.phone-screen .ui-layer:nth-last-of-type(2) > div {
height: 100% !important; min-height: 3rem; max-height: none; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;
border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;
}  .phone-screen {
pointer-events: none;
}