/* ============================================================
   Hatten / Hattventory landing — scroll engine styles
   Reuses brand tokens and dashboard component classes from
   styles.css. Everything here is additive (sc- / new ids only),
   nothing in styles.css is overridden for login/dashboard pages.
   ============================================================ */

html{scroll-padding-top:72px}

.sc-body{overflow-x:clip}

/* ---------- Nav ---------- */
.sc-nav{
  position:sticky;top:0;z-index:50;height:4.5rem;
  display:flex;align-items:center;
  padding:1rem 1.5rem;background:rgba(27,30,40,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);color:#fff;
  transition:box-shadow .3s ease,background-color .3s ease;
  box-sizing:border-box;
}
.sc-nav.is-scrolled{background:rgba(20,22,30,.97);box-shadow:0 10px 30px rgba(0,0,0,.25)}
/* Mirrors hatten.io's own header container: full-bleed until each
   Tailwind breakpoint, then snapped to that width and centered. */
.sc-nav-inner{
  width:100%;margin:0 auto;padding:0 1.5rem;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;
}
@media (min-width:640px){.sc-nav-inner{max-width:640px}}
@media (min-width:768px){.sc-nav-inner{max-width:768px}}
@media (min-width:1024px){.sc-nav-inner{max-width:1024px}}
@media (min-width:1280px){.sc-nav-inner{max-width:1280px}}
@media (min-width:1536px){.sc-nav-inner{max-width:1536px}}
.sc-wordmark{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.18em;font-size:13px}
.sc-nav-right{display:flex;align-items:center;gap:26px}
.sc-logo{width:auto;height:3rem;max-height:3rem;transition:transform .3s ease,opacity .3s ease}
.sc-wordmark:hover .sc-logo{transform:scale(1.05);opacity:.9}
.sc-logo-sm{height:22px;max-height:22px}
.sc-nav-links{display:flex;gap:30px;color:#c5c8d0;font-size:13px}
.sc-nav-links a:hover{color:var(--mint)}
@media (max-width:800px){.sc-nav-links{display:none}}
@media (max-width:480px){
  .sc-nav{padding:.75rem 0}
  .sc-nav-inner{padding:0 .75rem}
  .sc-nav-right{gap:10px}
  .sc-nav-cta{padding:8px 12px;font-size:11.5px;white-space:nowrap}
  .sc-langtoggle{margin-right:0}
  .sc-langtoggle span{padding:4px 8px;font-size:10px}
  .sc-logo{height:2.25rem;max-height:2.25rem}
}

.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace}

