/* =============================================================================
   Powerhouse Holdings — motion primitives, components, page furniture.
   Depends on site.css for tokens.
   ========================================================================== */

/* ============================ motion primitives ============================
   Every animated element declares its resting state here and is released by
   the observer in motion.js adding .is-in. Nothing animates on a machine that
   asks for reduced motion — the resting states are simply skipped.
   ========================================================================== */

[data-reveal]{
  opacity:0; transform:translate3d(0,var(--rv-y,26px),0);
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out);
  transition-delay:var(--rv-d,0ms); will-change:opacity,transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="fade"]{ --rv-y:0px; }
[data-reveal="rise-lg"]{ --rv-y:56px; }
[data-reveal="left"]{ transform:translate3d(-32px,0,0); }
[data-reveal="right"]{ transform:translate3d(32px,0,0); }

/* rule that draws itself */
[data-draw]{ transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease-out); transition-delay:var(--rv-d,0ms); }
[data-draw].is-in{ transform:scaleX(1); }

/* image / panel mask wipe */
[data-mask]{ clip-path:inset(0 0 100% 0); transition:clip-path 1.25s var(--ease-out); transition-delay:var(--rv-d,0ms); }
[data-mask].is-in{ clip-path:inset(0 0 0 0); }
[data-mask] > *{ transform:scale(1.08); transition:transform 1.6s var(--ease-out); transition-delay:var(--rv-d,0ms); }
[data-mask].is-in > *{ transform:scale(1); }

/* line-by-line display type — spans injected by motion.js */
.sp-l{ display:block; overflow:hidden; padding-bottom:.04em; margin-bottom:-.04em; }
.sp-w{ display:inline-block; }
.sp-i{
  display:inline-block; transform:translate3d(0,108%,0) rotate(1.2deg);
  transition:transform 1.05s var(--ease-out); transition-delay:var(--sp-d,0ms);
  will-change:transform;
}
.is-in .sp-i, .sp-l.is-in .sp-i{ transform:none; }

/* parallax + scroll-linked values are written as custom properties by JS */
[data-parallax]{ transform:translate3d(0,var(--par,0px),0); will-change:transform; }

