/* ============================================================================
   19.09.26 — the site footer (built by js/site-footer.js)
   One black frame: the Chyk signature top left, the tilted diya across the
   bottom, the sections of the site stacked down the right.
   ========================================================================== */
footer.site-footer.sf {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 620px; max-height: 1200px;
  padding: 0 !important; margin: 0;
  background: #000 !important; border: 0 !important;
  color: #f4ead0;
  isolation: isolate;
}

/* -- the lamp: pinned to the bottom, its tail just in from the left edge --- */
/* The art is 1600 wide with ~120 of empty margin on its left; the box is
   sized so the lamp draws at 1600px across a 1920px screen and nudged left
   so the tail starts right at the edge, with the flame under the sections. */
.sf-lamp {
  position: absolute; left: -5vw; bottom: 0; z-index: 0;
  width: 84vw; height: 100%;
}
/* no WebGL2: the still outline instead */
.sf-lamp.reveal-diya-unsupported,
.sf-lamp.reveal-diya-error {
  background: url(../assets/reveal-diya/diya.png) center bottom / contain no-repeat;
}

/* -- the logo ---------------------------------------------------------------- */
/* assets/footer/chyk-logo-footer.webp: the embossed logo, lifted to the
   lamp's brightness, with its gold dot, plus an 80px margin all round (of
   1450) so the fire's glow isn't cut off. The box is pulled up and left by
   that margin, so the ink itself sits at 8.5% / 18%. Once the fire has drawn
   its first frame the plain image fades out and the canvas (the same art)
   takes over; "screen" lets that canvas's black fall away over the lamp. */
.sf-sign {
  --sf-sign-w: min(48.4vw, 89.9vh);
  position: absolute; z-index: 2;
  left: calc(8.5% - var(--sf-sign-w) * .0552); top: calc(18% - var(--sf-sign-w) * .0552);
  width: var(--sf-sign-w);
  display: block; line-height: 0;
  mix-blend-mode: screen;
}
.sf-sign img { position: relative; width: 100%; height: auto; display: block; transition: opacity .9s ease; }
.sf-sign.reveal-diya-ready img { opacity: 0; }

/* -- the rule: from the left edge to HOME -------------------------------------- */
/* --sf-rule-y / --sf-rule-w are measured off HOME by js/site-footer.js */
.sf-rule {
  position: absolute; z-index: 3; left: 0;
  top: var(--sf-rule-y, 11%);
  width: calc(var(--sf-rule-w, 70%) - clamp(1.1rem, 2.2vw, 2.4rem));
  height: 1px;
  background: linear-gradient(90deg, #7d5f22 0%, #c9a24a 30%, #f4d271 78%, #fff1c2 100%);
  box-shadow: 0 0 6px rgba(244, 210, 113, .45), 0 0 18px rgba(201, 162, 74, .25);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.6s cubic-bezier(.65, 0, .2, 1);
  pointer-events: none;
}
.sf-rule i {
  position: absolute; right: -4px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  background: #fff1c2; transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(255, 228, 140, .9), 0 0 18px rgba(232, 180, 70, .6);
}
.sf-in .sf-rule { transform: none; }

/* -- the sections ---------------------------------------------------------- */
.sf-nav {
  position: absolute; z-index: 3;
  right: 2.6%; top: 0; bottom: 0;
  display: flex; align-items: center;
}
.sf-nav > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: clamp(.5rem, 4.6vh, 3.4rem);
}
.sf-link {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(1.25rem, min(2.9vw, 5.2vh), 3.6rem); line-height: 1;
  letter-spacing: .07em; text-transform: uppercase; text-decoration: none; text-align: right;
  /* faint until found: a low, warm glow */
  color: rgba(214, 196, 120, .34);
  text-shadow: 0 0 .35em rgba(232, 200, 110, .22);
  transition: color .4s ease, text-shadow .45s ease;
}
/* No neon under the cursor: the fire above is the whole effect. Only a keyboard
   focus still needs to show itself. */
