/* ==========================================================================
   LUMINA — footer.css
   ONE footer for the whole site, generated into every page by
   scripts/build-footer.py (edit the template there, never a page).

   SECOND DESIGN, 2026-09-18. The first was rejected the day it was made:
   968px tall, and it ended on a giant "Lumina" set in Instrument Serif,
   which is not the firm's mark. This one is a third of the height and is
   built on the two things that ARE the firm's: the rendered wordmark
   (assets/lumina-logo.*), and the amber gem that dots its "i" — cut out
   of that same file as assets/lumina-gem.png.

   THE IDEA. One hairline runs the width of the window: today in Amman,
   midnight to midnight. Night is the site's blue, twilight its cyan,
   daylight its gold — so the two accents the whole site is drawn in turn
   out to be the two halves of a day. The real sunrise and sunset are
   ticked on it, the part of the day already gone is lit, and the gem sits
   on the line at the true local time, throwing its light on the footer
   under it. The wordmark stands on that line as on a horizon. Lumina is
   light; the footer says where the light is. js/footer.js does the
   astronomy (no network, no invented numbers); this file only draws it.

   SELF-CONTAINED ON PURPOSE. The two clusters disagree about --gold
   (#FFB25A vs #C2A35A) and about the body face (Instrument vs Inter), so
   everything is scoped under .lf with --lf-* tokens and its own
   @font-face — the same trade css/property-ui.css makes. It also takes
   back the bare p/li sizing css/style.css applies on the older pages.

   Transform and opacity only. The line is drawn by two opposed
   translates (a clip and its contents), not by a width; the gem rides a
   full-width rail translated by --f. The neon signs are the one place a
   filter is involved, as they were on index.html.
   ========================================================================== */
@font-face{font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/InstrumentSerif.woff2') format('woff2')}
@font-face{font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../assets/fonts/InstrumentSans.woff2') format('woff2')}

.lf{
  --lf-ink:#05070B; --lf-cream:#F7F2E9; --lf-gold:#FFB25A; --lf-gold-lt:#FFE0B0; --lf-cyan:#7FD9E8;
  --lf-56:rgba(247,242,233,.58); --lf-38:rgba(247,242,233,.4); --lf-hair:rgba(247,242,233,.09);
  --lf-ease:cubic-bezier(.2,.8,.2,1); --lf-draw:1.9s cubic-bezier(.22,.9,.24,1);
  /* --f is how much of Amman's day has gone (0…1); --day is the line's own
     gradient; --tint is the light the gem throws. All three are written by
     js/footer.js. The defaults are an equinox, so the line is right enough
     with the script blocked (the gem stays hidden until it is placed). */
  --f:0; --tint:rgba(255,178,90,.17); --lf-gap:14px;
  --day:linear-gradient(90deg,rgba(86,118,204,.55) 0%,rgba(86,118,204,.55) 21%,rgba(127,217,232,.95) 24.1%,#FFB25A 26%,#FFE0B0 29.8%,#FFE0B0 72.2%,#FFB25A 76%,rgba(127,217,232,.95) 77.9%,rgba(86,118,204,.55) 81%,rgba(86,118,204,.55) 100%);
  position:relative; isolation:isolate; overflow:hidden; margin:0; padding:clamp(50px,5.6vw,74px) 0 0;
  background:var(--lf-ink); color:var(--lf-cream); text-align:center;
  font-family:"Instrument Sans",system-ui,sans-serif; font-size:15px; line-height:1.5;
}
.lf[data-phase="night"]{--tint:rgba(86,118,204,.2)}
.lf[data-phase="twilight"]{--tint:rgba(127,217,232,.17)}
.lf[data-phase="golden"]{--tint:rgba(255,150,60,.24)}
.lf *,.lf *::before,.lf *::after{box-sizing:border-box}
.lf a{color:inherit; text-decoration:none}
/* <i> and <b> are used here as bare hooks, not as emphasis */
.lf i,.lf b{font-style:normal}
.lf p,.lf li,.lf ul{margin:0; padding:0; list-style:none; font-size:inherit; line-height:inherit; letter-spacing:normal; color:inherit; text-transform:none}

/* ── the mark, standing on the horizon ────────────────────── */
.lf-mark{position:relative; display:inline-block; vertical-align:bottom; transition:transform .6s var(--lf-ease)}
.lf-mark img{display:block; height:clamp(34px,3.3vw,44px); width:auto}
/* a glint on the gem that dots the wordmark's own "i" — the same gem that
   is out on the line. 56.8% / 17.1% is where it sits in the 669x181 file. */
.lf-mark::before{content:""; position:absolute; left:56.8%; top:17.1%; width:26px; height:26px; margin:-13px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,244,214,.95),rgba(255,190,110,.5) 38%,transparent 70%);
  opacity:0; animation:lf-glint 6.5s var(--lf-ease) 2.4s infinite}
@keyframes lf-glint{0%,100%{opacity:0; transform:scale(.4)} 6%{opacity:1; transform:scale(1.15)} 16%{opacity:0; transform:scale(.7)}}
/* the light that pools under it, on the line */
/* it starts ON the line (--lf-gap is how far the mark stands above it):
   started under the mark instead, its top edge showed as a faint bar */
.lf-mark::after{content:""; position:absolute; left:50%; top:100%; width:300px; height:54px; margin:var(--lf-gap) 0 0 -150px; pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(255,178,90,.3),transparent 72%); transition:opacity .6s var(--lf-ease); opacity:.8}

