/* Paip Food — boot splash (browser layer). Motion + non-critical styles. Critical first-paint styles are inlined in index.html . */ @keyframes paipDot { 0%, 100% { transform: scale(0.6); opacity: var(--paip-dot-floor, 0.5); } 40% { transform: scale(1); opacity: 1; } } @keyframes paipShimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } .paip-splash__water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .paip-splash__dots { display: flex; align-items: center; } .paip-splash__dot { border-radius: 50%; animation: paipDot 1.1s ease-in-out infinite; } .paip-splash__dot:nth-child(2) { animation-delay: 0.18s; } .paip-splash__dot:nth-child(3) { animation-delay: 0.36s; } .paip-splash__track { position: relative; height: 5px; border-radius: 99px; background: rgba(90, 36, 18, 0.14); overflow: hidden; } .paip-splash__fill { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, #EE882B, #E7601C); border-radius: 99px; transition: width 0.12s linear; } .paip-splash__shimmer { position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: paipShimmer 1.6s ease-in-out infinite; } .paip-splash__label { display: flex; align-items: baseline; gap: 8px; color: #5A2412; } .paip-splash__loading { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.62; } .paip-splash__pct { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; width: 38px; } /* ---- Portrait (vertical) ---- */ .paip-splash--portrait { --paip-dot-floor: 0.5; } .paip-splash--portrait .paip-splash__content { top: 30%; left: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; gap: 34px; } .paip-splash--portrait .paip-splash__logo { width: 180px; } .paip-splash--portrait .paip-splash__dots { gap: 10px; } .paip-splash--portrait .paip-splash__dot { width: 10px; height: 10px; } .paip-splash--portrait .paip-splash__dot:nth-child(1) { background: #C2560F; } .paip-splash--portrait .paip-splash__dot:nth-child(2) { background: #D9641A; } .paip-splash--portrait .paip-splash__dot:nth-child(3) { background: #E7601C; } .paip-splash--portrait .paip-splash__progress { align-items: center; gap: 12px; } .paip-splash--portrait .paip-splash__track { width: 220px; } .paip-splash--portrait .paip-splash__pct { text-align: left; } /* ---- Landscape (horizontal) ---- */ .paip-splash--landscape { --paip-dot-floor: 0.35; } .paip-splash--landscape .paip-splash__content { top: 50%; right: 9%; transform: translateY(-50%); align-items: flex-end; text-align: right; gap: 26px; } .paip-splash--landscape .paip-splash__logo { width: 172px; } .paip-splash--landscape .paip-splash__dots { gap: 9px; } .paip-splash--landscape .paip-splash__dot { width: 9px; height: 9px; } .paip-splash--landscape .paip-splash__dot:nth-child(1) { background: #E7601C; } .paip-splash--landscape .paip-splash__dot:nth-child(2) { background: #EE882B; } .paip-splash--landscape .paip-splash__dot:nth-child(3) { background: #F5B12B; } .paip-splash--landscape .paip-splash__progress { align-items: flex-end; gap: 10px; } .paip-splash--landscape .paip-splash__track { width: 190px; } .paip-splash--landscape .paip-splash__pct { text-align: right; } /* ---- Dismissal ---- */ .paip-splash--dismissing { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .paip-splash__dot { animation: none; opacity: 1; } .paip-splash__shimmer { animation: none; } }