/* Alper Sarıtaş → AS monogram mark
   Drop-in asset. Requires logo-mark.js for measurement. */

/* -webkit-text-stroke-width is not animatable, so the cloned outline layer is
   driven by a registered custom property, which is. */
@property --lm-stroke-cur {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --lm-letter-stroke-cur {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.lm {
  --lm-size: 34px;
  --lm-ink: #141413;
  --lm-bg: #f1eee6;          /* must match the surface behind the mark: used to cut the S out from behind the A */
  --lm-outline-stroke: 0.4em;
  --lm-letter-outline-stroke: 0.2em;
  --lm-dur: 900ms;
  --lm-ease: cubic-bezier(0.72, 0, 0.16, 1);

  display: inline-block;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
  font-family: var(--lm-font, "Noto Serif"), Georgia, "Times New Roman", serif;
  font-weight: var(--lm-weight, 700);
  font-size: var(--lm-size);
  line-height: 1;
  letter-spacing: var(--lm-tracking, -0.015em);
  color: var(--lm-ink);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  contain: layout style;
  overflow: visible;
  transform: translateZ(0);
  will-change: width;
  transition:
    width var(--lm-dur) var(--lm-ease),
    --lm-stroke-cur var(--lm-dur) var(--lm-ease),
    --lm-letter-stroke-cur var(--lm-dur) var(--lm-ease);
}

.js.is-cold-start .lm[data-logo-mark][data-ready] {
  animation: lm-ready-fade 260ms var(--lm-ease) both;
}

.js.is-warm-start:not(.is-warm-mono) .lm[data-logo-mark]:not([data-ready]) {
  opacity: 1;
  visibility: visible;
}

@keyframes lm-ready-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lm.is-mono {
  --lm-stroke-cur: var(--lm-outline-stroke, 0.4em);
  --lm-letter-stroke-cur: var(--lm-letter-outline-stroke, 0.2em);
}

.lm-l {
  display: inline-block;
  position: relative;
  z-index: 2;
  transition:
    transform var(--lm-dur) var(--lm-ease),
    opacity 320ms var(--lm-ease);
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* the word space between "Alper" and "Sarıtaş" */
.lm-l[data-space] { width: 0.28em; }
.lm:not(.is-mono) .lm-l[data-drop] {
  transition-delay: 0ms, var(--lm-expand-delay, 0ms);
}

/* --- collapsed state --------------------------------------------------- */

.lm { width: var(--lm-full-w, auto); }
.lm.is-mono { width: var(--lm-mono-w); }

.lm.is-mono .lm-l { transform: translate3d(var(--lm-tx, 0px), 0, 0); }

.lm.is-mono .lm-l[data-drop] {
  opacity: 0;
  transition-delay: 0ms, 0ms;
}

/* The clones sit at the bottom of the mark stack: cloned S first, cloned A
   above it, then all real letters above both. */
.lm-outline-clone {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: transparent;
  -webkit-text-stroke: var(--lm-stroke-cur, 0px) var(--lm-bg);
  paint-order: stroke fill;
  pointer-events: none;
  user-select: none;
  backface-visibility: hidden;
  transition: transform var(--lm-dur) var(--lm-ease);
  transform: translate3d(var(--lm-clone-origin-x, 0px), 0, 0);
  will-change: transform;
}

.lm-outline-clone[data-for="a"] { z-index: 1; }
.lm.is-mono .lm-outline-clone { transform: translate3d(var(--lm-clone-target-x, 0px), 0, 0); }

/* the S sits under the A, dimmed for depth */
.lm-l[data-keep="s"] { z-index: 3; }
.lm.is-mono .lm-l[data-keep="s"] {
  transform: translate3d(var(--lm-tx, 0px), 0, 0);
  opacity: var(--lm-s-opacity, 0.88);
}

/* The A is painted above the S, so the two-letter mark keeps its intended
   overlap when both letters have the background-colored outline. */
.lm-l[data-keep] {
  -webkit-text-stroke: var(--lm-letter-stroke-cur, 0px) var(--lm-bg);
  paint-order: stroke fill;
}

.lm-l[data-keep="a"] {
  z-index: 4;
}

.lm[data-measuring] .lm-l { transition: none; }
.lm[data-instant],
.lm[data-instant] .lm-l,
.lm[data-instant] .lm-outline-clone { transition: none !important; }

/* --- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lm, .lm-l { transition-duration: 1ms !important; }
  .js.is-cold-start .lm[data-logo-mark][data-ready] { animation-duration: 1ms; }
}