/* ============================================================
   Reps Media — universal animation layer
   ------------------------------------------------------------
   Linked by EVERY page: index, our-approach, contact, faqs, blog.
   Anything defined here applies site-wide.

   Because all pages share the same component class names
   (.btn, .card, .pill, .plan, .tnode, .logo, .display, .nav,
   .surface, .postcard, .acc-item, …), an animation keyed to a
   class automatically affects every matching element on every
   page. Define once → it's universal.

   Add new animations below this header.
   ============================================================ */

/* Accessibility: honour visitors who've asked their device to
   minimise motion. Keeps the site usable without animations. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- animations go here ---- */

/* 3D tilt — primary CTA ("book a call") buttons, site-wide.
   JS (animations.js) feeds --btn-rx / --btn-ry from the cursor;
   CSS just renders the tilt and eases it back on leave. */
.btn-primary{
  transform:perspective(620px) rotateX(var(--btn-rx,0deg)) rotateY(var(--btn-ry,0deg));
  transform-style:preserve-3d;
  transition:transform .2s var(--ease), background var(--ease) .2s, color .2s, border-color .2s;
  will-change:transform;
}
.btn-primary:active{
  transform:perspective(620px) rotateX(var(--btn-rx,0deg)) rotateY(var(--btn-ry,0deg)) scale(.97);
}

/* Gooey metaball cursor — electric blue, site-wide.
   Two blue blobs (a lead + a lagging trail) merged by the #cursor-goo-filter
   in animations.js. Mouse-only; native cursor hidden only when active. */
:root{ --cursor:#00b3ff; }   /* electric blue — tweak here to recolour */
@media (hover:hover) and (pointer:fine){
  html.cursor-goo-on, html.cursor-goo-on *{ cursor:none; }
  .cursor-goo{
    position:fixed;inset:0;z-index:99999;pointer-events:none;
    filter:url(#cursor-goo-filter);
    opacity:0;transition:opacity .25s var(--ease);
  }
  .cursor-blob{
    position:fixed;top:0;left:0;border-radius:50%;
    background:var(--cursor);transform:translate(-50%,-50%);will-change:transform;
    /* width/height set per-blob in animations.js (tapered trail) */
  }
}

/* Text colour-shift — nav links + footer links.
   On hover the text shifts to the metaball electric blue (--cursor)
   and the letter-spacing opens up. Applies site-wide. */
.nav-links a,
.foot-col a{
  transition:color .25s var(--ease), letter-spacing .25s var(--ease);
}
.nav-links a:hover,
.foot-col a:hover{
  color:var(--cursor);
  letter-spacing:.06em;
}

/* Shine sweep — "the difference" cards (homepage .card).
   A soft diagonal light band travels top-left → bottom-right on a
   continuous loop, with a pause between passes. .card has
   overflow:hidden + position:relative already, which clips the sweep. */
.card::after{
  content:"";
  position:absolute;
  inset:-50%;
  z-index:2;                 /* above the card's glow (0) and content (1) */
  pointer-events:none;
  background:linear-gradient(135deg, transparent 44%, rgba(255,255,255,.10) 50%, transparent 56%);
  transform:translate(-55%,-55%);
  animation:card-shine 5.5s linear infinite;
}
@keyframes card-shine{
  0%   { transform:translate(-55%,-55%); }   /* off the top-left corner */
  55%  { transform:translate(55%,55%); }      /* swept past the bottom-right */
  100% { transform:translate(55%,55%); }      /* hold off-card → gap before repeating */
}

/* Featured plan ("content engine") — drop the inverted cream look so it
   matches the dark scheme of plan one, then wrap it in an animated
   blue↔silver gradient outline. Same .plan.feat on the homepage pricing
   and the contact offers, so both stay identical. */
@property --plan-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.plan.feat{
  background:var(--bg-1);
  color:var(--fg);
  border-color:transparent;        /* the gradient ring becomes the outline */
  overflow:visible;                 /* don't clip the outline */
}
.plan.feat > *{ position:relative; z-index:1; }   /* content above the outline */
.plan.feat .eyebrow{ color:var(--fg-subtle); }
.plan.feat .plan-sub{ color:var(--fg-muted); }
.plan.feat .plan-blt{ color:var(--fg-muted); }
.plan.feat .plan-blt i{ background:var(--fg); }
.plan.feat .rule{ background:var(--line); }
.plan.feat .close{ color:var(--fg); }
.plan.feat .feat-flag{ border-color:var(--line); color:var(--fg-subtle); }
.plan.feat .btn-primary{ background:var(--fg); color:var(--bg); }
.plan.feat .btn-primary:hover{ background:#fff; }

.plan.feat::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  box-sizing:border-box;
  padding:2px;                      /* outline thickness */
  background:conic-gradient(from var(--plan-angle),
    var(--cursor), #e7edf3, #93a3b2, var(--cursor), #f2f5f8, #b8c3cd, var(--cursor));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:plan-border 4s linear infinite;
  pointer-events:none;
}
@keyframes plan-border{ to{ --plan-angle:360deg; } }

/* Pricing cards (homepage + contact): bullets absorb the free space so both
   CTAs sit at the bottom and line up. The close line gets even breathing room
   above and below. CTA is ~half width and left-aligned. */
.plan-blts{ flex:1 1 auto; }
.plan .close{ margin-top:26px; }
.plan .btn{
  margin-top:26px;
  width:50%;
  min-width:max-content;       /* never narrower than its label (longer CTAs on contact) */
  align-self:flex-start;       /* left-aligned, no full-width stretch */
}

/* Watch-showreel ghost buttons: outline shifts to electric blue on hover. */
.btn-ghost:hover{ border-color:var(--cursor); }

/* Logo wall — magnetic logos (driven by the magnet code in animations.js).
   The inner logo/text eases toward the cursor and snaps back on leave. */
.logo img,
.logo .logo-inner{
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  will-change:transform;
}
.logo .logo-inner{ display:inline-block; }