/* language toggle, recolored for the dark nav */
.sc-langtoggle{display:flex;align-items:center;background:rgba(255,255,255,.08);border-radius:20px;padding:3px;margin-right:14px;flex:none}
.sc-langtoggle span{font-size:10.5px;font-weight:800;padding:5px 10px;border-radius:16px;cursor:pointer;color:#9aa2b3;letter-spacing:.03em}
.sc-langtoggle span.on{background:var(--mint);color:#06281b}
@media (max-width:800px){.sc-langtoggle{margin-right:0}}

/* ---------- Act 1 · Recognition (hero) ---------- */
.sc-hero{background:var(--raising-black);overflow:hidden}
.sc-hero .hero{min-height:calc(100vh - 64px)}
#heroCopy,#heroVisual{will-change:transform,opacity}
@media (hover:hover) and (pointer:fine){
  .core-card,.floating-card,.orbit{transition:transform .25s ease-out}
}

/* ---------- Reveal-on-enter primitive ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-in{opacity:1;transform:translateY(0)}
.sc-kinetic span{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.is-in .sc-kinetic span{opacity:1;transform:translateY(0)}
.sc-kinetic span:nth-child(1){transition-delay:0ms}
.sc-kinetic span:nth-child(2){transition-delay:70ms}
.sc-kinetic span:nth-child(3){transition-delay:140ms}
.sc-kinetic span:nth-child(4){transition-delay:210ms}
.sc-center{text-align:center;max-width:640px;margin:0 auto}

/* ---------- Act 2 · Landscape ---------- */
.sc-stagger.is-in .product-card{opacity:1;transform:translateY(0)}
.sc-stagger .product-card{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.sc-stagger .product-card:nth-child(1){transition-delay:0ms}
.sc-stagger .product-card:nth-child(2){transition-delay:120ms}
.sc-stagger .product-card:nth-child(3){transition-delay:240ms}
.sc-status{display:inline-block;margin-top:8px;font-size:10px;letter-spacing:.08em;color:var(--dim-gray);border:1px solid var(--border);border-radius:100px;padding:5px 10px}

/* ---------- Act 3 · Turn (pinned pipeline) ---------- */
.sc-turn{background:var(--raising-black);color:#fff}
.sc-turn .sc-pin-wrap{height:240vh;position:relative}
.sc-turn .sc-pin-stage{position:sticky;top:0;min-height:100vh;display:flex;align-items:center}
.sc-turn-inner{width:100%}
.sc-turn .section-heading p{color:#aeb2bd}
.sc-turn .section-heading h2{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.04em;line-height:1.08;margin:0 0 16px}
.sc-pipeline{position:relative;margin-top:70px}
.sc-turn .flow-item{background:var(--raising-black);position:relative;overflow:hidden}
.sc-turn .flow-item span{color:#c7ccd5;position:relative;z-index:1}
.sc-turn .flow-item b{position:relative;z-index:1}
.sc-turn .flow-item::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(51,193,125,.95) 0%,rgba(51,193,125,.4) 38%,rgba(51,193,125,0) 72%);
  opacity:0;transform:scale(.35);
}
.sc-turn .flow-item.sc-flash::after{animation:scFlash .9s cubic-bezier(.22,.61,.36,1)}
@keyframes scFlash{
  0%{opacity:0;transform:scale(.3)}
  30%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.4)}
}
@media (prefers-reduced-motion:reduce){
  .sc-turn .flow-item.sc-flash::after{animation:none;opacity:0}
}

/* ---------- Act 4 · Substance ---------- */
.sc-substance{position:relative}
.sc-substance-bg{
  position:absolute;inset:-10% -20%;z-index:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(115deg,rgba(90,191,146,.08) 0 2px,transparent 2px 64px);
}
.sc-substance>.tech-copy,.sc-substance>.tech-panel{position:relative;z-index:1}
.sc-panel-lines .panel-line{opacity:0;transform:translateX(16px);transition:opacity .5s ease,transform .5s ease}
.sc-panel-lines.is-in .panel-line{opacity:1;transform:translateX(0)}
.sc-panel-lines.is-in .panel-line:nth-child(1){transition-delay:0ms}
.sc-panel-lines.is-in .panel-line:nth-child(2){transition-delay:90ms}
.sc-panel-lines.is-in .panel-line:nth-child(3){transition-delay:180ms}
.sc-panel-lines.is-in .panel-line:nth-child(4){transition-delay:270ms}

/* ---------- Act 5 · Proof (peak, Live Console) ---------- */
.sc-proof{background:#0f1117;padding-top:90px}
.sc-proof-wrap{height:260vh;position:relative}
.sc-proof .sc-pin-stage{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding:22px 0}
.sc-proof-inner{width:100%}
.sc-proof-heading{max-width:640px;margin:0 auto 36px;text-align:center;color:#fff}
.sc-proof-heading p{color:#aeb2bd;font-size:16px;line-height:1.7}
.sc-proof-heading h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.04em;margin:0 0 14px}

.console-frame{
  max-width:960px;margin:0 auto;border-radius:12px;overflow:hidden;
  background:#fff;box-shadow:0 40px 100px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.console-chrome{
  height:32px;background:var(--raising-black);display:flex;align-items:center;gap:9px;padding:0 14px;flex:none;
}
.c-dot{width:7px;height:7px;border-radius:50%;background:#454b58;transition:background-color .4s ease}
.console-frame.is-lit .c-dot1{background:var(--danger)}
.console-frame.is-lit .c-dot2{background:var(--warning)}
.console-frame.is-lit .c-dot3{background:var(--mint)}
.console-url{color:#7f8794;font-size:10px;letter-spacing:.03em;margin-left:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.console-boot{margin-left:auto;color:var(--mint);font-size:9px;letter-spacing:.14em;font-weight:800}
.console-body{padding:16px 16px 6px;background:var(--soft);display:flex;flex-direction:column;gap:10px}
.sc-proof-metrics{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:0}
.sc-proof-metrics.metric-card,.console-body .metric-card{padding:12px}
.console-body .metric-card span{font-size:9px}
.console-body .metric-card strong{font-size:19px;margin:7px 0 3px;min-height:1em}
.console-body .metric-card em{font-size:10px}
.console-body .chart-grid{gap:10px;margin-bottom:0}
.console-body .panel{padding:12px}
.console-body .panel-header h3{font-size:12px}
.console-body .panel-header p{font-size:10px}
.console-body .chart{height:126px;margin-top:10px;padding-left:34px}
.console-body .chart svg{height:96px}
.console-body .y-axis{height:96px;font-size:8px}
.console-body .x-axis{font-size:8px}
.console-body .health-chart{height:126px;gap:14px}
.console-body .donut{width:82px;height:82px}
.console-body .donut:after{inset:12px}
.console-body .donut strong{font-size:14px}
.console-body .donut small{font-size:8px}
.console-body .legend{font-size:9px;gap:7px}
.console-body .inventory-panel{margin-bottom:0}
.console-body .panel-header{margin-bottom:2px}
.console-body table{min-width:0}
.console-body th{padding:6px 8px;font-size:8px}
.console-body td{padding:8px 8px;font-size:11px}
.console-body td strong{font-size:11px}
.console-body .status{font-size:8px;padding:3px 6px}
.console-body .event{padding:7px 0;gap:8px}
.console-body .event-icon{width:20px;height:20px;font-size:9px}
.console-body .event strong{font-size:10px}
.console-body .event small{font-size:9px}
.console-body .event time{font-size:8px}

#proofArea{transition:opacity .5s ease}
#proofLine{transition:stroke-dashoffset .05s linear}

.donut{background:conic-gradient(var(--mint) 0%,#eef1f4 0)}

.sc-proof-table tbody tr[data-row]{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.sc-proof-table.rows-in tbody tr[data-row]{opacity:1;transform:translateY(0)}
.sc-proof-table.rows-in tbody tr[data-row]:nth-child(1){transition-delay:0ms}
.sc-proof-table.rows-in tbody tr[data-row]:nth-child(2){transition-delay:80ms}
.sc-proof-table.rows-in tbody tr[data-row]:nth-child(3){transition-delay:160ms}
.sc-proof-table.rows-in tbody tr[data-row]:nth-child(4){transition-delay:240ms}

.sc-proof-feed{margin-top:6px}
.sc-proof-feed .event[data-feed]{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.sc-proof-feed.feed-in .event[data-feed]{opacity:1;transform:translateY(0)}
.sc-proof-feed.feed-in .event[data-feed]:nth-child(1){transition-delay:0ms}
.sc-proof-feed.feed-in .event[data-feed]:nth-child(2){transition-delay:100ms}
.sc-proof-feed.feed-in .event[data-feed]:nth-child(3){transition-delay:200ms}

.sc-proof-cta{text-align:center;margin-top:18px}

/* ---------- Act 6 · Commitment (static resolve) ---------- */
.sc-close{background:#fff;padding:150px 0;text-align:center}
.sc-close-inner{max-width:620px;margin:0 auto}
.sc-close h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.04em;line-height:1.08;margin:0 0 18px}
.sc-close p{color:var(--dim-gray);font-size:17px;line-height:1.7;margin:0 0 34px}

/* ---------- FAQ ---------- */
.sc-faq .section-heading{margin:0 auto 46px}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{border:1px solid var(--border);border-radius:12px;padding:22px 26px;background:#fff;transition:border-color .2s ease}
.faq-item[open]{border-color:var(--mint)}
.faq-item summary{cursor:pointer;font-weight:700;font-size:17px;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:20px;line-height:1;color:var(--mint);flex:none;transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--dim-gray);font-size:15px;line-height:1.7;margin:14px 0 0}

.sc-footer{color:var(--dim-gray)}
.sc-footer-support{font-size:12px}

/* ---------- Reduced motion & narrow viewports ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal],.sc-kinetic span,.sc-stagger .product-card,.sc-panel-lines .panel-line,
  .sc-proof-table tbody tr[data-row],.sc-proof-feed .event[data-feed]{
    transition:none !important;opacity:1 !important;transform:none !important;
  }
}

@media (max-width:760px){
  .sc-turn .sc-pin-wrap,.sc-proof-wrap{height:auto}
  .sc-turn .sc-pin-stage,.sc-proof .sc-pin-stage{position:static;min-height:0;padding:70px 0}
  .sc-proof-metrics{grid-template-columns:repeat(2,1fr)}
  .console-body{padding:18px 16px 6px}
  .sc-close{padding:90px 0}
}