/* =====================================================================
   REAL HOLDING GROUP · the footer: the page's end, after Real 360 and the way round (footer.js wires it).
   Three of the lines over the name across the width, then the links. Flat #121212 (the black the way
   round ends in), one softened white, Inter only. Measured from the reference at 1656 px wide: one unit
   (--u) is 1/1656 of the footer's width (container units), so the whole composition scales with it; the
   small type never goes under its floor. The name fits the width by Inter's own measure (no script):
   ink width of "realholdinggroup" at -0.03em = 7.4465em, its first ink 0.0771em right of the origin.
   Its PLACEMENT in the scroll (position, transform, visibility of .ft and [data-footer-in]) is the scene's
   (styles.css, .ft[data-scene]); nothing here sets them. Everything that moves on its own runs only while
   the scene says the footer is on screen (.ft.is-live), and never under prefers-reduced-motion.
   ===================================================================== */
.ft{ --ft-bg:#121212; --ft-ink:#ECECEC; background:var(--ft-bg); color:var(--ft-ink);
  font-family:var(--font); container-type:inline-size; overflow:hidden; overflow:clip;
  /* the floating bar's bottom edge (footer.js measures it from the bar itself; 72 px = 20 + its 52) */
  --ft-bar:72px; --ft-gap:clamp(14px, 2.4vh, 28px); }
/* the content starts right under the bar, a responsive gap below it: compact from the top (cards, name, links),
   any spare height of a tall screen stays under the links */
.ft__in{ --u:calc(100cqw / 1656); --g:max(16px, calc(17 * var(--u)));
  display:flex; flex-direction:column; justify-content:flex-start; min-height:100vh; min-height:100svh;
  padding:calc(var(--ft-bar) + var(--ft-gap)) var(--g) var(--g); }
.ft ul{ list-style:none; padding:0; }

/* ---------------- the three lines ---------------- */
.ft-cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:max(12px, calc(22 * var(--u))); }
.ft-card{ position:relative; isolation:isolate; display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  aspect-ratio:526 / 330; overflow:hidden; border-radius:max(6px, calc(9 * var(--u))); background:#0c0c0c; color:var(--ft-ink);
  padding:0 max(18px, calc(40 * var(--u))) max(18px, calc(37 * var(--u))) max(18px, calc(42 * var(--u)));
  -webkit-tap-highlight-color:transparent; --cr:calc(330 / 526); --ft-e:cubic-bezier(.22, 1, .36, 1); }
/* the picture: its own clip with the card's radius (a layer of its own, so WebKit keeps the rounded corners while what
   is inside moves). In it: the hover's approach (.ft-card__zoom, round the object's centre), the object on its own
   ambient float (.ft-obj: translate and rotate only, while .is-live), the golden glints. The veil is the hover's light:
   a touch darker at rest, clear on hover (opacity only); the glints stay over it */
.ft-card__media{ position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; isolation:isolate;
  transform:translateZ(0); pointer-events:none; }
.ft-card__media::after{ content:""; position:absolute; inset:0; background:#000; opacity:.2;
  transition:opacity .65s var(--ft-e); }
.ft-card__zoom{ position:absolute; inset:0; transform-origin:calc(var(--cx) * 1%) calc(var(--cy) * 1%);
  transition:transform .65s var(--ft-e); }
/* the object's box, from the card's own proportion (--cr: its height over its width): --oh its height (% of the card),
   --ar its picture's width over height, --cx --cy its centre (%); the picture fills it whole (contain) */
.ft-obj{ position:absolute; --w:calc(var(--oh) * var(--ar) * var(--cr) * 1%); width:var(--w); height:calc(var(--oh) * 1%);
  left:calc(var(--cx) * 1% - var(--w) / 2); top:calc((var(--cy) - var(--oh) / 2) * 1%); }
.ft-card__img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; object-position:50% 50%; }
/* Real Metals: the meteor whole, an object in the dark with room round it, its mass a little right of the middle (clear
   of the title); its grade: the texture and the lit edges back, the shadows still deep. It floats as the Home's rock
   does (a slow drift and turn, no change of size); its box is the camera's target on the way to the Home (home.js) */
