/* Homepage scene (wf-home.js): the views and states specific to the
   "What it does" story. Shared replica pieces live in workflow.css. */
.wf-home{ margin-top: 48px; }
.wf-home .wf-step{ scroll-margin-top: 90px; }
/* Wider than the /for/ walkthroughs, so the step copy grows with the column. */
@media (min-width: 1200px){
  .wf-home .wf-step h3{ font-size: clamp(24px, 1.9vw, 32px); }
  .wf-home .wf-step p{ font-size: clamp(16px, 1.2vw, 19px); max-width: 48ch; }
}

/* AI Analysis: the map sits on its own band so it never overprints the cards */
.wf-home .da-mapwrap{ background: var(--da-bg); padding-top: 8px; box-shadow: 0 -14px 14px -4px var(--da-bg); }
@media (min-width: 881px) and (max-height: 800px){ .wf-home .da-an .da-sb ~ .da-sb ~ .da-sb{ display: none; } }
/* tall screens: give the map, the finished cuts and the timeline the room */
@media (min-width: 881px) and (min-height: 860px){
  .wf-home .da-tl{ margin-top: 18px; }
  .wf-home .da-tracks{ height: 124px; }
  .wf-home .da-map{ height: 108px; }
  .wf-home .hm-cuts{ max-height: none; }
}
.hm-sb-r{ display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.hm-sb-r .da-btn{ font-size: 8.5px; padding: 2px 7px; }

/* the element each step is about gets a soft pulse */
@keyframes hmPulse{ 0%{ box-shadow: 0 0 0 0 rgba(74,158,255,.55); } 70%{ box-shadow: 0 0 0 9px rgba(74,158,255,0); } 100%{ box-shadow: 0 0 0 0 rgba(74,158,255,0); } }
.wf-home[data-step="1"] .da-an .hm-focus,
.wf-home[data-step="3"] .hm-style .hm-focus,
.wf-home[data-step="4"] .hm-share .hm-focus,
.wf-home[data-step="5"] .da-ex .hm-focus{ animation: hmPulse 2.2s ease-out .6s infinite; }
.wf-home[data-step="1"] .da-an .hm-focus{ border-color: rgba(74,158,255,.55); }

/* 01 — drop it in */
.wf-home[data-step="0"] .hm-drop{ border-color: var(--da-accent); background: rgba(74,158,255,.08); }
.hm-drop{ transition: border-color .4s ease, background-color .4s ease; }
.wf-home .da-dragfile{ right: 96px; top: 106px; }
.hm-row{
  flex: none; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  background: var(--da-card); border: 1px solid var(--da-border); border-radius: 8px;
}
.hm-cap{ flex: none; margin: 14px 0 6px !important; font-size: 9px; }
.hm-file{ flex: 1 1 auto; min-height: 0; margin-bottom: 6px; }

/* 03 — clips */
.hm-paint{ margin-bottom: 9px; padding: 7px 9px 8px; border: 1px dashed var(--da-border2); border-radius: 8px; }
.hm-paint .wf-note{ display: block; font-size: 8px; margin-bottom: 3px; }
.hm-paint .da-ph{ margin-bottom: 2px; }
.hm-paint .da-pt{ font-size: 10px; }
.hm-paint mark{
  color: inherit; border-radius: 3px; padding: 0 1px;
  background: linear-gradient(var(--da-lb), var(--da-lb)) no-repeat 0 0 / 0% 100%;
  transition: background-size 1.2s cubic-bezier(.4,.1,.2,1) .45s;
}
.wf-home[data-step="2"] .hm-paint mark, .wf-home[data-step="4"] .hm-paint mark{ background-size: 100% 100%; }
.hm-lib{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hm-clip{
  position: relative; min-width: 0; padding: 8px 10px 8px 12px; border-radius: 8px;
  background: var(--da-card); border: 1px solid var(--da-border);
}
.hm-clip::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--c); }
.hm-clip-h{ display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.hm-clip-h b{ font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-clip-h span{ font-family: var(--da-mono); font-size: 8px; color: var(--da-text2); flex: none; }
.hm-clip p{ font-size: 8.5px; line-height: 1.45; color: var(--da-text2); margin: 3px 0 6px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-clip .wave{ height: 22px; }
.hm-meta{ display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.hm-meta .da-dot{ width: 6px; height: 6px; color: var(--c); }
.hm-meta .da-tc{ font-size: 8px; }
.hm-plus{ margin-left: auto; font-size: 8px; color: var(--da-text2); }
.hm-new{ transition: box-shadow .5s ease, border-color .5s ease; }
.wf-home[data-step="2"] .hm-new{ border-color: rgba(74,158,255,.6); animation: hmPulse 2.2s ease-out 1.4s infinite; }

/* 04 — My Style page */
.hm-style{ display: flex; flex-direction: column; padding: 14px 18px 12px; }
.hm-style > *{ flex: none; }
.hm-st-h{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hm-st-tools{ display: flex; gap: 5px; margin-top: 6px; }
.hm-st-tools .da-select{ margin: 0; }
.hm-toggle{ display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; color: var(--da-text2); padding: 3px 7px 3px 3px; border-radius: 999px; white-space: nowrap; }
.hm-toggle i{ width: 24px; height: 14px; border-radius: 999px; background: var(--da-accent); position: relative; }
.hm-toggle i::after{ content: ""; position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.hm-toggle b{ color: var(--da-text); }
.hm-st-tabs{ display: flex; gap: 14px; margin: 12px 0 10px; border-bottom: 1px solid var(--da-border); font-size: 9.5px; color: var(--da-text2); }
.hm-st-tabs span{ padding: 0 2px 6px; }
.hm-st-tabs .on{ color: var(--da-text); border-bottom: 2px solid var(--da-accent); margin-bottom: -1px; }
.hm-st-card{
  display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-radius: 10px;
  background: var(--da-bg2); border: 1px solid var(--da-border);
}
.hm-st-card b{ font-size: 13px; font-weight: 600; margin-right: auto; }
.hm-st-card span{ display: flex; flex-direction: column; align-items: flex-start; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--da-muted); }
.hm-st-card em{ font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--da-text); letter-spacing: 0; text-transform: none; margin-bottom: 1px; }
.hm-st-sec{ font-size: 11px; font-weight: 600; margin-top: 12px !important; }
.hm-st-sub{ font-size: 8.5px; color: var(--da-text2); margin: 2px 0 7px !important; }
.hm-st-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hm-st-grid div{ padding: 7px 9px; border-radius: 8px; background: var(--da-bg2); border: 1px solid var(--da-border); font-size: 10px; color: var(--da-text); }
.hm-st-grid .da-cap{ display: block; font-size: 8px; color: var(--da-muted); margin-bottom: 2px; }
.hm-cuts-cap{ margin: 12px 0 5px !important; font-size: 8.5px; }
.hm-cuts{ flex: 1 1 auto !important; min-height: 40px; max-height: 120px; }

/* 05 — Share (Studio): the collaborator's browser over the app */
.hm-share{ background: rgba(10,10,12,.8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hm-browser{
  position: absolute; left: 6%; right: 6%; top: 5%; bottom: 13%; display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden; border: 1px solid #3a3a44; background: var(--da-bg);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.9);
}
.hm-chrome{ flex: none; display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; background: #1f1f25; border-bottom: 1px solid var(--da-border); }
.hm-chrome > i{ width: 7px; height: 7px; border-radius: 50%; background: #3a3a44; }
.hm-url{ margin: 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; color: var(--da-text2); background: #131316; border-radius: 6px; padding: 2px 40px; }
.hm-page{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 12px; }
.hm-page > *{ flex: none; }
.hm-ph{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--da-border); }
.hm-brand{ display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; }
.hm-brand img{ border-radius: 4px; }
.hm-brand small{ font-size: 8px; color: var(--da-muted); }
.hm-ph-r{ display: flex; gap: 4px; }
.hm-ph-r .da-btn{ font-size: 8px; padding: 3px 7px; }
.hm-sh-title{ font-size: 13px; font-weight: 600; margin-top: 8px !important; }
.hm-sh-sub{ font-size: 8.5px; color: var(--da-text2); }
.hm-sh-sync{ font-size: 8px; color: var(--da-muted); margin-top: 1px !important; }
.hm-sh-tabs{ padding: 0; margin-top: 6px; }
.hm-sh-body{ flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; padding-top: 8px; }
.hm-sh-body > *{ flex: none; }
.hm-pending{ background: rgba(94,92,230,.32); border-radius: 3px; }
.hm-select{
  margin: 6px 0 8px; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--da-border); border-left: 3px solid var(--da-accent);
  background: var(--da-card); display: flex; flex-direction: column; gap: 5px;
}
.hm-note{ font-size: 9px; color: var(--da-text); padding: 3px 6px; border-radius: 5px; background: var(--da-input); border: 1px solid var(--da-border); }
.hm-select-r{ display: flex; align-items: center; gap: 6px; }
.hm-select-r .da-tc{ margin-right: auto; font-size: 8px; }
.hm-cancel{ font-size: 8.5px; color: var(--da-text2); }
.hm-select-r .da-btn{ font-size: 9.5px; padding: 4px 10px; }
.hm-sh-skel{ flex: 1 1 auto !important; min-height: 0; }
.hm-toast{
  position: absolute; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px;
  background: var(--da-card); border: 1px solid var(--da-border2); border-radius: 10px; box-shadow: 0 16px 40px -10px rgba(0,0,0,.9);
  padding: 9px 13px 9px 10px; font-size: 10px; color: var(--da-text2); opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease 1.1s, transform .6s cubic-bezier(.2,.7,.2,1) 1.1s;
}
.hm-share.is-on .hm-toast{ opacity: 1; transform: none; }
.hm-toast b{ display: block; font-size: 11.5px; color: var(--da-text); font-weight: 600; }
.hm-av{ width: 24px; height: 24px; border-radius: 50%; background: #e0a458; color: #0a0a0c; font-style: normal; font-weight: 700; font-size: 10px; display: grid; place-items: center; flex: none; }

@media (max-width: 880px){
  .wf-home .da-dragfile{ right: 88px; top: 80px; }
  .wf-home .wf-step{ scroll-margin-top: calc(var(--wf-top) + clamp(370px, 56svh, 540px) - 18svh); }
  .wf-home .wf-step:last-child{ scroll-margin-top: calc(var(--wf-top) + clamp(370px, 56svh, 540px) - 26svh); }
  .wf-home .da-an .da-an-top, .wf-home .da-an .da-capline, .wf-home .da-an .da-sb:not(.hm-focus){ display: none; }
  .wf-home .da-map{ height: 48px; }
  .wf-home .da-ex .da-card2{ display: none; }
  .wf-home .da-tl{ margin-top: 12px; }
  .wf-home .da-tracks{ height: 72px; }
  .wf-home .hm-lead{ display: none; }
  .wf-home .hm-sh-sync, .wf-home .hm-sh-tabs, .wf-home .hm-ph{ display: none; }
  .wf-home .da-bar > .da-swap{ display: none; }
  .wf-home .hm-st-sub, .wf-home .hm-st-tabs{ display: none; }
  .wf-home .hm-style{ padding: 10px 12px 8px; }
  .wf-home .da-proj-h .da-btn2{ display: none; }
  .hm-lib{ grid-template-columns: 1fr; }
  .hm-lib .hm-clip:nth-child(n+3){ display: none; }
  .hm-lib .hm-clip p{ display: none; }
  .hm-paint{ margin-bottom: 7px; }
  .hm-st-card span:last-child, .hm-st-tools .da-btn2{ display: none; }
  .hm-st-grid div:nth-child(n+3){ display: none; }
  .hm-browser{ left: 3%; right: 3%; top: 3%; bottom: 17%; }
  .hm-ph-r .da-btn:first-child, .hm-brand small{ display: none; }
  .hm-url{ padding: 2px 16px; }
  .hm-toast{ left: 10px; right: 10px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce){
  .wf-home .hm-focus, .wf-home .hm-new{ animation: none !important; }
  .hm-paint mark, .hm-toast{ transition-duration: .01s; transition-delay: 0s; }
}

/* Share is Studio only: said in the step label, the HUD, the header and the caption */
.wf-tier{
  display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(167,139,250,.55);
  color: #c4b5fd; background: rgba(167,139,250,.1); letter-spacing: .16em;
}
.wf-step .wf-tier-line{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-soft); }
.wf-step .wf-tier-line a{ color: var(--accent-bright); }
.hm-hud-r{ justify-items: end; }
.wf-studio{ display: inline-flex; align-items: center; gap: 8px; color: #c4b5fd; white-space: nowrap; }
.wf-studio::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.2); }
.hm-studio{ color: #c4b5fd; border-color: rgba(167,139,250,.5); }
.hm-sharebtn{ display: inline-flex; align-items: center; gap: 5px; }
.hm-sharebtn .da-dot{ width: 6px; height: 6px; color: var(--da-green); }
.da-bar-r .da-swap + .da-pill, .da-bar-r .hm-sharebtn{ flex: none; }
.wf-home:not([data-step="4"]) .hm-sharebtn{ display: none; }
.wf-step .patent-tag{ margin-left: 0; }

/* the collaborator's select: in the library from step 05, with her name on it */
.hm-lib .hm-clip{ transition: opacity .45s ease; }
.wf-home[data-step="2"] .hm-lib .hm-jess{ opacity: 0; }
.da-cl-bar .hm-count{ display: inline-grid; }
.hm-pill{ margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 8px; color: var(--da-text); padding: 1px 6px 1px 2px; border-radius: 999px; background: rgba(224,164,88,.14); border: 1px solid rgba(224,164,88,.4); }
.hm-pill i{ width: 14px; height: 14px; border-radius: 50%; background: #e0a458; color: #0a0a0c; font-style: normal; font-weight: 700; font-size: 6px; letter-spacing: -.02em; display: grid; place-items: center; }

/* short phones: trim long lines so the cards and the toast never collide */
@media (max-width: 880px) and (max-height: 720px){
  .wf-home .hm-share .da-pt{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .wf-home .hm-paint .da-pt{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hm-lib .hm-clip .hm-meta{ display: none; }
}