/* Shared components: nav, availability pill, square buttons, footer. */

/* ---------- Nav (fixed; whole bar inverts against the backdrop) ---------- */
/* The blend lives on the fixed element ITSELF (like Grayson's nav): a fixed
   element always creates its own stacking context, which isolates blending —
   so a blended wrapper INSIDE it would only blend against the nav's own
   transparent background and stay white everywhere. On the fixed element,
   difference blends against the page: black over white, white over black.
   The availability pill is a separate fixed element so it doesn't invert. */
.nav {
  position: fixed;
  top: calc(30 * var(--px));
  /* starts after the standalone logo (40px logo + 20px gap) */
  left: calc(var(--edge) + 60 * var(--px));
  /* leave room at the right for the standalone availability pill */
  right: calc(var(--edge) + 150 * var(--px));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(40 * var(--px));
  mix-blend-mode: difference;
  color: #fff;
}

/* Profile picture: its own fixed element OUTSIDE the blended bar so it
   keeps its true colours on every background — never inverted. */
.nav-logo {
  position: fixed;
  top: calc(30 * var(--px));
  left: var(--edge);
  z-index: 60;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  background: var(--color-card);
  overflow: hidden;
}

.nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-pill {
  position: fixed;
  top: calc(30 * var(--px));
  right: var(--edge);
  z-index: 60;
  display: flex;
  align-items: center;
  height: calc(40 * var(--px));
}

.nav__links a:hover {
  opacity: 0.6;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--px));
}

.nav__name {
  font-size: calc(14 * var(--px));
}

.nav__links {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--px));
  font-size: calc(14 * var(--px));
}

/* Availability pill (site feature; toggled via js/config.js).
   Solid chip so it stays legible on any backdrop without inverting. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  font-size: calc(13 * var(--px));
  padding: calc(6 * var(--px)) calc(12 * var(--px));
  border: 1px solid var(--stroke-10);
  border-radius: calc(999 * var(--px));
  white-space: nowrap;
  background: #fff;
  color: var(--color-text);
}

.status-pill__dot {
  width: calc(7 * var(--px));
  height: calc(7 * var(--px));
  border-radius: 50%;
  /* Live signal: a soft ring radiates out from the dot and fades */
  animation: dot-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-pill--available .status-pill__dot {
  background: var(--color-available);
  --dot: var(--color-available);
}

.status-pill--busy .status-pill__dot {
  background: var(--color-busy);
  --dot: var(--color-busy);
}

@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot, #4caf50) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 var(--ring, calc(8 * var(--px))) transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .status-pill__dot { animation: none; }
}

/* ---------- Square buttons (hero + footer CTA pair) ---------- */
.btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--px));
  height: calc(46 * var(--px));
  padding: 0 calc(20 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: calc(46 * var(--px));
  white-space: nowrap;
  transition: opacity 0.2s;
}

.btn:hover { opacity: 0.85; }

.btn img,
.btn .imask {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
}

.btn--dark {
  background: var(--color-text);
  color: #fff;
}

.btn--soft {
  background: var(--color-black-3);
  color: var(--color-text);
}

