/* First-visit intro, one CSS timeline (about 19.8s), each line held long enough to read.
   The story is one chain: 80만 원 → 설계 → 시스템 → 1인 기업 → 돈 → 그 노하우를 여러분께도 → 진짜 AI 영업비밀, 와서 들으세요.
   It carries no brand, date or place, so the same intro keeps working after the event.
   One fine ink drawing carries it, with lime only as the halo behind each point: 나 and the work it
   connects, the same work running as a system, the system re-formed as an org chart, a curve rising
   under it, then the whole drawing passed across to a dashed copy that firms up for the viewer.
   0.2s   "매달 80만 원 / AI에 씁니다."   2.35s "왜냐고요?"
   4.3s   lines are drawn out from 나 over dotted guides: "AI로 일을 설계하니까요."
   6.7s   a ring closes, its dial turns and signals run: "설계는 시스템이 됩니다."
   9s     the points re-form as an org chart: "시스템이 있으면 1인 기업이 될 수 있습니다."
   11.4s  the chart steps up and a curve rises: "그리고, 돈이 벌립니다."
   13.6s  the drawing steps aside, an arc passes it on and the dashed copy firms up:
          "그 노하우를 여러분께도 공유합니다."
   16.1s  both drawings leave for a seminar room: a microphone, rows of chairs, a light on the front seat:
          "검색해도 안 나오는 진짜 AI 영업비밀" and, in sans, "와서 들으세요"
   19.3s  the scene leaves, 19.65s the page rises in.
   The overlay paper matches the page paper, so the hand-off needs no cross-fade. */
html.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: block;
  overflow: hidden;
  cursor: pointer;
  animation: intro-hide 19.75s step-end both;
  -webkit-tap-highlight-color: transparent;
}

html.intro-leaving .intro {
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease;
}

.intro-paper {
  position: absolute;
  inset: 0;
  background: #d0d2c6;
  animation: intro-hide 19.65s step-end both;
}

