@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

input,
button {
border: 0;
outline: 0;
}

body {
background: linear-gradient(120deg, #4a90d0, #6aa8dd, #8fc0e8, #5596cf);
background-size: 300% 300%;
animation: skyFlow 14s ease-in-out infinite;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: "Poppins";
}
@keyframes skyFlow {
0%, 100% { background-position: 0% 50%; }
50%      { background-position: 100% 50%; }
}
body::before {
content: '';
position: fixed;
top: -160px;
right: -160px;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(255,241,181,.7) 0%, rgba(255,241,181,0) 70%);
z-index: -2;
pointer-events: none;
}

.sea {
position: fixed;
left: -25%;
bottom: -60px;
width: 150%;
height: 44vh;
background: linear-gradient(180deg, #7cc4e8 0%, #3f97cf 35%, #2374b3 75%, #1b5e9b 100%);
border-radius: 100% 100% 0 0 / 60px 60px 0 0;
z-index: -1;
}
.sea::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -18px;
height: 32px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='32' viewBox='0 0 240 32'%3E%3Cpath d='M0 22 C 20 10 40 10 60 20 C 80 28 100 8 120 18 C 140 26 160 10 180 18 C 200 24 220 12 240 22 L 240 32 L 0 32 Z' fill='white' fill-opacity='0.9'/%3E%3C/svg%3E") repeat-x;
background-size: 240px 32px;
filter: blur(1.5px);
animation: foamMove 12s linear infinite;
}
.sea::after {
content: '';
position: absolute;
inset: 24px 0 0 0;
background:
  radial-gradient(ellipse 90px 8px at 18% 22%, rgba(255,255,255,.5), transparent 70%),
  radial-gradient(ellipse 120px 10px at 68% 34%, rgba(255,255,255,.4), transparent 70%),
  radial-gradient(ellipse 70px 7px at 42% 52%, rgba(255,255,255,.35), transparent 70%),
  radial-gradient(ellipse 130px 10px at 84% 66%, rgba(255,255,255,.38), transparent 70%),
  radial-gradient(ellipse 95px 8px at 12% 78%, rgba(255,255,255,.33), transparent 70%),
  radial-gradient(ellipse 80px 7px at 55% 88%, rgba(255,255,255,.3), transparent 70%);
animation: glints 6s ease-in-out infinite alternate;
}
@keyframes foamMove {
from { background-position-x: 0; }
to   { background-position-x: 240px; }
}
@keyframes glints {
from { opacity: .6; transform: translateX(0); }
to   { opacity: 1;  transform: translateX(14px); }
}

.card {
flex-basis: 470px;
flex-shrink: 1;
flex-grow: 0;
margin: 0px 15px;
background: linear-gradient(180deg,#62b8f6 0%, #2c79c1 100%);
color: #fff;
border-radius: 20px;
padding: 40px 20px;
text-align: center;
height: 230px;
transition: all 0.5s;
}
.card__title {
font-size: 32px;
}
.card__title--temp {
font-size: 70px;
font-weight: 500;
}
.card__title--city {
font-size: 45px;
font-weight: 400;
}
.card__date {
font-size: 20px;
margin-bottom: 15px;
}
.card__search {
display: flex;
column-gap: 10px;
align-items: center;
width: 100%;
margin-bottom: 25px;
}
.card__input {
color: #555;
padding: 10px 25px;
border-radius: 30px;
width: 100%;
background: #fff;
font-size: 18px;
height: 60px;
}
.card__btn {
border-radius: 50%;
width: 60px;
flex: 0 0 60px;
cursor: pointer;
background: #fff;
height: 60px;
}
.card__btn i {
transition: transform 0.1s;
}
.card__btn:hover i {
transform: scale(1.3);
}
.card__weather {
transform: scale(0);
opacity: 0;
}
.card__block {
display: flex;
justify-content: center;
align-items: center;
column-gap: 15px;
margin-bottom: 20px;
}
.card__block img {
width: 100px;
height: 100px;
object-fit: cover;
}
.card__details {
padding: 0 20px;
max-width: 250px;
margin: 0px auto;
}
.card__col {
display: grid;
grid-template-columns: 20px 50px auto;
align-items: center;
text-align: left;
column-gap: 16px;
}
.card__col:not(:last-child) {
margin-bottom: 20px;
}
.card__info {
border-left: 1px solid #fff;
padding-left: 16px;
}
.card__col-info {
width: 20px;
flex: 0 0 20px;
}
.card.active .card__weather {
animation: show 0.5s forwards;
animation-delay: 0.5s;
}
@keyframes show {
to {
transform: scale(1);
opacity: 1;
}
}

.sky {
position: fixed;
top: 26px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 14px 32px;
border-radius: 60px;
background: linear-gradient(90deg,
            rgba(255,255,255,.95),
            rgba(255,255,255,.55),
            rgba(255,255,255,.95));
background-size: 200% 100%;
animation: shimmer 6s linear infinite;
backdrop-filter: blur(8px);
box-shadow: 0 12px 30px rgba(20,80,126,.25),
            inset 0 0 0 1px rgba(255,255,255,.6);
color: #14507e;
font-size: 19px;
font-weight: 500;
white-space: nowrap;
z-index: 10;
}
@keyframes shimmer {
0%   { background-position: 0% 0; }
100% { background-position: 200% 0; }
}
.sky__sun {
font-size: 26px;
filter: drop-shadow(0 0 8px rgba(255,200,60,.9));
animation: pulse 3s ease-in-out infinite;
}
.sky__sun--moon {
filter: drop-shadow(0 0 10px rgba(215,235,255,.95));
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.15); }
}
.sky__dot { opacity: .4; }

.bird {
position: fixed;
width: 30px;
height: 14px;
opacity: .8;
z-index: -1;
animation: fly linear infinite;
}
.bird::before,
.bird::after {
content: '';
position: absolute;
top: 0;
width: 15px;
height: 10px;
border-top: 2.5px solid #fff;
border-radius: 50%;
}
.bird::before { left: 0;    transform: rotate(-12deg); }
.bird::after  { left: 13px; transform: rotate(12deg); }
.bird--1 { top: 22%; animation-duration: 34s; }
.bird--2 { top: 36%; animation-duration: 46s; animation-delay: -18s; transform: scale(.7); }
@keyframes fly {
0%   { left: -60px; }
100% { left: 110%; }
}

.sparkle {
position: fixed;
color: rgba(255,255,255,.9);
font-size: 18px;
text-shadow: 0 0 10px rgba(255,255,255,.8);
animation: twinkle 2.6s ease-in-out infinite;
z-index: -1;
pointer-events: none;
}
@keyframes twinkle {
0%, 100% { opacity: .15; transform: scale(.8); }
50%      { opacity: 1;   transform: scale(1.15); }
}