:root {
  --page-padding: clamp(12px, 3vw, 24px);
  --gap: clamp(0.25rem, 1.2vh, 0.75rem);
  --max-image-width: min(100vh, 420px);

  /* Atlantic palette */
  --atlantic-deep: #001f3f; /* very deep navy */
  --atlantic-mid: #0a6b88;  /* teal-blue */
  --atlantic-surf: #3fb0ac; /* seafoam */
  --atlantic-sand: #f3e9dc; /* warm light accent */
  --muted: #9fcbd1;         /* muted text */
  --accent: var(--atlantic-sand);
  --card: rgba(255,255,255,0.03);
  --footer-height: clamp(44px, 5vh, 56px);

  /* Image frame variables: border width & radius scale with viewport */
  --img-border-width: clamp(4px, 0.6vh, 10px);
  --img-border-radius: clamp(8px, 1.2vh, 12px);

  /* Background wave sizing */
  --wave-height: clamp(72px, 16vh, 160px);

  /* Image frame utility classes: .img-frame--thin | .img-frame--medium | .img-frame--thick */
  /* Add these classes to an <img> element to override the default frame settings. */
}

/* -- Layout -- */
html, body { height: 100%; }
body {
  margin: 0;
  /* Use grid to center while allowing content to flow/scroll when zoomed */
  display: grid;
  place-items: center;
  gap: var(--gap);
  min-height: 100vh;
  padding: var(--page-padding);
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--accent);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(180deg, var(--atlantic-deep) 0%, #023e5a 45%, var(--atlantic-mid) 100%);
  /* keep space for fixed footer, but allow page to scroll if content grows */
  padding-bottom: calc(var(--page-padding) + var(--footer-height));
  overflow-y: auto;
}

/* subtle ocean texture via layered radial gradients */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(800px 200px at 10% 10%, rgba(255,255,255,0.02), transparent 10%),
                    radial-gradient(600px 160px at 90% 90%, rgba(255,255,255,0.01), transparent 10%);
  pointer-events: none;
}

/* Decorative background wave - sits above the gradient but behind primary content */
.bg-wave{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--wave-height);
  z-index: 1; /* behind primary content (z-index:2), above the base gradient */
  pointer-events: none;
  opacity: 0.92;
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  /* no horizontal drift — keep the wave anchored at the left side */
  animation: none;
}

/* Slightly reduce wave height on very short screens */
@media (max-height: 620px){
  .bg-wave{ height: clamp(40px, 12vh, 92px); }
}

h1,h2,p{
  font-size: clamp(1rem, 2.4vw, 1.375rem);
  font-weight: 600;
  margin: 0;
  color: var(--muted);
}

/* Countdown card */
#countdown{
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
  font-weight: 600;
  /* Prefer viewport-based sizing but limit extremes */
  font-size: clamp(1.4rem, min(9vw, 12vh), 3.2rem);
  color: var(--accent);
  letter-spacing: 0.025em;
  padding: clamp(0.35rem, 1vw, 0.6rem) clamp(0.75rem, 2vw, 1.1rem);
  border-radius: 14px;
  line-height: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 12px 36px rgba(2,30,44,0.45), inset 0 -2px 8px rgba(255,255,255,0.02);
  transition: transform 320ms cubic-bezier(.2,.9,.3,1), box-shadow 260ms ease, color 160ms ease;
  max-width: 96%;
  /* don't overflow the viewport height (give room for header/footer). If the content must get smaller, font-size above will handle it */
  max-height: calc(100vh - (var(--page-padding) * 2) - var(--footer-height) - 40px);
  /* allow the card to shrink visually if view is constrained */
  overflow-wrap: break-word;
  word-break: break-word;
} 

@media (max-width:420px){
  h1{ font-size: clamp(0.95rem, 3.4vw, 1.1rem); }
  #countdown{ font-size: clamp(1.4rem, 8vw, 2.2rem); }
}

/* If the viewport height is tight (user zoomed vertically), scale down the countdown further */
@media (max-height: 600px) {
  #countdown{
    font-size: clamp(1rem, min(8vw, 9vh), 2.4rem);
    padding: clamp(0.25rem, 0.8vw, 0.4rem) clamp(0.6rem, 1.4vw, 0.8rem);
    max-height: calc(100vh - (var(--page-padding) * 2) - var(--footer-height) - 10px);
  }
}

