/* =====================================================================
   HASAD About film — luxury layer: film leader, cursor, light leaks,
   serif titles, fly-through title, and the road / truck chapter
   ===================================================================== */
/* One palette for the whole film — every scene is graded from these */
:root {
  --lux: 'Cormorant Garamond', 'Amiri', serif;
  --night: #0d130b; --night2: #131b10; --forest: #1f2e17; --olive: #2c4320; --sage: #6e8e53;
  --cream: #efe8d6; --paper: #f4efe3; --gold: #cfa968; --amber: #d98a3d; --terracotta: #b8653a; --ice: #cfe3da;
  --grade: saturate(.9) sepia(.12) contrast(1.04);
  --road-h: max(120px, 21vh); --tw: min(860px, 74vw);
}
.land-img, .h-panel .ph, .v-card::before { filter: var(--grade); }
.film-progress i { background: linear-gradient(90deg, var(--olive), var(--gold), var(--amber)); }
.hud-dot { background: var(--amber); }
.mq-row em { color: var(--gold); }
.tl-line i { background: linear-gradient(to bottom, var(--sage), var(--gold)); }
.harvest { background: var(--paper); }
.numbers, .story { background: var(--paper); }
.v-card .v-n { color: rgba(207, 169, 104, .55); }
.credit small { color: var(--gold); }
.the-end p { color: var(--gold); }
.presents, .intro-tag { color: #e9cf9a; }
.quote::before { color: var(--gold); }
.lux { font-family: var(--lux) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: -.005em; }
[dir='rtl'] .lux { font-weight: 700 !important; line-height: 1.28 !important; letter-spacing: 0; }
.ch-num { color: var(--gold); opacity: .95; }
.harvest .ch-num, .numbers .ch-num, .story .ch-num { color: #9a7a3c; }
.intro-title h1.lux { font-size: clamp(60px, 11vw, 190px); line-height: 1.02 !important; }
[dir='rtl'] .intro-title h1.lux { line-height: 1.3 !important; }
.intro-tag { display: block; margin-top: 22px; font-family: var(--lux); font-style: italic; font-size: clamp(17px, 1.6vw, 24px); color: rgba(243, 223, 180, .85); opacity: 0; }

/* ---------- film leader 3·2·1 ---------- */
.leader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #0b0b09; transition: opacity .9s ease, visibility .9s; }
.leader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.leader::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .035); animation: flicker .13s steps(2) infinite; pointer-events: none; }
@keyframes flicker { 50% { background: rgba(255, 255, 255, 0); } }
.leader-frame { position: relative; width: min(62vmin, 440px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #cfc8b6, #a59e8c); box-shadow: 0 0 0 10px #1b1b18, 0 0 120px rgba(255, 230, 180, .15); }
.leader-sweep { position: absolute; inset: -20%; background: conic-gradient(rgba(0, 0, 0, .55) var(--a, 0deg), transparent 0); }
.leader-lines { position: absolute; inset: 0; width: 100%; height: 100%; stroke: rgba(255, 255, 255, .85); stroke-width: 3; fill: none; }
.leader-num { position: absolute; inset: 0; display: grid; place-items: center; font: 600 min(34vmin, 250px)/1 'Cormorant Garamond', serif; color: #131310; }
.leader-cap { position: absolute; bottom: 13vh; font-family: 'Readex Pro', sans-serif; font-size: 12px; letter-spacing: .6em; color: rgba(239, 234, 219, .55); direction: ltr; }
.leader-skip { position: absolute; bottom: 6vh; font-size: 12px; color: rgba(239, 234, 219, .5); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.leader-skip:hover { color: #fff; }

/* ---------- custom cursor ---------- */
.cursor { position: fixed; z-index: 120; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: width .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1), margin .35s cubic-bezier(.22, 1, .36, 1), background .35s, opacity .3s; will-change: transform; }
.cursor.on { opacity: 1; }
.cursor i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; }
.cursor.hover { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: #fff; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- light leaks over the opening shot ---------- */
.leak { position: absolute; z-index: 2; border-radius: 50%; filter: blur(50px); mix-blend-mode: screen; opacity: .4; pointer-events: none; }
.leak-a { width: 55vw; height: 55vw; left: -18vw; top: -14vw; background: radial-gradient(circle, rgba(217, 138, 61, .8), transparent 62%); animation: leakA 9s ease-in-out infinite alternate; }
.leak-b { width: 42vw; height: 42vw; right: -12vw; bottom: -14vw; background: radial-gradient(circle, rgba(207, 169, 104, .6), transparent 62%); animation: leakB 12s ease-in-out infinite alternate; }
@keyframes leakA { to { transform: translate(14vw, 8vw) scale(1.2); opacity: .2; } }
@keyframes leakB { to { transform: translate(-10vw, -6vw) scale(.85); opacity: .55; } }

/* ---------- fly-through title (chapter 1) ---------- */
.land-img { position: absolute; inset: 0; background: #23361a center / cover no-repeat; transform: scale(1.25); will-change: transform; }
.zoom-mask { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; mix-blend-mode: multiply; will-change: transform, opacity; overflow: visible; }
.zoom-mask text { font-family: 'Readex Pro', sans-serif; font-weight: 700; }
.zoom-label { position: absolute; z-index: 3; top: 22vh; inset-inline: 0; text-align: center; will-change: opacity; }

/* ===================== the road ===================== */
.road { background: #0b1022; color: #fff; }
.sky { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--sky-top, #7fb2e5), var(--sky-mid, #bcd6ea) 52%, var(--sky-bot, #f3e9d6) 78%); }
.stars { position: absolute; left: 0; top: 0; width: 100%; height: 62%; fill: #fff; opacity: 0; }
.sun { position: absolute; z-index: 1; width: 13vmin; height: 13vmin; left: var(--sx, 20%); top: var(--sy, 40%); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fffaf0 0 38%, var(--sun-col, #ffd27a) 62%, transparent 71%); box-shadow: 0 0 140px 50px var(--sun-glow, rgba(255, 200, 120, .45)); }
.moon { position: absolute; z-index: 1; width: 7vmin; height: 7vmin; left: 38%; top: 13%; border-radius: 50%; box-shadow: inset -1.6vmin -.6vmin 0 0 #f6f1dc; opacity: 0; filter: drop-shadow(0 0 18px rgba(246, 241, 220, .55)); transform: rotate(-20deg); }
.layer { position: absolute; left: 0; z-index: 2; will-change: transform; }
.layer svg { display: block; }
.far { bottom: calc(var(--road-h) + 70px); height: 220px; }
.far .mt1 { fill: var(--far1, #9fb3c4); }
.far .mt2 { fill: var(--far2, #b9c7cf); }
.mid { bottom: calc(var(--road-h) - 2px); height: 360px; filter: brightness(var(--mid-b, 1)) saturate(var(--mid-s, 1)); }
.mid .win { opacity: var(--night, 0); }
.road-strip { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: var(--road-h); }
.road-verge { height: 10px; background: linear-gradient(#c9b892, #9b8c6c); filter: brightness(var(--mid-b, 1)); }
.road-asphalt { position: absolute; top: 10px; bottom: 0; left: 0; right: 0; overflow: hidden; background: linear-gradient(#41403c, #2a2a28 45%, #1b1b1a); }
.road-asphalt::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 3px; background: rgba(240, 232, 210, .5); }
.road-dash { position: absolute; left: -400px; right: -400px; top: 58%; height: 6px; background: repeating-linear-gradient(90deg, rgba(240, 232, 210, .85) 0 90px, transparent 90px 200px); will-change: transform; }
.truck-wrap { position: absolute; z-index: 4; left: 50%; width: var(--tw); bottom: calc(var(--road-h) * .5 - var(--tw) * .0245); transform: translateX(-50%); will-change: transform; }
.truck-bob { will-change: transform; filter: brightness(calc(.64 + var(--mid-b, 1) * .36)); }
.truck { width: 100%; height: auto; display: block; }
.truck .spin { transform-box: view-box; }
.truck .beam, .truck .head-glow, .truck .tail-glow { opacity: var(--night, 0); }
.truck .clr { opacity: calc(.25 + var(--night, 0) * .75); }
.fg { z-index: 5; bottom: -30px; height: 460px; filter: blur(3px); opacity: .9; }
.fg .lamp { opacity: var(--night, 0); filter: blur(8px); }
.road-dust { display: none; }
.road-head { position: absolute; z-index: 6; top: calc(var(--lb) * 1vh + 92px); inset-inline-start: 6vw; color: var(--road-ink, var(--cream)); }
.road-head .ch-num { color: var(--road-accent, var(--gold)); }
.road-head h2 { font-size: clamp(46px, 6.4vw, 108px); margin: 8px 0 18px; color: inherit; }
.route-line { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; }
.route-line i { position: relative; display: block; width: min(240px, 34vw); height: 2px; background: color-mix(in srgb, currentColor 35%, transparent); }
.route-line b { position: absolute; top: 50%; inset-inline-start: 0; width: 10px; height: 10px; margin-top: -5px; margin-inline-start: -5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(216, 178, 110, .3); }
.dash-panel { position: absolute; z-index: 6; top: calc(var(--lb) * 1vh + 92px); inset-inline-end: 5vw; display: grid; grid-template-columns: repeat(2, minmax(130px, auto)); gap: 1px; border-radius: 18px; overflow: hidden; color: var(--cream); background: rgba(207, 169, 104, .22); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(207, 169, 104, .35); box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .6); }
.dash-panel > div { padding: 12px 16px; background: rgba(19, 27, 16, .62); }
.dash-panel small { display: block; font-size: 10.5px; letter-spacing: .06em; opacity: .72; }
.dash-panel b { display: flex; align-items: center; gap: 6px; font-family: 'Readex Pro', sans-serif; font-weight: 400; font-size: 22px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dash-panel b > span:not(.led) { direction: ltr; }
.dash-panel em { font-style: normal; font-size: 12px; opacity: .7; }
.cold-cell b { color: var(--ice); direction: ltr; }
.led { width: 7px; height: 7px; border-radius: 50%; background: #9fe0b8; box-shadow: 0 0 10px #9fe0b8; animation: blink 1.6s infinite; }
.road-subs { bottom: calc(var(--lb) * 1vh + var(--road-h) * .16); z-index: 7; }
.road-subs p { font-size: clamp(18px, 2vw, 30px); }

@media (max-width: 680px) {
  :root { --road-h: max(110px, 17vh); --tw: 94vw; }
  .road-head { top: calc(var(--lb) * 1vh + 70px); }
  .dash-panel { top: auto; bottom: calc(var(--road-h) + var(--tw) * .34 + 14px); inset-inline: 4vw; grid-template-columns: repeat(4, 1fr); border-radius: 14px; }
  .dash-panel > div { padding: 8px 6px; text-align: center; }
  .dash-panel b { font-size: 15px; justify-content: center; }
  .dash-panel small { font-size: 9px; }
  .road-subs { bottom: auto; top: 44vh; }
  .zoom-label { top: 20vh; }
  .leader-cap { bottom: 16vh; }
}
@media (prefers-reduced-motion: reduce) { .leak, .led { animation: none !important; } }

.road-film { display: none; }
.has-road-film .road-film { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.has-road-film :is(.sky,.stars,.sun,.moon,.layer,.road-strip,.truck-wrap,.road-dust) { display: none; }
.has-road-film::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#0a130bd9, transparent 40%, transparent 68%, #090f0bd9); }
.cold::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#0c1a1cb0,#0a151a66 45%,#0a151ac4), var(--cold-photo, none) center / cover no-repeat; }
.h-panel .ph { filter: none; }