/* ==========================================================================
   PVNA GROUP — Under Construction / In Production
   The Brand Bee · V3 (People-of-PVNA gradient language) · 07-08-2026
   ========================================================================== */

:root{
  --teal-black:#0C3140;      /* deepest canvas edge */
  --teal:#17586E;            /* logo VNA teal */
  --teal-deep:#123F4F;
  --green:#25B24C;           /* logo P green */
  --green-bright:#3ED465;
  --green-glow:#8FF0AC;
  --white:#FFFFFF;
  --w85:rgba(255,255,255,.85);
  --w60:rgba(255,255,255,.6);
  --w25:rgba(255,255,255,.25);
  --w12:rgba(255,255,255,.12);

  --font-display:'Chakra Petch', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --travel:16s;   /* one full assembly loop */
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%;overflow:hidden}

body{
  font-family:var(--font-body);
  color:var(--white);
  background:
    radial-gradient(950px 700px at 88% 0%,  rgba(37,178,76,.50), transparent 62%),
    radial-gradient(1100px 850px at -5% 105%, rgba(37,178,76,.34), transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.03) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.03) 39px 40px),
    linear-gradient(150deg, var(--teal-deep) 0%, var(--teal) 55%, var(--teal-black) 100%);
  display:flex;
  flex-direction:column;
}

/* ---------- hazard chevron strips ---------- */
.hazard{
  height:10px;
  flex:0 0 10px;
  background:repeating-linear-gradient(-45deg,
    var(--green) 0 14px,
    var(--teal-black) 14px 28px);
}

/* ---------- frame ---------- */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0 clamp(20px, 4vw, 56px);
}

/* diamond motifs from the People-of-PVNA creative */
.dia{
  position:absolute;
  border:2px solid var(--w12);
  transform:rotate(45deg);
  border-radius:14px;
  pointer-events:none;
}
.dia-1{width:230px;height:230px;left:-90px;top:24%}
.dia-2{width:300px;height:300px;right:-130px;bottom:10%}
.dia-3{width:80px;height:80px;right:11%;top:14%;
  border:none;background:rgba(37,178,76,.16)}

.bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(12px, 2vh, 20px) 0;
  border-bottom:1px solid var(--w12);
}

.logo{
  height:clamp(34px, 5vh, 48px);
  width:auto;
  display:block;
}

.bar-meta{
  font-family:var(--font-mono);
  font-size:clamp(9px, 1vw, 11px);
  letter-spacing:.14em;
  color:var(--w60);
}

/* ---------- hero ---------- */
.hero{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:clamp(10px, 1.8vh, 20px);
}

.line-wrap{
  width:min(860px, 92vw);
  flex:0 1 auto;
  min-height:0;
}
.line{
  width:100%;
  height:auto;
  max-height:min(36vh, 320px);
  display:block;
  margin:0 auto;
}

/* headline: green gradient fill, like PEOPLE OF PVNA */
.headline{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  font-size:clamp(26px, 4.4vw, 46px);
  line-height:1.08;
  letter-spacing:.005em;
  text-transform:uppercase;
  background:linear-gradient(100deg, var(--white) 0%, var(--green-glow) 55%, var(--green-bright) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.headline .accent{color:inherit}

.sub{
  max-width:660px;
  font-size:clamp(13px, 1.35vw, 16px);
  line-height:1.55;
  color:var(--w60);
}
.sub strong{color:var(--white);font-weight:600}

/* ---------- status readout ---------- */
.status{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-size:clamp(9px, 1vw, 11px);
  letter-spacing:.12em;
  color:var(--w60);
  background:rgba(255,255,255,.07);
  border:1px solid var(--w25);
  border-radius:6px;
  padding:9px 16px;
  backdrop-filter:blur(4px);
}
.status .dot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--green-bright);
  margin-right:8px;
  animation:pulse 1.6s ease-in-out infinite;
}
/* diamond meter segments */
.meter{display:inline-flex;gap:6px;align-items:center}
.meter i{
  width:9px;height:9px;
  background:var(--w12);
  border-radius:2px;
  transform:rotate(45deg);
}
.meter i.on{background:var(--green-bright)}
.meter i.blink{animation:pulse 1s steps(2, jump-none) infinite}
.status-pct{color:var(--white);font-weight:500}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- actions ---------- */
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(12px, 1.2vw, 14px);
  letter-spacing:.05em;
  text-decoration:none;
  padding:11px 22px;
  border-radius:6px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:focus-visible{outline:3px solid var(--green-glow);outline-offset:2px}
