/* ============================================================
   MCES — Coming Soon landing page
   Design reference: Figma 1440 × 1024
   Pixel-perfect at design size, fluid scaling elsewhere.
   ============================================================ */

@font-face {
    font-family: 'Neulis Alt';
    src: url('../fonts/NeulisAlt-Regular.woff2') format('woff2'),
         url('../fonts/NeulisAlt-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

* { margin: 0; padding: 0; }

html,
body { height: 100%; }

img { display: block; max-width: 100%; }

/* ---------- Page ---------- */
body {
    font-family: 'Neulis Alt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #ffffff;
    background-color: #000000;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.landing {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;          /* mobile browser address-bar safe */
    overflow: hidden;
}

/* ---------- Background ---------- */
.landing__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 1;
}

/* ---------- Logo container (1000 × 300 in Figma) ---------- */
.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1000px, 80vw);
    aspect-ratio: 1000 / 300;
    z-index: 2;
}

.logo__soundwave,
.logo__monte-carlo,
.logo__electro-society {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Positions are exact % of the 1000×300 design container.
   SOUNDWAVE       : x=377.4  y=9.9    w=261.2 h=270.3
   MONTE-CARLO     : x=317.8  y=98.1   w=372.5 h=22
   ELECTRO_SOCIETY : x=37.2   y=131.9  w=925.7 h=46.3                          */
.logo__soundwave       { left: 37.740%; top:  3.300%; width: 26.120%; height: 90.100%; }
.logo__monte-carlo     { left: 31.780%; top: 32.700%; width: 37.250%; height:  7.333%; }
.logo__electro-society { left:  3.720%; top: 43.967%; width: 92.570%; height: 15.433%; }

/* ---------- Text blocks ---------- */
/* line-height matches Figma's `leading-normal` (~1.2× font-size) so the
   baseline lands where the designer placed it. Using `line-height: 1`
   shifts the baseline up by ~3px which is visible on the larger text.    */
.text {
    position: absolute;
    transform: translateX(-50%);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    font-weight: 400;
    line-height: normal;
    z-index: 2;
}

/* "Coming Soon" — Figma:  x=458  y=764  w=525  font=30px
   center-x of box = 458 + 262.5 = 720.5  →  +0.5px from frame center  */
.text--coming-soon {
    top: 74.609375%;                                  /* 764 / 1024     */
    left: calc(50% + 0.5px);
    font-size: clamp(1.125rem, 2.0833vw, 1.875rem);   /* 18 → 30 px     */
}

/* "powered by ..." — Figma:  x=451  y=942  w=544  font=18px
   center-x of box = 451 + 272 = 723  →  +3px from frame center        */
.text--credit {
    top: 91.992188%;                                  /* 942 / 1024     */
    left: calc(50% + 3px);
    font-size: clamp(0.75rem, 1.25vw, 1.125rem);      /* 12 → 18 px     */
}

/* ---------- Adaptations ---------- */

/* Tablet — keep proportions tight                                              */
@media (max-width: 768px) {
    .logo { width: 86vw; }
}

/* Landscape phones — viewport too short, scale logo down so it doesn't
   collide with the texts.                                                      */
@media (max-height: 500px) and (orientation: landscape) {
    .logo               { width: min(1000px, 55vw); }
    .text--coming-soon  { top: 72%; font-size: 14px; }
    .text--credit       { top: 90%; font-size: 10px; }
}

/* Very tall portrait screens (e.g. ultra-tall phones) — push texts a bit lower
   so the bottom credit stays clearly anchored.                                 */
@media (orientation: portrait) and (max-width: 480px) {
    .text--coming-soon  { top: 70%; }
    .text--credit       { top: 92%; }
}

/* Print — hide bg image, keep wordmark readable                                */
@media print {
    body { background: #fff; color: #000; }
    .landing__bg { display: none; }
}

/* Reduced-motion / a11y — no animations in use, future-proof                   */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}