.ft-card--metals{ --oh:76; --ar:1223 / 1797; --cx:60; --cy:44; }
.ft-card__img--metals{ filter:grayscale(1) sepia(.08) brightness(.66) contrast(1.28); }
.ft-obj--metals{ animation:ftFloatM 3.9s cubic-bezier(.45, 0, .55, 1) -1.3s infinite alternate, ftTurnM 4.4s cubic-bezier(.45, 0, .55, 1) -3.1s infinite alternate; }
@keyframes ftFloatM{ from{ translate:.8px 2.6px; } to{ translate:-.8px -2.6px; } }
@keyframes ftTurnM{ from{ rotate:-.75deg; } to{ rotate:.75deg; } }
/* Real Digital: the coin whole, centred, a margin to every edge; dark metal with its reliefs drawn; a light floats over
   it now and then, on the coin's own pixels only (its picture as the mask) */
.ft-card--digital{ --oh:70; --ar:1300 / 1289; --cx:50; --cy:42; }
.ft-card__img--digital{ filter:grayscale(1) brightness(.5) contrast(1.42); }
.ft-obj--digital{ animation:ftFloatD 4.4s cubic-bezier(.45, 0, .55, 1) -2s infinite alternate, ftTurnD 5s cubic-bezier(.45, 0, .55, 1) -.6s infinite alternate; }
@keyframes ftFloatD{ from{ translate:0 2px; } to{ translate:0 -2px; } }
@keyframes ftTurnD{ from{ rotate:-.6deg; } to{ rotate:.6deg; } }
.ft-sheen{ position:absolute; inset:0; overflow:hidden; mix-blend-mode:overlay;
  -webkit-mask:url(assets/coin-btc.webp) center / 100% 100% no-repeat; mask:url(assets/coin-btc.webp) center / 100% 100% no-repeat; }
.ft-sheen > i{ position:absolute; top:-10%; bottom:-10%; left:0; width:62%; transform:translate3d(-105%, 0, 0);
  background:linear-gradient(100deg, rgba(241,237,231,0) 0%, rgba(241,237,231,.22) 30%, rgba(241,237,231,.8) 50%, rgba(241,237,231,.22) 70%, rgba(241,237,231,0) 100%);
  animation:ftSheen 9.4s cubic-bezier(.45, 0, .55, 1) -3s infinite; }
@keyframes ftSheen{ 0%{ transform:translate3d(-105%, 0, 0); } 46%, 100%{ transform:translate3d(165%, 0, 0); } }
/* Real Opportunities: the section's own chip, centred, the protagonist; the wall of cubes behind it, darker and
   quieter (a dark pool round the chip, a little warm light at its back), its shadow on the wall (still while the chip
   floats and tilts) */
.ft-card--opp{ --oh:62; --ar:1; --cx:50; --cy:41; }
.ft-card__img--opp{ object-fit:cover; object-position:54% 52%; filter:grayscale(1) brightness(.52) contrast(1.06); }
.ft-chip-amb{ position:absolute; inset:0;
  background:
    radial-gradient(ellipse 30% 44% at 50% 41%, rgba(192,138,87,.1) 0%, rgba(192,138,87,.04) 60%, rgba(192,138,87,0) 100%),
    radial-gradient(ellipse 52% 70% at 50% 41%, rgba(10,9,9,.8) 0%, rgba(10,9,9,.62) 52%, rgba(10,9,9,.34) 100%); }
.ft-chip-sh{ position:absolute; --w:calc(var(--oh) * var(--cr) * 1%); width:calc(var(--w) * .96); height:calc(var(--oh) * .96%);
  left:calc(var(--cx) * 1% - var(--w) * .48); top:calc((var(--cy) - var(--oh) * .48) * 1% + 3.5%);
  background:radial-gradient(closest-side, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 62%, rgba(0,0,0,0) 100%); }
