/* ============================================================================
   PORTFOLIO CHROME — the floating site nav and the main footer
   ----------------------------------------------------------------------------
   Dropped into five hand-built landing pages that share nothing: five resets,
   five token vocabularies, five scroll engines. So:

     · every selector is `pf-` prefixed
     · every custom property is declared on the component roots below, NEVER on
       :root — `--nav-h`, `--white`, `--bg` and `--line` all already mean
       something different on at least one of these pages
     · every property this file depends on is set explicitly. The host resets
       zero out margins, list markers, button chrome and heading weights, so a
       UA default is never a safe assumption here.

   Load this BEFORE pf-outro.css: the type tokens below are what that file sizes
   itself from.
   ========================================================================== */

/* ---- box model ----
   These three components drop into five unrelated codebases, so they cannot
   assume a host reset. Every one of the five pages happens to set
   `box-sizing: border-box` globally today, and without it `width: 100%` plus
   `padding-inline` on the wraps below overflows by twice the gutter. Scoped to
   the component roots and their descendants so nothing leaks back out into a
   host page. */
.pf-dock, .pf-dock *, .pf-dock *::before, .pf-dock *::after,
.pf-outro, .pf-outro *, .pf-outro *::before, .pf-outro *::after,
.pf-dock::before, .pf-dock::after, .pf-outro::before, .pf-outro::after {
  box-sizing: border-box;
}

/* ---- shared tokens ----------------------------------------------------------
   The steps are lifted from portfolio_v3/css/type-system.css so the-process
   section and the footer are typographically the same site as amanda-design.com.
   Only the steps actually used are carried; the fluid clamps are the originals,
   unchanged. */
.pf-dock,
.pf-outro {
  --pf-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pf-fs-h1: clamp(2.5rem, 1.73rem + 2.4vw, 4rem);        /* 40 → 64 */
  --pf-fs-h4: clamp(1.625rem, 1.3rem + 1.0vw, 2.5rem);     /* 26 → 40 */
  --pf-fs-h5: clamp(1.5rem, 1.31rem + 0.6vw, 2rem);        /* 24 → 32 */
  --pf-fs-h6: clamp(1.375rem, 1.25rem + 0.39vw, 1.75rem);  /* 22 → 28 */
  --pf-fs-body-lg: 1.125rem;   /* 18 */
  --pf-fs-body: 1rem;          /* 16 */
  --pf-fs-body-sm: 0.875rem;   /* 14 */
  --pf-fs-eyebrow: 0.6875rem;  /* 11 */

  --pf-lh-tight: 1.04;
  --pf-lh-snug: 1.18;
  --pf-lh-normal: 1.45;
  --pf-lh-label: 1.25;

  --pf-tr-display: -0.04em;
  --pf-tr-heading: -0.03em;
  --pf-tr-snug: -0.02em;
  --pf-tr-body: -0.01em;
  --pf-tr-wide: 0.06em;

  --pf-fw-regular: 400;
  --pf-fw-medium: 500;
  --pf-fw-semibold: 600;

  /* Amanda's brand black. Kept in step with styles.css's --black. */
  --pf-ink: #111111;
  --pf-paper: #ffffff;
  --pf-muted: rgba(17, 17, 17, 0.55);
  --pf-line: rgba(0, 0, 0, 0.18);
  --pf-shot: #e8e8e8;

  --pf-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Phone scale, from the same source file. Token-level, so every rule below
     inherits it without a second selector. */
}

@media (max-width: 760px) {
  .pf-dock,
  .pf-outro {
    --pf-fs-h1: 2.5rem;
    --pf-fs-h4: 1.5rem;
    --pf-fs-h5: 1.375rem;
    --pf-fs-h6: 1.25rem;
    --pf-fs-eyebrow: 0.75rem;
    --pf-lh-tight: 1.14;
    --pf-lh-snug: 1.24;
    --pf-lh-normal: 1.55;
    --pf-lh-label: 1.3;
    --pf-tr-display: -0.025em;
    --pf-tr-heading: -0.02em;
    --pf-tr-snug: -0.015em;
  }
}

/* ============================================================================
   THE FLOATING NAV DOCK
   ----------------------------------------------------------------------------
   Fixed to the top right of every page, above everything. z-index 9000 clears
   the highest value any of the five pages uses (nobi, 200) by a wide margin, so
   this never has to be re-tuned when one of them gains a layer.

   It sits in the EXTREME corner, over whatever the page puts there. Amanda:
   "The floating navigation button on top-right corner should be at the extreme
   top. Right now the position is under the top-navbar of respective pages. It is
   totally okay if it is in front of any elements of the page including the
   header because all those links in the respective pages are dead."

   So there is no --pf-dock-top any more, and no per-page offset to keep in step
   with five different header heights. One pair of offsets, every page.
   ========================================================================== */
