/* ============================================================================
   assets/css/construction/home-pro-v2.css — Construction Home, premium pass
   (2026-09-11). Layered AFTER home-pro.css; presentation only. Adds depth,
   a living hero, tiles that respond, and staggered reveals — all through the
   construction tokens (light + dark), all honouring reduced motion.
   ========================================================================== */
.mchome{ --hp-ease:cubic-bezier(.22,.9,.24,1); --hp-spring:cubic-bezier(.34,1.4,.44,1); }
@keyframes hpUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes hpKen{ from{ transform:scale(1.04) translateY(0); } to{ transform:scale(1.1) translateY(-2%); } }
@keyframes hpGlow{ 0%,100%{ opacity:.55; } 50%{ opacity:.9; } }
@keyframes hpShine{ from{ transform:translateX(-160%) skewX(-18deg); } to{ transform:translateX(260%) skewX(-18deg); } }
@keyframes hpBar{ from{ width:0; } }

/* ---- page head --------------------------------------------------------- */
.mchome .mc-eyebrow{ color:var(--accent); }
.mchome .mc-pagehead h1{ font-weight:700; letter-spacing:-.04em; }
.mchome .mc-date{ padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; }

/* ---- hero: a living banner -------------------------------------------- */
.mchome .mc-hero{ min-height:220px; box-shadow:0 30px 60px -30px rgb(0 0 0 / .45), 0 1px 0 rgb(255 255 255 / .06) inset; }
.mchome .mc-hero-photo{ transform-origin:center; will-change:transform; }
.mchome .mc-hero-scrim{ background:linear-gradient(100deg, rgba(8,10,6,.92) 0%, rgba(8,10,6,.72) 42%, rgba(8,10,6,.18) 100%); }
.mchome .mc-hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:90px; pointer-events:none;
  background:linear-gradient(0deg, rgba(163,178,94,.16), transparent);
}
.mchome .mc-hero-text{ padding:32px 36px; }
.mchome .mc-hero-kicker{ display:inline-flex; align-items:center; gap:8px; color:rgba(212,220,170,.9); font-weight:800; }
.mchome .mc-hero-kicker::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--accent); }
.mchome .mc-hero-text h2{ font-size:clamp(24px,2.3vw,32px); font-weight:700; }
.mchome .mc-hero-text h2 b{ color:var(--accent); font-weight:700; }
.mchome .mc-hero-text p{ color:rgba(255,255,255,.82); }
.mchome .mc-chip{
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; font-weight:600;
  transition:background-color .18s, transform .18s var(--hp-spring);
}
.mchome .mc-chip:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px); }
.mchome .mc-chip.mc-chip-warn{ background:rgba(224,146,43,.22); border-color:rgba(224,146,43,.5); }
.mchome .mc-chip.mc-chip-ok{ background:rgba(63,125,78,.22); border-color:rgba(63,125,78,.5); }
.mchome .mc-resume{ border-radius:999px; box-shadow:0 10px 24px -10px rgba(163,178,94,.7); }

/* ---- section labels ---------------------------------------------------- */
.mchome .mc-section-lbl{ font-weight:600; position:relative; padding-left:14px; }
.mchome .mc-section-lbl::before{ content:""; position:absolute; left:0; top:.35em; width:4px; height:.9em; border-radius:4px; background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 50%, transparent)); }

