html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
-webkit-tap-highlight-color: transparent;
font-family: 'Pretendard', 'Plus Jakarta Sans', system-ui, sans-serif;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
user-select: none;
}
/* ── Welcome ── */
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
.bg-mesh {
background-image: radial-gradient(at 0% 0%, rgba(154,232,217,0.15) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(253,110,96,0.1) 0px, transparent 50%);
}
.perspective-lg { perspective: 1000px; }
/* ── Location screen ── */
.coral-pulse { animation: coral-pulse-kf 3s cubic-bezier(0.455,0.03,0.515,0.955) infinite; }
@keyframes coral-pulse-kf {
0% { transform: scale(0.8); opacity: 0.8; }
50% { transform: scale(1.1); opacity: 0.3; }
100% { transform: scale(0.8); opacity: 0.8; }
}
.floating-pet { animation: float 4s ease-in-out infinite; }
.location-pin-glow { filter: drop-shadow(0 0 12px rgba(253,110,96,0.4)); }
.active-dot-glow { box-shadow: 0 0 12px rgba(253,110,96,0.4); }
/* ── Wi-Fi screen ── */
.mesh-gradient-bg {
background: radial-gradient(at 0% 0%, rgba(162,241,226,0.15) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(253,110,96,0.1) 0px, transparent 50%);
}
.soft-card-shadow { box-shadow: 0 10px 25px -5px rgba(27,58,92,0.08), 0 8px 10px -6px rgba(27,58,92,0.05); }
/* ── Tracker screen ── */
.pulse-glow { animation: pulse-glow-kf 3s cubic-bezier(0.455,0.03,0.515,0.955) infinite; }
@keyframes pulse-glow-kf {
0% { transform: scale(0.7); opacity: 0; }
50% { opacity: 0.3; }
100% { transform: scale(1.3); opacity: 0; }
}
.device-float { animation: float 4s ease-in-out infinite; }
.soft-shadow { box-shadow: 0 15px 30px rgba(27,58,92,0.08); }
/* ── Puppy screen ── */
.profile-glow { box-shadow: 0 10px 30px rgba(27,58,92,0.08); }
.input-focus-effect:focus { box-shadow: 0 0 0 2px #005147; background-color: #fff; }
/* ── Home screen ── */
.pulse-halo { animation: halo-pulse 3s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes halo-pulse {
0%, 100% { opacity: 0.1; transform: scale(1); }
50% { opacity: 0.25; transform: scale(1.15); }
}
/* ── Map screen ── */
.map-container { background-color: #1a1c1e; }
.pulse-ring { animation: pulse-ring-kf 2s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes pulse-ring-kf {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(3); opacity: 0; }
}
.floating-overlay {
backdrop-filter: blur(12px);
background: rgba(255,255,255,0.95);
}
.path-line { stroke-dasharray: 8 8; animation: dash 30s linear infinite; }
@keyframes dash { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
/* ── Urgent Alert ── */
.urgent-gradient { background: linear-gradient(180deg, #ac332a 0%, #6d0005 100%); }
.alert-pulse { animation: alert-pulse-kf 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite; }
@keyframes alert-pulse-kf {
0% { transform: scale(0.7); opacity: 0; }
50% { opacity: 0.5; }
100% { transform: scale(1.3); opacity: 0; }
}
.shake-gentle { animation: shake 0.5s ease-in-out infinite alternate; }
@keyframes shake {
0% { transform: translateX(-1px); }
100% { transform: translateX(1px); }
}
/* ── Live Tracking ── */
.dashed-path { stroke-dasharray: 8 6; animation: dash 20s linear infinite; }
.pulse-animation {
width: 10px; height: 10px;
background: #fd6e60; border-radius: 50%;
animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.6); opacity: 0.4; }
}
/* ── Battery ── */
.battery-ring { transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1); }
.card-shadow { box-shadow: 0 4px 20px rgba(27,58,92,0.06); }
@ k e y f r a m e s m o v e M a r k e r {
0 % { o f f s e t - d i s t a n c e : 0 % ; }
1 0 0 % { o f f s e t - d i s t a n c e : 1 0 0 % ; }
}
. a n i m a t e - m a r k e r {
o f f s e t - p a t h : p a t h ( ' M 1 0 0 , 7 0 0 C 2 0 0 , 6 5 0 3 5 0 , 6 8 0 4 5 0 , 5 5 0 S 6 0 0 , 4 0 0 7 2 0 , 3 2 0 ' ) ;
a n i m a t i o n : m o v e M a r k e r 5 s l i n e a r i n f i n i t e ;
p o s i t i o n : a b s o l u t e ;
t o p : 0 ! i m p o r t a n t ;
l e f t : 0 ! i m p o r t a n t ;
t r a n s f o r m : t r a n s l a t e ( - 5 0 % , - 1 0 0 % ) ;
}
@keyframes moveMarker {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
.marker-animation {
offset-path: path("M100,700 C200,650 350,680 450,550 S600,400 720,320");
animation: moveMarker 5s linear infinite;
position: absolute;
top: 0 !important;
left: 0 !important;
transform: translate(-50%, -100%);
z-index: 50;
}