/* adMatesRO project overrides. Keep empty unless a class is missing from admates.css.
   Every rule here must use only the brand tokens (var(--color-brand-*)) and the Tailwind scale. */

/* Client logo marquee under the hero (index). The original .kunden-ribbon (admates.css) is a
   rotated, absolute decorative strip; this variant keeps the same kunden-marquee animation and
   mask but renders it as the visible moving banner with the portfolio clients. */
.kunden-ribbon-bar{--ribbon-angle:0deg;--ribbon-opacity:1;position:static;width:100%;transform:none;opacity:1;padding:1rem 0;--ribbon-speed:40s;contain:paint}

/* The marquee used to run on the main thread: every frame the browser re-rastered the
   strip, and because the track's half width is a fractional number the handles and tool
   labels shimmered with the subpixel offsets. Promoting the track to its own compositor
   layer means the strip is rastered once and then only moved, which is what stops the
   shaking. Top and bottom edges are snapped to whole pixels for the same reason. */
.kunden-track{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}

/* Client portrait inside the logo marquee (index). .kunden-logo only sets a height and
   width:auto, so a photo needs an explicit square box before the circular crop can apply.
   Two deliberate deviations from the logo row: 4rem instead of --logo-size (2.25rem), because
   a portrait at logo height reads as a dot, and filter:none, so the photo keeps its colors
   while the wordmarks stay grayscale. object-position keeps the face in frame (portrait source). */
.kunden-logo-round{width:4rem;height:4rem;border-radius:9999px;object-fit:cover;object-position:50% 30%;filter:none}

/* A social client in the marquee: avatar with the handle underneath. Takes over the flex item
   and the right-hand gap from .kunden-logo, which only fits bare images. */
.kunden-client{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;margin-right:var(--logo-gap)}

/* The marquee duration is fixed, so the on-screen speed depends on how wide the track is:
   the clients ribbon is much shorter than the tools ribbon and therefore crawls. This pins
   its duration to the tools ribbon's pixel speed (1359.5px per half at 60px/s). */
.kunden-ribbon-clients{--ribbon-speed:22.65s}

/* Horizontal swipe transition for the hero graphic scene (index). translate-x-full is not
   compiled into admates.css; the other swipe classes (translate-x-0, -translate-x-full) are. */
.translate-x-full{transform:translateX(100%)}

/* Hero lead arrow (index): it paints itself from the phone down to the "Start My Analysis"
   button, holds so the eye can follow it, then clears and starts over. pathLength="100" on the
   path normalises the length, so one dasharray value means "the whole path" at any width.
   The head only appears once the stroke has arrived. Geometry only, stroke comes from currentColor. */
.hero-arrow{animation:hero-arrow-cycle 3.6s ease-in-out infinite}
@keyframes hero-arrow-cycle{0%{opacity:0}8%,74%{opacity:1}90%,100%{opacity:0}}
.hero-arrow-path{stroke-dasharray:100;animation:hero-arrow-draw 3.6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes hero-arrow-draw{0%{stroke-dashoffset:100}46%,100%{stroke-dashoffset:0}}
.hero-arrow-head{animation:hero-arrow-head-in 3.6s ease-out infinite}
@keyframes hero-arrow-head-in{0%,40%{opacity:0}54%,74%{opacity:1}90%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
.hero-arrow{animation:none;opacity:1}
.hero-arrow-path{animation:none;stroke-dashoffset:0}
.hero-arrow-head{animation:none;opacity:1}}

/* Scroll-Performance: endlos laufende SVG-Animationen (stroke-dashoffset) kann der
   Compositor nicht übernehmen — sie repainten sonst dauerhaft im Seitenkontext.
   Mit eigener Ebene bleibt der Repaint im SVG eingesperrt. */
svg[data-draw],
.hero-arrow{contain:paint;will-change:transform}

/* Pricing chat (index, #pricing): the cost question answered as a messenger thread
   instead of another card grid. Only the incoming side keeps a tail: next to the blue
   bubbles the triangle read as a stray arrow. The tail is a border triangle pinned to the
   bottom corner, with the corner squared off so it sits flush. Canvas keeps the light tint
   and dot grid, matching the section's own background pattern. */
.chat-canvas{background-color:var(--color-brand-light);background-image:radial-gradient(rgb(1 10 44 / .05) 1px,transparent 1px);background-size:18px 18px;overflow-y:auto;overflow-x:hidden}
/* Message rows must not shrink, otherwise flex squeezes them and the thread never scrolls. */
.chat-canvas > *{flex:0 0 auto}
/* The thread is longer than a real phone screen, so it scrolls. Without this the last
   visible line just stops mid-sentence and reads as a rendering bug. */
.chat-canvas{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 2.5rem),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 2.5rem),transparent 100%)}
.chat-bubble{position:relative;max-width:85%}
.chat-in{border-bottom-left-radius:.3rem}
.chat-out{border-bottom-right-radius:.3rem}   /* no tail: the triangle next to the blue bubble read as a stray arrow */
.chat-in::after{content:"";position:absolute;left:-7px;bottom:0;width:0;height:0;border-right:7px solid #fff;border-top:7px solid transparent}

/* Typing dots. Same keyframe discipline as the rest of the file: off under reduced motion. */
.chat-typing span{display:block;width:.375rem;height:.375rem;border-radius:9999px;background:rgb(1 10 44 / .35);animation:chat-typing 1.2s ease-in-out infinite}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.chat-typing span{animation:none}}

