/* ==================== design tokens ==================== */
:root{
  --water-deep:#07111a;
  --water-mid:#0e1f2f;
  --water-light:#12324c;
  --accent:#4ec6ff;
  --glass:rgba(255,255,255,0.10);
  --glass-stroke:rgba(255,255,255,0.18);

  /* fluid type scale */
  --step--1: clamp(0.85rem, 0.70rem + 0.60vw, 1.00rem);
  --step-0:  clamp(1.00rem, 0.80rem + 0.80vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.00rem + 1.20vw, 1.50rem);
  --step-2:  clamp(1.75rem, 1.30rem + 2.00vw, 2.25rem);
  --step-3:  clamp(2.25rem, 1.80rem + 3.00vw, 3.25rem);
  --step-4:  clamp(3.00rem, 2.20rem + 4.20vw, 4.50rem);
}

html,body{height:100%}
body{backdrop-filter:saturate(1.02)}

/* safe-area padding for iOS notches/home bar */
#app-shell{
  padding-left: max(0rem, env(safe-area-inset-left));
  padding-right: max(0rem, env(safe-area-inset-right));
  padding-bottom: max(0rem, env(safe-area-inset-bottom));
}

/* ==================== persistent water background ==================== */
#water-bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden; background: var(--water-deep);
}
.water-layer{position:absolute; inset:0}

/* soft gradient base */
.water-grad{
  inset:-10%;
  background:
    radial-gradient(1200px 900px at 20% 20%, rgba(78,198,255,0.10), transparent 60%),
    radial-gradient(1000px 700px at 80% 30%, rgba(24,153,214,0.12), transparent 65%),
    radial-gradient(900px 600px at 40% 80%, rgba(0,200,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--water-mid), var(--water-deep));
  filter:saturate(1.05) contrast(1.02);
}

/* animated blobs for a liquid feel (requires an SVG filter with id="goo" if you want the goo effect) */
.water-blobs{
  inset:-20%; pointer-events:none;
  /* If you don't include the SVG filter, comment the next line out */
  filter:url(#goo);
}
.water-blobs::before, .water-blobs::after{
  content:""; position:absolute; width:55vw; height:55vw; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(78,198,255,0.25), rgba(78,198,255,0.05) 60%, transparent 70%);
  animation: drift 22s ease-in-out infinite;
}
.water-blobs::after{
  left:40%; top:35%;
  width:65vw; height:65vw;
  background: radial-gradient(circle at 70% 70%, rgba(82,186,255,0.20), rgba(0,173,255,0.06) 65%, transparent 75%);
  animation: drift2 28s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translate3d(-6%, -4%, 0) scale(1)}
  50%{transform:translate3d(4%, 3%, 0) scale(1.06)}
}
@keyframes drift2{
  0%,100%{transform:translate3d(3%, 8%, 0) scale(1)}
  50%{transform:translate3d(-5%, -6%, 0) scale(1.05)}
}

/* subtle caustic shimmer */
.water-shine{
  inset:-10%; mix-blend-mode:screen; opacity:.25; pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.02) 0 15deg, transparent 15deg 30deg);
  animation: shimmer 14s linear infinite;
}
@keyframes shimmer{ to{ transform:rotate(360deg) } }

/* lightweight film grain (optional tile image improves quality/perf) */
.water-noise{
  inset:0; pointer-events:none; opacity:.06;
  /* supply a tiny tile if desired */
  /* background-image: url("../img/noise.png"); */
  background-size: 200px 200px;
}

/* ===== bubble canvas (keeps bubbles from sticking top-left) ===== */
#bubble-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
}

/* ==================== liquid-glass shell ==================== */
.glass-nav{
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* water-like gradient fill for hero text */
.water-text{
  background: linear-gradient(180deg, #e6f7ff, #9ee5ff 45%, #4ec6ff 65%, #a7e8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(78,198,255,0.15));
}

/* ==================== fluid typography helpers ==================== */
.h-fluid{ font-size: var(--step-4); line-height: 1.05; }
.p-fluid{ font-size: var(--step-0); }

/* ==================== page transitions & accessibility ==================== */
.page-enter{ opacity:0; transform: translateY(10px); will-change: opacity, transform; }
.page-enter-active{ transition: opacity .5s ease, transform .5s ease; opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .water-blobs, .water-shine{ animation:none }
  .page-enter, .page-enter-active{ transition:none; transform:none; opacity:1 }
}

/* ==================== small-screen tweaks ==================== */
@media (max-width: 480px){
  .water-blobs::before, .water-blobs::after{
    width: 80vw; height: 80vw;
    animation-duration: 26s;
  }
}

/* ===== Aqua Halo Countdown ===== */
.halo-countdown{
  display:grid;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: clamp(16px, 3vw, 32px);
  align-items:center; justify-items:center;
}

.halo-unit{
  --size: clamp(128px, 22vw, 168px);
  --stroke: 10;
  position: relative;
  width: var(--size); height: var(--size);
  display:flex; align-items:center; justify-content:center;
  color:#e6f7ff; font-variant-numeric: tabular-nums lining-nums;
  transform: translateZ(0);
}

/* inner glass disc */
.halo-unit::after{
  content:""; position:absolute;
  inset: 18px; border-radius:50%;
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,.03) 60%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  pointer-events:none;
}

.halo-ring{ width:100%; height:100%; transform: rotate(-90deg); }
.halo-ring .track{
  fill:none; stroke: rgba(255,255,255,.12); stroke-width: var(--stroke);
}
.halo-ring .progress{
  fill:none; stroke-width: calc(var(--stroke) + 1);
  stroke-linecap: round;
  /* These are set via JS, but give safe defaults */
  stroke-dasharray: 326;
  stroke-dashoffset: 326;
  transition: stroke-dashoffset 600ms cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 6px 20px rgba(78,198,255,.22));
}

/* value + label */
.halo-unit .value{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight: 800; letter-spacing:-.02em;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  transform: translateZ(0);
}
.halo-unit .label{
  position:absolute; bottom:14px; left:50%; transform: translateX(-50%);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.16em;
  color:rgba(255,255,255,.66);
}

/* orbiting glint */
.halo-unit .orbit{
  position:absolute; inset:0;
  animation: spin 28s linear infinite;
  mix-blend-mode: screen; pointer-events:none;
}
.halo-unit .orbit::before{
  content:""; position:absolute; left:50%; top:50%;
  width:14px; height:14px; border-radius:50%;
  transform: translate(-50%, -50%) translateX(calc(var(--size)/2 - 18px));
  background: radial-gradient(circle at 30% 30%, #eaffff, rgba(78,198,255,.2) 45%, rgba(78,198,255,0) 70%);
  filter: blur(0.3px) drop-shadow(0 0 6px rgba(78,198,255,.4));
}
.halo-unit .orbit.slow { animation-duration: 36s; }
.halo-unit .orbit.fast { animation-duration: 18s; }
.halo-unit .orbit.rapid{ animation-duration: 12s; }

@keyframes spin { to { transform: rotate(360deg); } }

/* layout tweaks */
@media (max-width: 900px){
  .halo-countdown{ grid-template-columns: repeat(2, minmax(132px, 1fr)); }
}
@media (max-width: 460px){
  .halo-countdown{ gap: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .halo-ring .progress{ transition: none; }
  .halo-unit .orbit{ display:none }
}