/* ── the line of the day ──────────────────────────────────── */
.lf-day{position:relative; height:1px; margin-top:var(--lf-gap)}
.lf-day-base{position:absolute; inset:0; display:block; background:var(--day); opacity:.3}
/* the day so far: a clip sliding in from the left with its contents
   sliding the other way, so the gradient never moves or stretches */
.lf-day-sofar{position:absolute; left:0; right:0; top:-12px; height:25px; display:block; overflow:hidden; pointer-events:none;
  transform:translate3d(calc((var(--f) - 1) * 100%),0,0); transition:transform var(--lf-draw)}
.lf-day-sofar>i{position:absolute; left:0; right:0; top:11.5px; height:2px; display:block; background:var(--day);
  box-shadow:0 0 10px rgba(255,190,110,.55);
  transform:translate3d(calc((1 - var(--f)) * 100%),0,0); transition:transform var(--lf-draw)}
/* sunrise and sunset, where they really fall today */
.lf-tick{position:absolute; left:var(--x,25%); top:-4px; width:1px; height:9px; display:block; background:rgba(255,224,176,.75);
  opacity:0; transition:opacity .8s var(--lf-ease) 1s}
.lf-tick b{position:absolute; left:50%; top:15px; transform:translateX(-50%); white-space:nowrap; font-weight:500;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lf-38); font-variant-numeric:tabular-nums;
  transition:opacity .5s var(--lf-ease)}
.lf-tick.near b{opacity:0}
.lf.is-timed.is-in .lf-tick{opacity:1}
/* the rail is as wide as the line and is moved by --f of its own width,
   so whatever stands at its left edge stands at that fraction of the day */
.lf-rail{position:absolute; left:0; right:0; top:0; height:0; pointer-events:none;
  transform:translate3d(calc(var(--f) * 100%),0,0); transition:transform var(--lf-draw); opacity:0}
.lf.is-timed .lf-rail{opacity:1}
.lf-pool{position:absolute; left:-300px; top:0; width:600px; height:170px; display:block;
  background:radial-gradient(50% 100% at 50% 0%,var(--tint),transparent 72%)}
/* the gem off the wordmark's "i", as the sun */
.lf-gem{position:absolute; left:-10px; top:-10px; width:20px; height:20px; border-radius:50%; display:block;
  background:url(../assets/lumina-gem.png) center/contain no-repeat;
  box-shadow:0 0 14px 3px rgba(255,178,90,.85),0 0 46px 12px rgba(255,150,60,.34)}
.lf-gem::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid rgba(255,206,140,.55);
  animation:lf-ping 3.6s var(--lf-ease) infinite}