/* Make sure SVG paths have smoother edges */
.bg-wave path{
  shape-rendering: geometricPrecision;
  /* anchor animations on the left edge so the left side doesn't move */
  transform-origin: 0% 50%;
  will-change: transform, opacity;
}

/* Front/Back path styles (different animation amplitudes/durations for parallax) */
.bg-wave path.wave--back{
  opacity: 0.65;
  filter: blur(0.2px);
  transform-origin: 0% 50%;
  animation: waveBobBack 9s ease-in-out infinite, waveSwellBack 32s ease-in-out infinite;
}
.bg-wave path.wave--front{
  opacity: 0.95;
  transform-origin: 0% 50%;
  animation: waveBobFront 7s ease-in-out infinite, waveSwellFront 26s ease-in-out infinite;
}

/* Lower the wave's visual prominence on smaller screens */
@media (max-width: 420px){
  .bg-wave{ opacity: 0.82; }
}

/* Detailed wave animation keyframes (front/back with different amplitudes) */
@keyframes waveSwellFront{
  0%{ transform: translateX(0) scaleX(1); }
  40%{ transform: translateX(2.5%) scaleX(1.03); }
  60%{ transform: translateX(1.8%) scaleX(1.02); }
  100%{ transform: translateX(0) scaleX(1); }
}
@keyframes waveSwellBack{
  0%{ transform: translateX(0) scaleX(1); }
  50%{ transform: translateX(1.25%) scaleX(1.01); }
  100%{ transform: translateX(0) scaleX(1); }
}
@keyframes waveBobFront{
  0%{ transform: translateY(0); }
  45%{ transform: translateY(-10px); }
  55%{ transform: translateY(-8px); }
  100%{ transform: translateY(0); }
}
@keyframes waveBobBack{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
  100%{ transform: translateY(0); }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  .bg-wave, .bg-wave path{ animation: none !important; }
}

/* Nautical pulse — gentler */
.pulse{ animation: atlanticPulse 420ms cubic-bezier(.2,.9,.3,1); }
@keyframes atlanticPulse{
  0%{ transform: translateY(0) scale(1); box-shadow: 0 12px 36px rgba(2,30,44,0.45); }
  35%{ transform: translateY(-6px) scale(1.02); box-shadow: 0 26px 64px rgba(2,46,68,0.55); }
  100%{ transform: translateY(0) scale(1); box-shadow: 0 12px 36px rgba(2,30,44,0.45); }
}

@media (prefers-reduced-motion: reduce){ #countdown, .pulse{ transition: none; animation: none; } }

/* Image styling — framed like a polaroid on sea colors */
img{
  max-width: var(--max-image-width);
  width: 100%;
  height: auto;
  display: block;
  margin: clamp(0.5rem, 2.5vh, 1.25rem) auto 0;
  /* Keep corner radius consistent even without a decorative border */
  border: none;
  box-sizing: border-box;
  /* Prevent large images from pushing the countdown off-screen when zoomed */
  max-height: calc(60vh);
  object-fit: contain;
  /* Keep tall/portrait images visually pleasing; allow image itself to shrink */
  max-inline-size: 100%;
}

/* Footer */
.site-footer{
  color: var(--muted);
  font-size: clamp(0.9rem, 1.2vw, 0.9rem);
  position: fixed;
  bottom: clamp(10px, 3vh, 16px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(90deg, rgba(3,31,46,0.22), rgba(3,46,60,0.10));
  padding: 6px 10px;
  border-radius: 999px;
  width: min(70%, 220px);
  max-width: 220px;
  box-shadow: 0 4px 10px rgba(2,30,44,0.32);
}

@media (max-width: 420px) {
  .site-footer{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    padding: 6px 10px;
    box-sizing: border-box;
  }
}
.site-footer a{ color: var(--muted); text-decoration: none; display: inline-block; }
.site-footer a:hover, .site-footer a:focus{ text-decoration: underline; }
.site-footer a{ cursor: pointer; }
/* ensure anchor text matches footer size */
.site-footer a{ font-size: inherit; }

/* small spacing below paragraphs so fixed footer doesn't overlap text */
p{ margin-bottom: 12px; }

/* Ensure primary content sits above the wave */
#countdown, h1, p, img { position: relative; z-index: 2; }