@tailwind base;
@tailwind components;
@tailwind utilities;

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

:root {
  /* Default Sáng (Sunrise/Day) */
  --bg-top: #6db6ec;
  --bg-mid: #93cbee;
  --bg-bot: #d5effe;

  --text-main: #0f172a;
  --text-muted: #475569;

  --card-bg: rgba(255, 255, 255, 0.75);
  --card-solid: rgba(255, 255, 255, 0.85);
  --card-border: rgba(255, 255, 255, 0.75);

  --tab-bg: rgba(255, 255, 255, 0.6);
  --tab-text: #475569;
  --tab-active-bg: #0284c7;
  --tab-active-text: #ffffff;

  --chart-line: #0284c7;
  /* Xanh đậm hơn */
  --chart-fill: rgba(2, 132, 199, 0.15);
  --chart-min: #475569;

  --divider: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  --bg-top: #1e293b;
  --bg-mid: #2c3e50;
  --bg-bot: #334155;

  --text-main: #f8fafc;
  --text-muted: #cbd5e1;

  --card-bg: rgba(30, 41, 59, 0.6);
  --card-solid: #1e293b;
  --card-border: rgba(255, 255, 255, 0.05);

  --tab-bg: rgba(255, 255, 255, 0.05);
  --tab-text: #94a3b8;
  --tab-active-bg: #38bdf8;
  --tab-active-text: #0f172a;

  --chart-line: #38bdf8;
  --chart-fill: rgba(56, 189, 248, 0.1);
  --chart-min: #94a3b8;

  --divider: rgba(255, 255, 255, 0.05);
}

/* Dynamic Weather Backgrounds */
body.weather-clear {
  /* Sky Blue */
  --bg-top: #5cacee;
  --bg-mid: #98d2f5;
  --bg-bot: #dff0fb;
}

body.weather-cloudy {
  /* Steel Grey/Blue */
  --bg-top: #83a0bd;
  --bg-mid: #b8cce1;
  --bg-bot: #e8eff6;
}

body.weather-rain {
  /* Slate/Moody Grey */
  --bg-top: #657b98;
  --bg-mid: #95aabc;
  --bg-bot: #dbe4ef;
}

body.weather-storm {
  /* Deep Indigo/Grey */
  --bg-top: #52637a;
  --bg-mid: #7b8ea5;
  --bg-bot: #c3ced9;
}

[data-theme="dark"] body.weather-clear {
  --bg-top: #0f172a;
  --bg-mid: #1e293b;
  --bg-bot: #334155;
}

[data-theme="dark"] body.weather-cloudy {
  --bg-top: #152238;
  --bg-mid: #253347;
  --bg-bot: #384961;
}

[data-theme="dark"] body.weather-rain {
  --bg-top: #1b2030;
  --bg-mid: #2c334b;
  --bg-bot: #424e6a;
}

[data-theme="dark"] body.weather-storm {
  --bg-top: #151825;
  --bg-mid: #23293e;
  --bg-bot: #3b465f;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-main);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-mid) 40%, var(--bg-bot));
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;
  transition: background 1s ease, color 0.5s ease;
  overflow-x: hidden;
}

/* Custom Scrollbars for Modern Look */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* Utilities */
.app-container {
  width: min(600px, 100%);
  margin: 0 auto;
  padding: 12px 16px 40px;
}

.text-main {
  color: var(--text-main);
}

.text-muted {
  color: var(--text-muted);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 32px;
  /* Material You extreme rounding */
  padding: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}

.grid-card {
  background: var(--card-solid);
  border-radius: 32px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--card-border);
}

/* Scroll Hide */
.hide-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
}

.hide-scroll::-webkit-scrollbar {
  display: none;
}

.bg-divider {
  background-color: var(--divider);
}

/* -------------------------------------
   Specific Card Shapes (Breezy Style)
-------------------------------------- */

/* Air Quality Ring */
.aqi-ring {
  position: relative;
  width: 130px;
  height: 130px;
  margin: auto;
}

.aqi-circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

.aqi-circle-bg {
  fill: none;
  stroke: var(--divider);
  stroke-width: 3.5;
}

.aqi-circle {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dasharray 1s ease;
}

/* Wind Shape */
.wind-shape-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background: #e0f2fe;
  /* Light blue tint */
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  /* Blob shape */
  z-index: 0;
  animation: morphBreathe 10s ease-in-out infinite;
}

[data-theme="dark"] .wind-shape-bg {
  background: rgba(14, 165, 233, 0.1);
}

/* Humidity Wave */
.humidity-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: #f3e8ff;
  /* Purple tint */
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  z-index: 0;
  /* Simple wave top using clippath or border radius */
  clip-path: polygon(0 15%, 20% 5%, 40% 15%, 60% 5%, 80% 15%, 100% 5%, 100% 100%, 0% 100%);
  animation: waveMove 6s ease-in-out infinite;
  transition: all 0.5s ease;
}

.grid-card:hover .humidity-wave {
  height: 75%;
}

