/* =========================================================================
   AGILE — the home hero.
   Loaded only by index.html. The wordmark is a window cut into a lit wall;
   scrolling flies the camera through the stem of the 'l' into the film.
   ========================================================================= */

/* ---------------------------------------------------------------- intro --
   The loading mark is the same artwork as the eagle inside the wordmark's
   'a'. So it does not dissolve — it flies in and becomes the letter. */
.preload{position:fixed;inset:0;z-index:120;pointer-events:none}
.preload__field{position:absolute;inset:0;z-index:1}
.intro{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block}
.intro__body{fill:#00445F}
.intro__dot{fill:#00445F}
.preload__track{
  position:absolute;left:50%;top:calc(47% + 82px);transform:translateX(-50%);z-index:3;
  width:clamp(110px,15vw,170px);height:1px;background:rgb(var(--deep-rgb) / .3);overflow:hidden;
}
.preload__bar{
  display:block;height:100%;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}

/* ---------------------------------------------------------------- ground --
   Frosted glass, not a lit wall: two soft colour blobs (one tracking the
   pointer, kept from the old lightfield) sit behind a translucent white
   pane — the letters still cut straight through to the video underneath.
   Softness comes from extra gradient stops, not filter/backdrop-filter:
   blurring a full-viewport layer every animation frame (the key light
   tracks the pointer) was costing real frame time. */
.lightfield{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--page-bg);overflow:hidden}
.lightfield__key{
  position:absolute;inset:0;
  transform-origin:var(--lightX,50%) var(--lightY,47.5%);
  background:radial-gradient(26% 23% at var(--lightX,50%) var(--lightY,47.5%),
    rgb(var(--deep-rgb) / .48) 0%,rgb(var(--deep-rgb) / .2) 55%,rgb(var(--deep-rgb) / 0) 100%);
  animation:breathe 19s ease-in-out infinite alternate;
}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.12)}}
.lightfield__warm{
  position:absolute;inset:-14%;will-change:transform;
  background:radial-gradient(24% 21% at 63% 63%,rgb(var(--gold-rgb) / .5),rgb(var(--gold-rgb) / .2) 55%,rgb(var(--gold-rgb) / 0) 100%);
}
.lightfield__vig{
  position:absolute;inset:0;
  background:rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.15);
}

/* the key light sits centred behind the intro mark, which reads as a dark
   shadow cast by the logo — kill it on the preload screen only, the warm
   blob and vignette still give the frosted-glass ground its softness. */
.preload__field .lightfield__key{display:none}

/* ----------------------------------------------------------------- stage --
   The hero is the only dark, cinematic screen. Everything below it — once
   the stage dissolves — runs on Clean White instead.

   The handover is done by the stage itself, not by a band of gradient on
   the section below: the hero sits on white, so as the stage's opacity
   falls away the film washes out to white in place. By the time the white
   page scrolls up, it is arriving onto white — there is no edge to hide. */
.hero{position:relative;height:175vh;background:var(--paper)}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink)}

/* on a phone, a single flick can cover 50–80% of the viewport — against a
   175vh span that blows straight through the wordmark dive in one swipe.
   Taller span, same phase percentages (apply()'s fractions are relative,
   so nothing else needs to change): the same swipe now covers less of
   the sequence, which is what "less sensitive" actually means here. */
@media (max-width:700px){.hero{height:260vh}}
.stack{position:relative;z-index:2}
.stack__rest{position:relative}

/* ============================================================ page --
   Same brand palette, recomputed for light-on-white instead of light-on-
   dark: --stack-label/-dim replace --haze/--haze-dim, --stack-line(-strong)
   replace --line(-strong), --stack-gold is the accent deepened enough to
   read as text on white (the brand gold itself is far too pale for that). */
.stack__rest{
  --stack-label:var(--muted-2);
  --stack-dim:#6B8184;
  --stack-line:rgb(var(--deep-rgb) / .12);
  --stack-line-strong:rgb(var(--deep-rgb) / .22);
  --stack-tile:var(--tile);
  --stack-gold:var(--accent);
  color:var(--ink);
  background:var(--paper);
}

.stack__rest .label{color:var(--stack-label)}
.stack__rest .lead{color:var(--deep)}
.stack__rest .body{color:var(--stack-label)}
.stack__rest .body a{color:var(--deep)}
.stack__rest .head{border-bottom-color:var(--stack-line)}

.stack__rest .btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1px var(--stack-line-strong)}
.stack__rest .btn--ghost:hover{background:var(--ink);color:var(--paper);box-shadow:none}

