/* =====================================================================
   countdown/countdown.css
   The look of the countdown page. Made for phones first (that's where
   Mary will most likely open it), and it grows to fit bigger screens.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Colours and fonts, all in one place.
   --------------------------------------------------------------------- */
:root {
  color-scheme: only light; /* always pink: phones in dark mode mustn't darken it */
  --wall: #F5D3DC;       /* blush pink: the page background */
  --cream: #FFF7F9;      /* creamy white: the clock tiles */
  --raspberry: #D6457A;  /* raspberry: the clock numbers */
  --hot-pink: #E8336B;   /* hot pink: the beating heart */
  --candy: #F2A9BE;      /* candy pink: some of the floating hearts */
  --gold: #D8B26E;       /* soft gold: thin lines and tile edges */
  --berry: #7A2E4A;      /* deep berry: the big headline */
  --soft-text: #74485A;  /* dusky rose: small words */
  /* The same pinks a shade darker, for small writing, so it's easy to
     read against the pink background. */
  --lead-text: #B8335F;     /* "Opening in…" */
  --opening-text: #BE2B5C;  /* "Happy birthday, Mary! Opening…" */

  /* Fonts that are already on every phone and computer (nothing to
     download). The browser uses the first one in each list it has:
       --serif: an elegant, bookish font for the words
                (New York on iPhone, Iowan or Palatino on Mac and Windows,
                Noto Serif on Android)
       --sans:  the phone's own clean everyday font, for the numbers */
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   Page: fill the screen, never scroll, bounce or select text
   --------------------------------------------------------------------- */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;              /* no pull-to-refresh or rubber-band bounce */
  background: var(--wall);
  -webkit-user-select: none;              /* Safari still needs the prefixed version */
  user-select: none;                      /* no accidental text selection */
  -webkit-tap-highlight-color: transparent; /* no grey flash when tapping on phones */
  -webkit-text-size-adjust: 100%;         /* stop phones resizing the text when turned sideways */
  text-size-adjust: 100%;
}

/* A soft glow behind the words, like candlelight, and a
   slightly deeper pink at the bottom of the screen. Two see-through
   gradients laid over the blush pink. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 55% at 50% 40%, rgba(255, 247, 249, 0.9), rgba(255, 247, 249, 0) 70%),
    radial-gradient(ellipse 130% 55% at 50% 115%, rgba(214, 69, 122, 0.22), rgba(214, 69, 122, 0) 70%);
}

/* The <svg> that only holds the heart shape: takes up no space */
.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   Everything you read: stacked in a column in the middle of the screen.
   The padding keeps it clear of the notch and the rounded corners on
   modern phones ("safe areas"), with at least 16px at the sides.
   --------------------------------------------------------------------- */
main {
  position: fixed;
  inset: 0;
  z-index: 1; /* in front of the floating hearts */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    calc(max(20px, env(safe-area-inset-bottom)) + 4vh) /* a little extra at the bottom lifts it just above the middle, which looks more centred to the eye */
    max(16px, env(safe-area-inset-left));
  text-align: center;
  color: var(--berry);
}

/* ---------------------------------------------------------------------
   The ornament above the headline: a gold line, a heart, a gold line.
   The heart beats gently (turned off for people who prefer less
   movement; see the bottom of this file).
   --------------------------------------------------------------------- */
.ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 3vh, 28px);
}

.ornament .line {
  width: 44px;
  height: 1px;
  background: var(--gold);
}

/* The lines fade out at their outer ends */
.ornament .line:first-child {
  background: linear-gradient(to left, var(--gold), rgba(216, 178, 110, 0));
}
.ornament .line:last-child {
  background: linear-gradient(to right, var(--gold), rgba(216, 178, 110, 0));
}

.ornament .beat {
  width: 20px;
  height: 20px;
  fill: var(--hot-pink);
  animation: heartbeat 2.4s ease-in-out infinite;
}

/* Two quick little beats, then a rest, like a real heartbeat */
@keyframes heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  10%           { transform: scale(1.18); }
  20%           { transform: scale(1.02); }
  30%           { transform: scale(1.14); }
}

/* ---------------------------------------------------------------------
   The headline: "Proof that Mary is loved."
   clamp(smallest, preferred, biggest) lets the size follow the screen:
   vw = 1% of the screen's width, vh = 1% of its height (so it also
   shrinks on a phone turned sideways, where the screen is short).
   max-width keeps it to two balanced lines.
   --------------------------------------------------------------------- */
h1 {
  margin: 0;
  max-width: 9em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, min(12vw, 9.5vh), 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--berry);
  text-wrap: balance; /* evens out the two lines in browsers that can */
}

