/* ==========================================================
   FAIM JEWELLERY ARABIA EXPERIENCE  |  Cinematic layer (v2)
   Loader, attract hero, portal, constellation gallery,
   depth product viewer, routes index, FAIM credit.
   ========================================================== */

/* ---------- loader ---------- */
#boot { background: radial-gradient(60% 50% at 50% 55%, #1a140e 0%, #0E0B09 70%); }
#boot .monogram { display: none; }
#boot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#boot .boot-txt { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; color: var(--smoke); font-size: 1.05rem; letter-spacing: .06em; }
#boot .boot-txt b { display: block; font-family: 'Cormorant', serif; font-weight: 300; font-size: 2.2rem; color: var(--ivory); letter-spacing: .04em; margin-bottom: .6rem; }
#boot .boot-bar { width: 18rem; height: 1px; background: var(--gold-faint); margin: 1.2rem auto 0; position: relative; }
#boot .boot-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); transition: width .25s var(--ease); }

/* ---------- attract hero ---------- */
.k-attract .a-three { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-attract .a-film { opacity: .55; filter: saturate(.85); }
.k-attract .a-hold { position: absolute; right: 6rem; bottom: 6rem; width: 26rem; opacity: 0; transform: translateY(1rem); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.k-attract .a-hold.is-on { opacity: 1; transform: none; }
.k-attract .a-hold h2 { font-size: 2.2rem; margin-bottom: .6rem; }
.k-attract .a-hold p { color: var(--smoke); font-size: 1.05rem; }
.k-attract .a-hold [lang="ar"] { font-family: 'Amiri', serif; direction: rtl; text-align: right; }
.k-attract .a-ringpulse { position: absolute; width: 8rem; height: 8rem; margin: -4rem; border-radius: 50%; border: 1px solid var(--gold); pointer-events: none; animation: ringpulse 1.1s var(--ease) forwards; }
@keyframes ringpulse { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.k-attract .a-copy { max-width: 46rem; }
.k-attract .a-feature { display: none; }
.k-attract .a-hint { position: absolute; right: 6rem; top: 7rem; color: var(--ash); font-size: .95rem; letter-spacing: .06em; text-align: right; direction: ltr; }

/* ---------- portal ---------- */
.p-wrap { height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 2.5rem 3.5rem 2rem; gap: 1.5rem; position: relative; overflow: hidden; }
.p-aura { position: absolute; inset: -20%; pointer-events: none; opacity: .55; transition: background 1.2s var(--ease); background: radial-gradient(40% 40% at 30% 50%, rgba(210,178,113,.12), transparent 70%); }
.p-title { font-size: 3.8rem; position: relative; }
.p-paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; min-height: 0; }
.p-path { position: relative; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--gold-faint); text-align: start; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; isolation: isolate; transition: border-color .4s var(--ease), transform .6s var(--ease); touch-action: manipulation; }
.p-path::before { content: ''; position: absolute; inset: 0; background-image: var(--img); background-size: cover; background-position: center 30%; z-index: -2; transition: transform 1.4s var(--ease), filter .8s var(--ease); filter: saturate(.8) brightness(.8); }
.p-path::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 100%, var(--aura), transparent 70%), linear-gradient(0deg, rgba(14,11,9,.95) 0%, rgba(14,11,9,.35) 55%, rgba(14,11,9,.05) 100%); transition: opacity .6s; }
.p-path:hover, .p-path.is-held { border-color: var(--gold); }
.p-path:hover::before, .p-path.is-held::before { transform: scale(1.05); filter: saturate(1) brightness(.95); }
.p-path.is-held { transform: scale(1.015); }
.p-path__n { font-size: .95rem; color: var(--gold); letter-spacing: .08em; margin-bottom: .6rem; }
.p-path__t { font-family: var(--display); font-size: 2.6rem; line-height: 1.05; }
.p-path__s { color: var(--smoke); font-size: 1.05rem; margin-top: .5rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .6s; }
.p-path:hover .p-path__s, .p-path.is-held .p-path__s { max-height: 6rem; opacity: 1; }
.p-path__hold { position: absolute; top: 1.5rem; inset-inline-end: 1.5rem; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--gold-dim); display: grid; place-items: center; }
.p-path__hold i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .9s linear; }
.p-path.is-held .p-path__hold i { transform: scale(1); }
.p-more { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; position: relative; }