/* ============================ chrome ============================ */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:90; pointer-events:none;
  transform-origin:left; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--violet-deep),var(--violet),var(--violet-lift));
  opacity:.9;
}
/* page-transition curtain */
.curtain{
  position:fixed; inset:0; z-index:120; background:var(--obsidian);
  display:grid; place-items:center; pointer-events:none;
  clip-path:inset(0 0 0 0); transition:clip-path 1s var(--ease-out);
}
body[data-loaded="true"] .curtain{ clip-path:inset(0 0 100% 0); }
body[data-leaving="true"] .curtain{ clip-path:inset(0 0 0 0); transition-duration:.55s; }
.curtain .mark{ width:32px; height:32px; opacity:.9; animation:pulse 2s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* the energy field, matured: a hairline rule grid with one charged seam */
.field{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.field .cols{
  position:absolute; inset:0; width:min(100% - var(--gutter)*2, var(--shell)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(6,1fr);
}
.field .cols span{ border-left:1px solid var(--rule-soft); }
.field .cols span:last-child{ border-right:1px solid var(--rule-soft); }
.field .seam{
  position:absolute; top:0; bottom:0; left:33.333%; width:1px;
  background:linear-gradient(180deg,transparent,var(--violet) 22%,var(--violet-lift) 50%,var(--violet) 74%,transparent);
  opacity:.55; transform:scaleY(var(--seam,0)); transform-origin:top;
  transition:transform 1.8s var(--ease-out);
}
.field .halo{
  position:absolute; width:min(60vw,760px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(111,91,232,.20), transparent 66%);
  filter:blur(28px);
}

/* ============================ hero ============================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(40px,7vh,84px); padding-top:clamp(120px,16vh,180px);
  background:var(--obsidian); overflow:hidden;
}
.hero .shell{ position:relative; z-index:2; width:min(100% - var(--gutter)*2, var(--shell)); }
.hero .halo{ top:-18%; right:-8%; }
.hero-head{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.6vw,40px); align-items:end; }
.hero-head .title{ grid-column:1 / span 9; }
.hero-head .aside{ grid-column:10 / span 3; padding-bottom:.9rem; }
.hero-foot{
  margin-top:clamp(44px,7vh,84px); padding-top:26px; border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.6vw,40px); align-items:start;
}
.hero-foot .lede{ grid-column:1 / span 5; }
.hero-foot .cta{ grid-column:7 / span 3; display:flex; gap:12px; flex-wrap:wrap; padding-top:.2rem; }
.hero-foot .scroll-cue{ grid-column:11 / span 2; justify-self:end; text-align:right; }
.scroll-cue{ font:400 10.5px/1.6 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); }
.scroll-cue .track{ display:block; width:1px; height:52px; background:var(--rule-firm); margin:14px 0 0 auto; position:relative; overflow:hidden; }
.scroll-cue .track::after{
  content:''; position:absolute; inset:0; background:var(--violet-lift);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }
@media (max-width:1000px){
  .hero-head .title{ grid-column:1 / -1; } .hero-head .aside{ grid-column:1 / -1; padding-bottom:0; }
  .hero-foot .lede{ grid-column:1 / -1; } .hero-foot .cta{ grid-column:1 / -1; }
  .hero-foot .scroll-cue{ display:none; }
}

/* hero recedes as the next section arrives — the mintjunkie handoff */
.stage{ position:relative; }
.stage .hero{ position:sticky; top:0; }
.stage-veil{
  position:absolute; inset:0; background:var(--obsidian); pointer-events:none;
  opacity:var(--veil,0); z-index:3;
}

/* ============================ section headers ============================ */
.head{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.6vw,40px); align-items:start; }
.head .eyebrow{ grid-column:1 / span 12; margin-bottom:clamp(26px,4vh,54px); }
.head .h{ grid-column:1 / span 7; }
.head .note{ grid-column:9 / span 4; padding-top:.65rem; }
@media (max-width:1000px){ .head .h,.head .note{ grid-column:1 / -1; } .head .note{ padding-top:1.4rem; } }

/* ============================ statement ============================ */
.statement{ font-family:var(--display); font-size:clamp(1.8rem,4.1vw,3.5rem); line-height:1.16; letter-spacing:-.02em; text-wrap:balance; }
.statement em{ font-style:italic; color:var(--accent); }

/* ============================ ledger (numbered rows) ============================ */
.ledger{ border-top:1px solid var(--rule); }
.ledger-row{
  display:grid; grid-template-columns:64px minmax(0,3.2fr) minmax(0,4fr) auto;
  gap:clamp(16px,2.4vw,40px); align-items:baseline;
  padding-block:clamp(26px,3.4vh,42px); border-bottom:1px solid var(--rule);
  position:relative; transition:padding-left .6s var(--ease);
}
.ledger-row::before{
  content:''; position:absolute; inset:0 auto 0 0; width:2px; background:var(--violet);
  transform:scaleY(0); transform-origin:bottom; transition:transform .6s var(--ease-out);
}
.ledger-row:hover{ padding-left:22px; }
.ledger-row:hover::before{ transform:scaleY(1); transform-origin:top; }
.ledger-row .n{ font:400 12px/1 var(--mono); color:var(--fg-3); letter-spacing:.12em; padding-top:.55em; }
.ledger-row .t{ font-family:var(--display); font-size:clamp(1.35rem,2.2vw,2rem); line-height:1.08; letter-spacing:-.015em; }
.ledger-row .d{ color:var(--fg-2); font-size:.95rem; }
.ledger-row .tag{ font:400 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); white-space:nowrap; padding-top:.75em; }
@media (max-width:900px){
  .ledger-row{ grid-template-columns:44px 1fr; row-gap:12px; }
  .ledger-row .d{ grid-column:2; } .ledger-row .tag{ grid-column:2; }
}

/* ============================ figures / metrics ============================ */
.figures{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border-block:1px solid var(--rule); }
.figures > div{ background:var(--bg); padding:clamp(26px,3.6vh,44px) clamp(18px,2vw,32px); }
.figures .v{ font-family:var(--display); font-size:clamp(2.4rem,4.6vw,4rem); line-height:.9; letter-spacing:-.03em; }
.figures .v .u{ font-size:.42em; color:var(--accent); vertical-align:super; letter-spacing:0; }
.figures .k{ margin-top:.9rem; font:400 10.5px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); }
@media (max-width:820px){ .figures{ grid-template-columns:repeat(2,1fr); } }

/* ============================ deck (stacking cards) ============================ */
.deck{ position:relative; }
.deck-card{
  position:sticky; top:calc(var(--stick,90px));
  background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  padding:clamp(28px,4vw,60px); margin-bottom:clamp(18px,3vh,32px);
  transform:scale(var(--dk-s,1)) translateY(var(--dk-y,0px));
  transition:transform .2s linear;
  overflow:hidden;
}
.deck-card .card-index{
  position:absolute; top:clamp(20px,2.6vw,34px); right:clamp(22px,2.8vw,38px);
  font:400 11px/1 var(--mono); letter-spacing:.16em; color:var(--fg-3);
}