.stack__rest .card__frame,
.stack__rest .media{background:var(--stack-tile)}
.stack__rest .card__price{color:var(--stack-gold)}
.stack__rest .card__meta{color:var(--stack-dim)}
.stack__rest .card__desc{color:var(--stack-label)}

.stack__rest .ticks li{color:var(--deep)}

.stack__rest .ph p,.stack__rest .ph span{color:var(--stack-gold)}

/* the band keeps its own photo + dark veil regardless of the section
   theme around it, so its heading stays light against that veil — but
   not the solid gold button inside it, which always sets its own
   dark text regardless of section */
.stack__rest .band{color:var(--paper)}


/* ---------------------------------------------------------------- route --
   Painted on the wall, so the letterforms (z-4) pass in front of it: the
   plane slides behind the wordmark and comes out the far side. The SVG is
   sliced, not stretched, so the plane never distorts on wide screens. */
.hero__route{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.hero__routeLine{
  fill:none;stroke:rgb(var(--deep-rgb) / .3);stroke-width:2;stroke-dasharray:4 10;stroke-linecap:round;
}
.hero__plane{
  fill:rgb(var(--deep-rgb) / .72);
  offset-path:path("M-60,470 C380,250 900,150 1660,80");
  offset-rotate:auto;
  animation:hero-fly 30s linear infinite;
}
/* the follower: a negative delay starts it already part-way along, so the
   two are never level and the gap between them stays constant. It is scaled
   by a nested <g> rather than a CSS transform, which would compose with the
   offset-path matrix and drag it off the line. */
.hero__plane--second{
  fill:rgb(var(--deep-rgb) / .42);
  animation-delay:-17s;
}
@keyframes hero-fly{from{offset-distance:0%}to{offset-distance:100%}}

/* --------------------------------------------------------------- window --
   One untransformed film, clipped to the letterforms. Only the clip geometry
   moves, so the letters stay vector-crisp at any zoom. */
.hero__win{
  position:absolute;inset:0;z-index:4;
  -webkit-clip-path:url(#letters);clip-path:url(#letters);
}
.hero__winInner{position:absolute;inset:0;transform:scale(1.015);will-change:transform}
.hero__winInner .heroStill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.hero__winMedia{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.hero__winInner.is-stillOnly .hero__winMedia{display:none}

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

/* An exact duplicate of the ground, laid over the wordmark and drawn back to
   the right. It renders identically to the field beneath, so the moving edge
   is invisible — you only see the letters arriving, left to right. */
.hero__curtain{z-index:6;clip-path:inset(0 0 0 0);transition:clip-path 1.05s cubic-bezier(.62,0,.2,1)}
.hero__stage.is-open .hero__curtain{clip-path:inset(0 0 0 100%)}

.hero__grade{
  position:absolute;inset:0;z-index:7;opacity:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%,rgb(var(--ink-rgb) / 0) 32%,rgb(var(--ink-rgb) / .6) 100%),
    linear-gradient(to top,rgb(var(--ink-rgb) / .82) 0%,rgb(var(--ink-rgb) / 0) 48%);
}

/* --------------------------------------------------------------- chrome --
   Pinned to the wordmark's own cap-height and baseline, so it tracks the
   letters at every viewport size. */
.hero__chrome{position:absolute;inset:0;z-index:8;pointer-events:none;will-change:transform,opacity}
.hero__scroll{position:absolute;left:var(--pad);bottom:32px;display:flex;align-items:center;gap:14px}
.hero__scroll .label{color:var(--ink)}
.hero__scrollTrack{position:relative;width:52px;height:1px;background:rgb(var(--deep-rgb) / .3);overflow:hidden}

/* the glass ground is light, so the nav needs dark chrome while it's still
   transparent over the hero — once it goes solid (dark pill, after
   scrolling) the usual light mark and white text are correct again */
.nav:not(.is-solid) .nav__link,
.nav:not(.is-solid) .nav__tag{color:var(--ink)}
.nav:not(.is-solid) .nav__toggle span{background:var(--ink)}
.nav__mark--light{display:none}
.nav.is-solid .nav__mark--dark{display:none}
.nav.is-solid .nav__mark--light{display:block}
.hero__scrollTrack::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateX(-100%);animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}55%{transform:translateX(100%)}100%{transform:translateX(100%)}}

/* ---------------------------------------------------------- hero clock --
   One live local-time readout under the wordmark, replacing the old
   five-destination distance line. A single clock rather than one per stop:
   all five destinations share Cairo's timezone anyway, so a per-stop clock
   would have shown the same time five times over. */
