/* ============================================================
   nawa — minimal home page

   The hero is the seven things nawa gives you, drawn as chips
   floating around the copy. No hub, no rings, no wires: the
   modules themselves are the picture.

   Pure CSS — borders, gradients and transforms only. No image to
   load, and every colour comes from the theme tokens in styles.css
   so light and dark follow automatically.
   ============================================================ */

.home-min .hm{display:flex;align-items:center;justify-content:center;
  min-height:calc(100svh - 64px - 96px);padding:32px 0 48px}
.hm-wrap{text-align:center;width:100%}

/* ---------------- the hero ----------------
   no panel fill or frame: the artwork sits directly on the page */
.nh{position:relative;isolation:isolate;
  padding:clamp(52px,8vw,104px) clamp(20px,5vw,64px)}

/* the art layer sits behind the copy and never takes a click */
.nh-art{position:absolute;inset:0;z-index:0;pointer-events:none}

/* a soft pool of light behind the copy, so the type always has contrast */
.nh-glow{position:absolute;left:50%;top:52%;width:min(108%,860px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accent) 10%,transparent) 0%,
    transparent 62%)}

/* ---- the module chips ----
   Each is a rounded tile with its icon and name. They are placed by
   --x/--y, and each one drifts on its own path with its own delay, so the
   group breathes rather than marching in step. --i staggers everything. */
.nh-fab{position:absolute;left:var(--x);top:var(--y);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:9px 15px 9px 9px;border-radius:999px;
  background:var(--pop-bg);
  border:1px solid var(--line2);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  /* --x/--y mark the chip's centre, so it is pulled back by half its own
     size. Stated here as well as in the keyframes: with the animation off
     (reduced motion) the keyframes never apply and the chip would otherwise
     hang down-right of its intended spot. */
  transform:translate(-50%,-50%);
  animation:nhDrift var(--dur,9s) ease-in-out infinite;
  animation-delay:calc(var(--i) * -1.35s);
  will-change:transform}

/* a faint top sheen, so a chip reads as a physical tile catching the light
   rather than a flat rectangle */
.nh-fab::before{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--ink) 7%,transparent) 0%,
    transparent 46%)}

/* the icon tile — filled, so the chip has a bright anchor point */
.nh-fi{width:30px;height:30px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--ink)}
.nh-fi svg{width:16px;height:16px}
/* depth: the chips nearer the edges sit "further back" — smaller, softer
   and slightly dimmer — which stops seven equal tiles reading as a grid */
.nh-fab.f3,.nh-fab.f4{scale:.92;opacity:.82}
.nh-fab.f7{scale:.88;opacity:.76}
.nh-fl{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em}

/* a slow figure-of-eight rather than a straight bob: the chips never all
   reach the top of their travel together, so the field always has motion */
@keyframes nhDrift{
  0%,100%{transform:translate(-50%,-50%)}
  25%{transform:translate(calc(-50% + 7px),calc(-50% - 9px))}
  50%{transform:translate(-50%,calc(-50% - 14px))}
  75%{transform:translate(calc(-50% - 7px),calc(-50% - 9px))}
}
/* the same idea for the phone row, where the chips sit in normal flow and so
   carry no centring offset to preserve — a plain bob in place */
@keyframes nhBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
/* the scattered phone cluster: each chip sits --o off the baseline and bobs
   around that, so the offset survives the animation instead of being
   overwritten by it (a transform replaces, it does not accumulate) */
@keyframes nhBobOff{
  0%,100%{transform:translateY(var(--o,0))}
  50%{transform:translateY(calc(var(--o,0) - 6px))}
}

/* Seven positions ringing the copy. The middle band (38%–64%) is left
   clear for the headline and buttons, so nothing floats over the type. */
.nh-fab.f1{--x:13%;--y:20%;--dur:9.5s}
.nh-fab.f2{--x:86%;--y:18%;--dur:10.5s}
.nh-fab.f3{--x:8%;--y:50%;--dur:8.5s}
.nh-fab.f4{--x:91%;--y:48%;--dur:11s}
.nh-fab.f5{--x:15%;--y:81%;--dur:9s}
.nh-fab.f6{--x:84%;--y:83%;--dur:10s}
.nh-fab.f7{--x:50%;--y:92%;--dur:8s}

/* ---------------- the copy on top ---------------- */
.nh-copy{position:relative;z-index:1;max-width:min(100%,620px);margin:0 auto}
.nh-title{font-size:clamp(30px,4.6vw,52px);font-weight:700;line-height:1.14;
  letter-spacing:-.02em;margin:16px auto 0;max-width:15ch}
.nh-title .th{color:var(--th-color);position:relative;white-space:nowrap}
.nh-title .th::after{content:'';position:absolute;left:0;right:0;bottom:.08em;height:.14em;
  background:var(--th-underline);opacity:var(--th-underline-op);border-radius:2px}