.intro-paper::before {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(100%, 400px);
  background-color: var(--paper);
  background-image: linear-gradient(#eeece4bc, #eeece4bc), url("assets/magazine-paper-v1.webp");
  background-size: auto, 320px;
  content: "";
  transform: translateX(-50%);
}

.intro-page {
  position: relative;
  width: min(100%, 400px);
  height: 100%;
  margin-inline: auto;
}

.intro-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: 24px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* Every text row rises out of its own mask; --at is the moment it enters. */
.intro .row {
  display: block;
  overflow: hidden;
}

.intro .row > span {
  display: inline-block;
  transform: translateY(110%);
  animation: line-rise .55s var(--ease-out) var(--at) forwards;
}

.intro-num, .intro-mark {
  background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 88% / 0% var(--mark-h, 7px);
  animation: mark-wipe .4s var(--ease-out) var(--at) forwards;
}

/* 1. The number, then the question. */
.intro-card {
  grid-area: 1 / 1;
  margin: 0;
  animation: line-out .28s var(--ease-in-out) 4.1s forwards;
}

.card-month { --at: .2s; color: var(--muted); font-size: 22px; font-weight: 500; letter-spacing: -.5px; }
.card-sum { --at: .35s; font-size: 64px; line-height: 1.22; letter-spacing: -3px; }
.card-use { --at: 1.1s; font-size: 27px; line-height: 1.5; letter-spacing: -1px; }
.card-why { --at: 2.35s; margin-top: 26px; font-size: 32px; line-height: 1.4; letter-spacing: -1.2px; }
.intro-num { --at: 1.2s; --mark-h: 10px; }

/* Odometer: the hidden "80" keeps the width and baseline, the digit strips roll over it. */
.odo {
  position: relative;
  display: inline-block;
  line-height: 1.42;
  font-variant-numeric: tabular-nums;
  clip-path: inset(.17em 0 .2em);
}

.odo-ghost { visibility: hidden; }

.odo-col {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  animation: odo-roll .8s cubic-bezier(.2, .7, .2, 1) .45s forwards;
}

.odo-col.d1 { --roll: -11.36em; }
.odo-col.d2 { --roll: -14.2em; left: 50%; animation-duration: .95s; }

.odo-col i {
  display: block;
  height: 1.42em;
  font-style: normal;
}

/* 2. The drawing, with the lines above it. */
.intro-scene {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  animation: intro-in .3s ease 4.2s both, scene-out .45s ease 19.3s forwards;
}

.intro-lines {
  position: relative;
  width: 100%;
  height: 84px;
}

.intro-line {
  --at: var(--t);
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  font-size: clamp(22px, calc((min(100vw, 400px) - 48px) / 12.2), 27px);
  line-height: 1.42;
  letter-spacing: -1px;
  animation: line-out .25s var(--ease-in-out) var(--end) forwards;
}

.intro-line .row + .row { --at: calc(var(--t) + .2s); }
.intro-mark { --at: calc(var(--t) + .75s); }
.l1 { --t: 4.3s; --end: 6.55s; }
.l2 { --t: 6.7s; --end: 8.85s; }
.l3 { --t: 9s; --end: 11.25s; }
.l4 { --t: 11.4s; --end: 13.45s; }
.l5 { --t: 13.6s; --end: 15.95s; }
.l6 { --t: 16.1s; --end: 99s; }
/* The closing line ends on the invitation, set apart in the page's sans. That third row grows
   upward out of the 84px box. */
.intro-line .row.intro-call { --at: calc(var(--t) + .7s); margin-top: 6px; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 1.12em; font-weight: 800; line-height: 1.5; letter-spacing: -.8px; }

/* The square never grows taller than the screen allows. */
.intro-net {
  width: min(100%, 340px, calc(100vh - 268px));
  height: auto;
  overflow: visible;
  text-anchor: middle;
}

@supports (height: 1dvh) {
  .intro-net { width: min(100%, 340px, calc(100dvh - 268px)); }
}

.f-lime { fill: var(--lime); }
.f-ink { fill: var(--ink); }

/* Plain outlines keep their width while the drawing is scaled down later. Lines that are drawn with
   a dash cannot (it breaks the dash), so they are thickened as the drawing shrinks instead. */
.ghost, .gain-ticks {
  vector-effect: non-scaling-stroke;
}

/* --ox/--oy: a point's own centre. --dx/--dy: from 나 out to it. --mx/--my: its move into the org chart. */
.n1 { --i: 0; --ox: 160px; --oy: 48px; --dx: 0px; --dy: -112px; --mx: 0px; --my: 102px; }
.n2 { --i: 1; --ox: 257px; --oy: 104px; --dx: 97px; --dy: -56px; --mx: -1px; --my: 46px; }
.n3 { --i: 2; --ox: 257px; --oy: 216px; --dx: 97px; --dy: 56px; --mx: -1px; --my: 32px; }
.n4 { --i: 3; --ox: 160px; --oy: 272px; --dx: 0px; --dy: 112px; --mx: 0px; --my: -24px; }
.n5 { --i: 4; --ox: 63px; --oy: 216px; --dx: -97px; --dy: 56px; --mx: 1px; --my: 32px; }
.n6 { --i: 5; --ox: 63px; --oy: 104px; --dx: -97px; --dy: -56px; --mx: 1px; --my: 46px; }

/* 설계: over dotted guides, lines are drawn out from 나 and a point lands on each. */
.guide {
  fill: none;
  stroke: var(--muted);
  stroke-width: .8;
  stroke-linecap: round;
  stroke-dasharray: 1 5;
  opacity: .7;
  animation: intro-in .6s ease 4.4s both, intro-out .25s ease 9s forwards;
}

.sp, .org, .pass {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.sp { animation: net-draw .4s var(--ease-in-out) calc(4.5s + var(--i) * .1s) forwards, intro-out .25s ease 9s forwards; }

/* A point is an ink dot on a lime halo. The halo answers when the system starts and when the money comes. */
.halo, .nd { transform-origin: var(--ox) var(--oy); }

.halo {
  fill: var(--lime);
  animation: net-pop .4s cubic-bezier(.34, 1.56, .64, 1) calc(4.72s + var(--i) * .1s) both, nd-live .75s ease calc(7.68s + var(--i) * .09s) 2, nd-blink .5s ease calc(11.55s + var(--i) * .07s), nd-big .7s var(--ease-in-out) 13.6s forwards;
}

.nd {
  fill: var(--ink);
  animation: net-pop .3s var(--ease-out) calc(4.8s + var(--i) * .1s) both, nd-big .7s var(--ease-in-out) 13.6s forwards;
}

.me-halo, .me-dot { transform-origin: 160px 160px; }
.me-halo { fill: var(--lime); animation: net-pop .5s var(--ease-out) 4.35s both; }
.me-dot { fill: var(--ink); animation: net-pop .4s cubic-bezier(.34, 1.56, .64, 1) 4.25s both; }

/* Too small to read once the drawing steps aside; the tag under it takes over. */
.me-text {
  fill: var(--paper);
  font-size: 13.5px;
  animation: intro-in .3s ease 4.4s both, intro-out .3s ease 13.6s forwards;
}

/* 시스템: a ring closes around the points, its dial turns, and a signal runs out along every line, twice. */
.net-band, .net-ring {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: net-draw 1s var(--ease-in-out) 6.85s forwards, intro-out .25s ease 9s forwards;
}

.net-band { stroke: var(--lime); stroke-width: 11; opacity: .75; }
.net-ring { stroke: var(--ink); stroke-width: 1; }

.net-ticks {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-dasharray: .8 12.5;
  opacity: .42;
  transform-origin: 160px 160px;
  animation: intro-in .5s ease 7.45s both, ticks-turn 2.4s linear 7s both, intro-out .25s ease 9s forwards;
}

.pulse {
  fill: var(--ink);
  opacity: 0;
  animation: pulse-out .75s ease-in-out calc(7.1s + var(--i) * .09s) 2;
}

/* 1인 기업: 나 goes to the top, the points fall into two rows, the reporting lines are drawn. */
.net-node { animation: node-move .8s var(--ease-in-out) 9.1s forwards; }
.net-me { --mx: 0px; --my: -108px; animation: node-move .8s var(--ease-in-out) 9.1s forwards; }
.org { animation: net-draw .26s var(--ease-in-out) var(--at) forwards, line-mid .6s var(--ease-in-out) 11.4s forwards, line-small .7s var(--ease-in-out) 13.6s forwards; }
.o1 { --at: 9.75s; }
.o2 { --at: 9.93s; }
.o3 { --at: 10.13s; }
.o4 { --at: 10.29s; }

/* 돈: the chart steps up to make room and a curve rises under it, the one heavier line in the drawing. */
.sys {
  transform-origin: 160px 35px;
  animation: sys-up .6s var(--ease-in-out) 11.4s forwards;
}

.gain-base, .gain-line {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.gain-base { stroke-width: .9; animation: net-draw .5s var(--ease-in-out) 11.75s forwards, base-small .7s var(--ease-in-out) 13.6s forwards; }
.gain-ticks { fill: none; stroke: var(--ink); stroke-width: .8; animation: intro-in .4s ease 12.1s both; }
.gain-line { stroke-width: 2; animation: net-draw .95s var(--ease-in-out) 12s forwards, curve-small .7s var(--ease-in-out) 13.6s forwards; }
.gain-area { animation: intro-in .6s ease 12.45s both; }
.gain-hatch { opacity: .8; animation: intro-in .6s ease 12.55s both; }
.gain-tip { transform-origin: 278px 214px; animation: net-pop .4s cubic-bezier(.34, 1.56, .64, 1) 12.88s both; }
.gain-won { fill: var(--ink); font-size: 19px; animation: gain-rise .5s var(--ease-out) 13s both; }

/* 공유: the finished drawing steps aside, an arc carries it across, and the dashed copy firms up
   into the same drawing for the viewer. */
.mine { animation: mine-aside .7s var(--ease-in-out) 13.6s forwards, intro-out .35s ease 16s forwards; }
.yours { --at: 15.17s; animation: intro-in .45s ease 14s both, intro-out .35s ease 16s forwards; }
.yours .b { --at: 15.29s; }

.pass { animation: net-draw .6s var(--ease-in-out) 14.5s forwards, intro-out .3s ease 16s forwards; }

.pass-tip {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: intro-in .2s ease 15.1s both, intro-out .3s ease 16s forwards;
}

/* Rides the tip of the arc: its centre is the centre of that arc. */
.pass-dot {
  transform-origin: 160px 149.56px;
  animation: pass-go .6s var(--ease-in-out) 14.5s both;
}

.ghost {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.1;
  stroke-dasharray: 3 4;
  animation: firm .55s var(--ease-in-out) 15.05s forwards;
}

.you-node { fill: var(--lime); fill-opacity: 0; animation: you-node .45s ease var(--at) forwards; }
.you-hub { fill: var(--ink); fill-opacity: 0; animation: you-hub .45s ease 15.05s forwards; }
.you-curve { animation: firm-curve .55s var(--ease-in-out) 15.25s forwards; }

.you-core, .you-halo {
  transform-box: fill-box;
  transform-origin: center;
}

.you-core { fill: var(--ink); animation: net-pop .3s var(--ease-out) calc(var(--at) + .1s) both; }
.you-halo { fill: var(--lime); animation: net-pop .5s var(--ease-out) 15.1s both; }

.yours .gain-ticks { animation-delay: 15.35s; }
.yours .gain-area { animation-delay: 15.5s; }
.yours .gain-hatch { animation-delay: 15.6s; }
.yours .gain-tip { animation-delay: 15.65s; }
.yours .gain-won { animation-delay: 15.7s; }

.tag {
  fill: var(--ink);
  font-size: 13px;
  letter-spacing: -.2px;
  animation: intro-in .4s ease 14.1s both, intro-out .3s ease 16s forwards;
}

/* 세미나: the two drawings leave for a seminar room in a few lines — a microphone that carries,
   rows of chairs facing it, and a light on the front seat. No label: the seat speaks for itself. */
.fin-line {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.fin-floor { stroke-width: .9; animation: net-draw .55s var(--ease-in-out) 16.25s forwards; }
.fin-stand { stroke-width: 1.2; animation: net-draw .5s var(--ease-in-out) 16.45s forwards; }

.fin-head, .chair {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fin-head { animation: intro-in .35s ease 16.85s both; }

.wave {
  fill: none;
  stroke: #9aa86f;
  stroke-width: 1.2;
  stroke-linecap: round;
  animation: intro-in .35s ease var(--at) both, wave-beat 1.1s ease-in-out calc(var(--at) + .45s) 2;
}

.w1 { --at: 17.05s; }
.w2 { --at: 17.2s; opacity: .65; }
.w3 { --at: 17.35s; opacity: .38; }

.chair { animation: chair-in .45s var(--ease-out) var(--at) both; }
.chair.far { opacity: .5; }
.c3 { --at: 17s; }
.c2 { --at: 17.15s; }
.c1 { --at: 17.3s; }
.fin-light { animation: intro-in .7s ease 17.6s both; }

.intro-foot {
  position: absolute;
  inset: auto 24px calc(24px + env(safe-area-inset-bottom));
  animation: intro-out .3s ease 19.3s forwards;
}

.intro-progress {
  display: block;
  height: 1px;
  margin-bottom: 30px;
  background: var(--ink);
  transform-origin: left;
  animation: intro-progress 19.3s linear both;
}

.intro-skip {
  position: absolute;
  right: max(24px, calc(50% - 176px));
  bottom: calc(8px + env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 10px 0 10px 18px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  animation: intro-out .3s ease 19.3s forwards;
}

/* The page itself arrives on the same sheet: title first, then the blocks below it. */
html.intro-on .sticky-cta { display: none; }
html.intro-on:not(.intro-leaving) main > * { animation: intro-rise .8s var(--ease-out) 19.95s both; }
html.intro-on:not(.intro-leaving) main > :nth-child(1) { animation-delay: 19.65s; }
html.intro-on:not(.intro-leaving) main > :nth-child(2) { animation-delay: 19.75s; }
html.intro-on:not(.intro-leaving) main > :nth-child(3) { animation-delay: 19.85s; }

@keyframes intro-hide { to { visibility: hidden; } }
@keyframes intro-in { from { opacity: 0; } }
@keyframes intro-out { to { opacity: 0; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes intro-progress { from { transform: scaleX(0); } }
@keyframes line-rise { to { transform: none; } }
@keyframes line-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes mark-wipe { to { background-size: 100% var(--mark-h, 7px); } }
@keyframes odo-roll { to { transform: translateY(var(--roll)); } }
@keyframes scene-out { to { opacity: 0; transform: translateY(-36px); } }
@keyframes net-draw { to { stroke-dashoffset: 0; } }
@keyframes net-pop { from { opacity: 0; transform: scale(0); } }
@keyframes nd-live { 0%, 60%, 100% { transform: none; } 30% { transform: scale(1.4); } }
@keyframes nd-blink { 50% { transform: scale(1.4); } }
/* Points grow as the drawing shrinks, so they stay readable at the smallest size. */
@keyframes nd-big { to { transform: scale(1.45); } }
@keyframes ticks-turn { to { transform: rotate(18deg); } }
@keyframes pulse-out { 0% { opacity: 0; transform: none; } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes node-move { to { transform: translate(var(--mx), var(--my)); } }
@keyframes sys-up { to { transform: scale(.72); } }
@keyframes gain-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes mine-aside { to { transform: translate(-14.9px, 61.7px) scale(.58); } }
@keyframes chair-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes wave-beat { 50% { opacity: .12; } }
/* Stroke widths that hold a line at 1px (curve 2px) on screen: base ÷ .72, then base ÷ (.72 × .58). */
@keyframes line-mid { to { stroke-width: 1.39; } }
@keyframes line-small { to { stroke-width: 2.39; } }
@keyframes base-small { to { stroke-width: 1.55; } }
@keyframes curve-small { to { stroke-width: 3.45; } }
@keyframes pass-go { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: rotate(93.54deg); } }
@keyframes firm { to { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 7 0; } }
@keyframes firm-curve { to { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 7 0; } }
@keyframes you-node { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes you-hub { to { fill-opacity: 1; stroke: var(--ink); stroke-dasharray: 7 0; } }

@media (min-width: 640px) {
  .intro-paper::before { top: 20px; }
}

@media (max-width: 350px) {
  .intro-core { padding-inline: 22px; }
  .intro-foot { inset-inline: 22px; }
  .card-sum { font-size: 56px; }
  .card-why { font-size: 28px; }
}