/* 문의 한 통의 여정 — home-flow.html 첫 화면. automation.css 의 사진·화면 합성(.scene .cam .screen …)을 그대로 쓴다.
   막 1은 종이(손님 화면), 걷히면 작업대. 큰 글자가 이야기를 끌고 간다. */
.flow-hero{position:relative;height:340vh;background:var(--wood)}
.fh-pin{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;background:var(--wood)}
.flow-hero.buzz .ripple i{animation:ring 1.5s cubic-bezier(.2,.6,.3,1) forwards}
.flow-hero.buzz .ripple i:nth-child(2){animation-delay:.18s}.flow-hero.buzz .ripple i:nth-child(3){animation-delay:.36s}

/* 막 1: 손님 화면 */
.fh-sheet{position:absolute;inset:0;z-index:3;background:var(--paper);clip-path:inset(0 0 calc(var(--reveal,0) * 100%) 0)}
.fh-inner{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(18px,3vh,32px);padding:clamp(88px,12vh,112px) clamp(20px,5vw,72px) clamp(20px,3.4vh,36px)}
.fh-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:40px}
.fh-kicker{grid-column:1/-1;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--seal);margin-bottom:14px}
.fh-head h1{font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.6vw,56px);line-height:1.14;letter-spacing:-.045em}
/* 손님 화면: 가게 홈페이지 견적 칸 */
.fh-card{align-self:center;background:var(--sheet);border:1.5px solid var(--ink);box-shadow:0 1px 1px rgba(0,0,0,.06),0 28px 50px -30px rgba(40,30,15,.5)}
.fh-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1.5px solid var(--ink);font-family:var(--mono);font-size:12px;color:var(--ink2)}
.fh-bar em{font-style:normal;opacity:.8}
.fh-bar b{margin-left:auto;padding:1px 8px;border:1.5px solid var(--seal);color:var(--seal);font-weight:600}
.dots{display:inline-flex;gap:5px}.dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink2)}
.fh-who{padding:clamp(16px,2.6vh,26px) clamp(18px,2.6vw,36px) 0;font-size:13px;font-weight:600;color:var(--ink2)}
.said{padding:6px clamp(18px,2.6vw,36px) 0;font-family:var(--serif);font-weight:900;font-size:clamp(38px,5.4vw,96px);line-height:1.14;letter-spacing:-.055em;color:var(--ink)}
.caret{display:inline-block;width:.06em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:var(--seal);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.fh-act{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(14px,2.4vh,26px);padding:12px clamp(18px,2.6vw,36px);border-top:1px solid var(--hair)}
.fh-act p{font-size:13.5px;color:var(--ink2)}
.fh-send{flex:none;display:inline-flex;gap:10px;align-items:center;background:var(--ink);color:var(--paper);font-weight:700;font-size:15px;padding:12px 18px;transition:background .2s}
.fh-send:hover{background:var(--seal)}
.fh-hint{justify-self:end;font-family:var(--mono);font-size:12px;color:var(--ink2)}
/* 첫 방문: 손님이 문장을 쳐 넣는 것처럼 한 글자씩 */
.typing .said .ch,.typing .said .word,.typing .said .js{opacity:0;animation:type-on .01s steps(1) forwards;animation-delay:calc(var(--i) * 45ms + 500ms)}
@keyframes type-on{to{opacity:1}}
.said .ln{display:block}
.said .nb{white-space:nowrap}
.word{display:inline-grid;vertical-align:baseline;overflow:hidden;font:inherit;letter-spacing:inherit;color:var(--seal);background:none;border:0;padding:0 .02em;cursor:pointer;
  background-image:linear-gradient(currentColor,currentColor);background-size:100% .07em;background-position:0 92%;background-repeat:no-repeat;transition:opacity .2s}
.word i{grid-area:1/1;font-style:normal;white-space:nowrap}
.word:hover,.word:focus-visible{outline:none;color:var(--ink);background-color:rgba(194,54,31,.08)}
.word i.in{animation:word-in .42s cubic-bezier(.2,.7,.2,1) both}
.word i.out{animation:word-out .42s cubic-bezier(.5,0,.8,.3) both}
.word.gone{opacity:0}
@keyframes word-in{from{transform:translateY(90%);opacity:0}to{transform:none;opacity:1}}
@keyframes word-out{from{transform:none;opacity:1}to{transform:translateY(-90%);opacity:0}}

/* 날아가는 말: 알림 속으로 들어가며 작아진다 */
.fh-fly{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;white-space:nowrap;font-family:var(--serif);font-weight:900;letter-spacing:-.05em;line-height:1.1;color:var(--seal);
  padding:.02em .18em;background:var(--sheet);box-shadow:0 .2em .6em rgba(0,0,0,.25);transform-origin:50% 50%}

/* 막 2·3: 작업대 위 큰 글자 */
.fh-big{position:absolute;z-index:2;color:var(--cream);font-family:var(--serif);font-weight:900;letter-spacing:-.05em;line-height:1.08;text-shadow:0 2px 28px rgba(0,0,0,.45);pointer-events:none}
.fh-b2{left:clamp(20px,5vw,84px);top:50%;font-size:clamp(44px,6.2vw,104px);opacity:var(--b2,0);transform:translateY(calc(-50% + (1 - var(--b2,0)) * 28px))}
.fh-b2 small{display:block;margin-top:22px;font-family:Pretendard,sans-serif;font-weight:600;font-size:clamp(15px,1.25vw,19px);letter-spacing:-.01em;color:var(--tan);text-shadow:none}
.fh-b3l,.fh-b3r{top:50%;font-size:clamp(34px,4vw,66px);opacity:var(--b3,0)}
.fh-b3l{left:clamp(20px,5vw,84px);transform:translate(calc((1 - var(--b3,0)) * -24px),-50%)}
.fh-b3r{right:clamp(20px,5vw,84px);text-align:right;transform:translate(calc((1 - var(--b3,0)) * 24px),-50%)}
.fh-end{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);z-index:4;color:var(--cream);font-family:var(--mono);font-size:13px;letter-spacing:.04em;white-space:nowrap;opacity:var(--endcap,0);pointer-events:none;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.fh-end.on{pointer-events:auto}
.flow-hero .photo-tag{opacity:calc(1 - var(--lift,0))}

/* 모션 감소: 고정 없이 막 1만 */
.flow-hero.still{height:100vh}
.flow-hero.still .fh-fly{display:none}

@media (max-width:700px){
  .fh-inner{padding:84px 16px 16px;gap:18px;grid-template-rows:auto auto;align-content:center}
  .fh-head{display:block}
  .fh-kicker{margin-bottom:8px;font-size:11px}
  .fh-head h1{font-size:clamp(24px,7.4vw,32px)}
  .fh-bar{padding:8px 12px;gap:8px;font-size:10.5px}
  .dots{display:none}
  .fh-bar{flex-wrap:wrap;row-gap:4px}
  .fh-who{padding:14px 16px 0;font-size:12px}
  .said{padding:4px 16px 0;font-size:clamp(30px,9.6vw,44px);line-height:1.16}
  .fh-act{padding:10px 16px;margin-top:12px}
  .fh-act p{font-size:12px}
  .fh-send{font-size:14px;padding:10px 14px}
  .fh-hint{display:none}
  .fh-b2{top:88px;font-size:clamp(34px,10vw,46px);transform:translateY(calc((1 - var(--b2,0)) * 20px))}
  .fh-b2 small{margin-top:12px}
  .fh-end{white-space:normal;width:84%;text-align:center}
  .fh-b3l,.fh-b3r{top:auto;bottom:calc(5vh + 34px);font-size:clamp(22px,7vw,30px);line-height:1.15}
  .fh-b3l{left:20px;transform:translateY(calc((1 - var(--b3,0)) * 16px))}
  .fh-b3r{right:20px;transform:translateY(calc((1 - var(--b3,0)) * 16px))}
}