/* Altahany lux layer — PREVIEW (2026-10-12)
   Loaded only on a device that opened ?preview=lux (localStorage flag); ?preview=off clears it.
   Everything here is additive: page transitions, a branded loader for slow navigations,
   the gold ornament under section titles, and a softer card finish. */

/* 1 — page transitions (cross-document View Transitions; browsers without it just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: athLuxOut .12s ease-out both; }
::view-transition-new(root) { animation: athLuxIn .2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes athLuxOut { to { opacity: 0; } }
@keyframes athLuxIn  { from { opacity: 0; transform: translateY(6px); } }
/* the header and the bottom bar stay put while the page under them changes */
.pub-header { view-transition-name: ath-header; }
.ath-bottom-nav { view-transition-name: ath-bottomnav; }
::view-transition-group(ath-header), ::view-transition-group(ath-bottomnav) { animation: none; }

/* 2 — branded loader, shown only when a navigation takes longer than ~half a second */
.ath-lux-loader {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(120% 80% at 50% 40%, #fffdf9 0, #faf4ea 55%, #f1e4ce 100%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.ath-lux-loader.is-on { opacity: 1; visibility: visible; transition: opacity .28s ease; }
.ath-lux-loader__mark { width: 92px; height: 92px; filter: drop-shadow(0 10px 24px rgba(138,100,32,.22)); }
.ath-lux-loader__mark svg { width: 100%; height: 100%; overflow: visible; }
.ath-lux-arch { stroke-dasharray: 150; stroke-dashoffset: 150; animation: athLuxDraw 1.4s cubic-bezier(.6,0,.3,1) infinite alternate; }
.ath-lux-arch.is-inner { animation-delay: .18s; }
.ath-lux-at { opacity: 0; animation: athLuxFade 1.4s ease infinite alternate; animation-delay: .35s; }
.ath-lux-gem { transform-origin: 31px 15px; animation: athLuxGem 1.4s ease-in-out infinite alternate; }
@keyframes athLuxDraw { to { stroke-dashoffset: 0; } }
@keyframes athLuxFade { 60%, 100% { opacity: 1; } }
@keyframes athLuxGem  { from { transform: scale(.7); opacity: .55; } to { transform: scale(1.12); opacity: 1; } }
.ath-lux-loader__name {
  font-family: var(--ath-font-display, 'Amiri', serif); font-size: 32px; font-weight: 700; line-height: 1.5;
  padding: 0 .1em .28em; /* room for the dots under the ي — background-clip:text only paints inside the box */
  background: linear-gradient(180deg, #d7b061 0, #b88b3d 55%, #8a6d12 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ath-lux-loader__bar { position: relative; width: 120px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(184,139,61,.18); }
.ath-lux-loader__bar i { position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, #b88b3d, transparent); animation: athLuxBar 1.1s ease-in-out infinite; }
@keyframes athLuxBar { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
html[dir="rtl"] .ath-lux-loader__bar i { animation-direction: reverse; }

/* 3 — the gold ornament under section titles: centred lines with the kosha diamond */
html.ath-lux main .ath-section-head h2::after,
html.ath-lux main .ath-section-heading h2::after {
  content: "" !important; display: block !important;
  width: 104px !important; height: 11px !important; margin: 14px auto 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='11' viewBox='0 0 104 11'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a24a' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23c9a24a'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23c9a24a' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23c9a24a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5' width='43' height='1' fill='url%28%23l%29'/%3E%3Crect x='61' y='5' width='43' height='1' fill='url%28%23r%29'/%3E%3Cpath d='M52 .8 56.7 5.5 52 10.2 47.3 5.5Z' fill='%23b88b3d'/%3E%3Cpath d='M52 3.3 54.2 5.5 52 7.7 49.8 5.5Z' fill='%23f3dfb0'/%3E%3C/svg%3E") center / 104px 11px no-repeat !important;
}

/* 4 — cards: a warmer, deeper finish and a gentle lift where a mouse can hover */
html.ath-lux .ath-offer-card, html.ath-lux .ath-cat-card, html.ath-lux .ath-service-card, html.ath-lux .ath-section-card {
  border-color: rgba(184,139,61,.28) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px -18px rgba(80,52,18,.28) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.ath-lux .ath-offer-card:hover, html.ath-lux .ath-cat-card:hover, html.ath-lux .ath-service-card:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 26px 54px -20px rgba(80,52,18,.36) !important;
    border-color: rgba(184,139,61,.5) !important;
  }
}

/* 5 — the hanging lights: warm yellow, clearly lit, a calm on/off travelling along the string.
   Only opacity/scale animate (cheap on a phone); the glow itself is static. */
html.ath-lux .ath-scene-lights i::after {
  background: radial-gradient(circle at 50% 58%, #fffbe8 0%, #ffe9a6 22%, #ffd45c 46%, rgba(255,196,60,.55) 64%, rgba(255,190,50,0) 76%) !important;
  box-shadow: 0 0 10px 3px rgba(255,214,92,.85), 0 0 26px 9px rgba(255,196,64,.42), 0 0 54px 18px rgba(255,186,48,.16) !important;
  filter: none !important;
  animation: athLuxBulb 3.2s ease-in-out infinite !important; will-change: opacity, transform;
}
html.ath-lux .ath-scene-lights i:nth-child(1)::after { animation-delay: 0.0s !important; }
html.ath-lux .ath-scene-lights i:nth-child(2)::after { animation-delay: 0.29s !important; }
html.ath-lux .ath-scene-lights i:nth-child(3)::after { animation-delay: 0.58s !important; }
html.ath-lux .ath-scene-lights i:nth-child(4)::after { animation-delay: 0.87s !important; }
html.ath-lux .ath-scene-lights i:nth-child(5)::after { animation-delay: 1.16s !important; }
html.ath-lux .ath-scene-lights i:nth-child(6)::after { animation-delay: 1.45s !important; }
html.ath-lux .ath-scene-lights i:nth-child(7)::after { animation-delay: 1.74s !important; }
html.ath-lux .ath-scene-lights i:nth-child(8)::after { animation-delay: 2.03s !important; }
html.ath-lux .ath-scene-lights i:nth-child(9)::after { animation-delay: 2.32s !important; }
html.ath-lux .ath-scene-lights i:nth-child(10)::after { animation-delay: 2.61s !important; }
html.ath-lux .ath-scene-lights i:nth-child(11)::after { animation-delay: 2.9s !important; }
@keyframes athLuxBulb {
  0%, 100% { opacity: .62; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* 5b — glass: translucent ivory panels with a fine bright edge (blur only on the two bars) */
html.ath-lux .pub-header, html.ath-lux .ath-bottom-nav {
  background: rgba(255,253,249,.72) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-color: rgba(255,255,255,.6) !important;
}
html.ath-lux .ath-offer-card, html.ath-lux .ath-cat-card, html.ath-lux .ath-service-card, html.ath-lux .ath-home-services {
  background-color: rgba(255,255,255,.82) !important;
}

/* 5c — the Altahany mark, very faint, behind the whole page */
html.ath-lux body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/brand/logo.svg") center 58% / min(78vw, 560px) auto no-repeat;
  opacity: .045;
}

/* 5d — while the page is scrolling, decorative loops pause so scrolling stays smooth */
html.ath-lux.ath-is-scrolling .ath-scene-lights i, html.ath-lux.ath-is-scrolling .ath-scene-lights i::after,
html.ath-lux.ath-is-scrolling [class*="ath-scene"], html.ath-lux.ath-is-scrolling .ath-haze,
html.ath-lux.ath-is-scrolling .btn { animation-play-state: paused !important; }

/* 6 — buttons like engraved gold: a lit top edge and a deeper, warmer shadow */
html.ath-lux .btn-primary {
  background-image: linear-gradient(160deg, #d2ab62 0%, #b88b3d 46%, #8f6a26 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,214,.55), inset 0 -1px 0 rgba(90,60,18,.25), 0 12px 26px -10px rgba(122,83,18,.45) !important;
  border-color: rgba(143,106,38,.6) !important;
  letter-spacing: .2px;
}
html.ath-lux .btn-outline { box-shadow: inset 0 0 0 1px rgba(184,139,61,.35), 0 8px 20px -14px rgba(80,52,18,.3) !important; }
@media (hover: hover) and (pointer: fine) {
  html.ath-lux .btn-primary:hover { filter: brightness(1.06) saturate(1.05); }
}

/* 7 — the home service panel: a fine double gold frame */
html.ath-lux .ath-home-services {
  box-shadow: inset 0 0 0 1px rgba(184,139,61,.20), inset 0 0 0 6px rgba(255,253,249,.9), inset 0 0 0 7px rgba(184,139,61,.12), 0 24px 50px -30px rgba(80,52,18,.35) !important;
}

/* 8 — the occasion keywords stay as links but stop competing with the service chips */
html.ath-lux .ath-home-occasions { gap: 4px 2px !important; justify-content: center; }
html.ath-lux .ath-home-occasions a {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 6px 10px !important; font-size: 13px !important; color: #8a6420 !important;
  position: relative;
}
html.ath-lux .ath-home-occasions a + a::before {
  content: "◆"; position: absolute; inset-inline-start: -4px; top: 50%; transform: translateY(-50%);
  font-size: 6px; color: #c9a24a; opacity: .7;
}

/* 9 — the floating contact circle: smaller so it no longer covers card edges */
@media (max-width: 767px) {
  html.ath-lux .ath-contact-fab__btn { width: 46px !important; min-width: 46px !important; height: 46px !important; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .ath-lux-arch, .ath-lux-at, .ath-lux-gem, .ath-lux-loader__bar i, html.ath-lux .ath-scene-lights i::after { animation: none !important; }
  .ath-lux-arch { stroke-dashoffset: 0; } .ath-lux-at { opacity: 1; }
}