/* ---------------------------------------------------------------------------
 * 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;
}

/* Platforms row — one gradient, two kinds of mark.
 *
 * The template's .partners-item held an <img> logo. These are brand marks in
 * the swatch gradient instead, so the row re-tints with the colour picker like
 * the rest of the site rather than sitting outside it.
 *
 * Font Awesome covers Amazon, TikTok, Shopify, Etsy and Meta as font glyphs,
 * which take the gradient through background-clip: text (see the tech stack
 * rule above). The five it has no icon for are real logo files, which take the
 * same gradient through a CSS mask — the .gradient-icon pattern the process
 * section already uses. Different mechanisms, identical result.
 *
 * gradient3 for the same reason the tech stack uses it: gradient5 opens on #000
 * and these sit on a near-black circle.
 */
.section-partners .partners-item i,
.section-partners .partners-item .mark {
  /* The template dims logos to 0.3 and reveals them on hover. Kept, but lifted
     to 0.5: a two-stop gradient at 0.3 on a rgb(16,16,16) circle reads as mud
     rather than as a dimmed logo. */
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.section-partners .partners-item:hover i,
.section-partners .partners-item:hover .mark {
  opacity: 1;
}

.section-partners .partners-item i {
  font-size: 76px;
  line-height: 1;
  background: var(--gradient3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-partners .partners-item .mark {
  display: block;
  width: 96px;
  height: 96px;
  background: var(--gradient3);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* One rule per mark, matching the template's own .gradient-icon-1..4.
 *
 * The obvious shorthand — a --mark custom property set inline on each slide —
 * silently breaks: a url() inside a custom property resolves against the
 * stylesheet that *uses* it, not the document that declared it, so every path
 * came out as asset/css/asset/images/... and 404'd. Declaring the url() here
 * means it resolves against this file, which is what ../ below assumes. */
.section-partners .partners-item .mark-higgsfield {
  -webkit-mask-image: url("../images/partners/higgsfield.png");
  mask-image: url("../images/partners/higgsfield.png");
}

.section-partners .partners-item .mark-perplexity {
  -webkit-mask-image: url("../images/partners/perplexity.png");
  mask-image: url("../images/partners/perplexity.png");
}

.section-partners .partners-item .mark-microsoft-365 {
  -webkit-mask-image: url("../images/partners/microsoft-365.svg");
  mask-image: url("../images/partners/microsoft-365.svg");
}

.section-partners .partners-item .mark-vscode {
  -webkit-mask-image: url("../images/partners/vscode.png");
  mask-image: url("../images/partners/vscode.png");
}

.section-partners .partners-item .mark-photoshop {
  -webkit-mask-image: url("../images/partners/photoshop.svg");
  mask-image: url("../images/partners/photoshop.svg");
}

/* What I Deliver — keep every icon visible, open or closed.
 *
 * The template hides the icon of a collapsed row and slides its title 86px
 * left into the gap, so only the open row carries an icon. That state is
 * invisible on first load because the markup ships the closed rows without a
 * .collapsed class — Bootstrap adds it on the first interaction, at which
 * point nine of the ten icons disappear at once and the section looks broken.
 *
 * Restoring the icon is only half of it: the -86px title offset assumes the
 * icon is gone, so it has to go back to 0 or the titles ride over the icons.
 *
 * The dimmed title colour is deliberately left alone — with icons no longer
 * carrying the open/closed distinction, it becomes the only cue for which row
 * is active.
 */
.section-services .accordion-item.collapsed .accordion-head > .icon {
  opacity: 1;
  visibility: visible;
}

.section-services .accordion-item.collapsed .accordion-head > .title {
  margin-left: 0;
}

/* Red swatch — a studio portrait rather than a warm-lit one.
 *
 * Swatch 1 is the only one that shows .avatar-bg, the portrait baked onto the
 * warm gradient; swatches 2-10 swap to the transparent cutout on their own
 * colour. So this rule can only ever affect the red scheme.
 *
 * Greyscale is applied to the whole baked tile, subject and backdrop together,
 * which is the point: the warm radial behind him desaturates into a grey
 * falloff that reads as a studio backdrop, not as a colour that lost its
 * colour. Darkened slightly and given a touch of contrast so it sits deeper on
 * the page than the colour version does.
 *
 * A filter rather than a second baked asset: one file, and the treatment stays
 * legible as an intention instead of being frozen into a PNG.
 */
[data-color-primary=color-primary-1] .avatar-bg {
  filter: grayscale(1) brightness(0.82) contrast(1.08);
}