.heroClock{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  text-align:center;
}
.heroClock__place{
  margin:0 0 6px;font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:rgb(var(--deep-rgb) / .55);
}
.heroClock__time{
  margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em;
  color:#0B2733;font-variant-numeric:tabular-nums;
}
.heroClock__date{margin:6px 0 0;font-size:10.5px;color:rgb(var(--deep-rgb) / .55)}

/* the corners crowd it well before this breakpoint */
@media (max-width:860px){.heroClock{display:none}}

.hero__after{
  position:absolute;inset:0;z-index:9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:26px;padding:0 clamp(24px,6vw,80px);
  opacity:0;pointer-events:none;will-change:transform,opacity;
}
.hero__afterKicker{
  display:flex;align-items:center;gap:14px;
  font-size:13.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin:0;
  text-shadow:0 1px 14px rgba(0,0,0,.65),0 0 3px rgba(0,0,0,.5);
}
.hero__afterKicker::before,.hero__afterKicker::after{content:"";width:32px;height:1px;background:var(--gold)}
.hero__afterDsp{
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em;margin:0;
  font-size:clamp(38px,7.8vw,124px);line-height:.94;text-wrap:balance;
}
/* "Smartly caring" is two words, longer than a single destination-style
   line ("Beyond ordinary" balanced across two short lines) was sized for,
   so it gets a smaller ceiling rather than inheriting the full display size. */
.hero__afterDsp--sm{font-size:clamp(30px,5.2vw,78px)}
.hero__afterSub{
  font-size:clamp(14.5px,1.25vw,19px);font-weight:400;color:var(--mint);margin:0;
  max-width:52ch;line-height:1.7;
}
.hero__afterActions{
  display:flex;align-items:center;gap:18px;margin-top:4px;pointer-events:auto;
}
.hero__afterActions .btn--ghost{background:#fff;color:var(--ink);box-shadow:none}
.hero__afterActions .btn--ghost:hover{background:var(--gold);color:var(--ink)}
.hero__afterCities{
  list-style:none;display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);
  margin:8px 0 0;padding:0;flex-wrap:wrap;justify-content:center;
}
.hero__afterCities li{
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--haze);position:relative;padding-left:14px;
}
.hero__afterCities li:first-child{padding-left:0}
.hero__afterCities li:first-child::before{display:none}
.hero__afterCities li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold);
}

@media (max-width:700px){
  .hero__scroll{left:0;right:0;justify-content:center}
  .hero__afterActions{flex-wrap:wrap;justify-content:center;gap:12px}
  .hero__afterCities{display:none}
  .hero__afterDsp--sm{font-size:clamp(42px,12vw,56px)}
  /* the stage is exactly the visible screen: 100vh on a phone is taller
     than what you can see while the browser bar is showing, so svh
     (the small, always-visible viewport) is used where it's supported */
  .hero__stage{height:100vh;height:100svh}
  /* the film fills the stage edge to edge, whatever the phone: every corner
     of the video sits on a corner of the screen, nothing is cropped */
  .hero__winInner .heroStill,
  .hero__winMedia{
    position:absolute;left:0;top:0;width:100%;height:100%;
    object-fit:fill;
  }
  /* no zoom or drift on the film itself (the scroll script sets a scale and
     a downward slide inline; !important keeps it still on phones) */
  .hero__winInner{transform:none !important}
}

@media (prefers-reduced-motion:reduce){
  .lightfield__key,.lightfield__warm{animation:none!important}
  .hero__curtain{transition:none!important}
  .hero__scrollTrack::after{animation:none;transform:none;opacity:.5}
  /* park the plane mid-route rather than off-screen at 0% */
  .hero__plane{animation:none!important;offset-distance:46%}
}

/* ================================================================= dock ==
   The primary links live here instead of the top bar on this page: a slim
   tab docked to the right edge that opens into a photo-backed index. Fixed
   to the viewport (like .nav), so it stays reachable the whole way down
   the page, not just across the hero. */
@media (min-width:901px){ .nav__links{display:none} }

.dock{position:fixed;top:24vh;bottom:24vh;right:0;z-index:59;display:flex;align-items:stretch}

