/* Landing page, cinematic layer (loaded after style.css, whose #landing / .ln-* basics it refines):
   typography (Cinzel · Cormorant Garamond · Tiro Devanagari), film grain, letterbox bars, the lore lines,
   the hardware badge and the Graphics settings pop-up. */
#landing { --ln-gold: #ffcf7a; --ln-rose: #ff9fbf; --ln-glass: rgba(34, 9, 22, .42); --ln-line: rgba(255, 214, 150, .28); background: #1a0912; }
#lnBg { image-rendering: auto; }
.ln-veil { background:
  radial-gradient(ellipse 85% 75% at 50% 46%, transparent 52%, rgba(14, 3, 10, .62) 100%),
  linear-gradient(180deg, rgba(10, 2, 8, .28), transparent 22%, transparent 58%, rgba(12, 3, 8, .82) 100%); }

/* animated film grain: a noise tile (painted by landing.js) jumping around, blended over the picture */
.ln-grain { position: absolute; inset: -60px; pointer-events: none; opacity: .085; mix-blend-mode: overlay; background-size: 180px 180px; animation: lnGrain .9s steps(6) infinite; will-change: transform; }
@keyframes lnGrain { 0% { transform: translate(0, 0); } 17% { transform: translate(-31px, 17px); } 33% { transform: translate(22px, -38px); } 50% { transform: translate(-12px, 41px); } 67% { transform: translate(37px, 9px); } 83% { transform: translate(-40px, -23px); } 100% { transform: translate(8px, 30px); } }