.ft-card--opp .ft-card__zoom{ perspective:900px; }
.ft-obj--chip{ animation:ftFloatC 3.5s cubic-bezier(.45, 0, .55, 1) -1s infinite alternate, ftTiltC 3.2s cubic-bezier(.45, 0, .55, 1) -2.2s infinite alternate; }
@keyframes ftFloatC{ from{ translate:0 2px; } to{ translate:0 -2px; } }
@keyframes ftTiltC{ from{ rotate:1 .7 0 -1.6deg; } to{ rotate:1 .7 0 1.6deg; } }
.ft-chip{ position:absolute; inset:0; width:100%; height:100%; max-width:none; overflow:visible; }
.ft-chip__run{ animation:ftRun 7.6s cubic-bezier(.45, 0, .55, 1) -1.8s infinite; }
@keyframes ftRun{ 0%{ transform:translate(0px, 0px); } 44%, 100%{ transform:translate(640px, 0px); } }
.ft-chip__spk{ opacity:0; animation:ftSpk var(--d) cubic-bezier(.45, 0, .55, 1) var(--dl) infinite; }
.ft-chip__spk--a{ --d:6.8s; --dl:-1.2s; }
.ft-chip__spk--b{ --d:8.2s; --dl:-5.1s; }
.ft-chip__spk--c{ --d:7.4s; --dl:-3.4s; }
@keyframes ftSpk{ 0%, 62%, 100%{ opacity:0; } 74%{ opacity:.9; } 86%{ opacity:.12; } }
/* the glints: a few warm specks in the picture's free space, each its own place, size, tone, cycle and drift (set in the
   markup); most barely there, some out of focus, one or two four-point sparkles. They come and go slowly */
.ft-gls{ position:absolute; inset:0; z-index:1; }
.ft-gl{ position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transition:opacity .65s var(--ft-e), transform .65s var(--ft-e); }
.ft-gl > i{ position:absolute; inset:0; border-radius:50%; opacity:calc(var(--o) * .5);
  background:radial-gradient(circle closest-side, rgba(var(--c), 1) 0%, rgba(var(--c), .62) 45%, rgba(var(--c), 0) 100%);
  animation:ftGl var(--d) cubic-bezier(.45, 0, .55, 1) var(--dl) infinite; }
.ft-gl--b > i{ background:radial-gradient(circle closest-side, rgba(var(--c), .85) 0%, rgba(var(--c), .46) 55%, rgba(var(--c), 0) 100%); }
.ft-gl--s > i{ border-radius:0; animation-name:ftStar;
  background:radial-gradient(circle, rgba(255,246,232,1) 0, rgba(var(--c), .7) 1.2px, rgba(var(--c), .18) 2.6px, rgba(var(--c), 0) 4.6px); }
.ft-gl--s > i::before, .ft-gl--s > i::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:1px; margin-top:-.5px; border-radius:1px;
  background:linear-gradient(90deg, rgba(var(--c), 0), rgba(var(--c), .95) 50%, rgba(var(--c), 0)); }
.ft-gl--s > i::after{ transform:rotate(90deg); }
.ft-gl--h{ opacity:.72; }
@keyframes ftGl{
  0%{ opacity:0; transform:translate3d(0, 0, 0); }
  32%{ opacity:var(--o); }
  64%{ opacity:calc(var(--o) * .66); }
  100%{ opacity:0; transform:translate3d(var(--dx), var(--dy), 0); }
}
@keyframes ftStar{
  0%{ opacity:0; transform:translate3d(0, 0, 0) scale(.5); }
  40%{ opacity:var(--o); transform:translate3d(calc(var(--dx) * .4), calc(var(--dy) * .4), 0) scale(1); }
  66%{ opacity:calc(var(--o) * .35); transform:translate3d(calc(var(--dx) * .66), calc(var(--dy) * .66), 0) scale(.78); }
  100%{ opacity:0; transform:translate3d(var(--dx), var(--dy), 0) scale(.5); }
}
/* everything here that moves on its own: only while the footer is on screen and at rest (the scene's .is-live); held
   as it is on the way to the Home (data-scene "out": home.js reads the meteor's pose once as that way starts) */
