/* ==========================================================================
   Decently Limited: transition page to Melo
   One page, no framework. One small script (js/tour.js) runs the product
   demonstration; everything else works without it.

   The idea: you arrive on the pale side, with Decently named small and plain.
   Melo is the solid plum side, with the logo and the only button on the page.
   Side by side on wide screens, top to bottom on narrow ones.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font Licence) ---------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
}

/* ---------- Brand tokens (Melo brand guidelines, document 23) ---------- */
:root {
  --plum: #0D0613;
  --coral: #FF5B70;      /* appears in the logo only */
  --blue: #3E46CC;
  --lilac: #F8F5FA;
  --white: #FFFFFF;
  --tint-blue: #E9EAFB;

  --text-soft: #4A3A5C;  /* 9.48:1 on lilac */
  --text-muted: #5E4F70; /* 6.87:1 on lilac */
  --rule: #E8E2ED;

  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lilac);
  color: var(--plum);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p, h1 { margin: 0; }
img, svg { display: block; }

.skip-link {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--plum);
  color: var(--white);
  font-family: var(--display);
  font-weight: 500;
  text-decoration: none;
}
/* hidden until someone tabs to it, at any text size */
.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- Layout: narrow screens first ---------- */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.site-id { padding: 24px var(--gutter) 0; }

.main { flex: 1 0 auto; display: flex; flex-direction: column; }

.arrive { padding: 48px var(--gutter) 56px; }

.destination {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--plum);
  color: var(--white);
  padding: 56px var(--gutter) 48px;
  overflow: hidden;          /* keeps the glow inside the plum side */
}

.legal { padding: 28px var(--gutter) 32px; }

/* ---------- Decently identifier: present, but modest ---------- */
.site-id__name {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--plum);
}

/* ---------- Where the visitor arrived ---------- */
.arrive__orient {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--blue);
  max-width: 24em;
}

.arrive__title {
  margin-top: 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.2rem + 5.6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 9.5em;
  text-wrap: balance;
}

.arrive__body {
  margin-top: 28px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 29em;
  text-wrap: pretty;
}

/* ---------- Where they are going ---------- */
/* sits above the glow behind the tablet, so the button stays pure white */
.destination__inner { position: relative; z-index: 2; width: 100%; max-width: 26rem; }

.destination__logo {
  width: clamp(168px, 46vw, 232px);
  height: auto;
}

.destination__strap {
  margin-top: 32px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 15em;
  text-wrap: balance;
}

/* The one action on the page */
.button {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 28px;
  border-radius: 8px;
  background: var(--white);
  color: var(--plum);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .16s var(--ease);
}
.button__arrow { flex: none; transition: transform .16s var(--ease); }
.button:hover { background: var(--tint-blue); }
.button:hover .button__arrow { transform: translateX(4px); }
.button:active { background: #D6D9F7; }
.button:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }

/* ---------- Product demonstration ----------
   The tablet frame, the four screens, the cursor, the coral ring and the
   progress bars all follow the hero on melo.health. Colours are adjusted only
   where the plum background needs it. */
.tour {
  position: relative;
  margin-top: 40px;
  width: min(100%, 32rem);
}
/* the homepage glow, turned down for a dark background, so the plum frame
   still reads against plum */
.tour::before {
  content: "";
  position: absolute;
  inset: -8% -12% 6%;
  background:
    radial-gradient(34% 32% at 28% 16%, rgba(88, 105, 255, .55), transparent 72%),
    radial-gradient(32% 30% at 72% 13%, rgba(128, 98, 255, .5), transparent 72%),
    radial-gradient(32% 34% at 11% 50%, rgba(255, 46, 84, .14), transparent 72%),
    radial-gradient(34% 32% at 34% 89%, rgba(255, 68, 158, .2), transparent 72%),
    radial-gradient(32% 30% at 87% 76%, rgba(96, 86, 255, .5), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}
.device {
  position: relative;
  background: var(--plum);
  border-radius: 22px;
  padding: 11px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .45);
}
.device__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1420 / 1160;
  border-radius: 13px;
  background: var(--white);
}
.tour__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.tour__shot.is-on { opacity: 1; }
.tour__shot img { width: 100%; height: 100%; object-fit: cover; }

/* soft ring drawn round whatever the cursor has just clicked */
.tour__ring {
  position: absolute;
  z-index: 5;
  border: 2px solid var(--coral);
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .3s ease, transform .3s ease;
}
.tour__ring.is-on { opacity: 1; transform: none; }

