/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --cyan:    #00d4ff;
  --blue:    #0066ff;
  --magenta: #ff00aa;
  --bg:      #060c1a;
  --bg2:     #0a1428;
  --weather-tint: rgba(0, 170, 255, 0.08);
  --glass-bg:      rgba(255, 255, 255, 0.06);
  --glass-border:  rgba(0, 212, 255, 0.22);
  --glass-hover:   rgba(255, 255, 255, 0.13);
  --text:    #e8f4ff;
  --text-dim: rgba(232, 244, 255, 0.55);
  --panel-radius: 20px;
  --transition-reveal: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  --transition-hide:   0.7s cubic-bezier(0.55, 0, 0.45, 1);
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: radial-gradient(120% 120% at 15% 10%, var(--bg2) 0%, var(--bg) 62%, #030712 100%);
  color: var(--text);
  overflow-x: hidden;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  transition: background 900ms ease, color 300ms ease;
}

/* Weather tint layer controlled by --weather-tint */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 80% 0%, var(--weather-tint) 0%, transparent 62%),
    radial-gradient(90% 70% at 20% 100%, color-mix(in srgb, var(--weather-tint) 70%, transparent) 0%, transparent 60%);
  transition: background 900ms ease;
}

/* ============================================================
   CANVAS — RAIN
   ============================================================ */
#rain-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   WEATHER INFO WIDGET
   ============================================================ */
