/* =====================================================================
   Growmatic — motion.css
   Intro splash (G mark), animated page cover banners, tickers, reveals
   ===================================================================== */

/* ---------- 1. Intro splash ---------- */
.gm-intro{position:fixed;inset:0;z-index:9999;pointer-events:none;animation:gmHide 0s linear 2.45s forwards}
.gm-intro-panel{position:absolute;top:0;bottom:0;width:50.2%;background:#191c17}
.gm-intro-panel.r{right:0;animation:gmPanelR .85s cubic-bezier(.77,0,.18,1) 1.5s forwards}
.gm-intro-panel.l{left:0;animation:gmPanelL .85s cubic-bezier(.77,0,.18,1) 1.5s forwards}
.gm-intro-panel.r::after{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--lime,#c5f65a);opacity:0;animation:gmSeam .5s ease 1.35s forwards}
.gm-intro-mark{position:absolute;left:50%;top:50%;width:min(150px,34vw);aspect-ratio:630/594;transform:translate(-50%,-50%);animation:gmMarkOut .5s cubic-bezier(.6,0,.4,1) 1.3s forwards;z-index:2}
.gm-intro-mark img{position:absolute;inset:0;width:100%;height:100%;display:block}
.gm-intro-mark .b{animation:gmBody .75s cubic-bezier(.2,.9,.2,1) .1s both}
.gm-intro-mark .a{animation:gmArrow .55s cubic-bezier(.2,.9,.3,1.25) .6s both}
.gm-intro-mark .d{transform-origin:93% 8%;animation:gmDot .45s cubic-bezier(.3,1.7,.5,1) .95s both}
.gm-intro-bar{position:absolute;left:50%;top:calc(50% + min(110px,26vw));width:120px;height:2px;margin-left:-60px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;z-index:2;animation:gmFade .3s ease 1.3s forwards}
.gm-intro-bar::after{content:"";position:absolute;inset:0;background:var(--lime,#c5f65a);transform-origin:right;transform:scaleX(0);animation:gmBar 1.1s cubic-bezier(.6,0,.2,1) .15s forwards}
@keyframes gmBody{from{opacity:0;transform:scale(.5) rotate(-35deg)}to{opacity:1;transform:none}}
@keyframes gmArrow{from{opacity:0;transform:translate(-38%,38%) scale(.5)}to{opacity:1;transform:none}}
@keyframes gmDot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes gmMarkOut{to{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
@keyframes gmPanelR{to{transform:translateX(101%)}}
@keyframes gmPanelL{to{transform:translateX(-101%)}}
@keyframes gmSeam{to{opacity:1}}
@keyframes gmBar{to{transform:scaleX(1)}}
@keyframes gmFade{to{opacity:0}}
@keyframes gmHide{to{visibility:hidden}}
html.gm-intro-skip .gm-intro,html.gm-still .gm-intro{display:none}

/* ---------- 2. Entrance (above the fold) ---------- */
@keyframes gmRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes gmIn{from{opacity:0}to{opacity:1}}
.gm-cover-copy>*{animation:gmRise .9s cubic-bezier(.2,.8,.2,1) both}
.gm-cover-copy>*:nth-child(1){animation-delay:.05s}
.gm-cover-copy>*:nth-child(2){animation-delay:.15s}
.gm-cover-copy>*:nth-child(3){animation-delay:.25s}
.gm-cover-copy>*:nth-child(4){animation-delay:.35s}
.gm-cover-copy>*:nth-child(5){animation-delay:.45s}
.gm-cover-chips{animation:gmIn 1.2s ease .5s both}
.v-topline{animation:gmRise .8s cubic-bezier(.2,.8,.2,1) .05s both}
.v-intro h1{animation:gmRise 1s cubic-bezier(.2,.8,.2,1) .12s both}
.v-intro-side{animation:gmRise 1s cubic-bezier(.2,.8,.2,1) .3s both}
.v-showcase{animation:gmRise 1.1s cubic-bezier(.2,.8,.2,1) .45s both}
html.gm-intro-on .gm-cover-copy>*,html.gm-intro-on .gm-cover-chips,html.gm-intro-on .v-topline,
html.gm-intro-on .v-intro h1,html.gm-intro-on .v-intro-side,html.gm-intro-on .v-showcase{animation-delay:calc(var(--gm-d,0s) + 1.75s)}
html.gm-intro-on .gm-cover-copy>*:nth-child(2),html.gm-intro-on .v-intro h1{--gm-d:.1s}
html.gm-intro-on .gm-cover-copy>*:nth-child(3),html.gm-intro-on .v-intro-side{--gm-d:.2s}
html.gm-intro-on .gm-cover-copy>*:nth-child(4),html.gm-intro-on .v-showcase{--gm-d:.32s}
html.gm-intro-on .gm-cover-copy>*:nth-child(5),html.gm-intro-on .gm-cover-chips{--gm-d:.44s}

html.gm-still .gm-cover-copy>*,html.gm-still .gm-cover-chips,html.gm-still .v-topline,html.gm-still .v-intro h1,html.gm-still .v-intro-side,html.gm-still .v-showcase{animation:none!important}

/* ---------- 3. Page cover banners ---------- */
.gm-cover{position:relative;isolation:isolate;padding:0!important;margin:14px 14px 0;border-radius:28px;overflow:hidden;background:#191c17;color:#fff;min-height:clamp(560px,78vh,740px);display:flex;flex-direction:column;justify-content:flex-end}
.gm-cover-media{position:absolute;inset:-7% 0;z-index:-3;will-change:transform}
.gm-cover-img{width:100%;height:100%;object-fit:cover;display:block;animation:gmKen 26s ease-in-out infinite alternate}
.gm-cover--flip .gm-cover-img{transform:scaleX(-1);animation-name:gmKenFlip}
@keyframes gmKen{0%{transform:scale(1.05) translate3d(0,0,0)}100%{transform:scale(1.2) translate3d(-3%,-2%,0)}}
@keyframes gmKenFlip{0%{transform:scaleX(-1) scale(1.05)}100%{transform:scaleX(-1) scale(1.2) translate3d(3%,-2%,0)}}
.gm-cover-glow{position:absolute;width:560px;height:560px;border-radius:50%;left:6%;top:4%;background:radial-gradient(circle,rgba(197,246,90,.32),transparent 64%);mix-blend-mode:screen;animation:gmGlow 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes gmGlow{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.15)}100%{transform:translate(-40px,80px) scale(.95)}}
.gm-cover-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  linear-gradient(to left,rgba(19,22,17,.95) 0%,rgba(19,22,17,.84) 30%,rgba(19,22,17,.42) 60%,rgba(19,22,17,.08) 100%),
  linear-gradient(to top,rgba(19,22,17,.9) 0%,rgba(19,22,17,0) 42%)}
.gm-cover-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background:
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:linear-gradient(to left,#000,transparent 70%);mask-image:linear-gradient(to left,#000,transparent 70%)}
.gm-cover-tag{position:absolute;top:26px;left:30px;direction:ltr;font-size:11px;letter-spacing:2.4px;font-weight:800;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:10px;z-index:2}
.gm-cover-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime,#c5f65a);box-shadow:0 0 0 0 rgba(197,246,90,.7);animation:gmPulse 2s infinite}
@keyframes gmPulse{70%{box-shadow:0 0 0 12px rgba(197,246,90,0)}100%{box-shadow:0 0 0 0 rgba(197,246,90,0)}}
.gm-cover-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:end;gap:40px;padding-top:90px;padding-bottom:44px;width:100%}
.gm-cover-copy{max-width:660px}
.gm-cover .crumbs{font-size:14px;color:rgba(255,255,255,.6)}
.gm-cover .crumbs a{color:rgba(255,255,255,.78)}
.gm-cover .crumbs a:hover{color:var(--lime,#c5f65a)}
.gm-cover h1{font-size:clamp(34px,4.5vw,64px);font-weight:900;line-height:1.38;color:#fff;margin-top:16px;max-width:17ch;text-wrap:balance}
.gm-cover h1 em{font-style:normal;color:var(--lime,#c5f65a)}
.gm-cover .lead{color:rgba(255,255,255,.8);font-size:clamp(16px,1.35vw,19px);line-height:1.95;max-width:54ch;margin-top:14px}
.gm-cover .svc-badge{display:inline-flex;width:58px;height:58px;border-radius:18px;background:var(--lime,#c5f65a);color:#182011;align-items:center;justify-content:center;margin-top:20px;box-shadow:0 14px 34px -14px rgba(197,246,90,.8)}
.gm-cover .svc-badge svg{width:30px;height:30px}
.gm-cover .hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.gm-cover .btn-lime{background:var(--lime,#c5f65a);color:#182011}
.gm-cover .btn-lime:hover{background:#d6ff7e}
.gm-cover .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gm-cover .btn-ghost:hover{background:#fff;color:#191c17}
.gm-cover .article-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.gm-cover .article-meta span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 14px;font-size:14px;color:rgba(255,255,255,.85)}

/* floating chips */
.gm-cover-chips{position:relative;align-self:stretch;min-height:300px}
.gm-chip{position:absolute;display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;background:rgba(22,26,20,.62);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff;font-weight:800;font-size:14.5px;white-space:nowrap;box-shadow:0 20px 44px -22px rgba(0,0,0,.7);animation:gmFloat 6.5s ease-in-out infinite}
.gm-chip i{width:32px;height:32px;border-radius:50%;background:var(--lime,#c5f65a);color:#182011;display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:900;flex:none}
.gm-chip:nth-child(1){top:4%;left:10%}
.gm-chip:nth-child(2){top:38%;left:34%;animation-duration:7.5s;animation-delay:-2.5s}
.gm-chip:nth-child(3){bottom:8%;left:2%;animation-duration:8.5s;animation-delay:-5s}
.gm-chip:nth-child(4){bottom:30%;left:0;animation-duration:9s;animation-delay:-1s}
@keyframes gmFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-16px,0)}}
.gm-chip.search{border-radius:16px;background:rgba(255,255,255,.96);color:#191c17;border-color:transparent;padding:12px 16px;min-width:300px;font-weight:700}
.gm-chip.search i{background:#191c17;color:var(--lime,#c5f65a)}
.gm-chip.search b{font-weight:800}
.gm-chip.search b::after{content:"";display:inline-block;width:2px;height:1.1em;background:#191c17;margin-inline-start:3px;vertical-align:-3px;animation:gmCaret 1s steps(1) infinite}
@keyframes gmCaret{50%{opacity:0}}

/* moving ticker inside cover */
.gm-ticker{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.14);background:rgba(19,22,17,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;padding:15px 0;direction:ltr}
.gm-ticker-track{display:flex;width:max-content;animation:gmTicker 45s linear infinite}
.gm-ticker span{display:inline-flex;align-items:center;gap:26px;padding-inline-end:26px;font-weight:800;font-size:15px;color:rgba(255,255,255,.88);white-space:nowrap}
.gm-ticker span::after{content:"";width:18px;height:17px;background:url(../img/intro/g-mark-light.webp) center/contain no-repeat;flex:none}
@keyframes gmTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* screens variant: scrolling design columns */
.gm-cover--screens{background:#141812}
.gm-screens{position:absolute;left:-3%;top:-35%;width:64%;height:170%;display:flex;gap:18px;transform:rotate(-11deg);z-index:-3}
.gm-screens .col{flex:1;display:flex;flex-direction:column;gap:18px;animation:gmUp 38s linear infinite}
.gm-screens .col:nth-child(2){animation-name:gmDown;animation-duration:46s}
.gm-screens .col:nth-child(3){animation-duration:52s}
.gm-screens img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;display:block;box-shadow:0 24px 50px -24px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.08)}
@keyframes gmUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes gmDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
.gm-cover--screens .gm-cover-shade{background:
  linear-gradient(to left,rgba(20,24,18,.97) 0%,rgba(20,24,18,.9) 36%,rgba(20,24,18,.35) 66%,rgba(20,24,18,.15) 100%),
  linear-gradient(to top,rgba(20,24,18,.92) 0%,rgba(20,24,18,0) 40%)}

/* ---------- 4. Home: moving word band ---------- */
.gm-band{padding:20px 0 64px!important;overflow:hidden;background:var(--paper,#f6f6ef)}
.gm-band-row{background:#191c17;color:#f6f6ef;padding:14px 0 22px;margin:0 -3%;transform:rotate(-2.2deg);direction:ltr;overflow:hidden;box-shadow:0 20px 40px -26px rgba(0,0,0,.5)}
.gm-band-row.alt{background:var(--lime,#c5f65a);color:#191c17;transform:rotate(1.6deg);margin-top:18px;position:relative}
.gm-band-track{display:flex;width:max-content;animation:gmTicker 34s linear infinite}
.gm-band-row.alt .gm-band-track{animation-direction:reverse;animation-duration:40s}
.gm-band-track span{display:inline-flex;align-items:center;gap:34px;padding-inline-end:34px;font-weight:900;font-size:clamp(30px,4.6vw,68px);line-height:1.55;white-space:nowrap}
.gm-band-track span.o{color:transparent;-webkit-text-stroke:1.5px currentColor}
.gm-band-row:not(.alt) .gm-band-track span.o{-webkit-text-stroke-color:#f6f6ef}
.gm-band-track b{font-size:.7em;color:var(--lime,#c5f65a)}
.gm-band-row.alt .gm-band-track b{color:#191c17}
.gm-band-row.alt .gm-band-track span{font-family:"Cairo",Arial,sans-serif;letter-spacing:1px}

/* ---------- 5. Scroll reveal ---------- */
.gm-enter{animation:none!important}
.gm-rv{opacity:0;transform:translate3d(0,34px,0);transition:opacity .85s ease,transform .95s cubic-bezier(.2,.8,.2,1)}
.gm-rv.gm-in{opacity:1;transform:none}
html.gm-still .gm-rv{opacity:1!important;transform:none!important;transition:none!important}

/* ---------- 6. Fixes ---------- */
.step-n{display:grid!important;place-items:center;font-weight:900!important;font-size:19px!important;line-height:1!important}
.v-service-row{transition:background-color .3s,padding .3s}
.v-service-row:hover{padding-inline:14px}
.v-service-row .v-row-arrow{transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s,color .3s}
.v-service-row:hover .v-row-arrow{transform:rotate(-45deg);background:var(--lime,#c5f65a);color:#191c17}
.btn{transition:transform .2s ease,background-color .2s,color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}

/* ---------- 7. Responsive ---------- */
@media (max-width:980px){
  .gm-cover{margin:10px 10px 0;border-radius:22px;min-height:auto}
  .gm-cover-inner{grid-template-columns:1fr;gap:22px;padding-top:70px;padding-bottom:26px}
  .gm-cover-chips{min-height:0;display:flex;flex-wrap:wrap;gap:8px}
  .gm-chip{position:relative;inset:auto!important;font-size:13px;padding:7px 14px 7px 8px;animation-duration:7s}
  .gm-chip i{width:26px;height:26px;font-size:13px}
  .gm-chip.search{min-width:0;width:100%}
  .gm-cover-shade{background:linear-gradient(to top,rgba(19,22,17,.96) 0%,rgba(19,22,17,.84) 55%,rgba(19,22,17,.55) 100%)}
  .gm-cover--screens .gm-cover-shade{background:linear-gradient(to top,rgba(20,24,18,.97) 0%,rgba(20,24,18,.86) 55%,rgba(20,24,18,.6) 100%)}
  .gm-screens{width:130%;left:-15%;opacity:.55}
  .gm-cover-tag{top:18px;left:18px;font-size:9.5px}
  .gm-cover h1{max-width:none}
}
@media (max-width:560px){
  .gm-cover h1{font-size:31px}
  .gm-cover .lead{font-size:15.5px}
  .gm-cover .hero-actions .btn{flex:1 1 100%}
  .gm-ticker{padding:12px 0}
  .gm-ticker span{font-size:13px}
  .gm-band{padding:34px 0}
}
@media (prefers-reduced-motion:reduce){
  .gm-intro{display:none}
  .gm-cover-img,.gm-screens .col,.gm-ticker-track,.gm-band-track,.gm-chip,.gm-cover-glow{animation:none!important}
  .gm-cover-copy>*,.gm-cover-chips,.v-topline,.v-intro h1,.v-intro-side,.v-showcase{animation:none!important}
}