/* Telethon — coming soon (Direction A · Shard) */

:root {
  --bg:    #070807;          /* page background, near black */
  --shape: #00FF85;          /* Telethon green, flat */
  --text:  #F2F4F1;          /* off-white text */
  --font:  'Barlow', system-ui, sans-serif;

  /* Fluid values between the reference frames (1440x900 and 390x844) */
  --margin:      clamp(24px, 5vw, 96px);      /* 72 at 1440, 24 on phones */
  --logo-w:      clamp(112px, 10.3vw, 180px); /* 148 at 1440 */
  --logo-top:    clamp(32px, 4.44vw, 80px);   /* 64 at 1440 */
  --text-size:   clamp(30px, 3.05vw, 56px);   /* 44 at 1440 */
  --text-bottom: clamp(36px, 4.44vw, 80px);   /* 64 at 1440 */

  /* Edge spacing, notch and safe-area aware */
  --edge-left:   calc(var(--margin) + env(safe-area-inset-left, 0px));
  --edge-top:    calc(var(--logo-top) + env(safe-area-inset-top, 0px));
  --edge-bottom: calc(var(--text-bottom) + env(safe-area-inset-bottom, 0px));
}

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

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--bg);   /* also covers the overscroll area */
}

body {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

main {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: var(--bg);
}

/* ---------- Logo (top left) ---------- */

.logo {
  position: absolute;
  left: var(--edge-left);
  top: var(--edge-top);
  z-index: 1;
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.logo img {
  display: block;
  width: var(--logo-w);
  height: auto;   /* never stretch the mark */
}

/* ---------- "Coming soon" (bottom left) ---------- */

.soon {
  position: absolute;
  left: var(--edge-left);
  bottom: var(--edge-bottom);
  z-index: 1;
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--text-size);
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0;
}

/* ---------- The shape: logo mark, 86:247, cropped by the screen ---------- */

.shape {
  position: absolute;
  z-index: 0;
  background-color: var(--shape);
  background-image: url(assets/grain.png);
  background-repeat: repeat;
  background-size: 256px 256px;   /* grain tile never scales with the shape */
  background-position: 0 0;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 52.632%, 80.233% 42.51%, 0% 100%, 0% 28.34%, 53.488% 28.34%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 52.632%, 80.233% 42.51%, 0% 100%, 0% 28.34%, 53.488% 28.34%);
  animation: reveal 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* Portrait and mobile */
@media (max-aspect-ratio: 4/5) {
  .shape {
    height: 105.3vh;
    height: 105.3dvh;
    width: calc(105.3vh * 86 / 247);
    width: calc(105.3dvh * 86 / 247);
    top: -17.8vh;
    top: -17.8dvh;
    left: 30.8vw;
  }
}

/* Landscape and desktop */
@media (min-aspect-ratio: 4/5) {
  .shape {
    height: 211.1vh;
    height: 211.1dvh;
    width: calc(211.1vh * 86 / 247);
    width: calc(211.1dvh * 86 / 247);
    top: -46.7vh;
    top: -46.7dvh;
    right: -2.9vw;   /* slightly past the right edge */
  }

  .soon { letter-spacing: -0.005em; }
}

/* ---------- Motion: one reveal, once, along the mark's diagonal ---------- */

@keyframes reveal {
  from { opacity: 0; transform: translate(8px, -16px); }
  to   { opacity: 1; transform: translate(0, 0); }
}

@media (min-aspect-ratio: 4/5) {
  @keyframes reveal {
    from { opacity: 0; transform: translate(12px, -24px); }
    to   { opacity: 1; transform: translate(0, 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .shape { animation: none; }
}