.weather-info {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  min-width: 200px;
  max-width: min(86vw, 320px);
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: rgba(8, 18, 34, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.weather-info-toggle {
  display: none;
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 3;
  border: 1px solid rgba(170, 210, 255, 0.32);
  background: rgba(8, 18, 34, 0.5);
  color: rgba(230, 242, 255, 0.95);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  backdrop-filter: blur(10px) saturate(135%);
}

.weather-info__label {
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(232, 244, 255, 0.62);
  margin-bottom: 0.24rem;
}

.weather-info__place {
  font-size: 0.86rem;
  line-height: 1.2;
  font-weight: 600;
  color: rgba(232, 244, 255, 0.9);
}

.weather-info__value {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: rgba(200, 226, 255, 0.86);
}

.weather-test {
  margin-top: 0.52rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.32rem;
}

.weather-test__btn {
  border: 1px solid rgba(170, 210, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(225, 240, 255, 0.9);
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  font-size: 0.62rem;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  width: 100%;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.weather-test__btn:hover {
  background: rgba(0, 212, 255, 0.14);
  border-color: rgba(0, 212, 255, 0.42);
}

.weather-test__btn.is-active {
  background: rgba(0, 212, 255, 0.2);
  border-color: rgba(0, 212, 255, 0.55);
  color: #e9f7ff;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem 1rem 2rem;
  -webkit-user-select: none;
  user-select: none;
}

/* Lockup: logo + title side by side */
.hero__lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* ── 3D Logo container ── */
.hero__logo {
  width: clamp(52px, 8vw, 76px);
  height: clamp(52px, 8vw, 76px);
  flex-shrink: 0;
  position: relative;
}

.logo-3d {
  width: 100%;
  height: 100%;
  /* Continuous slow 3D-ish rotate via perspective + rotateY */
  animation: logo-spin 8s ease-in-out infinite;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5))
          drop-shadow(0 0 24px rgba(0, 102, 255, 0.3));
}

@keyframes logo-spin {
  0%   { transform: rotateY(0deg)   scale(1);    }
  25%  { transform: rotateY(18deg)  scale(1.04); }
  50%  { transform: rotateY(0deg)   scale(1);    }
  75%  { transform: rotateY(-18deg) scale(1.04); }
  100% { transform: rotateY(0deg)   scale(1);    }
}

/* Bar grow-in animation on page load */
.logo-bar {
  transform-box: fill-box;
  transform-origin: bottom center;
}

.logo-bar--1 {
  animation: bar-grow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
.logo-bar--2 {
  animation: bar-grow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}
.logo-bar--3 {
  animation: bar-grow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}

@keyframes bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Explicit final bar heights (y = bottom - height) */
.logo-bar--1 { animation-fill-mode: forwards; }
/* We animate via JS for correct SVG y/height, see app.js */

/* Sparkle pulse */
.logo-sparkle {
  animation: sparkle-pulse 2.5s ease-in-out infinite;
}

@keyframes sparkle-pulse {
  0%, 100% { r: 2.5; opacity: 0.9; }
  50%       { r: 3.8; opacity: 0.4; }
}

.hero__title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 45%, var(--magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.hero__dot {
  /* inherits gradient */
}

.hero__sub {
  margin-top: 0.75rem;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============================================================
   GRID
   ============================================================ */
.grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  width: min(615px, calc(100vw - 2rem));
  margin: 2rem auto 2rem;
  padding: 0 0.25rem;
}

/* ============================================================
   PANEL — BASE
   ============================================================ */
.panel {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--panel-radius);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;

  /* Glassmorphism base */
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 212, 255, 0.08);

  transition:
    border-color var(--transition-reveal),
    box-shadow var(--transition-reveal),
    background var(--transition-reveal),
    backdrop-filter var(--transition-reveal),
    transform var(--transition-reveal);
}

.panel__bg-icon-template {
  display: none;
}

.panel__bg-icons-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.panel__bg-icon-item {
  position: absolute;
  width: var(--icon-size, 10px);
  height: var(--icon-size, 10px);
  color: rgba(255, 78, 78, 0.46);
  opacity: var(--icon-opacity, 0.28);
  transform: translate(-50%, -50%);
  filter: grayscale(0.06) saturate(0.95);
}

.panel__bg-icon-item svg {
  width: 100%;
  height: 100%;
}

.panel:hover .panel__bg-icon-item,
.panel:focus-visible .panel__bg-icon-item {
  opacity: calc(var(--icon-opacity, 0.28) + 0.06);
}

/* Subtle glow ring per panel colour */
.panel[data-index="0"] { --accent: var(--cyan); }
.panel[data-index="1"] { --accent: #4d9eff; }
.panel[data-index="2"] { --accent: var(--magenta); }
.panel[data-index="3"] { --accent: #a855f7; }

.panel:hover,
.panel:focus-visible {
  border-color: var(--accent);
  background: var(--glass-hover);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
  backdrop-filter: blur(6px) saturate(180%);
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--accent),
    0 0 40px color-mix(in srgb, var(--accent) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ============================================================
   CONDENSATION OVERLAY
   ============================================================ */
.panel__condensation {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--panel-radius);
  pointer-events: none;

  /* Frosted/condensation base layer */
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255,255,255,0.09) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 70%, rgba(0,212,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 75% 55%, rgba(255,255,255,0.06) 0%, transparent 50%);

  /* Noise/frost texture via SVG filter applied as mask-image workaround */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);

  opacity: 1;
  transition:
    opacity var(--transition-reveal),
    backdrop-filter var(--transition-reveal),
    transform var(--transition-reveal);
}

/* Water drops using generated pseudo-shadows */
.panel__drops {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: var(--panel-radius);

  /* Dense field of drop-like radial spots */
  background-image:
    radial-gradient(circle 3px at 15% 18%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(circle 5px at 28% 45%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(circle 2px at 42% 12%, rgba(200,240,255,0.50) 0%, transparent 100%),
    radial-gradient(circle 4px at 60% 30%, rgba(255,255,255,0.38) 0%, transparent 100%),
    radial-gradient(circle 3px at 78% 20%, rgba(200,240,255,0.45) 0%, transparent 100%),
    radial-gradient(circle 6px at 88% 55%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(circle 2px at 10% 65%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(circle 4px at 35% 75%, rgba(200,240,255,0.35) 0%, transparent 100%),
    radial-gradient(circle 3px at 52% 62%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(circle 5px at 70% 80%, rgba(255,255,255,0.28) 0%, transparent 100%),
    radial-gradient(circle 2px at 82% 38%, rgba(200,240,255,0.48) 0%, transparent 100%),
    radial-gradient(circle 3px at 20% 88%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(circle 4px at 48% 92%, rgba(200,240,255,0.30) 0%, transparent 100%),
    radial-gradient(circle 2px at 92% 85%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(circle 7px at 65% 10%, rgba(255,255,255,0.18) 0%, transparent 100%),
    /* Trailing streaks */
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.04) 40%, transparent 100%);

  opacity: 1;
  transition: opacity var(--transition-reveal);
}

/* Reveal: hide condensation */
.panel:hover .panel__condensation,
.panel:focus-visible .panel__condensation {
  opacity: 0;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transform: scale(1.04);
  transition:
    opacity var(--transition-reveal),
    backdrop-filter var(--transition-reveal),
    transform var(--transition-reveal);
}

.panel:hover .panel__drops,
.panel:focus-visible .panel__drops {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Condensation re-appear: use longer hide transition */
.panel:not(:hover):not(:focus-visible) .panel__condensation {
  transition:
    opacity var(--transition-hide),
    backdrop-filter var(--transition-hide),
    transform var(--transition-hide);
}

.panel:not(:hover):not(:focus-visible) .panel__drops {
  transition: opacity var(--transition-hide);
}

/* ============================================================
   PANEL CONTENT
   ============================================================ */
.panel__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.75rem 1.5rem;
  text-align: center;

  opacity: 1;
  transform: none;
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

.panel:hover .panel__content,
.panel:focus-visible .panel__content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hide-back animation (slightly slower) */
/* Icon */
.panel__icon {
  width: clamp(40px, 8vw, 56px);
  height: clamp(40px, 8vw, 56px);
  color: rgba(210, 222, 236, 0.72);
  filter: grayscale(1) saturate(0.25) brightness(0.86) drop-shadow(0 0 6px rgba(210, 226, 245, 0.2));
  opacity: 0.48;
  transform: translateY(6px) scale(0.97);
  animation: panelIconFadeInLR 3s cubic-bezier(0.22, 1, 0.36, 1) 0.08s infinite;
  transition: opacity 0.32s ease, transform 0.32s ease, color 0.32s ease, filter 0.32s ease;
}

.panel__icon svg {
  width: 100%;
  height: 100%;
}

/* Title */
.panel__title {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: rgba(222, 232, 244, 0.62);
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  background-clip: border-box;
  opacity: 0.56;
  transform: translateY(5px);
  animation: panelTitleFadeInLR 3s cubic-bezier(0.22, 1, 0.36, 1) 0.22s infinite;
  transition: opacity 0.32s ease, transform 0.32s ease, color 0.32s ease, background 0.32s ease;
}

/* Description */
.panel__desc {
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 22ch;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* CTA badge */
.panel__cta {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.3rem 0.9rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent);
  opacity: 0;
  transform: translateY(7px);
  transition: background 0.25s, box-shadow 0.25s, opacity 0.35s ease, transform 0.35s ease;
}

.panel:hover .panel__icon,
.panel:focus-visible .panel__icon,
.panel:hover .panel__title,
.panel:focus-visible .panel__title {
  animation: none;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.panel:hover .panel__icon,
.panel:focus-visible .panel__icon {
  color: var(--accent);
  filter: grayscale(0) saturate(1) brightness(1)
    drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent));
}

.panel:hover .panel__title,
.panel:focus-visible .panel__title {
  color: #ffffff;
  background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--accent) 60%, white) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.panel:hover .panel__desc,
.panel:focus-visible .panel__desc,
.panel:hover .panel__cta,
.panel:focus-visible .panel__cta {
  opacity: 1;
  transform: translateY(0);
}

.panel:hover .panel__cta {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ============================================================
   PANEL — condensation "wiping" animation keyframe on reveal
   ============================================================ */
@keyframes condenseIn {
  0%   { opacity: 0; transform: scale(1.06); }
  40%  { opacity: 0.6; }
  100% { opacity: 1; transform: scale(1); }
}

.panel.panel--condensing .panel__condensation {
  animation: condenseIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes panelIconFadeInLR {
  0% {
    opacity: 0;
    transform: translateX(-16px) translateY(10px) scale(0.95);
    clip-path: inset(0 100% 0 0);
  }
  40% {
    opacity: 0.48;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 0.48;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes panelTitleFadeInLR {
  0% {
    opacity: 0;
    transform: translateX(-22px) translateY(10px) scale(0.98);
    clip-path: inset(0 100% 0 0);
  }
  45% {
    opacity: 0.56;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 0.56;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 1.5rem 1rem 2rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.footer a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.footer a:hover {
  color: var(--cyan);
}

.footer span {
  opacity: 0.4;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 900px) {
  .weather-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .weather-info {
    position: fixed;
    top: 3.1rem;
    right: 0.8rem;
    margin: 0;
    max-width: min(92vw, 340px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.24s ease, transform 0.24s ease;
  }

  body.weather-info-open .weather-info {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .hero {
    padding-top: 2.4rem;
  }
}

@media (max-width: 540px) {
  .weather-info {
    min-width: 160px;
    padding: 0.5rem 0.62rem;
  }

  .weather-info__label {
    font-size: 0.65rem;
  }

  .weather-info__place {
    font-size: 0.93rem;
  }

  .weather-info__value {
    font-size: 0.85rem;
  }

  .weather-test {
    gap: 0.26rem;
  }

  .weather-test__btn {
    font-size: 0.7rem;
    padding: 0.14rem 0.42rem;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .panel {
    aspect-ratio: 4 / 3;
  }

  /* On touch devices: show content by default (no hover) */
  .panel__content {
    opacity: 1;
    transform: none;
    gap: 0.4rem;
    padding: 1.2rem 1rem;
  }

  .panel__icon,
  .panel__title,
  .panel__desc,
  .panel__cta {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .panel__condensation {
    opacity: 0.45;
  }

  /* Text 25% smaller on mobile */
  .panel__icon {
    width: clamp(28px, 6vw, 40px);
    height: clamp(28px, 6vw, 40px);
  }

  .panel__bg-icon-item {
    width: var(--icon-size, 9px);
    height: var(--icon-size, 9px);
  }

  .panel__title {
    font-size: clamp(0.94rem, 2.38vw, 1.23rem);
  }

  .panel__desc {
    font-size: clamp(0.68rem, 1.38vw, 0.78rem);
  }

  .panel__cta {
    font-size: 0.73rem;
    padding: 0.25rem 0.75rem;
    margin-top: 0.1rem;
  }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cyan) 35%, transparent);
  border-radius: 99px;
}