.ft-cards :is(.ft-obj, .ft-sheen > i, .ft-gl > i, .ft-chip__run, .ft-chip__spk){ animation-play-state:paused; }
.ft.is-live:not([data-scene="out"]) .ft-cards :is(.ft-obj, .ft-sheen > i, .ft-gl > i, .ft-chip__run, .ft-chip__spk){ animation-play-state:running; }
.ft-card__txt{ display:flex; flex-direction:column; min-width:0; }
.ft-card__t{ font-size:max(18px, calc(30 * var(--u))); line-height:1.2; font-weight:400; letter-spacing:-.012em; }
.ft-card__d{ margin-top:calc(5 * var(--u)); font-size:max(13px, calc(18 * var(--u))); line-height:1.35; letter-spacing:.005em; }
/* hover (fine pointers) and the keys: the object comes a little closer and into the light (the veil clears), one
   glint brightens; its own float goes on inside (another layer); the text stays put */
@media (hover:hover) and (pointer:fine){
  .ft-card:hover .ft-card__zoom{ transform:scale(1.03); }
  .ft-card:hover .ft-card__media::after{ opacity:0; }
  .ft-card:hover .ft-gl--h{ opacity:1; transform:scale(1.3); }
}
.ft-card:focus-visible .ft-card__zoom{ transform:scale(1.03); }
.ft-card:focus-visible .ft-card__media::after{ opacity:0; }
.ft-card:focus-visible .ft-gl--h{ opacity:1; transform:scale(1.3); }

/* ---------------- the name: it breathes (animated-text.js sets one span per letter, --i its place) ----------------
   Inter here is static (400-900, no wght axis): the weight is drawn with a stroke of the text's own colour
   (0 at 400 up to .034em, about a 600), which changes the paint only, never the advances, so the word keeps its
   width and its line. Every 3.6 s the word goes heavier by its groups, real / holding / group (0.42 s apart),
   each letter 0.045 s after the one before in its group, and back; then it rests at 400 a moment. */
.ft-word{ font-size:calc((100cqw - 2 * var(--g)) / 7.4465); font-weight:400; line-height:1; letter-spacing:-.03em;
  white-space:nowrap; margin:.102em 0 .36em -.0771em; color:var(--ft-ink); user-select:none; -webkit-user-select:none; }
@property --ft-sw{ syntax:"<length>"; inherits:false; initial-value:0px; }
.ft-word .at__c{ -webkit-text-stroke:var(--ft-sw) currentColor;
  animation:ftBreath 3.6s linear calc(var(--g, 0) * .42s + var(--j, var(--i, 0)) * .045s) infinite; animation-play-state:paused; }
.ft.is-live .ft-word .at__c{ animation-play-state:running; }
@keyframes ftBreath{
  0%{ --ft-sw:0em; animation-timing-function:cubic-bezier(.45, 0, .55, 1); }
  30%{ --ft-sw:.034em; animation-timing-function:cubic-bezier(.45, 0, .55, 1); }
  60%, 100%{ --ft-sw:0em; }
}
.no-at .ft-word .at__c{ animation:none; }

/* ---------------- the links and the small blocks (one grid of rows: 16 u type, 1.6 lines) ---------------- */
.ft-low{ display:grid; grid-template-columns:max(calc(209 * var(--u)), 8em) max(calc(236 * var(--u)), 12em) 1fr auto; align-items:end;
  font-size:max(12px, calc(16 * var(--u))); line-height:1.6; font-weight:400; }
.ft-link{ display:inline-block; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit;
  -webkit-tap-highlight-color:transparent; }