@keyframes lf-ping{0%{transform:scale(.55); opacity:.9} 70%,100%{transform:scale(1.9); opacity:0}}
.lf[data-phase="golden"] .lf-gem{box-shadow:0 0 18px 5px rgba(255,160,70,.95),0 0 60px 18px rgba(255,120,40,.4)}
.lf[data-phase="twilight"] .lf-gem{box-shadow:0 0 14px 3px rgba(127,217,232,.75),0 0 46px 12px rgba(255,178,90,.3)}
.lf[data-phase="night"] .lf-gem{opacity:.82; box-shadow:0 0 12px 2px rgba(160,196,255,.7),0 0 38px 10px rgba(86,118,204,.34)}
.lf[data-phase="night"] .lf-gem::after{border-color:rgba(160,196,255,.5)}
.lf .lf-now{position:absolute; left:0; top:20px; transform:translateX(-50%); white-space:nowrap; pointer-events:auto;
  font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--lf-56); font-variant-numeric:tabular-nums}
.lf-now b{font-weight:600; color:var(--lf-gold-lt)}
.lf-rail[data-edge="l"] .lf-now{transform:translateX(-14px)}
.lf-rail[data-edge="r"] .lf-now{transform:translateX(-100%) translateX(14px)}

/* ── below the horizon ────────────────────────────────────── */
.lf-in{max-width:1440px; margin-inline:auto; padding:0 clamp(20px,5vw,72px)}
.lf-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px clamp(18px,2.7vw,42px); padding-top:60px}
.lf-nav a{position:relative; padding:5px 0; font-size:.93rem; color:var(--lf-56);
  transition:color .4s var(--lf-ease),transform .5s var(--lf-ease)}
.lf-nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--lf-gold),transparent); transform:scaleX(0); transition:transform .5s var(--lf-ease)}

.lf-reach{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(18px,3vw,46px); padding:24px 0 34px}
.lf-reach>a{font-family:"Instrument Serif",serif; font-size:1.18rem; letter-spacing:.01em; color:var(--lf-cream); transition:color .4s var(--lf-ease)}
.lf-reach>a:first-child{justify-self:end} .lf-reach>a:last-child{justify-self:start}

/* ── the three signs ──────────────────────────────────────────
   Instagram, Facebook, WhatsApp as lit tube, free-standing: a sharp tube
   over two blooms, each with its own turning gradient. They flicker on
   the first time the footer is seen (.is-lit) and js/footer.js stops
   their gradients turning while the footer is off screen. */
.lf-signs{display:flex; gap:clamp(14px,1.6vw,22px)}
.lf-sign{position:relative; display:grid; place-items:center; width:46px; height:46px; transition:transform .5s var(--lf-ease)}
.lf-sign svg{width:40px; height:40px; overflow:visible; opacity:.2}
.lf-sign .bl2{filter:blur(9px); opacity:.8; animation:lf-breathe 3.2s ease-in-out infinite}
.lf-sign .bl1{filter:blur(4px); animation:lf-breathe 3.2s ease-in-out -1.6s infinite}
.lf-sign .tube{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(255,255,255,.3))}
@keyframes lf-breathe{0%,100%{opacity:.62} 50%{opacity:1}}
.lf.is-lit .lf-sign svg{opacity:1; animation:lf-on 1.3s steps(1,end) 1 both}
.lf.is-lit .lf-sign:nth-child(2) svg{animation-delay:.2s} .lf.is-lit .lf-sign:nth-child(3) svg{animation-delay:.38s}
@keyframes lf-on{0%{opacity:.1}8%{opacity:.9}12%{opacity:.15}20%{opacity:1}24%{opacity:.3}34%{opacity:1}100%{opacity:1}}
.lf-sign b{position:absolute; left:50%; bottom:calc(100% + 8px); transform:translate3d(-50%,6px,0); padding:5px 10px; border-radius:8px;
  font-size:.66rem; font-weight:500; letter-spacing:.06em; white-space:nowrap; color:var(--lf-cream);
  background:rgba(11,16,24,.95); box-shadow:0 0 0 1px var(--lf-hair); opacity:0; pointer-events:none;
  transition:opacity .35s var(--lf-ease),transform .45s var(--lf-ease)}

/* ── the fine print ───────────────────────────────────────── */
.lf-base{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px 28px;
  padding:16px 0 18px; border-top:1px solid var(--lf-hair); font-size:.72rem; color:var(--lf-38)}
