/* Al Fozan Award kiosk v0.5 — the client's final colour direction (14 Nov), with touch feedback and auto-play (15 Nov).
   One ground: Alabaster #E5E3DF for wall and counter. No teal or dark surfaces.
   Big titles (cycle title, years): gold as a text gradient, biased to its dark end so it holds 3:1 or better. Large and bold only.
   Arabic text and labels: Dark Teal #134047. English lines: Graphite #2B2B2B.
   Graphics (timeline line, emblems, icons, buttons, frames): Cool Steel #739799, drawn heavy. Khaki Beige #B3A694 only for soft details.
   Over video: Alabaster. Minimal: no dust by default, no shadows on lettering, no glows, one keyline per frame. */

/* ---------- Fonts (local) ---------- */
@font-face { font-family: "Amiri"; font-weight: 400; font-display: block; src: url("../fonts/amiri-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Amiri"; font-weight: 700; font-display: block; src: url("../fonts/amiri-arabic-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Amiri"; font-weight: 400; font-display: block; src: url("../fonts/amiri-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Amiri"; font-weight: 700; font-display: block; src: url("../fonts/amiri-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex"; font-weight: 400; font-display: block; src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 500; font-display: block; src: url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 400; font-display: block; src: url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex"; font-weight: 500; font-display: block; src: url("../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }

/* ---------- Tokens: Event Identity, final direction ---------- */
:root {
  --alabaster: #E5E3DF; --dark-teal: #134047; --graphite: #2B2B2B; --cool-steel: #739799; --khaki-beige: #B3A694;
  --gold-deep: #775943; --gold-mid: #A07A52; --gold-light: #F1D5A1;
  /* gold for big titles, in the direction of the identity's own gradient (dark at lower left). Dark end 4.97:1, light end 3.03:1 on Alabaster. */
  --title-gold: linear-gradient(28deg, var(--gold-deep) 0%, var(--gold-deep) 32%, var(--gold-mid) 100%);

  --wall: var(--alabaster); --counter: var(--alabaster);
  --ar: var(--dark-teal);             /* Arabic text and labels: 8.84:1 */
  --en: var(--graphite);              /* English lines: 11.05:1 */
  --graphic: var(--cool-steel);       /* timeline line, emblems, icons, buttons, frames: 2.48:1, so they are drawn heavy */
  --soft: var(--khaki-beige);         /* soft decorative details only: 1.86:1 */
  --on-video: var(--alabaster);
  --stroke: max(2px, calc(var(--u) * .19));
  --dust-wall: #B3A694; --dust-wall-a: .7; --dust-counter: #B3A694;

  --ease-enter: cubic-bezier(.22, 1, .36, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);

  --sw: 100vw; --sh: 100vh;                                  /* stage size: the whole screen on the iPad */
  --u: calc(min(var(--sw), var(--sh) * 1.42) / 100);         /* 11.84px at 1210 x 834, 11.64px at 1180 x 820 */
  --min: 18px;                                               /* smallest text on the counter */
  --display: "Amiri", serif; --text: "Plex", sans-serif;

  --safe: calc(var(--u) * 2.7);                              /* 32px safe margin */
  --edge: calc(var(--u) * 4.2);                              /* front-edge band */
  --brand-w: max(352px, calc(var(--u) * 29.6));                          /* width of the 120px-high lockup */
  --brand-x: calc(var(--u) * 4.4);                           /* lockup inset from the far end of the counter */
  --field-end: calc(var(--brand-x) + var(--brand-w) + var(--u) * 3);   /* where the milestone field stops */
  --field-start: calc(var(--u) * 3.6);
  --line-y: calc(var(--u) * 11.6);                           /* timeline line below the seam */
}

/* For comparison only: the full identity gradient on the big titles. Its light end is 1.1:1 on Alabaster. */
[data-gold="full"] { --title-gold: linear-gradient(28deg, var(--gold-deep) 0%, var(--gold-light) 100%); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--alabaster); }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; border-radius: 0; }
p, h1, h2, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.stage {
  position: fixed; left: var(--sx, 0px); top: var(--sy, 0px); width: var(--sw); height: var(--sh); overflow: hidden; touch-action: none;
  display: grid; grid-template-rows: 44% 56%; direction: rtl;
  font-family: var(--text); color: var(--ar);
}
.no-anim, .no-anim * { transition: none !important; }

/* ====================== THE WALL ====================== */
.wall { position: relative; background: var(--wall); }
.head { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; text-align: center; padding-top: calc(var(--u) * .4); }
.head__title { font: 700 calc(var(--u) * 8.9) / 1.26 var(--display); padding: .12em .1em; margin: -.12em 0; background: var(--title-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.head__title img { display: block; height: calc(var(--u) * 12.6); max-width: calc(var(--u) * 64); object-fit: contain; }
.head__title-en { font: 400 calc(var(--u) * 3.25) / 1.15 var(--display); color: var(--en); letter-spacing: .01em; }
.head__rule { display: block; width: calc(var(--u) * 15); height: max(1px, calc(var(--u) * .1)); margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 1); background: var(--soft); transform: scaleX(0); transform-origin: right center; }
.head__years { font: 700 calc(var(--u) * 3.1) / 1.15 var(--display); background: var(--title-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; direction: ltr; unicode-bidi: isolate; letter-spacing: .04em; font-variant-numeric: lining-nums; }

/* ====================== THE COUNTER ====================== */
.counter { position: relative; background: var(--counter); color: var(--ar); }
.counter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--graphic); }   /* the thin Cool Steel line between wall and counter */

.tl__line { position: absolute; left: 0; right: 0; top: var(--line-y); height: var(--stroke); margin-top: calc(var(--stroke) / -2); background: var(--graphic); transform: scaleX(0); transform-origin: right center; }

/* the far end of the counter: touch hint above the line, the award lockup below it */
.brand { position: absolute; left: var(--brand-x); top: 0; width: var(--brand-w); height: 100%; pointer-events: none; }
.hint { position: absolute; left: 0; right: calc(var(--u) * -1.9); bottom: calc(100% - var(--line-y) + var(--u) * 2.1); display: grid; gap: calc(var(--u) * .35); text-align: left; font: 400 max(var(--min), calc(var(--u) * 1.52)) / 1.35 var(--text); color: var(--ar); }
.hint [lang="en"] { text-align: left; color: var(--en); }
.brand__logo { position: absolute; left: 0; top: calc(var(--line-y) + var(--u) * 4.6); width: 100%; height: auto; display: block; }

.tl { position: absolute; top: 0; bottom: var(--edge); left: var(--field-end); right: var(--field-start); }
.tl__list { height: 100%; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ms { min-width: 0; }
.ms__btn { --emb: calc(var(--u) * 6.1); display: grid; grid-template-rows: calc(var(--line-y) - var(--emb) / 2) var(--emb) auto; justify-items: center; width: 100%; text-align: center; color: var(--ar); }
.ms__year { grid-row: 1; align-self: end; padding-bottom: calc(var(--u) * .9); font: 700 calc(var(--u) * 2.75) / 1 var(--display); letter-spacing: .04em; font-variant-numeric: lining-nums; padding-top: .1em; background: var(--title-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ms__emblem { position: relative; grid-row: 2; width: var(--emb); height: var(--emb); min-width: 44px; min-height: 44px; }
.ms__emblem svg { display: block; width: 100%; height: 100%; overflow: visible; }
.e-plate { fill: var(--alabaster); stroke: var(--graphic); stroke-width: 3; stroke-linejoin: miter; }
.e-core { fill: var(--graphic); stroke: var(--graphic); stroke-width: 0; }
/* Touch-down: a gold copy of the emblem fades in over the Cool Steel one, and one band of soft gold light crosses the star, right to left.
   Only opacity and transform change. Nothing scales or moves. */
.e-gold, .e-sweep { position: absolute; inset: 0; pointer-events: none; }
.e-gold { opacity: 0; transition: opacity 280ms var(--ease-enter); }
.e-gold .e-plate { fill: none; stroke: url(#kgold); }
.e-gold .e-core { fill: url(#kgold); stroke: url(#kgold); }
.ms__btn.is-visited .e-gold .e-core { fill: none; }
.ms__btn.is-pressed .e-gold { opacity: 1; transition-duration: 120ms; }
.e-sweep { overflow: hidden; }
.e-sweep i { position: absolute; top: -10%; bottom: -10%; left: -60%; right: -60%; opacity: 0; background: linear-gradient(100deg, rgba(201, 163, 107, 0) 34%, rgba(201, 163, 107, .6) 50%, rgba(201, 163, 107, 0) 66%); }
.ms__btn.is-glint .e-sweep { opacity: .5; }
.ms__btn.is-glint .e-sweep i { animation: e-sweep 900ms var(--ease-move) both; }     /* idle hint: the same band, half as strong and slower */
.ms__btn.is-pressed .e-sweep { opacity: 1; }
.ms__btn.is-pressed .e-sweep i { animation: e-sweep 400ms var(--ease-move) both; }
@keyframes e-sweep { 0% { transform: translateX(55%); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(-55%); opacity: 0; } }
/* Titles warm towards gold while pressed: a deep-gold copy of the same words fades in over them (colour itself is not animated). */
.warm { position: relative; }
.warm::after { content: attr(data-t); position: absolute; inset: 0; color: var(--gold-deep); opacity: 0; transition: opacity 280ms var(--ease-enter); pointer-events: none; }
.is-pressed .warm::after { opacity: .45; transition-duration: 120ms; }
/* visited: the core opens. A change of shape, not of colour. Cleared on the idle reset. */
.ms__btn.is-visited .e-core { fill: none; stroke-width: 2.4; }

.ms__text { grid-row: 3; display: grid; justify-items: center; gap: calc(var(--u) * .45); width: 98%; padding-top: calc(var(--u) * 1.35); }
.ms__ar { color: var(--ar); font: 400 max(20px, calc(var(--u) * 1.86)) / 1.42 var(--display); text-wrap: balance; }
.ms__en { font: 400 max(var(--min), calc(var(--u) * 1.54)) / 1.28 var(--display); text-wrap: balance; color: var(--en); }
/* optional second line under a milestone's name ("Second Cycle winner"): a label, in the text face */
.ms__sub { margin-top: calc(var(--u) * .45); font: 400 max(var(--min), calc(var(--u) * 1.52)) / 1.2 var(--text); color: var(--ar); }
.ms__sub--en { margin-top: 0; font-weight: 400; color: var(--en); }
.ms__media { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5); margin-top: calc(var(--u) * .6); direction: ltr; font: 400 max(var(--min), calc(var(--u) * 1.52)) / 1 var(--text); font-variant-numeric: lining-nums tabular-nums; }
.ms__media span { display: inline-flex; align-items: center; gap: calc(var(--u) * .55); }
.ico { width: calc(var(--u) * 2); height: calc(var(--u) * 2); fill: none; stroke: var(--graphic); stroke-width: 1.9; stroke-linejoin: miter; flex: none; }
.ico .f { fill: var(--graphic); stroke: none; }
.ms__pending { direction: rtl; white-space: nowrap; gap: .5em; }

/* one milestone alone: larger, with its first picture standing on the counter */
.tl[data-n="1"] .ms__btn { --emb: calc(var(--u) * 7.2); }
.tl[data-n="1"] .ms__year { font-size: calc(var(--u) * 3.3); }
.tl[data-n="1"] .ms__text { width: min(100%, calc(var(--u) * 58)); grid-template-columns: calc(var(--u) * 25) minmax(0, 1fr); column-gap: calc(var(--u) * 2.6); justify-items: start; align-items: start; text-align: start; padding-top: calc(var(--u) * 2.1); }
.tl[data-n="1"] .ms__poster { display: block; grid-row: 1 / span 4; }
.tl[data-n="1"] .ms__ar { font-size: calc(var(--u) * 2.55); line-height: 1.36; margin-top: calc(var(--u) * -.5); }
.tl[data-n="1"] .ms__en { font-size: calc(var(--u) * 1.9); text-align: right; width: 100%; }
.tl[data-n="1"] .ms__media { justify-content: flex-end; width: 100%; margin-top: calc(var(--u) * .9); }
.ms__poster { display: none; position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--counter); box-shadow: 0 0 0 var(--stroke) var(--graphic); }
.ms__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl[data-n="2"] .ms__text { width: 78%; }

/* no milestones yet (content still with the client) */
.tl__empty { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; gap: calc(var(--u) * .5); padding-top: calc(var(--line-y) + var(--u) * 4.4); text-align: center; }
.tl__empty p:first-child { font: 400 calc(var(--u) * 2.2) / 1.4 var(--display); }
.tl__empty p:last-child { font: 400 max(var(--min), calc(var(--u) * 1.6)) / 1.3 var(--display); color: var(--en); }

/* the 15 years mark: on the counter for the entrance only */
.mark15 { position: absolute; top: calc((100% - var(--edge)) / 2); left: calc(var(--field-end) + (100% - var(--field-end) - var(--field-start)) / 2); height: calc(var(--u) * 21); width: auto; margin-top: calc(var(--u) * -10.5); margin-left: calc(var(--u) * -12.2); opacity: 0; pointer-events: none; }

.edge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--edge); display: block; overflow: visible; pointer-events: none; }
.edge__base { fill: var(--wall); }
.edge__lip { fill: none; stroke: var(--graphic); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* ---------- Entrance: the only self-triggered motion ---------- */
.head__title, .head__title-en, .head__years { opacity: 0; transform: translate3d(0, calc(var(--u) * 1.1), 0); }
.ms { opacity: 0; transform: translate3d(0, calc(var(--u) * .7), 0); }
.hint, .brand__logo, .tl__empty { opacity: 0; }

.is-in .head__title { opacity: 1; transform: none; transition: opacity 800ms var(--ease-enter), transform 800ms var(--ease-enter); }
.is-in .head__title-en { opacity: 1; transform: none; transition: opacity 800ms var(--ease-enter) 140ms, transform 800ms var(--ease-enter) 140ms; }
.is-in .head__years { opacity: 1; transform: none; transition: opacity 800ms var(--ease-enter) 300ms, transform 800ms var(--ease-enter) 300ms; }
.is-in .head__rule { transform: none; transition: transform 700ms var(--ease-move) 500ms; }
.is-in .brand__logo { opacity: 1; transition: opacity 900ms var(--ease-enter) 300ms; }
@keyframes mark15 { 0% { opacity: 0; } 22% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }
.is-in .mark15 { animation: mark15 2300ms var(--ease-move) 150ms both; }
.is-in .tl__line { transform: none; transition: transform 1300ms var(--ease-move) 1900ms; }
.is-in .ms { opacity: 1; transform: none; transition: opacity 520ms var(--ease-enter) var(--d, 2300ms), transform 520ms var(--ease-enter) var(--d, 2300ms); }
.is-in .hint, .is-in .tl__empty { opacity: 1; transition: opacity 600ms var(--ease-enter) 3000ms; }

/* ====================== THE GALLERY PANEL ====================== */
.panel {
  position: absolute; inset: 0; z-index: 5; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto calc(var(--u) * 8.6);
  background: var(--wall);
  box-shadow: 0 -1px 0 var(--graphic), 0 calc(var(--u) * -1.5) calc(var(--u) * 4) rgba(43, 43, 43, .35);
  transform: translate3d(0, 102%, 0); visibility: hidden;
  transition: transform 450ms var(--ease-move), visibility 0s linear 450ms;
}
.is-open .panel { transform: none; visibility: visible; transition: transform 650ms var(--ease-enter), visibility 0s; }

.panel__head { display: grid; justify-items: center; text-align: center; padding: calc(var(--u) * 1.5) calc(var(--u) * 6) 0; transition: opacity 250ms var(--ease-move); }
.panel__year { font: 700 calc(var(--u) * 1.9) / 1.1 var(--display); color: var(--ar); letter-spacing: .04em; font-variant-numeric: lining-nums; }
.panel__title { font: 700 calc(var(--u) * 2.45) / 1.4 var(--display); color: var(--ar); text-wrap: balance; }
.panel__title-en { font: 400 calc(var(--u) * 1.7) / 1.25 var(--display); color: var(--en); text-wrap: balance; }

.panel__wall { display: grid; place-items: center; min-height: 0; padding: calc(var(--u) * 2.2) 0 calc(var(--u) * 1.9); }
.frame { position: relative; height: 100%; aspect-ratio: 16 / 10; max-width: calc(var(--sw) - var(--u) * 14); box-shadow: 0 0 0 var(--stroke) var(--graphic); transition: opacity 250ms var(--ease-move); }
.panel.is-video .frame { aspect-ratio: 16 / 9; }
.frame__view { position: absolute; inset: 0; overflow: hidden; background: var(--wall); }   /* a picture that does not fill the frame sits on the wall colour, not on a dark block */
.track { position: absolute; inset: 0; transition: transform 550ms var(--ease-move); will-change: transform; }
.track.is-dragging { transition: none; }
.slide { position: absolute; inset: 0; overflow: hidden; }
.slide img, .slide video { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.slide.is-contain img, .slide video { object-fit: contain; }
.slide.is-missing::after { content: attr(data-missing); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; white-space: pre-line; font: 400 calc(var(--u) * 1.8) / 1.5 var(--display); color: var(--ar); }
@keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.03) translate3d(var(--kx, .5%), var(--ky, -.4%), 0); } }
.slide.is-active:not(.is-contain) img { animation: kenburns 4.5s var(--ease-move) both; }      /* very slight, and as long as a photo stays (4 s) plus the slide to the next */

.slide--video video { pointer-events: auto; }
.play { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); min-width: 64px; min-height: 64px; margin: calc(var(--u) * -3.7) 0 0 calc(var(--u) * -3.7); transition: opacity 250ms var(--ease-enter); }
.play svg { display: block; width: 100%; height: 100%; overflow: visible; }
.play .p-disc { fill: rgba(43, 43, 43, .3); stroke: var(--on-video); stroke-width: 1.6; vector-effect: non-scaling-stroke; }   /* thin Alabaster circle; a faint dark disc keeps it legible on bright footage */
.play .p-tri, .play .p-bars { fill: var(--on-video); }
.play .p-bars { display: none; }
.is-playing .play .p-tri { display: none; } .is-playing .play .p-bars { display: block; }
.play svg.is-gold { position: absolute; inset: 0; opacity: 0; transition: opacity 280ms var(--ease-enter); pointer-events: none; }
.play svg.is-gold .p-disc { fill: none; stroke: url(#kgold-video); stroke-width: 2; }      /* over video the lighter half of the gold is used, so it reads on dark footage */
.play svg.is-gold .p-tri, .play svg.is-gold .p-bars { fill: url(#kgold-video); }
.play.is-pressed svg.is-gold { opacity: 1; transition-duration: 120ms; }
.is-playing .play:not(.is-shown) { opacity: 0; pointer-events: none; }     /* while playing, the pause button shows after a touch and then steps back */
.vbar { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; direction: ltr; touch-action: none; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }   /* scrim so the time and label read on bright footage */
.vbar::before, .vbar__fill { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.vbar::before { background: rgba(229, 227, 223, .35); }
.vbar__fill { background: var(--on-video); transform: scaleX(0); transform-origin: left center; }
.vtime { position: absolute; right: calc(var(--u) * 1.2); bottom: 12px; font: 400 max(var(--min), calc(var(--u) * 1.52)) / 1 var(--text); color: var(--on-video); font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.vtag { position: absolute; left: calc(var(--u) * 1.2); bottom: 12px; font: 400 max(var(--min), calc(var(--u) * 1.52)) / 1 var(--text); color: var(--on-video); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.vsound { display: none; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; font: 400 max(var(--min), calc(var(--u) * 1.52)) / 1 var(--text); color: var(--on-video); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.slide.is-muted.is-playing .vsound { display: block; }      /* only when auto-play had to start a video without sound */

.caption { position: relative; display: grid; justify-items: center; align-content: center; gap: calc(var(--u) * .2); min-height: calc(var(--u) * 6.2); padding: 0 calc(var(--u) * 6) calc(var(--u) * 1.1); text-align: center; transition: opacity 280ms var(--ease-enter); }
.caption.is-changing { opacity: 0; }
/* Changing milestone inside the gallery: year, titles and caption cross-fade; the picture fades out and the new one slides in a short way, from the side it comes from. */
.panel.is-leaving .panel__head, .panel.is-leaving .frame, .panel.is-leaving .caption { opacity: 0; }
.panel.is-entering .frame { animation: frame-in 550ms var(--ease-enter) both; }
.panel.is-entering .panel__head, .panel.is-entering .caption { animation: fade-in 300ms var(--ease-enter) both; }
@keyframes frame-in { from { opacity: 0; transform: translate3d(var(--from, -5%), 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Auto-play: the thin line under the photo fills, right to left, over the time the photo stays. Videos show their own line. */
.frame__timer { position: absolute; left: 0; right: 0; top: calc(100% + var(--stroke) * 4); height: var(--stroke); background: rgba(179, 166, 148, .55); opacity: 0; transition: opacity 250ms var(--ease-enter); pointer-events: none; }
.frame__timer i { position: absolute; inset: 0; background: var(--graphic); transform: scaleX(0); transform-origin: right center; }
.panel.is-auto.is-photo-now .frame__timer { opacity: 1; }
.panel.is-timing .frame__timer i { animation: timer var(--photo, 4s) linear both; }
@keyframes timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.caption__ar { font: 400 calc(var(--u) * 1.85) / 1.4 var(--display); color: var(--ar); }
.caption__en { font: 400 calc(var(--u) * 1.5) / 1.3 var(--display); color: var(--en); }
.caption:empty { display: none; }

.panel__band { position: relative; display: flex; align-items: center; justify-content: center; background: var(--counter); color: var(--ar); box-shadow: inset 0 1px 0 var(--graphic); }
.band__right { position: absolute; right: calc(var(--u) * 2.4); top: 0; bottom: 0; display: flex; align-items: center; gap: calc(var(--u) * 1.1); direction: rtl; }
.back { display: flex; align-items: center; gap: calc(var(--u) * .8); min-height: 56px; padding: 0 calc(var(--u) * .4); }
.back svg, .step svg { fill: none; stroke: var(--graphic); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.back svg { width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); flex: none; }
.back[hidden] { display: none; }
.msnav--next { position: absolute; left: calc(var(--u) * 2.4); top: 50%; margin-top: -28px; direction: ltr; }      /* next is leftward in Arabic */
.msnav--next .back__text { text-align: left; }
.back__text { display: grid; gap: calc(var(--u) * .25); text-align: start; font: 500 max(var(--min), calc(var(--u) * 1.52)) / 1.15 var(--text); white-space: nowrap; }
.back__text [lang="en"] { font-weight: 400; text-align: left; color: var(--en); }
.ico-wrap { position: relative; display: grid; flex: none; }
.ico-wrap > svg { grid-area: 1 / 1; }
.ico-wrap > svg.is-gold { stroke: url(#kgold); opacity: 0; transition: opacity 280ms var(--ease-enter); }
.is-pressed .ico-wrap > svg.is-gold { opacity: 1; transition-duration: 120ms; }
.pager { position: relative; left: calc(var(--u) * -1); display: flex; align-items: center; gap: calc(var(--u) * .4); direction: rtl; }      /* a little left of centre: the right end of the band holds two buttons */
.step { width: calc(var(--u) * 4.8); height: calc(var(--u) * 6); min-width: 56px; min-height: 48px; display: grid; place-items: center; }
.step svg { width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); }
.step[disabled] { opacity: .28; }
.pager__mid { display: grid; justify-items: center; gap: calc(var(--u) * 1); min-width: calc(var(--u) * 11); }
.count { font: 700 calc(var(--u) * 2.1) / 1 var(--display); direction: ltr; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .06em; color: var(--ar); }
.progress { position: relative; display: block; width: calc(var(--u) * 11); height: var(--stroke); }
.progress::before { content: ""; position: absolute; inset: 0; background: var(--soft); opacity: .55; }
.progress__fill { position: absolute; inset: 0; background: var(--graphic); transform-origin: right center; transform: scaleX(var(--p, 0)); transition: transform 550ms var(--ease-move); }
.panel.is-single .pager { visibility: hidden; }

/* small status line for installers: only with ?status=1 */
.status { position: absolute; z-index: 9; left: 8px; top: 6px; direction: ltr; font: 400 12px/1.3 var(--text); color: #2B2B2B; background: rgba(229, 227, 223, .9); padding: 3px 6px; pointer-events: none; }

/* ---------- Reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .head__title, .head__title-en, .head__years, .ms { transform: none; }
  .head__rule, .tl__line { transform: none; opacity: 0; }
  .is-in .head__rule { opacity: 1; transition: opacity 700ms var(--ease-enter) 500ms; }
  .is-in .tl__line { opacity: 1; transition: opacity 900ms var(--ease-enter) 1900ms; }
  .panel { transform: none; opacity: 0; transition: opacity 300ms var(--ease-enter), visibility 0s linear 300ms; }
  .is-open .panel { opacity: 1; transition: opacity 400ms var(--ease-enter), visibility 0s; }
  .track { transition: none; }
  .slide { opacity: 0; transition: opacity 300ms var(--ease-enter); }
  .slide.is-active { opacity: 1; }
  .slide.is-active:not(.is-contain) img { animation: none; }
  .progress__fill { transition: none; }
  .e-sweep { display: none; }      /* no moving light; the gold press still fades in */
  .panel { --from: 0% !important; }      /* milestones cross-fade only */
  .frame__timer { display: none; }
}