/* Footer variant: inverted */
.footer .btn--dark { background: #fff; color: var(--color-text); }
.footer .btn--soft { background: var(--color-black-3); color: #fff; }

/* ---------- Custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button { cursor: none; }
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  pointer-events: none;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  transition: transform 0.2s var(--ease-out), opacity 0.2s;
  opacity: 0;
}

.cursor.is-visible { opacity: 1; }
.cursor.is-link { transform: scale(2.4); }

.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  pointer-events: none;
  padding: 10px 15px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  color: #fff;
  font-size: 20px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(18px, -50%) scale(0.9);
  transition: opacity 0.2s, transform 0.25s var(--ease-out);
}

.cursor-label.is-visible {
  opacity: 1;
  transform: translate(18px, -50%) scale(1);
}

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-label { display: none; }
}

/* ---------- Monochrome icon via mask (colored by currentColor) ---------- */
.imask {
  display: inline-block;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}

/* ---------- Footer ---------- */
.footer {
  background: #000;
  color: #fff;
  padding: calc(100 * var(--px)) calc(95 * var(--px)) 0;
  display: flex;
  flex-direction: column;
  gap: calc(150 * var(--px));
  align-items: center;
  overflow: clip;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.footer__cta {
  font-weight: 400;
  font-size: calc(60 * var(--px));
  line-height: calc(70 * var(--px));
  max-width: calc(640 * var(--px));
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: calc(220 * var(--px));
  align-items: center;
  width: 100%;
  position: relative;
}

.footer__copyright {
  width: 100%;
  text-align: right;
  font-size: calc(14 * var(--px));
  line-height: calc(24 * var(--px));
}

.footer__giant-wrap {
  position: relative;
  width: 100%;
}

.footer__giant {
  font-weight: 400;
  font-size: calc(277.67 * var(--px));
  line-height: calc(347 * var(--px));
  text-align: center;
  white-space: nowrap;
  margin-bottom: calc(-60 * var(--px));
}

.footer__statue {
  position: absolute;
  bottom: 0;
  left: calc(255 * var(--px));
  width: calc(466 * var(--px));
  filter: grayscale(1);
  pointer-events: none;
}

.service-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(5 * var(--px)) calc(10 * var(--px));
  border-radius: calc(50 * var(--px));
  font-weight: 600;
  font-size: calc(16 * var(--px));
  line-height: calc(30 * var(--px));
  white-space: nowrap;
  box-shadow: 0 calc(4 * var(--px)) calc(24 * var(--px)) rgba(0, 0, 0, 0.35);
}

.service-pill--pink { background: var(--pill-pink); color: #fff; top: calc(50 * var(--px)); left: 57%; }
.service-pill--orange { background: var(--pill-orange); color: #fff; top: calc(138 * var(--px)); left: 9%; }
.service-pill--lime { background: var(--pill-lime); color: #000; top: calc(193 * var(--px)); left: 78%; }
.service-pill--blue { background: var(--pill-blue); color: #fff; top: calc(233 * var(--px)); left: 39%; }

/* ============ LOADER (decode intro) ============ */
/* Dark curtain with "DESIGNER ELO" decoding letter by letter in the
   center (regular weight — it's a name, not a shout). Unresolved
   letters flicker dimly through cipher characters; resolved ones snap
   to full white. When the word completes, the curtain lifts upward to
   reveal the page. Disable via ENABLE_LOADER in js/loader.js. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}

/* No scrolling while the curtain is up — the page reveal starts at 0 */
body.is-loading {
  overflow: hidden;
  height: 100svh;
}

.loader.is-done {
  transform: translateY(-100%);
  pointer-events: none;
}

.loader__text {
  /* Britti Sans Light: the name reads airier at loader scale */
  font-weight: 300;
  /* Desktop restored to the smaller curve (7vw / 110 cap); the 44px floor
     keeps the mobile size unchanged. */
  font-size: clamp(44px, 7vw, 110px);
  /* Locked line height: cycling glyphs must never grow the line box,
     or the whole word shakes vertically mid-scramble. */
  line-height: 1;
  height: 1em;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* Each cell is locked (by JS, after fonts load) to its own final
   letter's natural width, so the resolved word keeps its real
   proportional spacing — no monospace gaps — while cycling glyphs
   can never push the line around. */
.loader__ch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  opacity: 0.28;
  transition: opacity 0.15s;
}

.loader__ch.is-set {
  opacity: 1;
  animation: loader-snap 0.35s var(--ease-out);
}

@keyframes loader-snap {
  0%  { opacity: 0.28; transform: translateY(0.06em); }
  40% { opacity: 1; }
  100%{ opacity: 1; transform: translateY(0); }
}

/* Occasional glitch jitter on unresolved letters */
.loader__ch.is-glitch {
  transform: translateX(0.04em);
  opacity: 0.55;
}

/* ============================================================
   MOBILE  ≤ 768px — nav, menu overlay, footer (440 Figma frame)
   ============================================================ */
@media (max-width: 768px) {
  :root { --pxm: calc(100vw / 440); }

  /* Oversized editorial type bleeds past the frame on purpose — never
     let it become a horizontal scrollbar (it also shifts the loader). */
  html, body { overflow-x: clip; }

  /* ----- Nav: logo + name left, MENU right (row 408x60 at y25) ----- */
  .nav-logo {
    top: calc(10 * var(--pxm));
    left: calc(16 * var(--pxm));
    width: calc(40 * var(--pxm));
    height: calc(40 * var(--pxm));
  }

  .nav {
    top: calc(10 * var(--pxm));
    left: calc(71 * var(--pxm));  /* 16 + 40 + 15 gap */
    right: calc(16 * var(--pxm));
    height: calc(40 * var(--pxm));
  }

  .nav__name { font-size: calc(14 * var(--pxm)); }

  /* Desktop links hidden — replaced by the fullscreen menu overlay */
  .nav__links { display: none; }

  /* No availability pill in the mobile nav (per the wireframe) */
  .nav-pill { display: none; }

  /* Hamburger (Menu02 40x40): two lines, editorial. Injected by main.js.
     Lives inside the blended .nav so it self-inverts on dark sections. */
  .nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: calc(7 * var(--pxm));
    width: calc(40 * var(--pxm));
    height: calc(40 * var(--pxm));
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .nav-menu span {
    display: block;
    width: calc(24 * var(--pxm));
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s var(--ease-out), width 0.3s var(--ease-out);
  }

  .nav-menu span:last-child { width: calc(16 * var(--pxm)); }

  .nav-menu:hover span:last-child { width: calc(24 * var(--pxm)); }

  /* ----- Fullscreen menu overlay (injected by main.js, on <body>) ----- */
  .menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--color-bg, #fff);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: calc(27 * var(--pxm)) calc(16 * var(--pxm)) 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    /* closing: hold the backdrop while the links reverse-stagger out,
       then fade — keeps the exit from feeling abrupt */
    transition: opacity 0.4s var(--ease-out) 0.25s;
  }

  .menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    /* opening: backdrop leads, links follow their stagger */
    transition-delay: 0s;
  }

  /* Close button row — right-aligned, sits above nav links in the flex flow */
  .menu-overlay__close-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: calc(35 * var(--pxm));
    flex-shrink: 0;
  }

  .menu-overlay__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(35 * var(--pxm));
    height: calc(35 * var(--pxm));
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text);
  }

  .menu-overlay__close svg {
    width: calc(30 * var(--pxm));
    height: calc(30 * var(--pxm));
  }

  /* Proportional flex spacers — distribute remaining height by ratio */
  .menu-overlay__spacer {
    flex-grow: var(--grow);
    flex-shrink: 1;
    min-height: 0;
  }

  /* Nav links — centered, slide-up reveal */
  .menu-overlay__links {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--pxm));
    align-items: center;
  }

  .menu-overlay__links a {
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    width: 100%;
  }

  .menu-overlay__label {
    display: block;
    overflow: hidden;
    line-height: calc(44 * var(--pxm));
  }
  .menu-overlay__label > span {
    display: block;
    font-size: calc(36 * var(--pxm));
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: calc(44 * var(--pxm));
    text-align: center;
    transform: translateY(105%);
    transition: transform 0.6s var(--ease-out);
    transition-delay: calc(0.05s * (var(--total, 5) - var(--i)));
  }
  .menu-overlay.is-open .menu-overlay__label > span {
    transform: translateY(0);
    transition-delay: calc(0.06s * var(--i) + 0.1s);
  }

  /* Hairline divider + centred "+" between links and meta */
  .menu-overlay__divider {
    position: relative;
    width: calc(380 * var(--pxm));
    align-self: center;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out);
  }
  .menu-overlay.is-open .menu-overlay__divider {
    opacity: 1;
    transition-delay: 0.3s;
  }
  .menu-overlay__divider-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(20 * var(--pxm));
    font-weight: 200;
    line-height: 1;
    color: var(--color-text);
    background: var(--color-bg, #fff);
    padding: 0 calc(6 * var(--pxm));
  }

  /* Meta blocks: centered, with Google Meet icon on BOOK A CALL */
  .menu-overlay__meta {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--pxm));
    align-items: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .menu-overlay.is-open .menu-overlay__meta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
  }

  .menu-overlay__meta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(2 * var(--pxm));
    text-align: center;
  }

  .menu-overlay__meet-icon {
    width: calc(25 * var(--pxm));
    height: calc(25 * var(--pxm));
    margin-bottom: calc(3 * var(--pxm));
  }

  .menu-overlay__meta-label {
    font-size: calc(14 * var(--pxm));
    letter-spacing: 0.06em;
    opacity: 0.5;
    color: var(--color-text);
  }

  .menu-overlay__meta-value {
    font-size: calc(18 * var(--pxm));
    line-height: calc(24 * var(--pxm));
    color: var(--color-text);
    text-decoration: none;
  }

  /* Circular social chips — centered row */
  .menu-overlay__socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(5 * var(--pxm));
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .menu-overlay.is-open .menu-overlay__socials {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
  }

  .menu-overlay__soc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40 * var(--pxm));
    height: calc(40 * var(--pxm));
    border-radius: 50%;
    background: var(--color-text);
    color: var(--color-bg, #fff);
  }

  .menu-overlay__soc .imask {
    width: calc(14 * var(--pxm));
    height: calc(14 * var(--pxm));
  }

  /* Creation of Adam — gray image strip, inset within side padding */
  .menu-overlay__adam {
    height: calc(100 * var(--pxm));
    background: #F4F4F4;
    overflow: hidden;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out);
  }
  .menu-overlay.is-open .menu-overlay__adam {
    opacity: 1;
    transition-delay: 0.5s;
  }
  .menu-overlay__adam img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* ----- Buttons keep the frame's 46px height ----- */
  .btn {
    height: calc(46 * var(--pxm));
    padding: 0 calc(20 * var(--pxm));
    font-size: calc(16 * var(--pxm));
    gap: calc(10 * var(--pxm));
  }

  .btn img,
  .btn .imask {
    width: calc(20 * var(--pxm));
    height: calc(20 * var(--pxm));
  }

  /* ----- Footer — exact 440x953.9 frame ----- */
  .footer {
    padding: calc(100 * var(--pxm)) calc(16 * var(--pxm)) calc(20 * var(--pxm));
    gap: calc(60 * var(--pxm));
    align-items: flex-start;
  }

  /* CTA block (2147238567: gap 30; buttons 198x42 stacked, gap 10) */
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(30 * var(--pxm));
  }

  .footer__cta {
    font-size: calc(40 * var(--pxm));   /* h1-regular 40/50 */
    line-height: calc(50 * var(--pxm));
    max-width: calc(343.65 * var(--pxm));
  }

  .footer__top .btn-row {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--pxm));
  }

  .footer__top .btn {
    width: calc(198 * var(--pxm));
    height: calc(42 * var(--pxm));
    justify-content: flex-start;
  }

  /* REACH ME (2147238609: 1px top+bottom rgba(255,255,255,0.1),
     pad 30 0, gap 40 → then copyright; inner 2147238605 pad 10 0 gap 20) */
  .footer__reach {
    position: relative;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: calc(40 * var(--pxm)) 0;   /* 30 block + 10 inner */
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--pxm));
  }

  /* + markers on the reach band's border strokes */
  .footer__reach-plus {
    position: absolute;
    width: calc(12 * var(--pxm));
    height: calc(15 * var(--pxm));
    background: #fff;
    -webkit-mask: url("/assets/icons/plus-mobile.svg") center / contain no-repeat;
    mask: url("/assets/icons/plus-mobile.svg") center / contain no-repeat;
    pointer-events: none;
  }

  /* Bottom stroke, left */
  .footer__reach-plus--l { bottom: 0; left: 0; transform: translateY(50%); }
  /* Top stroke, right */
  .footer__reach-plus--r { top: 0; right: 0; transform: translateY(-50%); }

  .footer__reach-label {
    font-size: calc(12 * var(--pxm));   /* body-sm-regular-2, white 50% */
    line-height: calc(20 * var(--pxm));
    color: rgba(255, 255, 255, 0.5);
  }

  /* Two columns (2147238607 120-wide plain label / 2147238606 268-wide
     links), gap-20 between them */
  .footer__reach-links {
    display: flex;
    gap: calc(20 * var(--pxm));
  }

  .footer__reach-links > div:first-child {
    width: calc(120 * var(--pxm));
  }

  .footer__reach-links > div:last-child {
    width: calc(268 * var(--pxm));
  }

  .footer__reach-links > div {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--pxm));
  }

  .footer__reach-links span,
  .footer__reach-links a {
    font-size: calc(14 * var(--pxm));   /* body-md-regular-5 14/20 */
    line-height: calc(20 * var(--pxm));
  }

  .footer__reach-links span { color: rgba(255, 255, 255, 0.3); }
  .footer__reach-links a { color: #fff; }

  .footer__bottom {
    gap: 0;
    align-items: flex-start;
  }

  .footer__copyright {
    text-align: left;
    font-size: calc(12 * var(--pxm));   /* body-sm-regular-3, white 30% */
    line-height: calc(24 * var(--pxm));
    color: rgba(255, 255, 255, 0.3);
    margin-top: calc(30 * var(--pxm));  /* 2147238610 gap-30 */
    margin-bottom: calc(60 * var(--pxm));
  }

  /* Giant block (2147238604: 424 wide bleeding -8; height 265.9):
     "Designer / Elo" two lines at 110.2/110.2, Julius bleeding right,
     pills at exact frame coordinates */
  .footer__giant-wrap {
    width: calc(100% + 16 * var(--pxm));
    margin: 0 calc(-8 * var(--pxm));
    height: calc(265.9 * var(--pxm));
  }

  .footer__giant {
    position: absolute;
    top: calc(57.9 * var(--pxm));
    left: calc(3.5 * var(--pxm));
    width: calc(417 * var(--pxm));
    font-size: calc(110.22 * var(--pxm));
    line-height: calc(110.22 * var(--pxm));
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    margin: 0;
  }

  .footer__statue {
    top: calc(4.1 * var(--pxm));
    bottom: auto;
    left: calc(153.14 * var(--pxm));
    width: calc(308.44 * var(--pxm));
  }

  .service-pill {
    padding: calc(3.03 * var(--pxm)) calc(6.06 * var(--pxm));
    border-radius: calc(30.3 * var(--pxm));
    font-size: calc(9.7 * var(--pxm));    /* caption-semibold-90 */
    line-height: calc(18.18 * var(--pxm));
    font-weight: 600;
  }

  .service-pill--pink   { top: calc(141.07 * var(--pxm)); left: calc(186.84 * var(--pxm)); } /* Brand Design */
  .service-pill--orange { top: calc(153.17 * var(--pxm)); left: calc(10.18 * var(--pxm)); }  /* UI Design */
  .service-pill--lime   { top: calc(219.54 * var(--pxm)); left: calc(326.66 * var(--pxm)); } /* Conversion */
  .service-pill--blue   { top: calc(231.66 * var(--pxm)); left: calc(125.02 * var(--pxm)); } /* Brand Strategy */
}