/* iPhone frame around the pricing chat. Frame styling is the one already used for the
   social-ad phone on the hero (components/01-hero.html); only the size is project-specific,
   because unlike that phone this one has to hold a six-message thread without scrolling. */
.chat-phone{width:100%;max-width:24.375rem;aspect-ratio:390/844}

/* The email step of the hero form appears on click. x-transition is deliberately not used:
   its rAF-driven classes can leave the element stuck at display:none. A plain CSS animation
   restarts every time display flips from none, which gives the same entrance reliably. */
.step-in{animation:step-in .32s ease-out}
@keyframes step-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step-in{animation:none}}

/* Hero on phones. min-h-screen plus items-center centres the whole column in the viewport,
   which on a phone leaves a large gap between the fixed nav and the headline, and the same
   amount of dead space under the partner row. Below md the hero just hugs its content. */
@media (max-width:767px){
.hero-section{min-height:0;align-items:flex-start;padding-top:6.5rem;padding-bottom:2.5rem}}

/* Case tiles in "Results you can see". The label used to be revealed on hover; it now sits
   centred on the image from the first paint, one line of copy per tile at one size. The scrim
   is a soft radial wash: it darkens the middle just enough for white type, and leaves the
   edges of the photo alone. */
.case-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:1rem;text-align:center;pointer-events:none;
  background:radial-gradient(ellipse 78% 52% at 50% 50%,rgb(1 10 44 / .45) 0%,rgb(1 10 44 / 0) 100%)}
.case-label-text{color:#fff;font-size:1rem;font-weight:800;line-height:1.25;
  text-shadow:0 1px 10px rgb(1 10 44 / .5)}

/* Second line of a case label: the domain sits above the statement, same size and weight so
   every tile in the grid reads at one level, just a touch lighter than the line below it. */
.case-label-domain{display:block;color:rgb(255 255 255 / .78);font-size:1rem;font-weight:800;
  line-height:1.25;text-shadow:0 1px 10px rgb(1 10 44 / .5);margin-bottom:.1rem}

/* Inline model logos in the AI visibility lead paragraph. Sized in em so they follow the
   paragraph's font size instead of needing their own breakpoints. */
.lead-logo{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;margin-right:.4rem}

/* The icons in "How we grow your business" wiggle once every few seconds to pull the eye down
   the list. Offsets come from inline animation-delay, so they never fire at the same moment. */
@keyframes icon-shake{0%,56%,100%{transform:rotate(0)}60%{transform:rotate(-9deg)}64%{transform:rotate(8deg)}
  68%{transform:rotate(-6deg)}72%{transform:rotate(4deg)}76%{transform:rotate(-2deg)}}
.icon-shake{animation:icon-shake 4.2s ease-in-out infinite;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.icon-shake{animation:none}}