.btn-solid{
  background:var(--green);
  color:var(--white);
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
.btn-solid:hover{transform:translateY(-1px);background:var(--green-bright);color:var(--teal-black)}
.btn-line{
  color:var(--white);
  border:1.5px solid var(--w60);
  background:transparent;
}
.btn-line:hover{background:var(--w12)}

/* ---------- footer ---------- */
.foot{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:clamp(12px, 2vh, 20px) 0;
  border-top:1px solid var(--w12);
  font-family:var(--font-mono);
  font-size:clamp(8px, .95vw, 10px);
  letter-spacing:.12em;
  color:var(--w60);
}

/* ==========================================================================
   THE PRODUCTION LINE (dark theme)
   ========================================================================== */

.draft line, .draft circle{stroke:var(--white);stroke-width:1;fill:none;opacity:.2}
.draft text{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  fill:var(--white);
  opacity:.4;
}

/* -- belt -- */
.belt-body{fill:rgba(255,255,255,.92)}
.tread{
  stroke:var(--teal);
  stroke-width:3;
  stroke-dasharray:16 14;
  animation:tread calc(var(--travel) / 8) linear infinite;
}
@keyframes tread{to{stroke-dashoffset:-120}}

.roller circle{fill:var(--teal-deep);stroke:var(--w85);stroke-width:2.5}
.roller line{stroke:var(--w85);stroke-width:2}
.roller{
  transform-origin:var(--rx) 284px;
  animation:spin 2.4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* -- gantry press -- */
.leg{fill:var(--white);opacity:.3}
.beam{fill:rgba(255,255,255,.92)}
.lamp{fill:var(--green-bright);animation:pulse 1.2s ease-in-out infinite}
.piston{fill:rgba(255,255,255,.55)}
.head{fill:var(--green);stroke:var(--white);stroke-width:2}

.ram{animation:stamp var(--travel) cubic-bezier(.6,0,.4,1) infinite}
@keyframes stamp{
  0%,8.4%       {transform:translateY(0)}
  9.4%,10.6%    {transform:translateY(44px)}
  11.6%,20.9%   {transform:translateY(0)}
  21.9%,23.1%   {transform:translateY(44px)}
  24.1%,33.4%   {transform:translateY(0)}
  34.4%,35.6%   {transform:translateY(44px)}
  36.6%,45.9%   {transform:translateY(0)}
  46.9%,48.1%   {transform:translateY(44px)}
  49.1%,100%    {transform:translateY(0)}
}

.sparks line{
  stroke:var(--green-glow);
  stroke-width:2.5;
  stroke-linecap:round;
}
.sparks{
  transform-origin:450px 196px;
  animation:spark var(--travel) ease-out infinite;
}
@keyframes spark{
  0%,9.6%     {transform:scale(.2);opacity:0}
  10.4%       {transform:scale(1);opacity:1}
  12%,22.1%   {transform:scale(.2);opacity:0}
  22.9%       {transform:scale(1);opacity:1}
  24.5%,34.6% {transform:scale(.2);opacity:0}
  35.4%       {transform:scale(1);opacity:1}
  37%,47.1%   {transform:scale(.2);opacity:0}
  47.9%       {transform:scale(1);opacity:1}
  49.5%,100%  {transform:scale(.2);opacity:0}
}

/* -- blocks: ghost in, logo letterforms on white out -- */
.cube{
  fill:var(--w12);
  stroke:var(--w60);
  stroke-width:2.5;
}
.glyph{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  font-size:30px;
  fill:var(--teal);
  text-anchor:middle;
  opacity:0;
}
.b1 .glyph{fill:var(--green)}
.swoosh{fill:var(--green);stroke:none}

/* Each block: enter → pause under the ram → park in its slot on the right.
   The lockup grows P·V·N·A, holds, fades, and the loop restarts (GIF behaviour). */
.block{animation-duration:var(--travel);animation-timing-function:linear;animation-iteration-count:infinite}
.b1{animation-name:runP}
.b2{animation-name:runV}
.b3{animation-name:runN}
.b4{animation-name:runA}

@keyframes runP{
  0%            {transform:translateX(-80px);opacity:1}
  9%            {transform:translateX(422px)}
  11%           {transform:translateX(422px)}
  16%,96%       {transform:translateX(648px);opacity:1}
  99%           {transform:translateX(648px);opacity:0}
  99.5%,100%    {transform:translateX(-80px);opacity:0}
}
@keyframes runV{
  0%,12.5%      {transform:translateX(-80px);opacity:1}
  21.5%         {transform:translateX(422px)}
  23.5%         {transform:translateX(422px)}
  29.5%,96%     {transform:translateX(706px);opacity:1}
  99%           {transform:translateX(706px);opacity:0}
  99.5%,100%    {transform:translateX(-80px);opacity:0}
}
@keyframes runN{
  0%,25%        {transform:translateX(-80px);opacity:1}
  34%           {transform:translateX(422px)}
  36%           {transform:translateX(422px)}
  43%,96%       {transform:translateX(764px);opacity:1}
  99%           {transform:translateX(764px);opacity:0}
  99.5%,100%    {transform:translateX(-80px);opacity:0}
}
@keyframes runA{
  0%,37.5%      {transform:translateX(-80px);opacity:1}
  46.5%         {transform:translateX(422px)}
  48.5%         {transform:translateX(422px)}
  56.5%,96%     {transform:translateX(822px);opacity:1}
  99%           {transform:translateX(822px);opacity:0}
  99.5%,100%    {transform:translateX(-80px);opacity:0}
}

/* cube turns white + letter appears at each block's own strike moment */
.block .cube{animation-duration:var(--travel);animation-timing-function:linear;animation-iteration-count:infinite}
.block .glyph{animation-duration:var(--travel);animation-timing-function:linear;animation-iteration-count:infinite}
.b1 .cube{animation-name:forgeP}  .b1 .glyph{animation-name:revealP}
.b2 .cube{animation-name:forgeV}  .b2 .glyph{animation-name:revealV}
.b3 .cube{animation-name:forgeN}  .b3 .glyph{animation-name:revealN}
.b4 .cube{animation-name:forgeA}  .b4 .glyph{animation-name:revealA}

@keyframes forgeP{0%,10%{fill:var(--w12);stroke:var(--w60)}11%,100%{fill:var(--white);stroke:var(--white)}}
@keyframes forgeV{0%,22.5%{fill:var(--w12);stroke:var(--w60)}23.5%,100%{fill:var(--white);stroke:var(--white)}}
@keyframes forgeN{0%,35%{fill:var(--w12);stroke:var(--w60)}36%,100%{fill:var(--white);stroke:var(--white)}}
@keyframes forgeA{0%,47.5%{fill:var(--w12);stroke:var(--w60)}48.5%,100%{fill:var(--white);stroke:var(--white)}}
@keyframes revealP{0%,10%{opacity:0}11%,100%{opacity:1}}
@keyframes revealV{0%,22.5%{opacity:0}23.5%,100%{opacity:1}}
@keyframes revealN{0%,35%{opacity:0}36%,100%{opacity:1}}
@keyframes revealA{0%,47.5%{opacity:0}48.5%,100%{opacity:1}}

/* soft green glow rises under the finished lockup while it holds */
.lockglow{
  fill:var(--green-glow);
  opacity:0;
  animation:lockglow var(--travel) ease-in-out infinite;
}
@keyframes lockglow{
  0%,56%   {opacity:0}
  60%      {opacity:.28}
  76%      {opacity:.16}
  90%      {opacity:.28}
  96%,100% {opacity:0}
}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .bar-meta{display:none}
  .status-label{white-space:nowrap}
  .status{flex-wrap:nowrap;gap:10px;padding:8px 12px}
  .draft{display:none}
  .dia-1,.dia-2{display:none}
  .dia-3{width:56px;height:56px;right:7%;top:11%}
  .line{max-height:26vh}
  .meter{gap:5px}
  .meter i{width:8px;height:8px}
  .foot{flex-direction:column;align-items:center;gap:4px;text-align:center}
  .actions .btn{padding:10px 16px}
}

@media (max-height:620px){
  .sub{display:none}
  .line{max-height:30vh}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .block,.block .cube,.block .glyph,.ram,.sparks,.tread,.roller,.lamp,.dot,.blink{
    animation:none !important;
  }
  .block .glyph{opacity:1}
  .block .cube{fill:var(--white);stroke:var(--white)}
  .lockglow{animation:none;opacity:.2}
  .b1{transform:translateX(648px)}
  .b2{transform:translateX(706px)}
  .b3{transform:translateX(764px)}
  .b4{transform:translateX(822px)}
}