a.ft-link[href], button.ft-link{ cursor:pointer; }
.ft-card:focus-visible, .ft-link:focus-visible{ outline:2px solid var(--cognac-lite); outline-offset:3px; }
.ft-about p{ margin:0; }
.ft-about__l{ display:block; }
.ft-legal{ justify-self:end; display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.ft-legal__copy{ margin-top:3.2em; }
.ft-c{ margin-right:.5em; }

/* ---------------- Cascade Text: the cards' titles and lines, the links (cascade-text.js splits them) ----------------
   Each letter an inline-block with its own copy one step below (text-shadow in its own colour); on the trigger every
   letter rises one step, one after the other, and the copy takes its place; back the same way. The trigger: the whole
   card (its title and its line together) or the link itself; :hover on fine pointers only (no hover left on a touch),
   :focus-visible from the keys; under prefers-reduced-motion nothing moves. Only transform moves: the colour, size,
   weight, case, spacing and lines are the text's own. The clip, word by word (the lines still break at the spaces):
   the letters' own line at 1, opened by padding to Inter's full height (ascent .969em, descent .242em: accents and
   descenders whole) and a little to each side (the glyphs' side bearings), the padding given back by a negative
   margin (the line keeps its height and its measure). The step (1.25em) is
   over that full height (1.21em): at rest the copy lies wholly under the clip, raised the letter wholly over it. */
.ft{ --ct-d:1.25em; }
.cct__sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.cct__w{ display:inline-flex; overflow:hidden; overflow:clip; padding:.116em .1em .124em; margin:-.116em -.1em -.124em; }
.cct__c{ display:inline-block; line-height:1; text-shadow:0 var(--ct-d) currentColor; }
.ft-card__t{ --ct-ms:300ms; --ct-st:18ms; }
.ft-card__d{ --ct-ms:250ms; --ct-st:10ms; }
.ft-col .ft-link{ --ct-ms:260ms; --ct-st:16ms; }
.ft-legal .ft-link{ --ct-ms:260ms; --ct-st:12ms; }
@media (prefers-reduced-motion:no-preference){
  .cct__c{ transition:transform var(--ct-ms) ease-in-out calc(var(--i) * var(--ct-st)); }
  .ft-card:focus-visible .cct__c, .ft-link:focus-visible .cct__c{ transform:translateY(calc(-1 * var(--ct-d))); }
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .ft-card:hover .cct__c, .ft-link:hover .cct__c{ transform:translateY(calc(-1 * var(--ct-d))); }
}

/* ---------------- tablets: the three cards narrower, taller; the legal block under the columns ---------------- */
@media (max-width:999px){
  .ft-card{ aspect-ratio:4 / 3.2; --cr:.8; }
  /* (taller cards, the text on two lines: the objects a little smaller and higher, still whole, clear of the title) */
  .ft-card--metals{ --oh:60; --cx:62; --cy:35; }
  .ft-card--digital{ --oh:60; --cy:35; }
  .ft-card--opp{ --oh:52; --cy:33; }
  .ft-word{ margin-top:28px; margin-bottom:40px; }
  .ft-low{ grid-template-columns:9em 13em 1fr; row-gap:40px; }
  .ft-legal{ grid-column:1 / -1; }
}

/* ---------------- phones: one card under another; the columns side by side, then the blocks in their order ---------------- */
@media (max-width:599px){
  .ft-cards{ grid-template-columns:minmax(0, 1fr); }
  .ft-card{ aspect-ratio:16 / 9; --cr:.5625; }
  .ft-card--metals{ --oh:76; --cx:64; --cy:43; }
  .ft-card--digital{ --oh:72; --cy:41; }
  .ft-card--opp{ --oh:62; --cy:38; }
  .ft-gl--d{ display:none; } /* (fewer glints on a phone) */
  .ft-word{ margin-top:28px; margin-bottom:24px; }
  .ft-low{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:16px; row-gap:32px; align-items:start; font-size:13px; }
  .ft-about{ grid-column:1 / -1; }
  .ft-legal{ grid-column:1 / -1; justify-self:start; align-items:flex-start; text-align:left; }
  .ft-legal__copy{ margin-top:24px; }
}
/* touch: every link at least 44 px tall (the blocks then start together, the text on the first link's line) */
@media (max-width:599px), (pointer:coarse){
  .ft-link{ display:inline-flex; align-items:center; min-height:44px; }
  .ft-low{ align-items:start; }
  .ft-about{ padding-top:calc((44px - 1.6em) / 2); }
}
/* reduced motion: nothing moves on its own (no float, no light passing, the glints still; no breathing: the name at 400),
   no approach on hover */
@media (prefers-reduced-motion:reduce){
  .ft-cards :is(.ft-obj, .ft-sheen > i, .ft-gl > i, .ft-chip__run, .ft-chip__spk), .ft-word .at__c{ animation:none; }
  .ft-card__zoom, .ft-card__media::after, .ft-gl{ transition:none; }
  .ft-card:hover .ft-card__zoom, .ft-card:focus-visible .ft-card__zoom, .ft-card:hover .ft-gl--h, .ft-card:focus-visible .ft-gl--h{ transform:none; }
}