.tab{
  appearance:none;border:0;cursor:pointer;flex:none;width:46px;
  background:rgba(5,15,17,.62);border-left:1px solid var(--line-strong);
  border-radius:10px 0 0 10px;backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  font-family:var(--f);color:var(--mint);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.tab:hover{background:rgb(var(--deep-rgb) / .55);color:var(--paper)}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.tab__word{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
}
.tab__chev{width:10px;height:10px;flex:none;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.dock.is-open .tab__chev{transform:rotate(180deg)}

.index{
  width:296px;margin-right:-296px;overflow-x:hidden;overflow-y:visible;
  display:flex;flex-direction:column;
  padding-right:16px;opacity:0;
  transition:margin-right .62s cubic-bezier(.16,1,.3,1),opacity .5s var(--ease);
}
.dock.is-open .index{margin-right:0;opacity:1}
.index__inner{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--line-strong);border-right:0;
  border-radius:10px 0 0 10px;
  padding:28px 26px 22px;width:280px;flex:1;min-height:0;
  display:flex;flex-direction:column;
}
.index__inner::before{
  content:"";position:absolute;inset:0;z-index:0;background:rgba(5,15,17,.58);backdrop-filter:blur(10px);
}
/* the background layers (::before, .index__bg) live in .index__inner, which
   never scrolls — only .index__scroll does. Keeping them on separate
   elements is what stops the backdrop scrolling away with the list and
   exposing the page behind it. */
/* overscroll-behavior:contain stops scroll chaining — without it, wheel/touch
   scrolling past the top or bottom of this list hands off to the page
   underneath, so the whole site scrolls along with the menu. */
.index__scroll{
  position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
}
.index__scroll::-webkit-scrollbar{width:6px}
.index__scroll::-webkit-scrollbar-track{background:transparent}
.index__scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.index__scroll{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.index__bg{
  position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);
  transition:opacity .7s var(--ease),transform 1.1s var(--ease);
}
.index__bg--about{background-image:url(../assets/gallery-2.webp)}
.index__bg--holidays{background-image:url(../assets/gallery-3-photo.webp)}
.index__bg--mice{background-image:url(../assets/gallery-6.webp)}
.index__bg--religious{background-image:url(../assets/gallery-1.webp)}
.index__bg--more{background-image:url(../assets/gallery-4.webp)}
.index__inner:has(.index__item--about:hover) .index__bg--about,
.index__inner:has(.index__item--holidays:hover) .index__bg--holidays,
.index__inner:has(.index__item--holidays .index__details[open]) .index__bg--holidays,
.index__inner:has(.index__item--mice:hover) .index__bg--mice,
.index__inner:has(.index__item--religious:hover) .index__bg--religious,
.index__inner:has(.index__item--religious .index__details[open]) .index__bg--religious,
.index__inner:has(.index__item--more:hover) .index__bg--more,
.index__inner:has(.index__item--more .index__details[open]) .index__bg--more{
  opacity:.4;transform:scale(1);
}
.index__top{
  position:relative;z-index:1;height:2px;margin:-28px -26px 22px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1) .1s;
}
.dock.is-open .index__top{transform:scaleX(1)}

.index__eyebrow{
  position:relative;z-index:1;
  font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--haze);margin:0 0 6px;padding-left:2px;
}
.index__rule{position:relative;z-index:1;height:1px;background:var(--line-strong);margin:0 0 2px}

.index__list{position:relative;z-index:1;list-style:none;margin:0;padding:0}
.index__item{border-bottom:1px solid var(--line)}
.index__item:last-child{border-bottom:0}
.index__details>summary{list-style:none;cursor:pointer}
.index__details>summary::-webkit-details-marker{display:none}
.index__details>summary::marker{content:""}
.index__link{
  position:relative;display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--paper);padding:16px 2px;overflow:hidden;
}
.index__details[open]>.index__link .index__arrow{opacity:1;transform:rotate(90deg)}