/* ---------- gallery v2 ---------- */
.c-modes { display: flex; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.c-modes .chip svg { width: 1.2rem; height: 1.2rem; }
.c-colour-tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease), background 1s; z-index: 0; }
.c-colour-tint.is-on { opacity: 1; }
.c-main { position: relative; }
.c-main > * { position: relative; z-index: 1; }
.c-shape { display: inline-flex; align-items: center; gap: .55rem; }
.c-shape svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 1.2; }
.c-sig { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .8s; }
.c-sig.is-on { opacity: .5; }
.c-const { position: absolute; inset: 0; z-index: 2; background: var(--velvet); display: none; }
.c-const.is-on { display: block; }
.c-const canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.c-const__hint { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); color: var(--smoke); font-size: 1rem; pointer-events: none; }
.c-const__legend { position: absolute; top: 1.5rem; inset-inline-start: 2rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.c-const__card { position: absolute; bottom: 2rem; inset-inline-end: 2rem; width: 26rem; background: rgba(23,18,15,.92); border: 1px solid var(--gold-dim); border-radius: var(--r-m); padding: 1.25rem; display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: center; opacity: 0; transform: translateY(1rem); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.c-const__card.is-on { opacity: 1; transform: none; }
.c-const__card .vitrine { aspect-ratio: 1; }
.c-const__card h3 { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; }
.c-const__card .btn { margin-top: .6rem; }
.c-sel { color: var(--gold); font-size: 1rem; margin-inline-start: auto; }

/* ---------- depth product viewer ---------- */
.pv-depth { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pv-depth .pv-shadow { position: absolute; inset: 6% 6% 2% 6%; background-image: var(--img); background-size: contain; background-repeat: no-repeat; background-position: center; filter: blur(14px) brightness(.1); opacity: .22; transform: translate(0, 2%); will-change: transform; }
.pv-hot { position: absolute; z-index: 4; width: 2.4rem; height: 2.4rem; margin: -1.2rem; border-radius: 50%; border: 1px solid var(--gold); background: rgba(255,255,255,.55); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease); pointer-events: auto; }
.pv-hot::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); }
.pv-hot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid var(--gold); animation: ringpulse 2.4s var(--ease) infinite; }
.pv-hot.is-on { transform: scale(1.2); }
.pv-note { position: absolute; z-index: 5; max-width: 18rem; background: rgba(14,11,9,.92); color: var(--ivory); border: 1px solid var(--gold-dim); border-radius: var(--r-s); padding: .9rem 1.1rem; font-size: 1rem; line-height: 1.4; opacity: 0; transform: translateY(.5rem); transition: opacity .3s, transform .3s; pointer-events: none; }
.pv-note.is-on { opacity: 1; transform: none; }
.pv-note b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.25rem; margin-bottom: .2rem; }
.pd-launch { display: flex; gap: .6rem; flex-wrap: wrap; margin: -1.5rem 0 2rem; }
.pd-launch .btn { padding: 0 1.1rem; font-size: 1rem; min-height: 3.6rem; }
.pd-launch .btn svg { color: var(--gold); }
.pd-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.pd-tags .chip { min-height: 2.4rem; font-size: .9rem; pointer-events: none; }
.pd-tags .swatch { width: .9rem; height: .9rem; }
.pd-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }

/* ---------- routes index + credit ---------- */
#routes { position: fixed; inset: 0; z-index: 35; overflow: auto; background: var(--velvet); padding: 4rem 6rem; }
#routes h1 { font-size: 3.4rem; margin-bottom: .5rem; }
#routes .rt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
#routes a.rt { display: block; padding: 1.25rem 1.5rem; border: 1px solid var(--gold-faint); border-radius: var(--r-s); color: inherit; text-decoration: none; }
#routes a.rt:hover { border-color: var(--gold); background: var(--tray); }
#routes a.rt b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.6rem; }
#routes a.rt code { color: var(--gold); font-size: .95rem; }
#routes a.rt span { display: block; color: var(--smoke); font-size: .95rem; margin-top: .3rem; }
.faim-credit { display: inline-flex; align-items: center; gap: .9rem; color: var(--smoke); font-size: .95rem; }
.faim-credit img { height: 1.6rem; width: auto; opacity: .9; }
.k-final { min-height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; padding: 3rem 6rem; align-items: center; }
.k-final h1 { font-size: 4.6rem; margin: 1rem 0; }
.k-final .qr { width: 15rem; }
.k-final__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }
.k-final__contact { color: var(--smoke); line-height: 1.8; }
.k-final__credit { position: absolute; bottom: 2rem; inset-inline-end: 3rem; }

@media (max-width: 1200px), (max-aspect-ratio: 4/3) {
  .p-wrap { height: auto; }
  .p-paths { grid-template-columns: 1fr 1fr; }
  .p-path { min-height: 16rem; }
  .k-attract .a-hold, .k-attract .a-hint { display: none; }
  #routes { padding: 2rem; } #routes .rt-grid { grid-template-columns: 1fr; }
  .k-final { grid-template-columns: 1fr; padding: 2rem; }
}