/* ============================================================
   Eagle Agency — Tactile layer
   ------------------------------------------------------------
   Glass on the Services / Work / Academy card visuals, plus the
   states that make the site feel physical rather than printed.

   The important constraint: phones have no hover. Anything that
   only responds to a mouse is invisible to most visitors here.
   So the light on these surfaces is driven by the card's own
   position on screen as you scroll, which works on every device,
   and by touch or pointer when there is one.

   All motion runs through two custom properties that JavaScript
   writes — --mx / --my for the highlight, --press for the push —
   so the browser only ever repaints, never recalculates layout.
   ============================================================ */

.svc-item-visual,
.proj-item-visual,
.acd-item-visual{
  --tx:50%;
  --ty:35%;
  --press:0;
  --glow:0;
  border-radius:10px;
  background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.024));
  border:1px solid rgba(243,241,234,.1);
  box-shadow:
    0 1px 0 0 rgba(243,241,234,.16) inset,
    0 26px 60px -34px rgba(0,0,0,.95);
  overflow:hidden;
  isolation:isolate;
  /* the push is applied here, never on the parent, because GSAP
     owns the transform on .svc-item / .proj-item / .acd-item */
  transform:scale(calc(1 - var(--press) * .014));
  transition:transform .34s cubic-bezier(.2,.8,.2,1),
             border-color .34s ease,
             box-shadow .34s ease;
}
/* No backdrop-filter here on purpose. These cards sit on the section's own
   near-flat background, so blurring it produces no visible refraction while
   costing a compositor pass per card — measured at 18 cards it took dropped
   frames from 2 to 8 per 95. The translucent fill, the lit rim and the
   specular highlight carry the glass read on their own. */

/* ---------- the specular highlight ----------
   A soft light that sits where --mx / --my point. Its strength
   is --glow, which rises as the card reaches the middle of the
   screen, so the surface brightens as it comes to you. */
/* The highlight is a fixed gradient blob that is MOVED, never regenerated.
   Recomputing a radial-gradient every frame forces a full repaint of the
   card — measured at 7 dropped frames per 96 while scrolling. Translating
   and fading a pre-painted layer stays on the compositor instead, which
   measured at zero. So JavaScript only writes --tx, --ty and --glow. */
.svc-item-visual::before,
.proj-item-visual::before,
.acd-item-visual::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  left:0;top:0;width:104%;height:104%;margin:-52% 0 0 -52%;
  background:radial-gradient(circle at center,
    rgba(255,255,255,.20) 0%,
    rgba(111,227,255,.09) 34%,
    transparent 68%);
  opacity:var(--glow);
  transform:translate3d(var(--tx,50%), var(--ty,35%), 0);
}

/* a static rim of light along the top edge */
.svc-item-visual::after,
.proj-item-visual::after,
.acd-item-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:linear-gradient(150deg, rgba(255,255,255,.11) 0%, transparent 34%);
  opacity:calc(.45 + .55 * var(--glow));
}

/* keep the real card contents above both light layers */
.svc-item-visual > *,
.proj-item-visual > *,
.acd-item-visual > *{ position:relative; z-index:2; }

/* ---------- pressed ----------
   Fast in, slow out: that asymmetry is what reads as physical. */
.is-press .svc-item-visual,
.is-press .proj-item-visual,
.is-press .acd-item-visual,
.svc-item-visual.is-press,
.proj-item-visual.is-press,
.acd-item-visual.is-press{
  --press:1;
  border-color:rgba(111,227,255,.34);
  box-shadow:
    0 1px 0 0 rgba(243,241,234,.1) inset,
    0 0 0 1px rgba(111,227,255,.16),
    0 10px 26px -20px rgba(0,0,0,.95);
  transition:transform .09s cubic-bezier(.3,0,.6,1),
             border-color .09s ease,
             box-shadow .09s ease;
}

/* ---------- pointer devices get the extra lift ---------- */
@media (hover:hover) and (pointer:fine){
  .proj-item-visual:hover,
  .svc-item-visual:hover,
  .acd-item-visual:hover{
    border-color:rgba(111,227,255,.3);
    box-shadow:
      0 1px 0 0 rgba(243,241,234,.2) inset,
      0 34px 70px -34px rgba(0,0,0,.95),
      0 0 34px -14px rgba(111,227,255,.3);
  }
}

