/*
 * The coming-soon page of the resort's own address, atma-resort.web.app (the owner's decisions of
 * 2026-10-23), written by web:write-coming-soon from the brand's sources
 * (apps/web/config/coming-soon.ts): write it again rather than editing it. No URL of another
 * origin, not even in a comment: the deploy's check refuses any.
 */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  background-color: #1f3a4d;
  /* The lockup's width, from 208 px, above the guide's least 120 px for the vertical logo (§5.2),
     to 336 px. A logo, not text: it keeps its size with larger text, within the screen. */
  --logo-width: clamp(208px, 176px + 14vw, 336px);
}

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

body {
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100svh;
  display: grid;
  place-items: center;
  padding-block: clamp(2.5rem, 8vh, 5rem);
  padding-inline: clamp(1.5rem, 6vw, 4rem);
  background-color: #1f3a4d;
  color: #f9f5ef;
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  text-align: center;
}

.soon {
  inline-size: 100%;
}

.soon__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font: inherit;
}

/* The symbol above the wordmark, where the brand's vertical lockup sets them; below it the clear
   space of the guide (§5.2), the height of the wordmark's A, 172 of the lockup's 831 units. */
.soon__logo {
  display: block;
  inline-size: min(100%, var(--logo-width));
  block-size: auto;
  margin-block-end: calc(min(100%, var(--logo-width)) * 0.207);
}

.soon__symbol {
  color: #c3945a;
}

.soon__wordmark {
  color: #f9f5ef;
}

/* Labels in Manrope Light capitals at the labels' tracking (the guide: 200 to 300); the start
   padding balances the tracking after the last letter, so the words stand in the middle. */
.soon__tagline,
.soon__status {
  display: block;
  max-inline-size: 100%;
  padding-inline-start: 0.24em;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
  text-wrap: balance;
}

.soon__tagline {
  color: #f4d9bb;
  font-size: 0.8125rem;
}

/* The guide's "line, space, letter-spaced text" (§6), from the lockup: its short line, 146.2
   of its 831 units, in Atma Gold, then the words. A border, which forced colours keep. */
.soon__line {
  display: block;
  inline-size: calc(var(--logo-width) * 0.1759);
  margin-block: 2rem 1.5rem;
  border-block-start: 1px solid #c3945a;
}

.soon__status {
  color: #f9f5ef;
  font-size: 0.875rem;
}

/* From 64rem, the grid's breakpoint, the words a step larger beside the larger lockup. */
@media (min-width: 64rem) {
  .soon__tagline {
    font-size: 0.9375rem;
  }

  .soon__status {
    font-size: 1rem;
  }
}

/* A gentle arrival, opacity only, without a preference for reduced motion; under reduced motion
   nothing moves. */
@media (prefers-reduced-motion: no-preference) {
  .soon__logo,
  .soon__tagline,
  .soon__line,
  .soon__status {
    animation: soon-arrive 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .soon__tagline {
    animation-delay: 240ms;
  }

  .soon__line,
  .soon__status {
    animation-delay: 480ms;
  }

  @keyframes soon-arrive {
    from {
      opacity: 0;
    }
  }
}