/* ---- financial tiles --------------------------------------------------- */
.mchome .mc-stat{
  border:1px solid var(--border); box-shadow:0 1px 2px rgb(0 0 0 / .04), 0 10px 26px -18px rgb(0 0 0 / .35);
  transition:transform .22s var(--hp-spring), box-shadow .26s var(--hp-ease), border-color .2s;
}
.mchome .mc-stat::before{ display:block; content:""; position:absolute; inset:0 auto 0 0; width:4px; background:currentColor; opacity:.9; }
.mchome .mc-stat::after{ content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background:currentColor; opacity:.06; pointer-events:none; transition:transform .3s var(--hp-ease), opacity .3s; }
.mchome .mc-stat:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgb(0 0 0 / .04), 0 22px 40px -22px rgb(0 0 0 / .45); border-color:color-mix(in srgb, currentColor 35%, var(--border)); }
.mchome .mc-stat:hover::after{ transform:scale(1.25); opacity:.1; }
.mchome .mc-stat-ic{ width:38px; height:38px; border-radius:12px; background:color-mix(in srgb, currentColor 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.mchome .mc-stat-lbl{ letter-spacing:.02em; }
.mchome .mc-stat-val{ font-weight:700; letter-spacing:-.04em; color:var(--text); font-variant-numeric:tabular-nums; }

/* ---- needs attention --------------------------------------------------- */
.mchome .mc-arenacard{ box-shadow:0 1px 2px rgb(0 0 0 / .04), 0 14px 30px -20px rgb(0 0 0 / .35); transition:transform .22s var(--hp-spring), box-shadow .26s var(--hp-ease); }
.mchome .mc-arenacard:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgb(0 0 0 / .04), 0 24px 44px -22px rgb(0 0 0 / .45); }
.mchome .mc-arenabar{ height:7px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--border) 70%, transparent); }
.mchome .mc-arenabar i{ border-radius:999px; box-shadow:0 0 12px color-mix(in srgb, currentColor 40%, transparent); }
.mchome .mc-riskpill{ letter-spacing:.06em; text-transform:uppercase; font-weight:800; }
.mchome .mc-arenago{ position:relative; overflow:hidden; transition:background-color .18s, transform .18s var(--hp-spring), box-shadow .2s; }
.mchome .mc-arenago:hover{ background:var(--accent); color:#fff; box-shadow:0 10px 22px -12px rgba(163,178,94,.8); }
.mchome .mc-arenago:active{ transform:scale(.98); }

/* ---- workspace tools --------------------------------------------------- */
.mchome .mc-qcard{
  position:relative; overflow:hidden; border:1px solid var(--border);
  box-shadow:0 1px 2px rgb(0 0 0 / .03);
  transition:transform .22s var(--hp-spring), box-shadow .26s var(--hp-ease), border-color .2s;
}
.mchome .mc-qcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:currentColor; opacity:0; transition:opacity .2s; }
.mchome .mc-qcard::after{ content:""; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 10%, transparent), transparent); transform:translateX(-160%) skewX(-18deg); pointer-events:none; }
.mchome .mc-qcard:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgb(0 0 0 / .04), 0 22px 40px -22px rgb(0 0 0 / .45); border-color:color-mix(in srgb, currentColor 35%, var(--border)); }
.mchome .mc-qcard:hover::before{ opacity:1; }
.mchome .mc-qic{ background:color-mix(in srgb, currentColor 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); transition:transform .22s var(--hp-spring); }
.mchome .mc-qcard:hover .mc-qic{ transform:scale(1.06) rotate(-3deg); }
.mchome .mc-qgo{ transition:transform .22s var(--hp-spring), opacity .2s, color .2s; }
.mchome .mc-qcard:hover .mc-qgo{ transform:rotate(-45deg) translate(3px,-3px); opacity:1; color:currentColor; }
.mchome .mc-qname{ font-weight:600; color:var(--text); }

/* ---- motion: reveals in sequence, a slow drift on the hero ------------- */
@media (prefers-reduced-motion:no-preference){
  .mchome .mc-pagehead{ animation:hpUp .5s var(--hp-ease) both; }
  .mchome .mc-hero{ animation:hpUp .55s .05s var(--hp-ease) both; }
  .mchome .mc-hero-photo{ animation:hpKen 22s var(--hp-ease) alternate infinite; }
  .mchome .mc-hero::after{ animation:hpGlow 6s ease-in-out infinite; }
  .mchome .mc-section-lbl{ animation:hpUp .45s .1s var(--hp-ease) both; }
  .mchome .mc-stat{ animation:hpUp .5s var(--hp-ease) both; }
  .mchome .mc-stat:nth-child(1){ animation-delay:.12s } .mchome .mc-stat:nth-child(2){ animation-delay:.18s } .mchome .mc-stat:nth-child(3){ animation-delay:.24s } .mchome .mc-stat:nth-child(4){ animation-delay:.3s }
  .mchome .mc-arenacard{ animation:hpUp .5s .2s var(--hp-ease) both; }
  .mchome .mc-arenabar i{ animation:hpBar 1.1s .35s var(--hp-ease) both; }
  .mchome .mc-qcard{ animation:hpUp .5s var(--hp-ease) both; }
  .mchome .mc-qcard:nth-child(1){ animation-delay:.22s } .mchome .mc-qcard:nth-child(2){ animation-delay:.27s } .mchome .mc-qcard:nth-child(3){ animation-delay:.32s }
  .mchome .mc-qcard:nth-child(4){ animation-delay:.37s } .mchome .mc-qcard:nth-child(5){ animation-delay:.42s } .mchome .mc-qcard:nth-child(6){ animation-delay:.47s }
  .mchome .mc-qcard:nth-child(7){ animation-delay:.52s } .mchome .mc-qcard:nth-child(8){ animation-delay:.57s } .mchome .mc-qcard:nth-child(n+9){ animation-delay:.62s }
  .mchome .mc-qcard:hover::after{ animation:hpShine .9s var(--hp-ease); }
}
@media (max-width:600px){
  .mchome .mc-hero{ min-height:200px; }
  .mchome .mc-hero-text{ padding:24px 20px; }
  .mchome .mc-stat:hover, .mchome .mc-qcard:hover, .mchome .mc-arenacard:hover{ transform:none; }
}