/* ===========================================================
   Living Board — Coming Soon
   Monochrome honeycomb, ported from the LivingBoardPage Figma file
   (node 1:2 = assembled state, node 20:23 = scattered entrance state)
   =========================================================== */

:root{
  --ink:#232323;
  --hex-fill:#323232;
  --paper:#ffffff;
  --ease-land: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html, body{
  height:100%;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow:hidden;
}

.stage{
  min-height:100dvh;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vh 5vw;
  perspective:1400px;
}

/* ---------- Honeycomb layout ----------
   Coordinates below are normalized straight from the Figma frame:
   left/top = resting position (node 1:2), sx/sy = entrance position (node 20:23)
------------------------------------------------- */

.honeycomb{
  --hex: clamp(60px, 20vw, 190px);
  position:relative;
  width:calc(var(--hex) * 2.8);
  height:calc(var(--hex) * 2.56);
  will-change:transform;
}

.hex-slot{
  position:absolute;
  width:var(--hex);
  height:var(--hex);
  left:var(--left);
  top:var(--top);
  opacity:1;
  transform:none;
}

.hex{
  position:absolute;
  inset:0;
  background:var(--hex-fill);
  clip-path:polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hex--center{
  z-index:2;
}

.hex-copy{
  text-align:center;
  color:var(--paper);
  padding:0 8%;
}

.hex-title{
  margin:0;
  font-family:'Baloo 2', 'Poppins', sans-serif;
  font-weight:800;
  line-height:0.95;
  font-size:calc(var(--hex) * 0.135);
  letter-spacing:0.01em;
}

.hex-sub{
  margin:0.6em 0 0;
  font-family:'Baloo 2', 'Poppins', sans-serif;
  font-weight:500;
  font-size:calc(var(--hex) * 0.052);
  opacity:0.92;
}

/* ---------- Motion ----------
   Outer hexagons fly in from their scattered Figma positions (20:23)
   and settle into the honeycomb (1:2). Disabled entirely for users
   who prefer reduced motion — they get the finished layout immediately.
------------------------------------------------- */

@media (prefers-reduced-motion: no-preference){

  .hex-slot--center .hex{
    opacity:0;
    transform:scale(0.6);
    animation:hexPopIn 0.7s var(--ease-land) 0.05s forwards;
  }

  .hex-slot:not(.hex-slot--center){
    left:var(--sx);
    top:var(--sy);
    opacity:0;
    animation:hexFlyIn 0.9s var(--ease-snap) forwards;
    animation-delay:var(--delay);
  }

  .hex-slot:not(.hex-slot--center) .hex{
    animation:hexFloat 5s ease-in-out calc(var(--delay) + 1s) infinite;
  }

  .hex-slot--center .hex{
    animation-name:hexPopIn, hexFloatSmall;
    animation-duration:0.7s, 6s;
    animation-timing-function:var(--ease-land), ease-in-out;
    animation-delay:0.05s, 1.2s;
    animation-iteration-count:1, infinite;
    animation-fill-mode:forwards, none;
  }
}

@keyframes hexFlyIn{
  0%{
    left:var(--sx);
    top:var(--sy);
    opacity:0;
    transform:scale(0.45) rotate(-14deg);
  }
  70%{
    opacity:1;
  }
  100%{
    left:var(--left);
    top:var(--top);
    opacity:1;
    transform:scale(1) rotate(0deg);
  }
}

@keyframes hexPopIn{
  0%{ opacity:0; transform:scale(0.6); }
  100%{ opacity:1; transform:scale(1); }
}

@keyframes hexFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-4%); }
}

@keyframes hexFloatSmall{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-2%) scale(1.015); }
}

/* Subtle desktop parallax tilt, added via JS; harmless no-op without it */
.honeycomb.tilt{
  transition:transform 0.2s var(--ease-land);
}

@media (max-width: 420px){
  .hex-sub{ font-size:calc(var(--hex) * 0.06); }
}