.pf-dock {
  position: fixed;
  top: clamp(12px, 1.6vw, 24px);
  right: clamp(12px, 1.6vw, 24px);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-family: var(--pf-font);
  letter-spacing: var(--pf-tr-body);
}

/* ---- not on a phone ----
   Amanda: "In mobile, please just hide the hamburger nav button. Let's don't
   use it." It was landing squarely on four of the five pages' own burgers --
   two hamburger icons in the same corner -- and the pages' own navigation is
   right there anyway. 760px is the breakpoint the rest of this file uses. */
@media (max-width: 760px) {
  .pf-dock { display: none; }
}

/* The page is still loading. Both of these are the host pages' own signals:
   kayn holds <html data-motion="pending"> until the loader hands over, nobi
   holds <body class="is-loading">. The dock must not float over either. */
html[data-motion="pending"] .pf-dock,
body.is-loading .pf-dock {
  opacity: 0;
  pointer-events: none;
}

.pf-dock__btn {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--pf-ink);
  border-radius: 50%;
  background: var(--pf-paper);
  color: var(--pf-ink);
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
  transition: transform 0.35s var(--pf-ease), box-shadow 0.35s var(--pf-ease);
}
.pf-dock__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); }
.pf-dock__btn:focus-visible { outline: 2px solid var(--pf-ink); outline-offset: 3px; }

/* Three bars that fold into an X. The middle bar fades rather than rotating,
   which is what keeps the two diagonals meeting at the centre. */
.pf-dock__bars { position: relative; display: block; width: 20px; height: 12.4px; }
.pf-dock__bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s var(--pf-ease), opacity 0.2s linear;
}
.pf-dock__bars i:nth-child(1) { top: 0; }
.pf-dock__bars i:nth-child(2) { top: 5.4px; }
.pf-dock__bars i:nth-child(3) { top: 10.8px; }
.pf-dock.is-open .pf-dock__bars i:nth-child(1) { transform: translateY(5.4px) rotate(45deg); }
.pf-dock.is-open .pf-dock__bars i:nth-child(2) { opacity: 0; }
.pf-dock.is-open .pf-dock__bars i:nth-child(3) { transform: translateY(-5.4px) rotate(-45deg); }

.pf-dock__menu {
  min-width: 212px;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--pf-ink);
  border-radius: 14px;
  background: var(--pf-paper);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: 100% 0;
  transition: opacity 0.26s linear, transform 0.34s var(--pf-ease);
}
.pf-dock__menu[hidden] { display: none; }
.pf-dock.is-open .pf-dock__menu { opacity: 1; transform: none; }

.pf-dock__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--pf-ink);
  background: transparent;
  text-decoration: none;
  font-size: var(--pf-fs-body);
  font-weight: var(--pf-fw-medium);
  line-height: var(--pf-lh-normal);
  letter-spacing: var(--pf-tr-snug);
}

/* ---- the hover: an underline, the same one the rest of the site draws ----
   Amanda: "the link interaction is a bit different, please use underline as the
   hover animation instead to keep everything consistent." This is v3's own
   .nav__link::after (css/styles.css) -- a 1.5px rule scaled from 0 to 1 out of
   the left edge over 0.4s on --ease-out.

   It sits on the LABEL, not on the link. The link is a flex row with 12px of
   padding and space-between, so an underline across it would run the full width
   of the menu and pass under the little external-link arrow. Underlining the
   span keeps the rule the width of the word, which is what it is on v3. */
.pf-dock__label {
  position: relative;
  display: inline-block;
}
.pf-dock__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--pf-ease);
}
.pf-dock__link:hover .pf-dock__label::after,
.pf-dock__link:focus-visible .pf-dock__label::after { transform: scaleX(1); }
.pf-dock__link:focus-visible { outline: 2px solid var(--pf-ink); outline-offset: -2px; }

.pf-dock__ext { width: 12px; height: 12px; flex: none; opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .pf-dock__btn,
  .pf-dock__bars i,
  .pf-dock__menu,
  .pf-dock__label::after { transition-duration: 0.01ms; }
}

@media (max-width: 600px) {
  .pf-dock__btn { width: 46px; height: 46px; }
  .pf-dock__menu { min-width: 190px; }
}