/* =============================================================================
   GOAL (section 2)  |  "Your first 1,000,000 views" title and the tabbed graphics panel.
   HTML: index.html -> <!-- SECTION: GOAL -->     JS: js/goal.js
   Edit only this file when you want to change how goal looks.
   ============================================================================= */

.mil{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){
  .mil{grid-template-columns:1fr 1.1fr;gap:3.5rem}
}
.st-text{font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.15;letter-spacing:-.03em;font-weight:400;margin-bottom:.9rem}
.st-text b{font-weight:800}
.st-text i{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:var(--muted)}
.mnum{display:inline-block;min-width:4.9em;color:var(--green);font-weight:800;font-variant-numeric:tabular-nums}
.mil-l p{color:var(--muted);max-width:44ch;margin:0 0 1.4rem}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.num{display:block;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.cap{margin:0;color:var(--muted);font-size:.92rem;border-top:1.5px solid rgba(10,10,10,.12);padding-top:.8rem}
[data-theme=dark] .cap{border-top-color:rgba(255,255,255,.14)}
.ig-h{display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
.ig-t{font-weight:700;letter-spacing:.02em}
.ig-d{color:var(--muted)}
.up{color:var(--green-d);font-weight:600;margin-left:.35rem}
.ig-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.ig-top>div:last-child{text-align:right}
.n2{font-size:clamp(1.5rem,3.2vw,2rem)}
.ig-row{display:grid;grid-template-columns:104px 1fr;gap:1rem;align-items:center}
.dw{position:relative;width:104px;height:104px}
.donut{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:12}
.dtr{stroke:rgba(127,127,127,.2)}
.dn1,.dn2{stroke-dasharray:0 100;transition:stroke-dasharray 1.4s var(--ease) .3s}
.dn1{stroke:var(--green)}
.dn2{stroke:var(--muted);stroke-dashoffset:-58}
.gfx.on .dn1{stroke-dasharray:58 100}
.gfx.on .dn2{stroke-dasharray:41 100}
.dc{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-weight:800;font-size:1.15rem;line-height:1.1}
.dc em{font-style:normal;font-size:.62rem;color:var(--muted);font-weight:500}
.ages{display:grid;gap:.55rem}
.age{display:grid;grid-template-columns:44px 1fr 32px;gap:.5rem;align-items:center;font-size:.76rem;color:var(--muted)}
.age em{font-style:normal}
.age span{height:8px;border-radius:99px;background:rgba(127,127,127,.2);overflow:hidden}
.age span i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b4de72,var(--green));border-radius:inherit;transition:width 1.2s var(--ease) .4s}
.gfx.on .age span i{width:var(--w)}
.age b{color:var(--ink);font-weight:600;text-align:right}
.tl2{position:relative;display:grid;gap:6px}
.ruler,.trk{display:grid;grid-template-columns:52px 1fr;gap:6px;align-items:center}
.ruler div{display:flex;justify-content:space-between;font-size:.62rem;color:var(--muted);font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(127,127,127,.25);padding-bottom:3px}
.tn{font-size:.58rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;line-height:1.15}
.lane{position:relative;height:32px;border-radius:8px;background:rgba(127,127,127,.1)}
.clip{position:absolute;left:var(--l);width:var(--w);top:2px;bottom:2px;border-radius:7px;display:flex;align-items:center;padding:0 .5rem;font-size:.66rem;font-weight:600;white-space:nowrap;overflow:hidden;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);transition-delay:calc(var(--i,0)*100ms + .2s)}
.gfx.on .clip{transform:none}
.c-head{background:linear-gradient(180deg,#d9f0b3,#a9d868);color:#0a0a0a}
.c-hook{background:linear-gradient(180deg,#8ec641,#6fa52a);color:#0a0a0a}
.c-shot{background:linear-gradient(180deg,#fff,#dfe3ea);color:#0a0a0a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.c-vid{background:rgba(127,127,127,.28);color:var(--ink)}
.c-aud{background:rgba(142,198,65,.22);box-shadow:inset 0 0 0 1px rgba(142,198,65,.5);color:var(--green);padding:0}
.c-snd{background:rgba(127,127,127,.22);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(127,127,127,.3)}
.wave{display:flex;align-items:center;gap:2px;width:100%;height:100%;padding:0 6px}
.wave i{flex:1;min-width:1px;background:currentColor;border-radius:2px;opacity:.75}
.ph{position:absolute;top:16px;bottom:0;left:58px;right:0;pointer-events:none}
.ph i{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--ink);border-radius:2px;opacity:0}
.ph i::before{content:"";position:absolute;top:-2px;left:-4px;width:10px;height:8px;background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}
.gfx.on .ph i{opacity:1;animation:scrub 7s linear infinite}
@keyframes scrub{to{left:100%}}
.tc{font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .ig-row{grid-template-columns:92px 1fr}
  .dw{width:92px;height:92px}
  .lane{height:30px}
}
.st-text b,.mnum,.num,.dc{font-weight:700}
.st-text i{font-family:inherit;font-style:italic;font-weight:500}

/* ----- right-hand graphics panel: all three graphics sit in the same box, so the box is always as tall as the tallest one (no gaps, no cut-offs) ----- */
.mil-r{display:grid;overflow:hidden}
.gfx{grid-area:1/1;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.2rem,3vw,2rem);visibility:hidden;opacity:0;transform:translateY(18px) scale(.98);pointer-events:none;transition:opacity .5s,transform .6s var(--ease),visibility 0s .5s}
.gfx.on{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
.gbody{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1.2rem;min-height:0}
.gbody.gclip{overflow:hidden;padding:2px}
.ig-d{position:relative;min-width:9.5rem;text-align:right}

/* ----- posting calendar: starts zoomed in on 28 days, zooms out to a full 12-month year ----- */
.yr{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem .9rem;transform-origin:0 0}
.mo b{display:block;margin-bottom:.25rem;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mo div{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mo i{aspect-ratio:1;border-radius:2px;background:var(--c,var(--green))}
.mo i:nth-child(4n){--c:#bfe38a}
.mo i:nth-child(7n){--c:var(--green-d)}
.gfx.on .yr{animation:zoomOut 2.4s var(--ease) both}
.gfx.on .mo i{animation:dayOn .35s ease both;animation-delay:calc(var(--k)*30ms)}
.gfx.on .mo:not(:first-child){animation:moIn .6s ease both;animation-delay:calc(1s + var(--m)*70ms)}
.gfx.on .mo:not(:first-child) i{animation-delay:calc(1.1s + var(--m)*70ms + var(--k)*18ms)}
.l2{position:absolute;right:0;opacity:0}
.gfx.on .l1{animation:fadeOut .4s 1.9s both}
.gfx.on .l2{animation:fadeIn .5s 2.2s both}
@keyframes zoomOut{0%,36%{transform:scale(3.3)}100%{transform:scale(1)}}
@keyframes dayOn{from{background:rgba(127,127,127,.2);transform:scale(.4)}}
@keyframes moIn{from{opacity:0;transform:scale(.9)}}
@keyframes fadeOut{to{opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.yr{grid-template-columns:repeat(4,1fr);gap:.8rem .6rem}@keyframes zoomOut{0%,36%{transform:scale(2.6)}100%{transform:scale(1)}}}