/* ---------- the capability chips become glass too ---------- */
.svc-item-caps li{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(243,241,234,.12);
  border-radius:999px;
  box-shadow:0 1px 0 0 rgba(243,241,234,.1) inset;
  transition:border-color .26s ease, background .26s ease,
             transform .26s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover) and (pointer:fine){
  .svc-item-caps li:hover{
    background:rgba(111,227,255,.08);
    border-color:rgba(111,227,255,.34);
    transform:translateY(-2px);
  }
}
.svc-item-caps li:active{transform:scale(.96)}

/* ---------- the case-study button ---------- */
.proj-item-cta{
  border-radius:999px;
  background:rgba(255,255,255,.04);
  box-shadow:0 1px 0 0 rgba(243,241,234,.12) inset;
  transition:border-color .28s ease, box-shadow .28s ease,
             transform .12s cubic-bezier(.3,0,.6,1), background .28s ease;
}
.proj-item-cta:active{transform:scale(.965)}
@media (hover:hover) and (pointer:fine){
  .proj-item-cta:hover{
    border-color:rgba(111,227,255,.45);
    background:rgba(111,227,255,.08);
    box-shadow:0 1px 0 0 rgba(243,241,234,.16) inset, 0 0 26px -8px rgba(111,227,255,.4);
  }
}


/* ---------- anyone who asked for less motion gets a still surface ---------- */
@media (prefers-reduced-motion:reduce){
  .svc-item-visual,.proj-item-visual,.acd-item-visual{
    transform:none;transition:border-color .3s ease;
  }
  .svc-item-visual::before,.proj-item-visual::before,.acd-item-visual::before,
  .svc-item-visual::after,.proj-item-visual::after,.acd-item-visual::after{
    background:linear-gradient(160deg, rgba(255,255,255,.07), transparent 60%);
  }
}

/* ---------- small screens: keep one blurred layer, not three ---------- */



/* ============================================================
   Contact — the conversion point, so it gets the fullest
   treatment. The project-type buttons are the one place a
   visitor actually makes a choice.
   ============================================================ */
.cnt-type-option{
  position:relative;
  border-radius:8px;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(243,241,234,.13);
  box-shadow:0 1px 0 0 rgba(243,241,234,.11) inset;
  overflow:hidden;
  transition:border-color .26s ease, color .26s ease, background .26s ease,
             box-shadow .26s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
/* fast in, slow out — the same asymmetry used on the cards */
.cnt-type-option:active{
  transform:scale(.972);
  transition:transform .08s cubic-bezier(.3,0,.6,1);
}
@media (hover:hover) and (pointer:fine){
  .cnt-type-option:hover{
    border-color:rgba(111,227,255,.4);
    background:linear-gradient(160deg, rgba(111,227,255,.09), rgba(255,255,255,.02));
    box-shadow:0 1px 0 0 rgba(243,241,234,.16) inset, 0 0 22px -8px rgba(111,227,255,.45);
    transform:translateY(-1px);
  }
}
/* chosen: gold, because this is a commitment, not a hover */
.cnt-type-option.is-selected{
  border-color:var(--gold-soft);
  background:linear-gradient(160deg, rgba(233,205,138,.13), rgba(233,205,138,.04));
  box-shadow:0 1px 0 0 rgba(243,241,234,.2) inset, 0 0 26px -10px rgba(233,205,138,.6);
}
.cnt-type-option.is-selected::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold-soft);box-shadow:0 0 10px rgba(233,205,138,.7);
}
html.eagle-rtl .cnt-type-option.is-selected::after{left:auto;right:0}

/* a field that failed validation should be felt, not just seen */
.cnt-field--error input,
.cnt-field--error textarea,
.cnt-field--error select{
  border-color:rgba(209,97,93,.6) !important;
  box-shadow:0 0 20px -7px rgba(209,97,93,.55) !important;
}

/* ============================================================
   Results metrics and About principles.
   These two are animated by GSAP, which owns their `transform`,
   so only surface properties are set here — never transform.
   ============================================================ */
.res-metric,
.abt-principle{
  background-color:transparent;
  background-image:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(243,241,234,.1);
  border-radius:10px;
  box-shadow:
    0 1px 0 0 rgba(243,241,234,.14) inset,
    0 24px 56px -34px rgba(0,0,0,.95);
  transition:border-color .3s ease, box-shadow .3s ease, background-image .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .res-metric:hover,
  .abt-principle:hover{
    border-color:rgba(111,227,255,.28);
    background-image:linear-gradient(160deg, rgba(111,227,255,.07), rgba(255,255,255,.02));
    box-shadow:
      0 1px 0 0 rgba(243,241,234,.2) inset,
      0 30px 64px -34px rgba(0,0,0,.95),
      0 0 30px -14px rgba(111,227,255,.3);
  }
}