/* the actions are the point of the page — give them room */
.nh-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}

/* ---------------- narrow screens ---------------- */
@media (max-width:1040px){
  /* pull the side chips outward as the copy takes a larger share */
  .nh-fab{padding:8px 13px 8px 8px}
  .nh-fi{width:27px;height:27px}
  .nh-fi svg{width:15px;height:15px}
  .nh-fl{font-size:12.5px}
}
@media (max-width:860px){
  .nh{padding:clamp(40px,9vw,64px) 16px}
  /* the mid-height pair would sit on the headline at this width */
  .nh-fab.f3,.nh-fab.f4{display:none}
  .nh-fab.f1{--x:16%;--y:12%}
  .nh-fab.f2{--x:84%;--y:11%}
  .nh-fab.f5{--x:16%;--y:88%}
  .nh-fab.f6{--x:84%;--y:89%}
  .nh-fab.f7{--x:50%;--y:97%}
}
@media (max-width:620px){
  /* No forced height: pinning the hero to the viewport left a tall empty
     band between the buttons and the footer, because the content is much
     shorter than the screen. The hero is now as tall as what is in it, so
     the footer follows directly under the buttons. Content is top-aligned:
     centring would drop it away from the header. */
  .home-min .hm{min-height:0;padding:54px 0 38px;align-items:flex-start}
  /* Chips at phone width would either overlap the copy or be cut off by the
     viewport, so they step out of the background and gather under the
     buttons. Labels go too — seven names is more reading than the group is
     worth here — leaving seven round icon buttons.

     They are scattered rather than gridded: the flow still wraps them, but
     each one is nudged off the baseline by its own amount, so the group
     reads as a loose cluster instead of two tidy rows. */
  .nh{padding:8px 0 0}
  .nh-art{position:static;display:flex;flex-wrap:wrap;
    column-gap:14px;row-gap:4px;
    justify-content:center;align-items:center;margin-top:10px;
    /* room for the offsets above and below without clipping the bob */
    padding-block:18px}
  .nh-glow{display:none}
  .nh-fab{position:static;width:48px;height:48px;padding:0;
    justify-content:center;
    /* --o is this chip's vertical offset; the bob is applied on top of it,
       so a chip drifts around its own resting height rather than the row's */
    animation:nhBobOff 5.5s ease-in-out infinite;
    animation-delay:calc(var(--i) * -.55s)}
  .nh-fab.f3,.nh-fab.f4{display:inline-flex}
  /* the scatter: alternating up/down, uneven so it never reads as a zigzag */
  .nh-fab.f1{--o:-14px}
  .nh-fab.f2{--o:10px}
  .nh-fab.f3{--o:-6px}
  .nh-fab.f4{--o:16px}
  .nh-fab.f5{--o:-12px}
  .nh-fab.f6{--o:6px}
  .nh-fab.f7{--o:-4px}
  /* the tile filled the chip's left end; now it IS the chip */
  .nh-fi{width:100%;height:100%;background:none;color:var(--ink)}
  .nh-fi svg{width:21px;height:21px}
  .nh-fl{display:none}
  /* the depth tint that separated far chips from near ones has no meaning
     in a flat row, so every icon reads at full strength */
  .nh-fab.f3,.nh-fab.f4,.nh-fab.f7{scale:1;opacity:1}
  /* Two actions, side by side on one line. "More about nawa" goes: it is the
     softest of the three, and the Apps/About nav still reaches that page.
     nowrap keeps the pair on one row instead of stacking. */
  .nh-actions{flex-wrap:nowrap}
  .nh-actions .nh-about{display:none}
  .nh-actions .cta-btn{flex:1 1 0;min-width:0;justify-content:center;
    padding-inline:14px;white-space:nowrap}
  /* the eyebrow only labels the headline it sits above; at this width the
     headline speaks for itself and the label just adds a line to scroll */
  .nh-copy .eyebrow{display:none}
  /* With the eyebrow gone the headline would sit flush under the header and
     right on top of the buttons. Give it room on both sides so it reads as
     the centre of the page rather than one item in a stack. */
  .nh-title{margin-top:30px}
  .nh-actions{margin-top:42px}
  /* an even footer again: the lopsided 2/50 was chasing a gap that was
     really the hero min-height, not padding. Scoped to the home page. */
  .home-min footer{padding:26px 0 30px}
}
@media (prefers-reduced-motion:reduce){
  .nh-fab{animation:none}
  /* the phone cluster carries its scatter in the keyframes, so stopping the
     animation would also flatten it back into rows — restate it as a plain
     transform, still scattered, just no longer moving */
  @media (max-width:620px){
    .nh-fab{transform:translateY(var(--o,0))}
  }
}