/* Closed "iPhone Duo" for the hero. Real folded dimensions: 84.1 x 117.8 mm, so the front
   silhouette is 0.714 wide-to-high — noticeably short and wide next to a normal iPhone. The
   whole device scales from --device-height; every other value is a fraction of it.
   Left side is the fold (a rounded spine), right side is the free edge with the rounded
   corners, the display sits between them as one continuous black panel. */
.duo{
  --device-height:clamp(300px,64vw,420px);
  --h:var(--device-height);
  --w:calc(var(--h) * 0.714);
  --bezel:calc(var(--h) * 0.0075);
  --spine:calc(var(--h) * 0.055);
  --radius:calc(var(--h) * 0.036);
  --rfold:calc(var(--h) * 0.042);
  --cam:calc(var(--h) * 0.014);
  position:relative;width:var(--w);height:var(--h);
  border-radius:var(--rfold) var(--radius) var(--radius) var(--rfold);
  background:linear-gradient(158deg,
    color-mix(in srgb,var(--color-brand-dark) 42%,#fff) 0%,
    color-mix(in srgb,var(--color-brand-dark) 68%,#fff) 16%,
    color-mix(in srgb,var(--color-brand-dark) 86%,#fff) 50%,
    color-mix(in srgb,var(--color-brand-dark) 68%,#fff) 84%,
    color-mix(in srgb,var(--color-brand-dark) 42%,#fff) 100%);
  box-shadow:
    0 44px 70px -34px rgb(1 10 44 / .55),
    0 4px 10px -4px rgb(1 10 44 / .3),
    inset 0 0 0 1px rgb(255 255 255 / .5),
    inset 0 1px 0 rgb(255 255 255 / .85),
    inset 0 -1px 0 rgb(255 255 255 / .5);
}
/* The fold: a cylinder seen head-on, so the light runs bright through the middle. */
.duo-spine{position:absolute;left:0;top:0;bottom:0;width:var(--spine);
  border-radius:var(--rfold) 0 0 var(--rfold);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--color-brand-dark) 58%,#fff) 0%,
    color-mix(in srgb,var(--color-brand-dark) 80%,#fff) 30%,
    color-mix(in srgb,var(--color-brand-dark) 62%,#fff) 58%,
    color-mix(in srgb,var(--color-brand-dark) 86%,#fff) 100%);
  box-shadow:inset -1px 0 0 rgb(1 10 44 / .45),inset 1px 0 0 rgb(255 255 255 / .35)}
/* One continuous front display. Only its right corners follow the chassis. */
.duo-front{position:absolute;left:var(--spine);right:var(--bezel);top:var(--bezel);bottom:var(--bezel);
  background:#000;overflow:hidden;
  border-radius:0 calc(var(--radius) - var(--bezel)) calc(var(--radius) - var(--bezel)) calc(var(--h) * 0.004);
  box-shadow:inset 0 0 calc(var(--h) * 0.02) rgb(0 0 0 / .9),inset 0 0 0 1px rgb(0 0 0 / .95)}
.duo-front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(114deg,rgb(255 255 255 / .05) 0%,rgb(255 255 255 / 0) 30%,rgb(255 255 255 / 0) 72%,rgb(255 255 255 / .04) 100%)}
.duo-cam{position:absolute;top:calc(var(--h) * 0.022);right:calc(var(--h) * 0.03);
  width:var(--cam);height:var(--cam);border-radius:9999px;
  background:radial-gradient(circle at 34% 30%,
    color-mix(in srgb,var(--color-brand-dark) 48%,#fff) 0%,var(--color-brand-darker) 52%,#000 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16),0 0 0 1px rgb(0 0 0 / .9)}

/* The showreel fills the closed Duo's front display. The camera cut-out and the glass
   reflection stay on top of it, so the device keeps reading as a device. */
.duo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo-cam{z-index:2}

/* The Duo also shows on phones, so the stage must not keep its fixed desktop height and the
   device has to size off the narrower column at each step. */
@media (max-width:767px){.hero-device{height:auto}}
@media (min-width:768px){.duo{--device-height:clamp(300px,44vw,440px)}}
@media (min-width:1024px){.duo{--device-height:clamp(320px,36vw,500px)}}