/* =========================================================================
   AXIOMAXS - "Ideas That Grow Businesses" project tree.
   Scroll-driven growing tree: roots glow, trunk + branches grow, leaves
   unfold and one apple ripens per project. Everything is scoped under
   .gt-grow so it never touches the rest of the site.
   Projects are edited in /js/project-tree.js (TREE_PROJECTS).
   ========================================================================= */
.gt-grow{font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;color:#1c2b36}
/* ---------- pinned scene ---------- */
.gt-grow{position:relative;height:500vh;background:#231409}
.gt-grow .stage{position:sticky;top:0;width:100%;height:100vh;height:100lvh;overflow:hidden;
  background:linear-gradient(#8cbde6 0%,#d7e5ea 55%,#f6e3bf 72%,#4a2e18 76%,#1f1209 100%)}
.gt-grow .layers{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.gt-grow .stage.ready .layers{opacity:1}
.gt-grow .layers canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.gt-grow .sky{position:absolute;inset:0;will-change:transform}
.gt-grow #gt-soil{will-change:transform}
.gt-grow #gt-roots{animation:gt-pulse 4.8s ease-in-out infinite}
@keyframes gt-pulse{0%,100%{opacity:1}50%{opacity:.88}}

/* drifting clouds (the only thing moving in the sky) */
.gt-grow .clouds{position:absolute;left:0;top:0;width:200%;display:flex;will-change:transform;animation:gt-drift var(--dur,200s) linear infinite}
.gt-grow .clouds canvas{position:static;flex:none;width:50%;height:100%}
.gt-grow .clouds--far{height:62%;opacity:.9}
.gt-grow .clouds--near{height:42%}
@keyframes gt-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.gt-grow .ui{position:absolute;inset:0;pointer-events:none}

/* heading */
.gt-grow .head{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + clamp(12px,2.7vh,32px) + var(--gt-nav,64px));text-align:center;padding:0 16px;color:var(--navy);
  text-shadow:0 0 18px rgba(255,255,255,.7),0 0 4px rgba(255,255,255,.5);animation:gt-rise 1.2s .15s both cubic-bezier(.2,.7,.2,1)}
.gt-grow .head__kicker{display:inline-flex;align-items:center;gap:14px;font-size:clamp(11px,1.02vw,15px);font-weight:500;letter-spacing:.42em;padding-left:.42em;color:#1d3a55}
.gt-grow .head__kicker::before,.gt-grow .head__kicker::after{content:"";width:clamp(28px,4vw,64px);height:1px;background:currentColor;opacity:.55}
.gt-grow .head h2{margin:.28em 0 .14em;font-size:clamp(28px,3.4vw,56px);font-weight:400;letter-spacing:-.012em;line-height:1.04}
.gt-grow .head h2 .g{color:var(--leaf);font-weight:700}
.gt-grow .head h2 .b{font-weight:700}
.gt-grow .head p{margin:0 auto;max-width:34em;font-size:clamp(14px,1.36vw,21px);color:#1b3147}
@keyframes gt-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* left script note */
.gt-grow .note{position:absolute;left:4.6vw;top:26vh;color:#15304a;display:none}
.gt-grow .note__script{font-family:'Mr Dafoe','Segoe Script','Brush Script MT',cursive;font-size:clamp(44px,4.5vw,76px);line-height:.8;transform:rotate(-9deg);transform-origin:left center;white-space:nowrap;
  --nx:calc(var(--note,0) * 125% - 15%);
  -webkit-mask-image:linear-gradient(100deg,#000 var(--nx),transparent calc(var(--nx) + 14%));mask-image:linear-gradient(100deg,#000 var(--nx),transparent calc(var(--nx) + 14%))}
.gt-grow .note__script span{display:block}
.gt-grow .note__script span:nth-child(2){padding-left:.35em}
.gt-grow .note__script span:nth-child(3){padding-left:.1em}
.gt-grow .note__swash{display:block;width:clamp(120px,10vw,170px);margin:.1em 0 0 3.2em;transform:rotate(-7deg);opacity:var(--note,0)}
.gt-grow .note p{margin:1.3em 0 0;font-size:clamp(15px,1.22vw,20px);line-height:1.28;color:#24394c;opacity:var(--note,0);transform:translateY(calc((1 - var(--note,0)) * 10px))}

/* right values column */
.gt-grow .values{position:absolute;right:4.4vw;top:15.5vh;display:none;color:#1d3a55}
.gt-grow .values ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2.3vh,24px)}
.gt-grow .values li{font-size:clamp(11px,.95vw,14.5px);letter-spacing:.38em;opacity:.42;transition:opacity .6s ease}
.gt-grow .values li.on{opacity:.95}
.gt-grow .values__line{display:block;width:1px;height:7vh;margin:clamp(16px,2.6vh,28px) 0 clamp(14px,2.2vh,22px) 48px;background:rgba(20,48,75,.2);position:relative;overflow:hidden}
.gt-grow .values__line i{position:absolute;inset:0;background:#1d3a55;transform-origin:top;transform:scaleY(var(--vals,0))}
.gt-grow .values p{margin:0;font-size:clamp(11px,.92vw,14px);letter-spacing:.38em;line-height:1.75;opacity:.75}
@media (min-width:1100px) and (min-height:560px){.gt-grow .note,.gt-grow .values{display:block}}
.gt-grow .stage.no-note .note,.gt-grow .stage.no-values .values{display:none}

/* apples (built from the PROJECTS list) */
.gt-grow .apples{position:absolute;inset:0}
.gt-grow .apple{position:absolute;left:0;top:0;width:var(--apple,180px);height:calc(var(--apple,180px) * 1.06);transform-origin:53.5% 1.7%;will-change:transform;
  visibility:hidden;pointer-events:none;color:#fff;text-decoration:none;container-type:inline-size;-webkit-tap-highlight-color:transparent;outline:none}
.gt-grow .apple[aria-disabled="true"]{cursor:default}
.gt-grow .apple__body{position:absolute;inset:0}
.gt-grow .apple__body svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 14px rgba(55,28,4,.3))}
.gt-grow .apple__unripe{opacity:calc(1 - var(--ripe,0))}
.gt-grow .apple__glow{opacity:0;transition:opacity .35s ease}
.gt-grow .apple:hover .apple__glow,.gt-grow .apple:focus-visible .apple__glow{opacity:1}
.gt-grow .apple__content{position:absolute;left:9%;right:9%;top:24%;bottom:9%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:1.6cqw;opacity:var(--c,0);transform:scale(calc(.86 + var(--c,0) * .14));text-shadow:0 1px 3px rgba(0,0,0,.28)}
.gt-grow .apple__name{display:inline-flex;align-items:center;justify-content:center;gap:2.2cqw;font-weight:700;letter-spacing:-.015em;line-height:1;max-width:100%}
.gt-grow .apple__name svg{width:.78em;height:.98em;flex:none}
.gt-grow .apple__ico{display:block;flex:none}
.gt-grow .apple__ico svg{display:block;width:17cqw;height:17cqw}
.gt-grow .apple__ico img{display:block;max-width:56cqw;height:17cqw;object-fit:contain}
.gt-grow .apple__tag{font-size:3.3cqw;letter-spacing:.34em;font-weight:500;opacity:.9;margin-top:-.8cqw}
.gt-grow .apple__tag.is-long{letter-spacing:.12em;font-size:3.1cqw}
.gt-grow .apple__title{font-size:6.4cqw;font-weight:600;line-height:1.15;margin-top:1.2cqw}
.gt-grow .apple__sub{font-size:5.9cqw;font-weight:400;line-height:1.28;opacity:.96;margin-top:1cqw}
.gt-grow .apple__btn{flex:none;margin-top:3cqw;width:15.5cqw;height:15.5cqw;border-radius:50%;background:#fff;color:var(--deep);display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.gt-grow .apple__btn svg{width:58%;height:58%}
.gt-grow .apple:hover .apple__btn,.gt-grow .apple:focus-visible .apple__btn{transform:translateX(1.2cqw)}
.gt-grow .apple:focus-visible .apple__btn{outline:2px solid #fff;outline-offset:3px}
.gt-grow .sd{display:inline-flex;align-items:center;font-size:14.5cqw;font-weight:700;letter-spacing:-.02em;line-height:1}
.gt-grow .sd i{display:inline-block;width:.5em;height:.5em;margin:0 .03em;border:.1em solid #ffb43d;border-radius:50%;position:relative;top:.06em}
.gt-grow .sd i::after{content:"";position:absolute;width:.14em;height:.14em;border-radius:50%;background:#ffb43d;right:-.02em;top:-.2em}
/* small apples (many projects / small screens): keep the name, the key line and the button */
@container (max-width:132px){.gt-grow .apple__tag,.gt-grow .apple__title{display:none}.gt-grow .apple__sub{font-size:7cqw}}
@container (max-width:92px){.gt-grow .apple__sub{display:none}}

/* underground: brand, badges, hint — laid out in the soil area */
.gt-grow .below{position:absolute;left:0;right:0;top:calc(var(--gy,700) * 1px);bottom:0;display:grid;
  grid-template-columns:1fr auto 1fr;grid-template-rows:1fr auto;grid-template-areas:"l brand r" "hint hint hint";
  column-gap:calc(var(--s,1) * 70px);align-items:center;
  padding:calc(var(--s,1) * 16px) 3vw calc(env(safe-area-inset-bottom,0px) + clamp(10px,1.6vh,22px))}
.gt-grow .brand{grid-area:brand;align-self:start;margin-top:calc(var(--s,1) * 20px);text-align:center;color:#fff;white-space:nowrap;
  opacity:var(--brand,0);transform:translateY(calc((1 - var(--brand,0)) * 16px));text-shadow:0 2px 16px rgba(255,140,40,.55)}
.gt-grow .brand svg{display:block;margin:0 auto;width:max(40px,calc(var(--s,1) * 68px));height:auto;filter:drop-shadow(0 0 12px rgba(255,170,70,.85)) drop-shadow(0 0 30px rgba(255,120,30,.5))}
.gt-grow .brand strong{display:block;margin-top:calc(var(--s,1) * 8px);font-size:max(20px,calc(var(--s,1) * 35px));font-weight:600;letter-spacing:.005em;line-height:1}
.gt-grow .brand span{display:block;margin-top:calc(var(--s,1) * 8px);font-size:max(11px,calc(var(--s,1) * 13.5px));opacity:.9;letter-spacing:.02em}
.gt-grow .badges{display:grid;row-gap:calc(var(--s,1) * 20px);align-content:center}
.gt-grow .badges--l{grid-area:l;justify-self:end}
.gt-grow .badges--r{grid-area:r;justify-self:start}
.gt-grow .badge{display:flex;align-items:center;gap:calc(var(--s,1) * 16px);color:#fff;font-size:max(11px,calc(var(--s,1) * 14px));font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.5);white-space:nowrap}
.gt-grow .badge i{flex:none;display:grid;place-items:center;width:max(32px,calc(var(--s,1) * 48px));height:max(32px,calc(var(--s,1) * 48px));border-radius:50%;
  border:1.5px solid rgba(255,255,255,.8);background:rgba(40,22,10,.25);box-shadow:0 0 18px rgba(255,160,70,.25)}
.gt-grow .badge svg{width:52%;height:52%}
.gt-grow .badges--l .badge{opacity:var(--bl,0);transform:translateX(calc((1 - var(--bl,0)) * -14px))}
.gt-grow .badges--r .badge{opacity:var(--br,0);transform:translateX(calc((1 - var(--br,0)) * 14px))}
.gt-grow .hint{grid-area:hint;justify-self:center;display:flex;align-items:center;gap:14px;
  color:#fff;font-size:clamp(10.5px,.9vw,13px);letter-spacing:.34em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.55);white-space:nowrap}
.gt-grow .hint__mouse{width:20px;height:31px;border:1.6px solid rgba(255,255,255,.9);border-radius:11px;position:relative;flex:none}
.gt-grow .hint__mouse::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;border-radius:2px;background:#fff;animation:gt-wheel 1.8s ease-in-out infinite}
@keyframes gt-wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}80%{opacity:0;transform:translateY(8px)}100%{opacity:0}}
.gt-grow .hint__txt{display:grid}
.gt-grow .hint__txt b{grid-area:1/1;font-weight:500;transition:opacity .5s ease}
.gt-grow .hint__txt b+b{opacity:0}
.gt-grow .stage.done .hint__txt b:first-child{opacity:0}
.gt-grow .stage.done .hint__txt b+b{opacity:1}

/* narrow screens: brand on top, badges in a 2 x 2 grid, hint at the bottom */
.gt-grow .stage.narrow .below{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:"brand brand" "l r" "hint hint";
  align-content:space-evenly;align-items:start;column-gap:12px;padding:6px 4vw calc(env(safe-area-inset-bottom,0px) + 10px)}
.gt-grow .stage.narrow .brand{margin-top:0}
.gt-grow .stage.narrow .brand svg{width:44px}
.gt-grow .stage.narrow .brand strong{font-size:22px;margin-top:6px}
.gt-grow .stage.narrow .brand span{font-size:11px;margin-top:4px}
.gt-grow .stage.narrow .badges{row-gap:12px}
.gt-grow .stage.narrow .badges--l,.gt-grow .stage.narrow .badges--r{justify-self:center}
.gt-grow .stage.narrow .badge{font-size:10.5px;gap:9px;letter-spacing:.05em}
.gt-grow .stage.narrow .badge i{width:32px;height:32px}
.gt-grow .stage.narrow .hint{letter-spacing:.24em}
.gt-grow .stage.short .badges{display:none}
.gt-grow .stage.short .brand span{display:none}
.gt-grow .stage.tiny .brand svg,.gt-grow .stage.tiny .hint__mouse{display:none}
.gt-grow .stage.tiny .brand strong{font-size:18px;margin-top:0}
.gt-grow .stage.tiny .below{padding-top:2px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}
.gt-grow .stage.tiny .hint{font-size:10px}

/* depth-of-field leaves in the foreground corners (static) */
.gt-grow .fx{position:absolute;pointer-events:none}
.gt-grow .fx svg{display:block;width:100%;height:auto}
.gt-grow .fx--bl{left:-4vw;bottom:-5vh;width:clamp(120px,19vw,320px);filter:blur(7px);transform:rotate(-6deg)}
.gt-grow .fx--br{right:-5vw;bottom:6vh;width:clamp(110px,16vw,280px);filter:blur(8px);transform:rotate(150deg)}
.gt-grow .stage.narrow .fx--br{bottom:-4vh}


@media (max-width:600px){.gt-grow .head h2{font-size:clamp(24px,7.6vw,32px)}.gt-grow .head p{font-size:14px}}
@media (max-height:560px) and (orientation:landscape){
  .gt-grow .head__kicker{display:none}
  .gt-grow .head h2{font-size:clamp(20px,3.2vw,30px);margin-top:0}
  .gt-grow .head p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .gt-grow .clouds,.gt-grow #gt-roots,.gt-grow .hint__mouse::after,.gt-grow .head{animation:none}
  .gt-grow .layers{transition:none}
}

/* ---- low-end devices / slow networks (class set by js): drop the costliest effects ---- */
.gt-grow.gt-low .fx{filter:none;opacity:.6}
.gt-grow.gt-low #gt-roots{animation:none}
.gt-grow.gt-low .apple__body svg{filter:none}