.tour__cursor {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(32, 0, 61, .4));
  transition: left .55s cubic-bezier(.33, .02, .2, 1), top .55s cubic-bezier(.33, .02, .2, 1);
}
.tour__cursor::after {
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 90, 118, .5);
  opacity: 0;
  transform: scale(.2);
}
.tour__cursor.is-click::after { animation: tour-ripple .55s ease-out; }
@keyframes tour-ripple {
  0%   { opacity: .85; transform: scale(.2); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* controls: pause button, then one progress bar per screen.
   Hidden until the script is running, because they do nothing without it. */
.tour__controls {
  position: relative;
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.tour[data-ready] .tour__controls { display: flex; }
.tour:not([data-ready]) .tour__cursor { display: none; }   /* a still picture has no cursor */

.tour__pause {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color .16s var(--ease);
}
.tour__pause:hover { background: rgba(255, 255, 255, .12); }
.tour__pause:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.tour__icon-play { display: none; }
.tour[data-paused] .tour__icon-pause { display: none; }
.tour[data-paused] .tour__icon-play { display: block; }

.tour__segs { display: flex; flex: 1 1 auto; gap: 10px; min-width: 0; }
.tour__seg {
  flex: 1 1 0;
  max-width: 72px;
  min-width: 0;
  padding: 20px 0;            /* a thin bar with a 44px tall target */
  border: 0;
  background: none;
  cursor: pointer;
}
.tour__track {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .4);
  overflow: hidden;
}
.tour__fill {
  display: block;
  height: 100%;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
}
.tour__seg:hover .tour__track { background: rgba(255, 255, 255, .6); }
.tour__seg:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; border-radius: 4px; }

/* reduced motion: no cursor and nothing to pause. The bars still switch screens. */
.tour.is-static .tour__cursor,
.tour.is-static .tour__pause { display: none; }

/* ---------- Legal footer ---------- */
.legal {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.legal__company { max-width: 36em; text-wrap: pretty; }
.legal__links { margin-top: 12px; }
.legal a {
  display: inline-block;
  padding: 6px 0;
  color: var(--plum);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal a:hover { color: var(--blue); }
.legal a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ---------- Tablets held upright: a little more room at the edges ---------- */
@media (min-width: 37.5rem) {
  :root { --gutter: 40px; }
}

/* ---------- Phones in the hand: full-width button ---------- */
@media (max-width: 479px) {
  .button { width: 100%; }
}

/* ---------- Wide screens: arrive on the left, Melo on the right ---------- */
@media (min-width: 60rem) {
  :root {
    --gutter: clamp(40px, 5vw, 88px);
    --logo-w: clamp(200px, 17vw, 300px);
    --tour-overhead: calc(24.75rem + var(--logo-w) * .3524);
  }

  .page {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    grid-template-rows: auto 1fr auto;
  }

  .site-id {
    grid-column: 1;
    grid-row: 1;
    padding: 40px var(--gutter) 0;
  }

  /* main spans the whole grid and hands its tracks down to its two sections,
     so the plum side can run the full height of the page */
  .main {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }

  .arrive {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    padding: 56px var(--gutter);
  }

  .destination {
    grid-column: 2;
    grid-row: 1 / -1;
    padding: 48px var(--gutter);
  }
  /* The tablet takes the full width of the plum side when there is room, and
     shrinks on short screens so the logo, the button and the whole tablet stay
     on one screen. --tour-overhead is the height of everything else in this
     column: padding, logo, strapline, button and the controls. */
  .tour {
    margin-top: 44px;
    width: min(100%, 35rem, max(17rem, calc((100svh - var(--tour-overhead)) * 1.22)));
  }

  /* the headline keeps growing with the screen so the pale side never feels empty */
  .arrive__title { font-size: clamp(4.75rem, 5.2vw, 6rem); }
  .arrive__body { font-size: clamp(1.25rem, 1.15vw, 1.4375rem); }

  .destination__logo { width: var(--logo-w); }
  .destination__strap { margin-top: 32px; }
  .button { margin-top: 32px; }

  .legal {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    z-index: 1;
    padding: 0 var(--gutter) 40px;
  }
}

/* Short laptop screens (768px tall is very common): tighten the Melo side so the
   tablet can stay a decent size and everything still fits on one screen */
@media (min-width: 60rem) and (max-height: 50rem) {
  :root { --logo-w: 180px; --tour-overhead: 25.5rem; }
  .destination { padding-block: 40px; }
  .destination__strap { margin-top: 28px; font-size: 1.375rem; }
  .button { margin-top: 28px; }
  .tour { margin-top: 36px; }
}

/* Older browsers without subgrid: same two columns, built the plain way */
@supports not (grid-template-columns: subgrid) {
  @media (min-width: 60rem) {
    .page { display: flex; flex-direction: column; }
    .main {
      display: grid;
      grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
      flex: 1 0 auto;
    }
    .site-id { width: 58%; }
    .arrive { grid-column: 1; grid-row: 1; align-self: center; }
    .destination { grid-column: 2; grid-row: 1; }
    .legal { width: 58%; padding-top: 28px; }
  }
}

/* ---------- One quiet entrance, only for people who haven't asked for less motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes settle {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .arrive > *, .destination__inner > * { animation: settle .5s var(--ease) both; }
  .arrive__title { animation-delay: .05s; }
  .arrive__body { animation-delay: .1s; }
  .destination__inner > * { animation-delay: .15s; }
  @keyframes arrive-in { from { opacity: 0; } to { opacity: 1; } }
  .tour { animation: arrive-in .6s var(--ease) .25s both; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Windows high contrast ---------- */
@media (forced-colors: active) {
  .button { border: 2px solid ButtonText; }
  .destination { border-top: 1px solid CanvasText; }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; }
  .page { display: block; min-height: 0; }
  .destination { background: #fff; color: var(--plum); padding-top: 0; }
  .destination__strap { color: var(--plum); }
  .destination__logo { content: url("../assets/img/melo-logo.svg"); }
  .button { border: 1px solid var(--plum); }
  .button::after { content: " (www.melo.health)"; font-weight: 400; }
  .tour { display: none; }
}