[data-theme="dark"] .humidity-wave {
  background: rgba(168, 85, 247, 0.15);
}

/* UV Index Sun cutout */
.uv-sun-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 50%;
  z-index: -1;
  /* Scalloped edges using drop shadow on multiple circles or radial gradient */
  box-shadow: 0 0 0 10px #fdf4ff inset;
  animation: pulseSoft 4s ease-in-out infinite;
}

[data-theme="dark"] .uv-sun-shape {
  background: #1e293b;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.02) inset;
}

/* Sun & Moon Arcs */
.arc-path {
  fill: none;
  stroke: var(--divider);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.arc-active {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 3;
}

.moon-active {
  stroke: #94a3b8;
}

/* Hourly Row fixes - This ensures horizontal scrolling works properly */
.hourly-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  margin: 0;
  padding: 0 0 10px;
}

.hourly-item {
  flex: 0 0 auto;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
}

/* Chart Canvas container */
.hz-chart-box {
  position: relative;
  height: 80px;
  width: 100%;
  margin-top: 10px;
}

.hz-chart-box svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* General Layout helpers */
.z-10 {
  z-index: 10;
}

/* Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes drawArc {
  from {
    stroke-dasharray: 0, 1000;
  }
}

@keyframes fadePath {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hover-float {
  transition: transform 0.3s ease;
}

.hover-float:hover {
  animation: float 2s ease-in-out infinite;
}

.card-animate {
  opacity: 0;
  animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.active-press:active {
  transform: scale(0.92);
  transition: transform 0.1s;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.15s;
}

.delay-3 {
  animation-delay: 0.2s;
}

.delay-4 {
  animation-delay: 0.25s;
}

.delay-5 {
  animation-delay: 0.3s;
}

.delay-6 {
  animation-delay: 0.35s;
}

.delay-7 {
  animation-delay: 0.4s;
}

.delay-8 {
  animation-delay: 0.45s;
}

.delay-9 {
  animation-delay: 0.5s;
}

.delay-10 {
  animation-delay: 0.55s;
}

.hover-lift {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.hover-lift:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .hover-lift:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

@keyframes morphBreathe {

  0%,
  100% {
    border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  50% {
    border-radius: 60% 40% 55% 45% / 40% 60% 45% 55%;
    transform: translate(-50%, -50%) rotate(5deg) scale(1.05);
  }
}

@keyframes waveMove {

  0%,
  100% {
    clip-path: polygon(0 15%, 20% 5%, 40% 15%, 60% 5%, 80% 15%, 100% 5%, 100% 100%, 0% 100%);
  }

  50% {
    clip-path: polygon(0 5%, 20% 15%, 40% 5%, 60% 15%, 80% 5%, 100% 15%, 100% 100%, 0% 100%);
  }
}

@keyframes pulseSoft {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 1;
  }
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0px) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.05);
  }
}

.hero-icon-animate {
  animation: floatIcon 4s ease-in-out infinite;
}

@keyframes rainDrop {

  0%,
  100% {
    transform: translateY(-5px);
    opacity: 0;
  }

  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

.rain-animate {
  animation: rainDrop 2s ease-in-out infinite;
}

.path-animate {
  animation: fadePath 0.8s ease-out forwards;
}

/* ==========================================================================
   Dynamic Background Weather Animations
   ========================================================================== */

/* Rain */
@keyframes fall {
  to {
    transform: translateY(110vh);
  }
}

.rain-drop {
  position: absolute;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
  width: 2px;
  height: 60px;
  border-radius: 2px;
  top: -100px;
  animation: fall linear infinite;
  will-change: transform;
}

.storm-drop {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
  width: 3px;
  height: 80px;
}

/* Lightning */
@keyframes flash {

  0%,
  90%,
  94%,
  100% {
    opacity: 0;
  }

  92%,
  96% {
    opacity: 0.8;
  }
}

.lightning-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  animation: flash 8s infinite;
  pointer-events: none;
  z-index: -1;
}

/* Twinkling Stars */
@keyframes twinkle {

  0%,
  100% {
    opacity: 0.1;
    transform: scale(0.8);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

.night-star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle ease-in-out infinite;
  will-change: opacity, transform;
}

/* Drifting Clouds */
@keyframes drift {
  from {
    transform: translateX(-30vw);
  }

  to {
    transform: translateX(130vw);
  }
}

.cloud-puff {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  filter: blur(30px);
  animation: drift linear infinite;
  will-change: transform;
}

[data-theme="dark"] .cloud-puff {
  background: rgba(255, 255, 255, 0.1);
}

/* Sun Glow / Flare */
@keyframes sunPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

.sun-glow {
  position: absolute;
  top: -20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 120vw;
  height: 80vh;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.6) 0%, rgba(253, 224, 71, 0.1) 40%, rgba(253, 224, 71, 0) 70%);
  border-radius: 50%;
  animation: sunPulse 6s ease-in-out infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Rain Probability Fill Animation */
@keyframes slideUpFill {
  from {
    height: 0%;
  }

  to {
    height: var(--target-h);
  }
}