/* "Opening in…" */
.lead {
  margin: clamp(10px, 2vh, 18px) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, min(5vw, 3.2vh), 1.5rem);
  color: var(--lead-text);
  text-wrap: balance; /* if the birthday message needs two lines, make them even */
}

/* ---------------------------------------------------------------------
   The clock: four tiles side by side (days, hours, minutes, seconds)
   --------------------------------------------------------------------- */
.clock {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* four equal columns */
  gap: clamp(8px, 2.6vw, 16px);
  width: min(100%, 520px);
  margin-top: clamp(16px, 3.8vh, 38px);
}

/* One tile: creamy, softly rounded, with a hair-thin gold edge and a
   soft pink shadow so it looks like it sits just in front of the wall */
.tile {
  padding: clamp(12px, 2.8vh, 26px) 2px clamp(10px, 2.3vh, 20px);
  border: 1px solid rgba(216, 178, 110, 0.45);
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFBFC, rgba(255, 247, 249, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),     /* a bright top edge */
    0 14px 28px -16px rgba(122, 46, 74, 0.45),  /* soft shadow below */
    0 2px 6px -2px rgba(214, 69, 122, 0.18);    /* tight shadow close to the tile */
}

/* The big number in each tile */
.value {
  display: block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(2rem, min(11vw, 8vh), 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; /* every digit the same width, so nothing jiggles as it ticks */
  color: var(--raspberry);
  transition: opacity 0.6s ease; /* fades gently whenever its see-through-ness changes */
}

/* Before countdown.js has worked out the time, the dashes are faint;
   the numbers fade in when it adds "is-ready" to the clock */
.clock:not(.is-ready) .value {
  opacity: 0.35;
}

/* The small word under each number: "days", "hours"... */
.label {
  display: block;
  margin-top: 0.6em;
  font-family: var(--sans);
  font-size: clamp(0.62rem, 2.6vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft-text);
  transition: opacity 0.6s ease;
}

/* "on your birthday · 15 October" */
.occasion {
  margin: clamp(16px, 3.4vh, 30px) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, min(4.8vw, 3.2vh), 1.45rem);
  color: var(--soft-text);
}

/* ---------------------------------------------------------------------
   At zero, countdown.js adds "is-opening" to the page: the
   "Happy birthday, Mary!" message turns hot pink and fades up (it keeps
   the same size, so the clock below doesn't jump), the numbers on the
   clock fade back, and the heart beats faster.
   --------------------------------------------------------------------- */
.is-opening .lead {
  color: var(--opening-text);
  animation: fade-up 0.8s ease both;
}

.is-opening .value,
.is-opening .label {
  opacity: 0.45;
}

.is-opening .ornament .beat {
  animation-duration: 1.2s;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   The floating hearts behind everything.
   Each heart (a <span> in index.html) floats straight up, fading in at
   the bottom and out at the top, while the <svg> inside it drifts side
   to side. Only "transform" and "opacity" change, which phones can
   animate smoothly without redrawing the page.
   --------------------------------------------------------------------- */
.hearts {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* never gets in the way of anything */
}

.hearts span {
  position: absolute;
  left: var(--x);
  bottom: -40px; /* starts just below the bottom of the screen */
  width: var(--size);
  height: var(--size);
  opacity: 0;
  animation: float-up var(--time) linear var(--start) infinite;
  will-change: transform, opacity;
}

.hearts svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--tint);
  opacity: var(--alpha);
  animation: sway calc(var(--time) / 4) ease-in-out var(--start) infinite alternate;
}

/* Bottom of the screen to just past the top */
@keyframes float-up {
  0%   { transform: translateY(0);                     opacity: 0; }
  12%  {                                               opacity: 1; }
  80%  {                                               opacity: 1; }
  100% { transform: translateY(calc(-100vh - 80px));   opacity: 0; }
}

/* Gently from side to side, with a slight tilt */
@keyframes sway {
  from { transform: translateX(calc(var(--sway) * -1)) rotate(-10deg); }
  to   { transform: translateX(var(--sway)) rotate(10deg); }
}

/* ---------------------------------------------------------------------
   Some people turn on "reduce motion" on their phone because movement
   on screen makes them feel unwell. For them: no floating hearts and no
   beating heart. Everything else stays the same.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hearts {
    display: none;
  }

  .ornament .beat,
  .is-opening .ornament .beat,
  .is-opening .lead {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   Phones turned sideways, with the browser bars showing, leave very
   little height: drop the little heart ornament and the extra space
   at the top and bottom so everything still fits.
   --------------------------------------------------------------------- */
@media (max-height: 340px) {
  .ornament { display: none; }
  main {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}