.sf-link:focus-visible, .sf-rel.is-open > .sf-link {
  outline: none;
  color: #fff3c4;
  text-shadow: 0 0 .1em rgba(255, 228, 140, .9), 0 0 .3em rgba(232, 180, 70, .55);
}
.sf-link[aria-current="page"] { color: rgba(236, 214, 140, .62); }

/* the fire over the section names (js/site-footer.js, linkFire). It burns a
   little hotter while the cursor is actually on a word. */
.sf-navfire { position: absolute; z-index: 4; pointer-events: none; mix-blend-mode: screen; transition: filter .4s ease; }
.sf-navfire.is-hot { filter: brightness(1.4) saturate(1.06); }

/* Related Links: the list opens to the left of the word */
.sf-rel { position: relative; }
.sf-rel-list {
  position: absolute; right: calc(100% + 2.2rem); bottom: 0;
  list-style: none; margin: 0; padding: 1rem 1.2rem;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
  white-space: nowrap;
  background: rgba(0, 0, 0, .72); border-right: 1px solid rgba(232, 200, 110, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transform: translateX(12px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .45s;
}
.sf-rel:hover .sf-rel-list, .sf-rel:focus-within .sf-rel-list, .sf-rel.is-open .sf-rel-list {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.sf-rel-list a {
  font-family: var(--font-body, 'Inter', sans-serif); font-size: .82rem; letter-spacing: .04em;
  color: rgba(244, 226, 170, .7); text-decoration: none;
  transition: color .25s ease, text-shadow .25s ease;
}
.sf-rel-list a:hover, .sf-rel-list a:focus-visible {
  outline: none; color: #fff3c4; text-shadow: 0 0 8px rgba(250, 205, 95, .8);
}

/* -- a whisper of small print along the bottom ------------------------------- */
.sf-base {
  position: absolute; z-index: 3; right: 2.6%; bottom: 1.1rem;
  display: flex; align-items: center; gap: 1.1rem;
  font-family: var(--font-body, 'Inter', sans-serif); font-size: .64rem; letter-spacing: .06em;
  color: rgba(244, 226, 170, .3);
}
.sf-base a { color: inherit; text-decoration: none; transition: color .3s ease; }
.sf-base a:hover { color: rgba(250, 220, 140, .95); }
.sf-social { display: flex; gap: .7rem; }
.sf-social a { display: block; width: 15px; height: 15px; }
.sf-social svg { width: 100%; height: 100%; display: block; }

/* -- tablets and phones: signature, then the sections, then the lamp ------- */
@media (max-width: 900px) {
  footer.site-footer.sf { height: auto; max-height: none; min-height: 0; padding: 0 0 62vw !important; }
  .sf-sign { position: relative; left: auto; top: auto; margin: 2.5rem auto .75rem; width: min(88vw, 480px); }
  .sf-rule { top: 0; width: 100%; background: linear-gradient(90deg, #7d5f22, #f4d271 55%, rgba(244, 210, 113, 0)); }
  .sf-rule i { display: none; }
  .sf-nav { position: relative; right: auto; justify-content: center; }
  .sf-nav > ul { align-items: center; gap: .9rem; }
  .sf-link { font-size: clamp(1.1rem, 6vw, 1.7rem); text-align: center; }
  .sf-lamp { left: -4vw; width: 108vw; height: 62vw; top: auto; }
  .sf-rel-list { right: 50%; bottom: calc(100% + .75rem); transform: translate(50%, 8px); align-items: center; }
  .sf-rel:hover .sf-rel-list, .sf-rel:focus-within .sf-rel-list, .sf-rel.is-open .sf-rel-list { transform: translate(50%, 0); }
  .sf-base { position: relative; right: auto; bottom: auto; margin: 2rem 1rem 0; flex-direction: column; gap: .7rem; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-rule { transform: none; transition: none; }
  .sf-navfire { transition: none; }
}