/* ============================================================
   ULTIMATE PRINT LAB — "agency motion" home layer
   Inspired by award-style agency homes (Digital Gravity feel):
   custom cursor, magnetic CTAs, split-line reveals, marquees,
   filterable work grid, expanding services, recognition strip.
   Uses the existing :root tokens + brand gradient from style.css.
   Scoped to the home page only (body.page-home).
   ============================================================ */

/* ---------- custom follower cursor (desktop, fine pointer) ---------- */
@media (pointer:fine){
  .page-home{ cursor:none; }
  .page-home a, .page-home button, .page-home .magnetic, .page-home .chip{ cursor:none; }
  .dg-cursor{
    position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
    width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
    border:1px solid rgba(221,13,206,.7);
    mix-blend-mode:difference;
    transition:width .25s, height .25s, margin .25s, background .25s, border-color .25s;
    will-change:transform;
  }
  .dg-cursor::after{
    content:""; position:absolute; inset:0; margin:auto; width:5px; height:5px;
    border-radius:50%; background:#fff;
  }
  .dg-cursor.is-hover{
    width:64px; height:64px; margin:-32px 0 0 -32px;
    background:rgba(221,13,206,.18); border-color:transparent;
  }
  .dg-cursor.is-hover::after{ width:0; height:0; }
}

