/* ============================================================
   Landing — dot-grid + mouse-follow halo, corner press cards,
   centre device (3D placeholder), tagline, social.
   The 3D device arrives in Phase 4 via .scene-mount[data-scene].
   ============================================================ */

.landing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--space-lg) var(--section-pad);
}

/* dot grid — currently DISABLED via .landing__grid--off (see docs/Guides.md) */
.landing__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 78%);
}
.landing__grid--off { display: none; }

/* criss-cross tile (gridtile.png) rotated 45°, radial-masked, screen-centred.
   The tile lives on ::before so the mask on the wrapper stays screen-aligned
   while the tiling itself is rotated. */
.landing__criss {
  --criss-opacity: 0.05;
  --criss-tile: 70px;     /* on-screen size of one 512px tile */
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: var(--criss-opacity);
  -webkit-mask-image: radial-gradient(35% 35% at 50% 50%, #000 35%, transparent 78%);
  mask-image: radial-gradient(35% 35% at 50% 50%, #000 35%, transparent 78%);
}
.landing__criss::before {
  content: "";
  position: absolute;
  inset: -50%;            /* oversize so 45° rotation still covers the corners */
  background: url(../assets/img/gridtile.png) repeat;
  background-size: var(--criss-tile) var(--criss-tile);
  transform: rotate(45deg);
}

/* rotating brand motif (workverse-logo-bgmotif.png), screen-centred */
.landing__motif {
  --motif-size: 100vmin;
  --motif-opacity: 0.3;
  --motif-dur: 60s;       /* one full turn; larger = slower */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: var(--motif-size);
  aspect-ratio: 1;
  background: url(../assets/img/workverse-logo-bgmotif.png) center / contain no-repeat;
  opacity: var(--motif-opacity);
  translate: -50% -50%;   /* separate from `rotate` so both compose */
  animation: motif-spin var(--motif-dur) linear infinite;
}
@keyframes motif-spin { to { rotate: 360deg; } }

/* twinkling stars — dots are injected + positioned by js/sections/landing.js */
.landing__stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.landing__star {
  --tw-max: 0.7;          /* peak opacity of a star */
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  will-change: opacity;
  animation: star-twinkle var(--tw-dur) ease-in-out var(--tw-delay) infinite;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0; }
  50%      { opacity: var(--tw-max); }
}

@media (prefers-reduced-motion: reduce) {
  .landing__motif { animation: none; }
  .landing__star { animation: none; opacity: calc(var(--tw-max) * 0.5); }
}

/* green halo — static, centred on the screen */
.landing__halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    460px 460px at 50% 50%,
    rgba(140, 198, 63, 0.4),
    rgba(140, 198, 63, 0.07) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* corner press cards */
.press {
  --press-logo-h: 28.6px;      /* height of the outlet logo/icon (width follows) */
  --press-bob-dist: 6px;       /* float amplitude */
  --press-bob-dur: 7s;         /* float period */
  position: absolute;
  z-index: var(--z-content);
  max-width: 260px;
  /* logo + headline follow currentColor: muted grey at rest, white on hover.
     Not a link — hover only, no navigation. */
  color: var(--fg-dim);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* slow floating bob — uses the `translate` property so it composes with
     reveal.js's `transform` entrance instead of overriding it. */
  animation: press-bob var(--press-bob-dur) ease-in-out infinite;
}
@keyframes press-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-1 * var(--press-bob-dist)); }
}
@media (prefers-reduced-motion: reduce) {
  .press { animation: none; }
}
/* logo is tinted via mask (silhouette from the image's alpha) so it takes
   currentColor. The mask-image url is set INLINE in the HTML so it resolves
   against the page, not this stylesheet's folder; --ar keeps its aspect ratio. */
.press__logo {
  display: block;
  height: var(--press-logo-h);
  aspect-ratio: var(--ar);
  width: auto;
  max-width: 100%;
  margin-bottom: 0.15rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: left center; mask-position: left center;
  transition: background-color 0.2s ease;
}
.press--tr .press__logo,
.press--br .press__logo { -webkit-mask-position: right center; mask-position: right center; }
.press__headline { font-size: var(--step--1); font-weight: 700; color: currentColor; text-wrap: pretty; transition: color 0.2s ease; }
.press:hover { color: #fff; }
.press__snippet { font-size: var(--step--1); color: var(--fg-faint); line-height: 1.35; text-wrap: pretty; }

.press--tl { top: 8vh; left: var(--section-pad); text-align: left; animation-delay: -0.5s; }
.press--tr { top: 8vh; right: var(--section-pad); text-align: right; align-items: flex-end; animation-delay: -3.6s; }
.press--bl { bottom: 8vh; left: var(--section-pad); text-align: left; animation-delay: -5.2s; }
.press--br { bottom: 8vh; right: var(--section-pad); text-align: right; align-items: flex-end; animation-delay: -2.1s; }

/* CNBC (bottom-left) only: logo + title on one row, subtitle spanning below.
   Its logo is near-square, so it also gets a taller --press-logo-h. */
.press--bl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo title"
    "sub  sub";
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.45rem;
  max-width: 320px;
  --press-logo-h: 41.8px;
}
.press--bl .press__logo { grid-area: logo; margin-bottom: 0; }
.press--bl .press__headline { grid-area: title; }
.press--bl .press__snippet { grid-area: sub; }

/* centre */
.landing__center {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
}

.landing__device {
  width: clamp(180px, 22vw, 300px);
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 60px rgba(140, 198, 63, 0.18), 0 30px 80px rgba(0, 0, 0, 0.5);
}
.landing__device img { width: 100%; height: 100%; object-fit: cover; }

.landing__social { display: flex; gap: 0.8rem; }
.landing__social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.landing__social a:hover { color: #0a0a0a; background: var(--accent); border-color: var(--accent); }
.landing__social svg { width: 18px; height: 18px; }

.landing__tagline {
  position: absolute;
  bottom: 20vh;
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-content);
  max-width: 44ch;
  text-align: center;
  color: var(--accent-mid);
  font-weight: 500;
}
.landing__tagline span { display: block; color: var(--fg); font-weight: 400; margin-top: 1.4rem; text-wrap: balance;}

@media (max-width: 720px) {
  .press { max-width: 42vw; }
  .press__outlet { font-size: var(--step-0); }
  .landing__tagline { bottom: 4vh; }
}