/* ============================ portfolio ============================ */
.folio-item{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.6vw,40px);
  padding-block:clamp(40px,6vh,76px); border-top:1px solid var(--rule); align-items:start;
}
.folio-item .id{ grid-column:1 / span 3; position:sticky; top:calc(var(--stick,96px)); }
.folio-item .body-col{ grid-column:5 / span 8; }
.folio-item .brandline{ display:flex; align-items:center; gap:14px; margin-bottom:1.1rem; }
.folio-item .glyph{ width:38px; height:38px; flex:none; }
.folio-item .name{ font-family:var(--display); font-size:clamp(1.7rem,2.8vw,2.5rem); line-height:1; letter-spacing:-.02em; }
@media (max-width:1000px){
  .folio-item .id{ grid-column:1 / -1; position:static; margin-bottom:1.6rem; }
  .folio-item .body-col{ grid-column:1 / -1; }
}

/* spec table */
.spec{ width:100%; border-collapse:collapse; margin-top:1.6rem; }
.spec th,.spec td{ text-align:left; padding:.95em 1.2em .95em 0; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
.spec th{
  font:400 10.5px/1.6 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3);
  width:min(34%,220px); font-weight:400;
}
.spec td{ color:var(--fg-2); font-size:.95rem; }
.spec tr:last-child th,.spec tr:last-child td{ border-bottom:0; }
@media (max-width:640px){
  .spec th,.spec td{ display:block; width:auto; border:0; padding:0; }
  .spec th{ padding-top:1.4em; } .spec td{ padding-bottom:1.1em; border-bottom:1px solid var(--rule-soft); }
}

/* capability list inside a project */
.caps-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); margin-top:1.8rem; border:1px solid var(--rule); }
.caps-list > li{ background:var(--bg); padding:clamp(20px,2.4vw,30px); }
.caps-list > li:last-child:nth-child(odd){ grid-column:1 / -1; } /* an odd count never leaves an empty cell */
.caps-list h5{ margin:0 0 .55em; font:500 14px/1.3 var(--ui); letter-spacing:-.005em; color:var(--fg); }
.caps-list p{ font-size:.9rem; color:var(--fg-2); line-height:1.55; }
.caps-list .n{ font:400 10px/1 var(--mono); color:var(--accent); letter-spacing:.14em; display:block; margin-bottom:1.1em; }
@media (max-width:760px){ .caps-list{ grid-template-columns:1fr; } }

/* pill row */
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pills li{
  font:400 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  padding:.72em 1em; border:1px solid var(--rule); border-radius:100px; color:var(--fg-2);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.pills li:hover{ border-color:var(--rule-firm); color:var(--fg); }

/* ============================ marquee ============================ */
.marquee{ overflow:hidden; border-block:1px solid var(--rule); padding-block:clamp(18px,2.4vh,28px); }
.marquee .track{ display:flex; gap:clamp(28px,4vw,64px); width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--display); font-size:clamp(1.3rem,2.4vw,2.1rem); letter-spacing:-.015em; color:var(--fg-3);
  display:flex; align-items:center; gap:clamp(28px,4vw,64px); white-space:nowrap;
}
.marquee span::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--violet); flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================ quote ============================ */
.pull{ border-left:2px solid var(--violet); padding-left:clamp(20px,3vw,38px); }
.pull p{ font-family:var(--display); font-size:clamp(1.3rem,2.3vw,2rem); line-height:1.24; letter-spacing:-.015em; color:var(--fg); }
.pull cite{ display:block; margin-top:1.4rem; font:400 11px/1.6 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); font-style:normal; }

/* ============================ timeline ============================ */
.timeline{ border-top:1px solid var(--rule); }
.timeline li{ display:grid; grid-template-columns:140px 1fr; gap:clamp(16px,3vw,44px); padding-block:clamp(22px,3vh,34px); border-bottom:1px solid var(--rule); }
.timeline .when{ font:400 11px/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.timeline h4{ font-family:var(--display); font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.15; margin-bottom:.5rem; }
.timeline p{ color:var(--fg-2); font-size:.95rem; }
@media (max-width:700px){ .timeline li{ grid-template-columns:1fr; row-gap:8px; } }

/* ============================ contact ============================ */
.contact-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(24px,3vw,56px); }
.form-col{ grid-column:1 / span 7; }
.info-col{ grid-column:9 / span 4; }
@media (max-width:1000px){ .form-col,.info-col{ grid-column:1 / -1; } }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px); }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.f{ position:relative; margin-bottom:clamp(20px,2.6vh,30px); }
.f label{
  display:block; font:400 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:.95em;
}
.f input,.f select,.f textarea{
  width:100%; background:transparent; color:var(--fg); font:400 16px/1.5 var(--ui);
  border:0; border-bottom:1px solid var(--rule-firm); padding:.55em 0 .9em; border-radius:0;
  transition:border-color .45s var(--ease);
}
.f textarea{ resize:vertical; min-height:118px; }
.f select{ appearance:none; cursor:pointer; }
.f select option{ background:var(--ink); color:var(--fg); }
.f .underline{
  position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--violet-lift);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out); pointer-events:none;
}
.f input:focus ~ .underline,.f textarea:focus ~ .underline,.f select:focus ~ .underline{ transform:scaleX(1); }
.f input:focus,.f textarea:focus,.f select:focus{ outline:none; }
.f input::placeholder,.f textarea::placeholder{ color:var(--fg-3); }