/* ---------- header upgrade: utility bar + magnetic CTA ---------- */
.page-home .header__utility{
  display:flex; align-items:center; gap:1.4em;
  font-size:.85em; color:rgba(var(--silver),1);
}
.page-home .header__utility a{ display:inline-flex; align-items:center; gap:.45em; transition:color .25s; }
.page-home .header__utility a:hover{ color:#fff; }
.page-home .header__utility .dot{ width:.4em; height:.4em; border-radius:50%; background:var(--grad); }
.page-home .header__utility svg{ width:1.05em; height:1.05em; }
@media (max-width:1100px){ .page-home .header__utility{ display:none; } }

.magnetic{ display:inline-block; will-change:transform; }

/* ---------- HERO: split-line reveal + schedule pill ---------- */
.dg-hero .container{ gap:1.3em; max-width:64em; }
.dg-hero .h-hero{
  font-family:'Sora',sans-serif; font-weight:800; letter-spacing:-.025em;
  font-size:clamp(2.6rem,6.4vw,6rem); line-height:1.02;
}
/* each line is masked; inner span slides up on reveal */
.line-mask{ display:block; overflow:hidden; padding-bottom:.04em; }
.line-mask > span{ display:block; transform:translateY(110%); will-change:transform; }
.dg-hero.is-in .line-mask > span{ transform:translateY(0); transition:transform 1s cubic-bezier(.16,1,.3,1); }
.dg-hero.is-in .line-mask:nth-child(2) > span{ transition-delay:.09s; }
.dg-hero.is-in .line-mask:nth-child(3) > span{ transition-delay:.18s; }

.dg-hero .hero-actions{ display:flex; flex-wrap:wrap; gap:1em; align-items:center; margin-top:.6em; }
.dg-hero .schedule-pill{
  display:inline-flex; align-items:center; gap:.8em; padding:.5em .5em .5em 1.1em;
  border-radius:3em; border:1px solid rgba(var(--line),.4); background:rgba(var(--surface),.5);
  backdrop-filter:blur(10px); font-size:.95em; color:rgba(var(--white-color),.92);
}
.dg-hero .schedule-pill .av{
  width:2.4em; height:2.4em; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; color:#fff;
}
.dg-hero .schedule-pill .av svg{ width:1.2em; height:1.2em; }

/* ---------- big scrolling text marquee strip ---------- */
.dg-strip{ position:relative; z-index:1; padding:2.2em 0; overflow:hidden;
  border-top:1px solid rgba(var(--line),.18); border-bottom:1px solid rgba(var(--line),.18);
  background:rgba(var(--base-deep),.45); }
.dg-strip__track{ display:flex; width:max-content; gap:2.5em; animation:dgScroll 26s linear infinite; }
.dg-strip__track span{
  font-family:'Sora'; font-weight:800; letter-spacing:-.02em; white-space:nowrap;
  font-size:clamp(1.6rem,3.2vw,2.8rem); color:transparent;
  -webkit-text-stroke:1px rgba(var(--silver),.55);
  display:inline-flex; align-items:center; gap:2.5em;
}
.dg-strip__track span i{ font-style:normal; width:.5em; height:.5em; border-radius:50%; background:var(--grad); display:inline-block; }
.dg-strip__track span.fill{ -webkit-text-stroke:0; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes dgScroll{ to{ transform:translateX(-50%); } }

/* ---------- section heading block ---------- */
.dg-head{ display:flex; flex-direction:column; gap:.8em; margin-bottom:3em; max-width:40em; }
.dg-head.center{ align-items:center; text-align:center; margin-inline:auto; }
.dg-head h2{ font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.08; }

/* ---------- WHAT WE DO: capability marquee ---------- */
.dg-caps{ position:relative; z-index:1; }
.dg-caps .cap-row{ display:flex; gap:1em; flex-wrap:wrap; }
.dg-cap{
  display:inline-flex; align-items:center; gap:.7em; padding:.8em 1.3em; border-radius:3em;
  border:1px solid rgba(var(--line),.3); background:rgba(var(--surface),.45);
  font-weight:600; transition:transform .3s, border-color .3s, background .3s;
}
.dg-cap:hover{ transform:translateY(-.25em); border-color:rgba(221,13,206,.5); background:rgba(221,13,206,.1); }
.dg-cap svg{ width:1.3em; height:1.3em; color:#e571dd; }

/* ---------- PRESENCE: UAE cities + counters ---------- */
.dg-cities{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2em; margin-bottom:3em; }
@media (max-width:760px){ .dg-cities{ grid-template-columns:1fr; } }
.dg-city{
  position:relative; overflow:hidden; border-radius:1.3em; padding:1.8em;
  border:1px solid rgba(var(--line),.22); background:rgba(var(--surface),.4);
  transition:transform .35s, border-color .35s;
}
.dg-city:hover{ transform:translateY(-.4em); border-color:rgba(221,13,206,.45); }
.dg-city .pin{ width:2.6em; height:2.6em; border-radius:.8em; background:var(--grad); display:grid; place-items:center; margin-bottom:.9em; }
.dg-city .pin svg{ width:1.3em; height:1.3em; color:#fff; }
.dg-city h3{ font-size:1.3em; }
.dg-city p{ color:rgba(var(--silver),1); font-size:.95em; margin-top:.3em; }

/* ---------- WORK: filter tabs + filterable grid ---------- */
.dg-work .group-tabs{ justify-content:center; margin-bottom:2.6em; }
.dg-work-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(17em,1fr)); gap:1.5em; }
.dg-work-card{
  position:relative; border-radius:1.3em; overflow:hidden; isolation:isolate;
  border:1px solid rgba(var(--line),.22); background:rgba(var(--surface),.5);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s, opacity .35s;
}
.dg-work-card:hover{ transform:translateY(-.55em); border-color:rgba(221,13,206,.5); box-shadow:0 1.4em 3em rgba(0,0,0,.45),0 0 2.5em rgba(221,13,206,.12); }
.dg-work-card .thumb{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(70% 90% at var(--tx,68%) var(--ty,28%), rgba(221,13,206,.4), transparent 70%),
    radial-gradient(80% 90% at calc(100% - var(--tx,68%)) calc(100% - var(--ty,28%)), rgba(84,13,206,.45), transparent 70%),
    rgba(var(--surface-2),1);
}
.dg-work-card .thumb .glyph{ font-family:'Sora'; font-weight:800; font-size:3.2em;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.35)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.dg-work-card:hover .thumb .glyph{ transform:scale(1.12) rotate(-2deg); }
.dg-work-card .meta{ padding:1.2em 1.3em 1.4em; }
.dg-work-card .meta .tag{ font-size:.78em; letter-spacing:.14em; text-transform:uppercase; color:#e571dd; }
.dg-work-card .meta h3{ font-size:1.1em; margin-top:.25em; }
.dg-work-card.is-hidden{ display:none; }

/* ---------- SERVICES: expanding rows with icons ---------- */
.dg-srv-list{ border-top:1px solid rgba(var(--line),.22); }
.dg-srv{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.4em;
  padding:1.8em .6em; border-bottom:1px solid rgba(var(--line),.22);
  transition:padding .35s, background .35s;
}
.dg-srv::before{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--grad); transition:width .5s cubic-bezier(.2,.7,.3,1); }
.dg-srv:hover{ background:rgba(221,13,206,.05); padding-left:1.4em; padding-right:1.4em; }
.dg-srv:hover::before{ width:100%; }
.dg-srv .srv-ic{ width:3.2em; height:3.2em; border-radius:1em; display:grid; place-items:center;
  border:1px solid rgba(var(--line),.3); background:rgba(var(--surface-2),.6); transition:background .35s, transform .35s; }
.dg-srv:hover .srv-ic{ background:var(--grad); transform:rotate(-6deg); }
.dg-srv .srv-ic svg{ width:1.5em; height:1.5em; color:#fff; }
.dg-srv .srv-main h3{ font-size:clamp(1.4rem,2.4vw,2rem); }
.dg-srv .srv-main p{ color:rgba(var(--silver),1); font-size:.98em; margin-top:.3em; max-height:0; overflow:hidden; opacity:0; transition:max-height .45s, opacity .35s, margin .35s; }
.dg-srv:hover .srv-main p{ max-height:5em; opacity:1; margin-top:.5em; }
.dg-srv .srv-go{ width:3em; height:3em; border-radius:50%; border:1px solid rgba(var(--line),.4); display:grid; place-items:center; transition:background .3s, transform .3s, border-color .3s; flex:none; }
.dg-srv:hover .srv-go{ background:var(--grad); border-color:transparent; transform:rotate(45deg); }
.dg-srv .srv-go svg{ width:1.2em; height:1.2em; color:#fff; }
@media (max-width:680px){
  .dg-srv{ grid-template-columns:auto 1fr; }
  .dg-srv .srv-go{ display:none; }
  .dg-srv .srv-main p{ max-height:6em; opacity:1; margin-top:.5em; }
}

/* ---------- RECOGNITION strip (honest capability badges) ---------- */
.dg-badges{ overflow:hidden; }
.dg-badges .badge-track{ display:flex; gap:1.4em; width:max-content; animation:dgScroll 32s linear infinite; }
.dg-badge{
  display:inline-flex; align-items:center; gap:.8em; padding:1em 1.6em; border-radius:1em; white-space:nowrap;
  border:1px solid rgba(var(--line),.25); background:rgba(var(--surface),.45); font-weight:600;
}
.dg-badge svg{ width:1.5em; height:1.5em; color:#e571dd; flex:none; }
.dg-badge small{ display:block; color:rgba(var(--silver),1); font-weight:400; font-size:.82em; }

/* ---------- TESTIMONIALS (clean grid, no pin) ---------- */
.dg-tst{ position:relative; z-index:1; }
.dg-tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4em; }
@media (max-width:960px){ .dg-tst-grid{ grid-template-columns:1fr; } }
.dg-tcard{
  background:rgba(var(--surface),.55); border:1px solid rgba(var(--line),.25); border-radius:1.4em; padding:2em;
  backdrop-filter:blur(12px); transition:transform .35s, border-color .35s;
}
.dg-tcard:hover{ transform:translateY(-.4em); border-color:rgba(221,13,206,.45); }
.dg-tcard .stars{ display:flex; gap:.2em; margin-bottom:.9em; color:#e571dd; }
.dg-tcard .stars svg{ width:1.1em; height:1.1em; }
.dg-tcard q{ font-size:1.05em; color:rgba(var(--white-color),.92); }
.dg-tcard .who{ margin-top:1.2em; display:flex; align-items:center; gap:.9em; }
.dg-tcard .who .av{ width:3em; height:3em; border-radius:50%; background:var(--grad); display:grid; place-items:center; font-weight:700; font-family:'Sora'; }
.dg-tcard .who small{ color:rgba(var(--silver),1); display:block; }

/* generic reveal helper used by home.js (in addition to .animate) */
.dg-up{ opacity:0; transform:translateY(46px); will-change:transform,opacity; }
.dg-up.is-in{ opacity:1; transform:none; transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion:reduce){
  .dg-strip__track, .dg-badges .badge-track{ animation:none; }
  .line-mask > span{ transform:none; }
  .dg-up{ opacity:1; transform:none; }
}