/* letterbox bars on the title card (landscape only), sliding away when the intro starts */
.ln-bars i { position: absolute; left: 0; right: 0; height: 7.5vh; background: #060107; pointer-events: none; transition: transform 1.4s cubic-bezier(.7, 0, .2, 1); z-index: 1; }
.ln-bars i:first-child { top: 0; } .ln-bars i:last-child { bottom: 0; }
#landing.staged .ln-bars i:first-child { transform: translateY(-100%); } #landing.staged .ln-bars i:last-child { transform: translateY(100%); }
@media (orientation: portrait) { .ln-bars { display: none; } }

/* the title card: logo and lore in the lower third, the gate and its view left clear */
.ln-gate { justify-content: flex-end; gap: 14px; padding: 0 20px calc(7.5vh + 5vh); z-index: 2; }
@media (orientation: portrait) { .ln-gate { padding-bottom: 9vh; } }
.ln-pre { font: 600 clamp(10px, 1.25vw, 13px) "Cinzel", serif; letter-spacing: .55em; text-transform: uppercase; color: rgba(255, 226, 180, .82); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); animation: lnFade 2s .3s ease-out both; padding-left: .55em; }
.ln-logo { text-shadow: none; filter: drop-shadow(0 6px 26px rgba(255, 130, 60, .45)) drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
.ln-logo .ln-dev { font: 400 clamp(22px, 4vw, 38px) "Tiro Devanagari Hindi", "Nirmala UI", serif; color: #ffd9a8; letter-spacing: 6px; }
.ln-logo b { font: 900 clamp(52px, 11.5vw, 128px) "Cinzel", "Segoe UI", serif; letter-spacing: .16em; padding-left: .16em; line-height: 1;
  background: linear-gradient(100deg, #fff4dc 0%, #ffd28a 30%, #fff8e8 45%, #ffb35c 60%, #e8497a 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lnSheen 7s ease-in-out infinite; }
@keyframes lnSheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.ln-logo i { font: italic 500 clamp(17px, 2.6vw, 27px) "Cormorant Garamond", Georgia, serif; letter-spacing: .38em; text-transform: none; color: #ffd6e4; margin-top: 4px; padding-left: .38em; }
.ln-lore { margin: 4px 0 2px; min-height: 2.6em; max-width: 680px; font: italic 500 clamp(17px, 2.1vw, 24px)/1.35 "Cormorant Garamond", Georgia, serif; color: #fff0dc; text-shadow: 0 2px 16px rgba(0, 0, 0, .75); opacity: 0; filter: blur(5px); transform: translateY(6px); transition: opacity 1s ease, filter 1s ease, transform 1.2s ease; }
.ln-lore.on { opacity: 1; filter: none; transform: none; }
.ln-begin { font: 600 15px "Cinzel", "Segoe UI", serif; letter-spacing: .14em; background: rgba(36, 8, 22, .38); border-color: rgba(255, 214, 150, .55); backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); }
.ln-begin small { font-family: "Segoe UI", sans-serif; letter-spacing: .04em; }
.ln-hint { font: italic 500 15px "Cormorant Garamond", Georgia, serif; letter-spacing: .12em; }

/* the three parts: a lighter, glassier frame so the painting breathes through */
.ln-stage { z-index: 2; }
.ln-frame { background: linear-gradient(180deg, rgba(36, 8, 22, .46), rgba(20, 5, 13, .7)); backdrop-filter: blur(9px) saturate(1.2); -webkit-backdrop-filter: blur(9px) saturate(1.2); }
.ln-kicker { font: 600 11.5px "Cinzel", serif; letter-spacing: .34em; color: var(--ln-gold); }
.ln-h { font: 700 clamp(32px, 5.6vw, 56px) "Cinzel", "Segoe UI", serif; letter-spacing: .04em; }
.ln-h span { font: 400 .5em "Tiro Devanagari Hindi", "Nirmala UI", serif; }
.ln-quote { font: italic 500 clamp(20px, 2.7vw, 29px)/1.45 "Cormorant Garamond", Georgia, serif; }
.ln-dots button { font-family: "Cinzel", "Segoe UI", serif; letter-spacing: .1em; }
.ln-pillars b { font-family: "Cinzel", "Segoe UI", serif; letter-spacing: .03em; }
.ln-cta { font-family: "Cinzel", "Segoe UI", serif; font-weight: 900; }

/* Part 2: Chaaju and his 4x4 at golden hour */
.ln-spot { width: 420px; height: 340px; background:
  radial-gradient(ellipse 70% 40% at 50% 92%, rgba(255, 170, 90, .5), transparent 70%),
  radial-gradient(ellipse 60% 55% at 32% 34%, rgba(255, 196, 120, .55), transparent 70%),
  linear-gradient(180deg, #3b1840 0%, #8c3360 46%, #e0704f 74%, #3a1520 100%); }
.ln-spot small { font: italic 500 13px "Cormorant Garamond", Georgia, serif; letter-spacing: .08em; opacity: .75; }

/* the hardware badge (top right): glass pill, details on hover / focus */
.ln-gfx { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--ln-glass); border: 1px solid var(--ln-line); color: #fff1de; font: 600 12.5px "Segoe UI", system-ui, sans-serif; letter-spacing: .03em; cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 8px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); transition: background .25s, border-color .25s, transform .25s; animation: lnFade 1.2s .6s ease-out both; }
.ln-gfx:hover, .ln-gfx:focus-visible { background: rgba(60, 16, 36, .55); border-color: rgba(255, 207, 122, .6); transform: translateY(-1px); outline: none; }
.ln-gfx b { color: var(--ln-gold); letter-spacing: .08em; }
.ln-gfx-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 207, 122, .16); color: var(--ln-gold); font-size: 13px; }
.ln-gfx.busy .ln-gfx-ico { animation: lnSpin 1.6s linear infinite; }
@keyframes lnSpin { to { transform: rotate(360deg); } }
.ln-gfx-tip { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; max-width: 320px; padding: 9px 12px; border-radius: 12px; background: rgba(22, 6, 14, .88); border: 1px solid var(--ln-line); color: #f6dcc6; font: 500 12px/1.45 "Segoe UI", system-ui, sans-serif; text-align: left; white-space: normal; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.ln-gfx:hover .ln-gfx-tip, .ln-gfx:focus-visible .ln-gfx-tip { opacity: 1; transform: none; }
@media (max-width: 640px) { .ln-gfx .ln-gfx-long { display: none; } .ln-gfx { padding: 6px 11px 6px 8px; font-size: 12px; } }

/* Settings pop-up */
.ln-modal { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 2, 8, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; }
.ln-modal.on { opacity: 1; }
.ln-mcard { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px 16px; border-radius: 20px; color: #fff1de;
  background: linear-gradient(180deg, rgba(48, 12, 30, .86), rgba(24, 6, 15, .92)); border: 1px solid rgba(255, 214, 150, .3); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); transform: translateY(10px) scale(.98); transition: transform .25s ease; }
.ln-modal.on .ln-mcard { transform: none; }
.ln-mhead { display: flex; align-items: center; justify-content: space-between; }
.ln-mhead b { font: 700 22px "Cinzel", serif; letter-spacing: .08em; color: var(--ln-gold); }
.ln-x { background: none; border: 0; color: #f5d9c4; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.ln-x:hover { background: rgba(255, 255, 255, .1); }
.ln-mdet { margin: 6px 0 12px; font: 500 12.5px/1.5 "Segoe UI", system-ui, sans-serif; color: #e9c9b6; }
.ln-opts { display: flex; flex-direction: column; gap: 7px; }
.ln-opt { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; border-radius: 13px; cursor: pointer; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 214, 150, .14); transition: background .2s, border-color .2s; }
.ln-opt:hover { background: rgba(255, 255, 255, .08); }
.ln-opt:has(input:checked) { background: linear-gradient(90deg, rgba(232, 73, 122, .22), rgba(255, 159, 67, .14)); border-color: rgba(255, 190, 110, .65); }
.ln-opt input { margin: 3px 0 0; accent-color: #ff9f43; width: 16px; height: 16px; flex: none; }
.ln-opt b { display: block; font: 700 14.5px "Segoe UI", system-ui, sans-serif; letter-spacing: .03em; color: #fff3e2; }
.ln-opt em { font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #ffcf7a; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: rgba(255, 207, 122, .14); }
.ln-opt em i { font-style: normal; }
.ln-opt small { display: block; margin-top: 2px; font: 400 12.5px/1.4 "Segoe UI", system-ui, sans-serif; color: #e8cdbd; }
.ln-mfoot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ln-mfoot small { flex: 1; font-size: 11.5px; opacity: .6; }
.ln-apply { border: 0; border-radius: 12px; padding: 10px 20px; font: 800 14px "Cinzel", "Segoe UI", serif; letter-spacing: .1em; color: #2a0a12; cursor: pointer; background: linear-gradient(90deg, #ffd166, #ff9f43); box-shadow: 0 0 18px rgba(255, 159, 67, .45); }
.ln-apply:hover { filter: brightness(1.08); }

@media (max-width: 760px) {
  .ln-spot { width: 100%; height: 290px; }
  .ln-gate { gap: 10px; }
  .ln-mfoot small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ln-grain, .ln-logo b { animation: none; } }