/* ============================================================
   simpleagentic.ai — coming soon page
   One stylesheet. No framework, no build step, no dependencies.
   Order: tokens, base, honeycomb, ripple, overlay, motion.

   Adapted from a Sass/Pug original (SMA-5). The mixins were
   expanded by hand; nothing here needs compiling.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --color-primary:    #ee75d2;
  --color-secondary:  #75d8ee;
  --color-quaternary: #9375ee;
  --color-surface:    #000;

  /* Backdrop photo, stored locally so the page needs no network.
     Source: https://unsplash.com/photos/photo-1668681919287-7367677cdc4c
     Unsplash License. Its pink/violet/cyan ribbons are close enough to
     the tile palette that the comb and the photo read as one image. */
  --bg: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .55)),
        url("../img/backdrop.jpg") no-repeat center center / cover,
        var(--color-surface);

  --color-on-surface: var(--color-primary);

  /* Tiles are translucent so the photo shows through the whole comb,
     not just around its edges; the backdrop blur below then frosts it. */
  --tile-alpha: 58%;

  /* Logos are monochrome white, so every brand reads at the same
     weight however the tile underneath is coloured. */
  --logo-color:   rgba(255, 255, 255, .95);
  --hover-filter: brightness(1.2);

  --hexagon-size: 8vmin;
  /* Columns must overlap by 25% of a tile for the comb to interlock,
     so each side pulls in by an eighth. Derived, never set by hand. */
  --hexagon-lap:  calc(var(--hexagon-size) / 8);
  --logo-size:    calc(var(--hexagon-size) * .4);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (any-pointer: fine) {
  :root { --ripple-filter: blur(1rem); }
}

@property --index {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@property --ripple-factor {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--color-on-surface);
  font-family: var(--sans);
  overflow: hidden;
}

/* Visually hidden, still read aloud. */
.u-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- honeycomb ---------- */
.container {
  display: flex;
  position: relative;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 calc(var(--hexagon-lap) * -1);
  padding: 0;
  list-style: none;
}

/* Columns alternate 5/6/7/8/9 cells, so centring them is what
   staggers every other column by half a tile. */

.hexagon {
  --mix-percentage: calc(var(--column) * var(--index) * 3%);
  --tile-tint: color-mix(in srgb, var(--color-secondary), var(--color-primary) var(--mix-percentage));
  position: relative;
  width: var(--hexagon-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tile-tint) var(--tile-alpha), transparent);
  backdrop-filter: blur(1rem);
  clip-path: polygon(
    98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%,
    99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%,
    77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%,
    71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%,
    26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%,
    21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%,
    0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%,
    21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%,
    26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%,
    71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%,
    77.66044% 8.93111%, 78.66025% 10.35898%
  );
  cursor: pointer;
}

@media (hover) {
  .hexagon:hover { filter: var(--hover-filter); }
}

.hexagon__logo {
  width: var(--logo-size);
  height: var(--logo-size);
  fill: var(--logo-color);
  pointer-events: none;
}

/* ---------- ripple ---------- */
@keyframes ripple {
  from { transform: scale(1); opacity: 1; }
  50%  { transform: scale(max(.8, calc(var(--ripple-factor) / 100))); opacity: .42; }
  65%  { opacity: 1; }
  70%  { transform: scale(1.5); filter: var(--ripple-filter); }
  to   { transform: scale(1); opacity: 1; }
}

.container.show-ripple { pointer-events: none; }

.container.show-ripple .hexagon {
  --duration: .45s;
  cursor: default;
  animation: ripple var(--duration) ease-in-out;
  animation-duration: max(var(--duration), calc(var(--duration) * var(--ripple-factor) / 100));
  animation-delay: calc(var(--ripple-factor) * 8ms);
}

/* ---------- the message ---------- */
.hero {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

/* Scrim so the headline stays legible over whichever tiles sit
   behind it. Kept to a narrow band around the text — the logos are
   the point of the page, so it must not blur or dim the whole comb. */
.hero::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 110vmin;
  height: 30vmin;
  translate: -50% -46%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .42) 45%, transparent);
  z-index: -1;
}

/* "simpleagentic.ai" is one unbreakable 16-character word, so the size
   has to track viewport *width* as well as vmin or it runs off the edge
   of a narrow phone. */
.hero__title {
  margin: 0;
  font-size: clamp(1.9rem, min(13vmin, 10.5vw), 11rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.03em;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .6);
}

.hero__tagline {
  margin: 3.2vmin 0 0;
  font-size: clamp(1rem, 3.2vmin, 2rem);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--color-on-surface);
  /* The tagline sits at the soft edge of the scrim, where the photo
     and the tiles both show through; this keeps the pink off them. */
  text-shadow: 0 1px 18px rgba(0, 0, 0, .9);
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .container.show-ripple .hexagon { animation: none; }
}

/* ---------- small screens ---------- */
/* On a portrait phone vmin is the width, so an 8vmin tile leaves the
   comb stranded in the middle of a tall screen. Size off the width
   instead: nine columns at 25% overlap span exactly 7 tiles, so
   12.5vw fills the screen edge to edge with a margin to spare. */
@media (max-width: 1024px) and (orientation: portrait) {
  :root { --hexagon-size: 12.5vw; }
}