.lf .lf-base p{text-align:left}
.lf .zc{margin:0}
.lf-top{justify-self:end; display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--lf-hair); background:rgba(11,16,24,.6); color:var(--lf-56);
  transition:color .4s var(--lf-ease),border-color .4s var(--lf-ease),transform .5s var(--lf-ease)}
.lf-top svg{width:14px; height:14px}

.lf a:focus-visible,.lf button:focus-visible{outline:2px solid var(--lf-gold-lt); outline-offset:4px; border-radius:6px}
.lf-sign:focus-visible b{opacity:1; transform:translate3d(-50%,0,0)}

@media (hover:hover) and (pointer:fine){
  .lf-mark:hover{transform:translate3d(0,-3px,0)} .lf-mark:hover::after{opacity:1}
  .lf-nav a:hover{color:var(--lf-cream); transform:translate3d(0,-2px,0)} .lf-nav a:hover::after{transform:scaleX(1)}
  .lf-reach>a:hover{color:var(--lf-gold-lt)}
  .lf-sign:hover{transform:translate3d(0,-4px,0) scale(1.12)}
  .lf-sign:hover .bl1,.lf-sign:hover .bl2{animation:none; opacity:1}
  .lf-sign:hover b{opacity:1; transform:translate3d(-50%,0,0)}
  .lf-top:hover{color:var(--lf-cream); border-color:var(--lf-gold); transform:translate3d(0,-3px,0)}
}

/* ── the floating chips give way ──────────────────────────────
   listings / team / pages/* float a WhatsApp circle bottom-right and
   index.html floats "See it furnished". Fixed to the viewport, they ended
   up on top of the day line and the back-to-top button (seen on
   listings.html at 1440, and in the corner of every phone). The footer
   offers the same routes, so while it is on screen (html.lf-here, set by
   js/footer.js) they fade out and leave the tab order. */
html.lf-here .whatsapp-float,html.lf-here .fab{
  opacity:0 !important; visibility:hidden; pointer-events:none !important;
  transition:opacity .4s var(--lf-ease,ease),visibility 0s linear .4s !important;
}

/* ── it arrives ───────────────────────────────────────────── */
.lf-rv{opacity:0; transform:translate3d(0,18px,0); transition:opacity .9s var(--lf-ease),transform 1.1s var(--lf-ease); transition-delay:calc(var(--i,0) * 110ms)}
.lf.is-in .lf-rv{opacity:1; transform:none}
.lf:not(.is-in) .lf-mark::before,.lf:not(.is-in) .lf-gem::after,.lf:not(.is-in) .lf-sign .bl1,.lf:not(.is-in) .lf-sign .bl2{animation-play-state:paused}

@media (max-width:720px){
  .lf-nav{padding-top:56px; gap:0 22px}
  /* the 44px floor for a finger. css/mobile.css used to guarantee it for
     both old footers' links (they measured 17px and 23px); the rules went
     with those footers on 2026-09-18, so the one footer carries it itself */
  .lf-nav a,.lf-reach>a{display:inline-flex; align-items:center; justify-content:center; min-height:44px}
  .lf-top{width:44px; height:44px}
  .lf-reach{grid-template-columns:1fr; gap:14px; padding:26px 0 34px}
  .lf-reach>a:first-child,.lf-reach>a:last-child{justify-self:center}
  .lf-signs{order:-1; justify-content:center; margin-bottom:6px}
  .lf-tick b{display:none}
  .lf-base{grid-template-columns:1fr; justify-items:center; padding-bottom:26px}
  .lf .lf-base p{text-align:center}
  .lf-top{justify-self:center}
}
@media (prefers-reduced-motion:reduce){
  .lf-rv{opacity:1; transform:none; transition:none}
  .lf-day-sofar,.lf-day-sofar>i,.lf-rail,.lf-tick{transition:none}
  .lf-mark::before,.lf-gem::after,.lf-sign .bl1,.lf-sign .bl2,.lf.is-lit .lf-sign svg{animation:none}
  .lf-sign svg{opacity:1}
  .lf *{transition-duration:.001ms !important}
}