/* Version 5 · the organic church. The main: a printed persimmon tree revealed once from the roots up, with the
   INPUT -> OUTPUT stream rising beside it and each pair of values arriving at its height. */
/* ---------- the main ---------- */
.v5h{min-height:min(820px,100svh);display:flex;align-items:center;padding:120px 0 80px}
.v5h>.wrap{width:100%}
.v5h-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.v5h-copy{display:flex;flex-direction:column;gap:24px}
.v5h-title{margin:0;font-size:clamp(48px,6.4vw,96px);line-height:1.04}
.v5h-info{margin:0;display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:20px}.v5h-info span{font-weight:500;opacity:.75}
@media (max-width:860px){
  .v5h{padding:100px 0 60px;min-height:0}
  .v5h-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the main: INPUT -> OUTPUT rising through the printed tree ---------- */
.v5h-main{background:var(--green);color:var(--linen)}
.v5h-main .v5h-grid{grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,4vw,64px)}
.v5h-main .v5h-title{font-size:clamp(50px,4.9vw,74px)}.v5h-main .v5h-title [lang="en"]{font-size:.92em}
.v5h-plant{position:relative;display:grid;grid-template-columns:auto 230px;gap:0 22px;align-items:stretch}
/* the tree stands straight on the page, no frame; only a soft patch of ground glows under its roots */
.v5h-print{position:relative;margin:0;height:min(72vh,660px);aspect-ratio:598/818}
.v5h-print::before{content:"";position:absolute;left:-18%;right:-18%;bottom:-4%;height:20%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(138,151,132,.38),rgba(138,151,132,0));filter:blur(6px)}
.v5h-print picture,.v5h-print img{position:relative;display:block;width:100%;height:100%}
.v5h-rise{position:relative}
.v5h-rise svg{position:absolute;left:0;top:0;width:10px;height:100%;overflow:visible}
.v5h-rise path{fill:none;stroke:var(--persimmon);stroke-width:3;vector-effect:non-scaling-stroke}
.v5h-rise ol{list-style:none;margin:0;padding:0}
.v5h-rise li{position:absolute;left:24px;right:0;top:var(--top);translate:0 -50%;display:flex;flex-direction:column;gap:4px}
.v5h-rise li::before{content:"";position:absolute;left:-24px;top:50%;width:14px;height:14px;margin:-7px 0 0 -2px;border-radius:50%;background:var(--persimmon)}
.v5h-rise b{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.v5h-rise b a{color:inherit;text-decoration:none}.v5h-rise b a:hover{text-decoration:underline;text-underline-offset:4px}
.v5h-rise b [lang="en"]{font-family:var(--tall);text-transform:uppercase}
.v5h-pos{font-family:var(--tall);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--persimmon)}
/* once: the tree grows part by part (roots down, trunk up, branches out, then leaves, then fruit) while the stream rises
   beside it and each stage arrives with its part; at the end the whole picture is laid over the parts, so it ends as drawn */
.v5h-grow .tl,.v5h-grow .tl-full{position:absolute;inset:0}
.v5h-grow .tl-full img{width:100%;height:100%}
.v5a .v5h-main .tl-roots{clip-path:inset(0 0 100% 0)}
.v5a .v5h-main .tl-trunk,.v5a .v5h-main .tl-branches{clip-path:inset(100% 0 0 0)}
.v5a .v5h-main .tl-leaves{opacity:0;scale:.94;transform-origin:50% 40%}
.v5a .v5h-main .tl-fruit{opacity:0;scale:.9;transform-origin:50% 40%}
.v5a .v5h-main .tl-full{opacity:0}
.v5a .v5h-main.in .tl-roots{clip-path:inset(0);transition:clip-path .7s cubic-bezier(.45,0,.2,1) .1s}
.v5a .v5h-main.in .tl-trunk{clip-path:inset(0);transition:clip-path .7s cubic-bezier(.45,0,.2,1) .7s}
.v5a .v5h-main.in .tl-branches{clip-path:inset(0);transition:clip-path .75s cubic-bezier(.45,0,.2,1) 1.3s}
.v5a .v5h-main.in .tl-leaves{opacity:1;scale:1;transition:opacity .7s ease 1.9s,scale .9s var(--ease) 1.9s}
.v5a .v5h-main.in .tl-fruit{opacity:1;scale:1;transition:opacity .5s ease 2.45s,scale .7s cubic-bezier(.3,1.5,.5,1) 2.45s}
.v5a .v5h-main.in .tl-full{opacity:1;transition:opacity .5s ease 3.1s}
/* the stream is one solid line, shown from the bottom up (a dashed stroke breaks into pieces in some browsers, e.g. Safari) */
.v5a .v5h-main .v5h-rise svg{clip-path:inset(100% 0 0 0)}
.v5a .v5h-main.in .v5h-rise svg{clip-path:inset(0);transition:clip-path 2.6s cubic-bezier(.45,0,.2,1) .1s}
.v5a .v5h-main .v5h-rise li{opacity:0;translate:0 calc(-50% + 10px)}
.v5a .v5h-main.in .v5h-rise li{opacity:1;translate:0 -50%;transition:opacity .45s ease var(--at),translate .6s var(--ease) var(--at)}
/* each stage is pointed out as its part grows: a soft persimmon glow behind the label, and its dot (or bar) pulses once */
.v5h-rise li::after{content:"";position:absolute;inset:-8px -14px -8px -12px;border-radius:6px;background:rgba(244,166,106,.24);opacity:0;pointer-events:none;z-index:-1}
.v5a .v5h-main.in .v5h-rise li::after{animation:stage-glow 1.4s ease var(--at) both}
.v5a .v5h-main.in .v5h-rise li::before{animation:stage-dot .8s cubic-bezier(.3,1.6,.5,1) var(--at) both}
@keyframes stage-glow{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes stage-dot{0%{scale:.2}55%{scale:1.9}100%{scale:1}}
@media (max-width:1100px){.v5h-main .v5h-grid{grid-template-columns:minmax(0,1fr)}.v5h-plant{justify-self:start}}
/* phones: the stages stay beside the tree (each at the height of its part), only smaller */
@media (max-width:640px){
  .v5h-plant{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 8px;width:100%}
  .v5h-print{height:auto;width:100%}
  .v5h-rise li{left:16px;gap:2px}
  .v5h-rise li::before{left:-16px;width:10px;height:10px;margin:-5px 0 0 -1px}
  .v5h-rise li::after{inset:-5px -6px -5px -8px}
  .v5h-rise b{font-size:15px;line-height:1.2}
  .v5h-pos{font-size:11px;letter-spacing:.03em}
}
@media (prefers-reduced-motion: reduce){
  .v5a .v5h-main .tl{clip-path:none;opacity:1;scale:1}.v5a .v5h-main .tl-full{opacity:1}.v5a .v5h-main .v5h-rise svg{clip-path:none}.v5a .v5h-main.in .v5h-rise li::after,.v5a .v5h-main.in .v5h-rise li::before{animation:none}.v5a .v5h-main .v5h-rise li{opacity:1;translate:0 -50%}
}
.v5h-rise li{isolation:isolate}

/* 핵심가치: the tree alone, centered, under the page's title */
.v5h-solo{min-height:0;padding:clamp(56px,7vw,90px) 0}.v5h-main.v5h-solo .v5h-grid{grid-template-columns:auto;justify-content:center}
.v5h-values{min-height:0;padding:clamp(56px,7vw,96px) 0}.v5h-values .v5h-copy{gap:18px}.v5h-values .v5h-copy h2{margin:0;font-size:clamp(34px,3.4vw,50px);line-height:1.2}