/* ============================================================
   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)}
}

/* 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){
  .home-min .hm{min-height:0;padding:22px 0 36px}
  /* Chips at phone width would either overlap the copy or be cut off by the
     viewport, so they step out of the background and become a centred row
     under the buttons. Labels go too — seven names is more reading than the
     row is worth here — leaving seven round icon buttons. */
  .nh{padding:24px 0 0}
  .nh-art{position:static;display:flex;flex-wrap:wrap;gap:12px;
    justify-content:center;margin-top:34px}
  .nh-glow{display:none}
  .nh-fab{position:static;width:48px;height:48px;padding:0;
    justify-content:center;
    /* the drift keyframes translate by -50%, which only makes sense while
       the chips are absolutely positioned — this row bobs in place instead */
    animation:nhBob 5.5s ease-in-out infinite;
    animation-delay:calc(var(--i) * -.55s)}
  .nh-fab.f3,.nh-fab.f4{display:inline-flex}
  /* 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:22px}
  .nh-actions{margin-top:30px}
}
@media (prefers-reduced-motion:reduce){
  .nh-fab{animation:none}
}