/* ==========================================================================
   GymAI — landing page
   Built 1:1 from the Figma frames:
     desktop  "Desktop - 1"          1440 x 1024   (node 3:6)
     mobile   "iPhone 14 & 15 Pro"    393 x  852   (node 4:107)

   Layout model
   ------------
   Every measurement below is the literal Figma pixel value multiplied by a
   single scale unit `--s`, so the composition keeps its exact proportions at
   any viewport size instead of reflowing.

     desktop  --s = min(100svh/1024, 100vw/1000)
     mobile   --s = min(100vw/393,   100svh/700)

   On desktop the scale is height-driven (the width term only engages below
   ~1000px), which is what keeps the phone occupying the same percentage of
   the screen as it does in the design — 89.5% of viewport height, top edge
   at 44.9%. On mobile it is width-driven, holding the phone at 90.6% of
   viewport width, and only shrinks on unusually short viewports.

   Elements are anchored the way the design reads: logo and phone to the top,
   copy and CTA to the bottom-left, so nothing collides as the window changes.
   ========================================================================== */

@font-face {
  font-family: "Switzer";
  src: url("Fonts/Switzer-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("Fonts/Switzer-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --beige: #dacec2;
  --ink: #000000;
  --on-ink: #ffffff;

  /* Screen aperture of "iPhone 17 Pro Silver (2).png" (1319 x 2748), measured
     from the alpha channel: x 57–1262, y 63–2684, corner radius ~190px. */
  --screen-left: 4.322%;
  --screen-top: 2.293%;
  --screen-width: 91.433%;
  --screen-height: 95.415%;
  --screen-radius-ratio: 0.14405; /* 190 / 1319, i.e. a fraction of phone width */
}

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

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--beige);
  color: var(--ink);
  font-family: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Stage — mobile first (Figma frame 393 x 852)
   -------------------------------------------------------------------------- */

.stage {
  --s: min(100vw / 393, 100vh / 700);
  --s: min(100vw / 393, 100svh / 700);
  --pw: calc(356 * var(--s)); /* phone width */

  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Logo — 204 square, centered, top 102 */
.logo {
  position: absolute;
  top: calc(102 * var(--s));
  left: 50%;
  transform: translateX(-50%);
  width: calc(204 * var(--s));
  height: calc(204 * var(--s));
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Phone — 356 wide, top 355, horizontally centered, bleeding off the bottom */
.phone {
  position: absolute;
  top: calc(355 * var(--s));
  left: 50%;
  transform: translateX(-50%);
  width: var(--pw);
}

.phone-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Sits behind the frame and shows through its transparent screen aperture.
   Opaque so the corner grids never bleed through the display; the video, once
   added, covers this fill entirely. */
.phone-screen {
  position: absolute;
  z-index: 0;
  background: var(--beige);
  top: var(--screen-top);
  left: var(--screen-left);
  width: var(--screen-width);
  height: var(--screen-height);
  overflow: hidden;
  border-radius: calc(var(--pw) * var(--screen-radius-ratio));
}

.phone-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tagline — 16px, centered, block centre at y 306, 203 wide */
.tagline {
  position: absolute;
  top: calc(306 * var(--s));
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(203 * var(--s));
  margin: 0;
  font-size: calc(16 * var(--s));
  line-height: 1.34;
  text-align: center;
  text-wrap: pretty;
}

.tagline strong {
  font-weight: 600;
}

/* CTA pill — 235 x 42, radius 45, left 15, 20 from the bottom */
.cta {
  position: absolute;
  left: calc(15 * var(--s));
  bottom: calc(20 * var(--s));
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(235 * var(--s));
  height: calc(42 * var(--s));
  padding: 0 calc(13 * var(--s)) 0 calc(15 * var(--s));

  background: var(--ink);
  border-radius: calc(45 * var(--s));
  color: var(--on-ink);
  text-decoration: none;
}

.cta-label {
  font-size: calc(16 * var(--s));
  line-height: 1;
  white-space: nowrap;
}

.cta-dot {
  flex: none;
  width: calc(20 * var(--s));
  height: calc(20 * var(--s));
  background: var(--on-ink);
  border-radius: 50%;
}

.cta:focus-visible {
  outline: calc(2 * var(--s)) solid var(--ink);
  outline-offset: calc(3 * var(--s));
}

/* Corner grid motifs — squares.png (1081 square, transparent, black lines).
   Anchored to the corners so they stay tucked into them at any viewport size,
   bleeding off-canvas by the same amount as the design. First in the DOM, so
   everything else paints over them.

   Mobile sizing is my own adaptation: the mobile Figma frame has not been
   updated with these yet, so the desktop bleed ratios are carried over at a
   size that suits the 393-wide frame. On mobile the phone fills the
   bottom-right corner, so that motif tucks in behind the device. */
.squares {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.squares-tl {
  top: calc(-26 * var(--s));
  left: calc(-18 * var(--s));
  width: calc(200 * var(--s));
  height: calc(200 * var(--s));
  transform: rotate(90deg);
}

.squares-br {
  right: calc(-6.5 * var(--s));
  bottom: calc(-7.7 * var(--s));
  width: calc(200 * var(--s));
  height: calc(200 * var(--s));
}

/* --------------------------------------------------------------------------
   Desktop (Figma frame 1440 x 1024)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

  .stage {
    --s: min(100vh / 1024, 100vw / 1000);
    --s: min(100svh / 1024, 100vw / 1000);
    /* 916 tall at the PNG's 1319:2748 ratio => 439.7 wide (Figma: 439.06) */
    --pw: calc(439.7 * var(--s));
  }

  /* Logo — 288 square, centered, top 119 */
  .logo {
    top: calc(119 * var(--s));
    width: calc(288 * var(--s));
    height: calc(288 * var(--s));
  }

  /* Phone — top 460 (44.92% of the frame), 916 tall (89.45%) */
  .phone {
    top: calc(460 * var(--s));
  }

  /* Headline — 32px, left 49, 203 wide, baseline block ending 124 from the
     bottom (18 above the CTA) */
  .tagline {
    top: auto;
    bottom: calc(124 * var(--s));
    left: calc(49 * var(--s));
    transform: none;
    width: calc(203 * var(--s));
    font-size: calc(32 * var(--s));
    text-align: left;
  }

  /* CTA pill — 296 x 42, left 49, 64 from the bottom */
  .cta {
    left: calc(49 * var(--s));
    bottom: calc(64 * var(--s));
    width: calc(296 * var(--s));
    padding: 0 calc(14 * var(--s)) 0 calc(12 * var(--s));
  }

  /* Corner grids — exact Figma geometry.
     Top-left  (10:242): 379.816 square, rotated 90deg CW, spanning
                         x -34.817 -> 345, y -50 -> 329.816
     Bottom-right (10:241): 380.297 square at x 1072, y 658.299, i.e. 12.297
                         past the right edge and 14.596 past the bottom */
  .squares-tl {
    top: calc(-50 * var(--s));
    left: calc(-34.817 * var(--s));
    width: calc(379.816 * var(--s));
    height: calc(379.816 * var(--s));
  }

  .squares-br {
    right: calc(-12.297 * var(--s));
    bottom: calc(-14.596 * var(--s));
    width: calc(380.297 * var(--s));
    height: calc(380.297 * var(--s));
  }
}