.index__sub{list-style:none;margin:0 0 14px;padding:0 4px 0 30px;display:flex;flex-direction:column;gap:1px}
.index__subLink{
  display:block;padding:8px 8px;border-radius:5px;
  font-size:12px;line-height:1.35;letter-spacing:.01em;
  color:var(--mint);text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.index__subLink:hover,.index__subLink:focus-visible{background:var(--line);color:var(--paper)}

/* a second level nested inside a group's list — same look, a summary
   that toggles its own indented sub-list instead of navigating */
.index__subGroup>summary.index__subLink{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.index__subGroup>summary::-webkit-details-marker{display:none}
.index__subGroup>summary::marker{content:""}
.index__subGroup>summary::after{
  content:"";flex:none;width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);opacity:.6;transition:transform .3s var(--ease);
}
.index__subGroup[open]>summary::after{transform:rotate(-135deg)}
.index__subGroupPanel{
  list-style:none;margin:0;padding:2px 0 4px 14px;display:flex;flex-direction:column;gap:1px;
}
.index__ghost{
  position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  font-size:52px;font-weight:700;line-height:1;color:var(--paper);opacity:.06;
  font-variant-numeric:tabular-nums;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.index__link:hover .index__ghost{opacity:.14;transform:translateY(-50%) scale(1.08)}
.index__num{
  font-size:11px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;
  flex:none;width:16px;
}
.index__col{display:flex;flex-direction:column;gap:4px;min-width:0}
.index__name{
  font-size:17px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  transition:color .3s var(--ease);
}
.index__desc{
  font-size:11.5px;line-height:1.4;color:var(--mint);max-width:24ch;
  max-height:0;opacity:0;transition:max-height .4s var(--ease),opacity .3s var(--ease);
}
.index__link:hover .index__desc{max-height:40px;opacity:1}
.index__arrow{
  margin-left:auto;flex:none;width:14px;height:14px;color:var(--gold);
  opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.index__link:hover .index__arrow{opacity:1;transform:translateX(0)}
.index__mark{
  position:absolute;left:2px;bottom:0;height:1px;width:0;background:var(--gold);
  transition:width .35s var(--ease);
}
.index__link:hover .index__name{color:var(--gold)}
.index__link:hover .index__mark{width:100%}
.index__link:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

@media (max-width:900px){
  .dock{display:none}
}

@media (prefers-reduced-motion:reduce){
  .index,.tab__chev,.index__bg,.index__top,.index__ghost,.index__desc,.index__arrow,
  .index__num,.index__name,.index__mark{transition:none!important}
}

/* bold scroll hint */
.hero__scroll .label{font-weight:800;font-size:clamp(12px,.95vw,14px);letter-spacing:.26em;color:var(--ink)}
.hero__scrollTrack{width:72px;height:2px;background:rgb(var(--deep-rgb) / .4)}

/* scroll hint: shining down arrow instead of the line */
.hero__scrollTrack{width:46px;height:46px;border-radius:50%;background:var(--gold);overflow:hidden;position:relative;flex:none;box-shadow:0 6px 18px rgb(var(--gold-rgb) / .55);animation:scrollGlow 2.4s ease-in-out infinite}
.hero__scrollTrack::before{content:"";position:absolute;inset:0;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M5.5 12.5 12 19l6.5-6.5'/%3E%3C/svg%3E") center/22px 22px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M5.5 12.5 12 19l6.5-6.5'/%3E%3C/svg%3E") center/22px 22px no-repeat;
  animation:scrollBob 1.5s ease-in-out infinite}
.hero__scrollTrack::after{content:"";position:absolute;inset:auto;top:-10%;left:-70%;width:45%;height:120%;background:linear-gradient(100deg,transparent,rgb(255 255 255 / .95),transparent);transform:skewX(-20deg);animation:scrollShine 2.6s ease-in-out infinite}
@keyframes scrollBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@keyframes scrollShine{0%,55%{left:-70%}100%{left:150%}}
@keyframes scrollGlow{0%,100%{box-shadow:0 6px 18px rgb(var(--gold-rgb) / .5),0 0 0 0 rgb(var(--gold-rgb) / .55)}50%{box-shadow:0 6px 22px rgb(var(--gold-rgb) / .8),0 0 0 12px rgb(var(--gold-rgb) / 0)}}
@media (prefers-reduced-motion:reduce){.hero__scrollTrack,.hero__scrollTrack::before,.hero__scrollTrack::after{animation:none}.hero__scrollTrack::after{display:none}}
/* scroll arrow: smaller, deep-blue circle with a gold arrow */
.hero__scrollTrack{width:38px;height:38px;background:var(--deep);box-shadow:0 6px 16px rgb(var(--deep-rgb) / .4);animation:scrollGlowDeep 2.4s ease-in-out infinite}
.hero__scrollTrack::before{background:var(--gold);-webkit-mask-size:18px 18px;mask-size:18px 18px}
.hero__scrollTrack::after{background:linear-gradient(100deg,transparent,rgb(255 255 255 / .55),transparent)}
@keyframes scrollGlowDeep{0%,100%{box-shadow:0 6px 16px rgb(var(--deep-rgb) / .4),0 0 0 0 rgb(var(--deep-rgb) / .45)}50%{box-shadow:0 6px 20px rgb(var(--deep-rgb) / .6),0 0 0 10px rgb(var(--deep-rgb) / 0)}}
@media (prefers-reduced-motion:reduce){.hero__scrollTrack{animation:none}}