/* ---------------------------------------------------------------------------
 * Project overrides.
 *
 * Kept out of styles.css deliberately: per the README that file is compiled
 * output (`sass asset/scss/app.scss asset/css/styles.css --watch`), so anything
 * written into it is lost the next time the stylesheet is rebuilt. This file is
 * hand-authored, loaded after styles.css, and safe from that.
 * ------------------------------------------------------------------------- */

/* --- Signature -----------------------------------------------------------
 * The template draws its signature as an image (signature-1.png, the word
 * "Jayden"), which obviously could not be reused. It also ships a text-based
 * alternative — a .text-signature div, already styled at 52px here and given
 * position/z-index inside .cta — but never sets a font-family for it, so it
 * falls back to Poppins and reads as plain text rather than a signature.
 *
 * Great Vibes supplies the missing face. It is a broad-nib calligraphic script
 * with real thick/thin stroke contrast, which is what makes a mark read as
 * pen-written; monoline scripts (Sacramento, and most "handwriting" webfonts)
 * hold one stroke weight throughout and read as lettering instead.
 *
 * Self-hosted alongside the theme's own fonts, so nothing is fetched from a
 * font CDN at runtime.
 *
 * Only the latin subset is stored. Google serves latin and latin-ext
 * separately, and latin-ext covers U+0100-02BA — it does not include basic
 * Latin, so shipping that file alone would render "Kamran" in the fallback
 * face while appearing to have loaded a font correctly.
 */
@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/signature/great-vibes.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

.text-signature {
  font-family: "Great Vibes", cursive;
  /* The glyphs already join; the theme's -1px tracking pulls them into each
     other and breaks the connecting strokes, so it is reset here. */
  letter-spacing: 0;
  color: #fff;
  pointer-events: none;
}

/* Sidebar and banner: sits over the bottom of the portrait.
 *
 * The overlap is not set here — it comes from .avatar's negative bottom margin
 * pulling the next sibling up, which is exactly what the signature image used
 * to be. Matching the image's line box keeps that geometry intact.
 *
 * The tilt is a transform rather than a layout change on purpose: transforms
 * are painted after layout, so rotating cannot push the email and location
 * lines beneath it around. Rotating about the centre also keeps the mark on
 * the same centre line the template centres the block on.
 */
.left-sidebar .image .text-signature,
.section-banner .image .text-signature {
  position: relative;
  z-index: 1;
  font-size: 62px;
  line-height: 74px;
  text-align: center;
  transform: rotate(-9deg);
  transform-origin: center center;
}

/* The CTA mark sits over the "Book A Call" marquee, so it gets the same tilt
   but keeps the theme's own 52px sizing and stacking. */
.cta .text-signature {
  transform: rotate(-9deg);
  transform-origin: center center;
}

@media (max-width: 991px) {
  .left-sidebar .image .text-signature,
  .section-banner .image .text-signature {
    font-size: 44px;
    line-height: 54px;
  }
}

/* --- Stack section -------------------------------------------------------
 * The template fills each slide with a 140x140 logo PNG. Those were stock
 * tool logos (Figma, Loom, Framer, Slack, Monday) that had nothing to do with
 * the stack the slide titles name, so they are replaced with Font Awesome
 * brand marks.
 *
 * The explicit 140px height is the point of this rule, not the font-size: the
 * .image div previously took its height from the PNG inside it, so swapping a
 * 140px image for a ~92px glyph would silently shorten every slide and shift
 * the caption line under it. Pinning the height keeps the swiper's slides the
 * same size they already were.
 */
.section-tech-stack .tech-stack-item .image {
  display: flex;
  align-items: center;
  /* The template's .image was a plain block holding a logo <img>, so it never
     needed to centre anything. The process section's equivalent does exactly
     this — see .section-process .process-item .image. */
  justify-content: center;
  height: 140px;
}

/* Gradient fill, matching the process section's step icons.
 *
 * Those use a CSS mask: the SVG masks a var(--gradient5) background, so the
 * gradient — not the file — supplies the colour, and the icon re-tints itself
 * whenever the colour picker changes --gradient5.
 *
 * A mask cannot be used here because these are font glyphs, not SVG files.
 * background-clip: text is the text equivalent: paint the same gradient on the
 * element, then clip it to the glyph and make the glyph itself transparent.
 * The result tracks the swatch colour identically.
 *
 * gradient3 rather than the process section's gradient5, though. gradient5
 * opens on #000 through its first 30%, and the process icons can carry that
 * because they sit inside a 187px black circle with a light border — the ring
 * gives the dark end an edge to read against. These sit directly on the card
 * with no container, so that same black simply dissolved the top-left of the
 * Shopify bag into the background. gradient3 is the same two brand stops
 * without the black, and is what the services icons already use.
 */
.section-tech-stack .tech-stack-item .image i {
  font-size: 92px;
  line-height: 1;
  background: var(--gradient3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}