.info-block{ padding-block:clamp(20px,2.6vh,28px); border-bottom:1px solid var(--rule); }
.info-block:first-child{ padding-top:0; }
.info-block h4{ font:400 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); margin-bottom:1em; }
.info-block a,.info-block p{ font-size:1rem; color:var(--fg); }

/* ============================ brand guideline furniture ============================ */
.swatches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.sw{ background:var(--bg); padding:0; }
.sw .chip{ height:clamp(96px,13vh,150px); border-bottom:1px solid var(--rule); }
.sw .meta{ padding:16px clamp(14px,1.6vw,20px) 20px; }
.sw .nm{ font:500 13px/1.3 var(--ui); }
.sw .hex{ font:400 11px/1.8 var(--mono); letter-spacing:.1em; color:var(--fg-3); text-transform:uppercase; }
.sw .use{ font-size:12.5px; color:var(--fg-2); margin-top:.7em; line-height:1.5; }

.type-spec{ border-top:1px solid var(--rule); padding-block:clamp(26px,3.4vh,44px); border-bottom:1px solid var(--rule); }
.type-spec + .type-spec{ border-top:0; }
.type-spec .sample{ margin-bottom:1.2rem; }
.type-spec .facts{ display:flex; flex-wrap:wrap; gap:10px 32px; font:400 11px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); }

.dos{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.dos > div{ background:var(--bg); padding:clamp(22px,2.8vw,34px); }
.dos h5{ font:400 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.4em; display:flex; align-items:center; gap:.7em; }
.dos .yes h5{ color:#7FBF8F; } .dos .no h5{ color:#C97C7C; }
.dos li{ font-size:.94rem; color:var(--fg-2); padding-left:1.2em; position:relative; margin-bottom:.8em; line-height:1.55; }
.dos li::before{ content:''; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--fg-3); }
@media (max-width:760px){ .dos{ grid-template-columns:1fr; } }

.logo-plate{
  display:grid; place-items:center; min-height:clamp(200px,30vh,320px);
  border:1px solid var(--rule); padding:clamp(24px,4vw,48px);
}
.logo-plate.on-bone{ background:var(--bone); }
.logo-plate.on-obsidian{ background:var(--obsidian); }
.logo-plate.on-violet{ background:var(--violet-deep); }

/* ============================ closing CTA ============================ */
.closer{ position:relative; overflow:hidden; padding-block:clamp(96px,16vh,200px); }
.closer .halo{ left:50%; top:40%; transform:translate(-50%,-50%); }

/* ============================ utility ============================ */
.stack-sm > * + *{ margin-top:.9rem; }
.stack > * + *{ margin-top:1.7rem; }
.stack-lg > * + *{ margin-top:clamp(38px,5.4vh,68px); }
.mt-1{ margin-top:.9rem } .mt-2{ margin-top:1.8rem } .mt-3{ margin-top:clamp(30px,4.2vh,54px) }
.mt-4{ margin-top:clamp(44px,6.5vh,84px) }
.center{ text-align:center } .accent{ color:var(--accent) } .brass{ color:var(--brass) }
.dim{ color:var(--fg-3) }
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.col-6{ grid-column:span 6 } .col-5{ grid-column:span 5 } .col-7{ grid-column:span 7 }
.col-4{ grid-column:span 4 } .col-8{ grid-column:span 8 } .col-12{ grid-column:1 / -1 }
@media (max-width:1000px){ .col-6,.col-5,.col-7,.col-4,.col-8{ grid-column:1 / -1 } }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200; padding:1em 1.4em; background:var(--violet); color:#fff;
  font:500 13px/1 var(--ui);
}
.skip:focus{ left:var(--gutter); top:12px; }

/* ============================ reduced motion ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal],[data-draw],[data-mask]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  [data-mask] > *{ transform:none !important; }
  .sp-i{ transform:none !important; }
  .curtain{ display:none; }
  .deck-card{ position:static; transform:none !important; }
  .folio-item .id{ position:static; }
  .stage .hero{ position:relative; }
}