/* =============================================================================
   Bemuar — references slider (homepage). See inc/refs-slider.php.
   One project at a time, on a laptop. Moves only when asked: arrows, dots,
   keyboard, swipe. Loads after real.css and keeps to its rules.
   ============================================================================= */

.rfs{
  --rfs-ease:cubic-bezier(.22,.61,.36,1);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"prev view next" ". pager .";
  align-items:center; column-gap:18px; row-gap:26px;
  max-width:1280px; margin:6px auto 0; padding:0 20px;
}
.rfs-arrow--prev{ grid-area:prev; }
.rfs-arrow--next{ grid-area:next; }
.rfs-viewport{ grid-area:view; overflow:hidden; touch-action:pan-y; }
.rfs-pager{ grid-area:pager; }

.rfs-track{ display:flex; transition:transform .75s var(--rfs-ease); }
.rfs-slide{
  flex:0 0 100%; min-width:0;
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:center; gap:52px; padding:10px 14px 24px;
  opacity:.2; transition:opacity .6s var(--rfs-ease);
}
.rfs-slide.is-active{ opacity:1; }

/* ---- laptop -------------------------------------------------------------- */
.rfs-laptop{
  position:relative; width:100%; aspect-ratio:1800/1311;
  transform:translateY(14px) scale(.975); transition:transform .8s var(--rfs-ease);
}
/* Contact shadow under the base — a gradient, not a filter: a CSS filter on a
   box this size is repainted on every slide change. */
.rfs-laptop::before{
  content:""; position:absolute; z-index:0; left:3%; right:3%; bottom:-4.5%; height:9%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(10,16,22,.30), rgba(10,16,22,.12) 45%, rgba(10,16,22,0) 72%);
  pointer-events:none;
}
.rfs-slide.is-active .rfs-laptop{ transform:none; }
.rfs-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
/* The screen sits UNDER the frame and bleeds a hair past the cut-out, so no
   sub-pixel seam shows at any width. Cut-out: 8.997 / 4.349 / 82.151 / 75.373 %. */
.rfs-screen{
  position:absolute; z-index:1;
  left:8.85%; top:4.2%; width:82.45%; height:75.67%;
  display:flex; flex-direction:column; overflow:hidden;
  background:#0d1117;
}
/* Chrome's dark toolbar — back / forward / reload, then the omnibox with the
   site-controls icon, the address and the bookmark star. Owner's rule: every
   browser mockup looks like this, never like a macOS window. */
.rfs-bar{
  flex:none; display:flex; align-items:center; gap:clamp(5px,.9vw,14px);
  height:clamp(20px,6.4%,36px); padding:0 clamp(6px,1.4%,16px);
  background:#35363a; border-bottom:1px solid #1f2023;
  font:400 clamp(8px,.8vw,12.5px)/1 'Inter',system-ui,sans-serif; color:#e8eaed;
}
.rfs-nav{ display:flex; align-items:center; gap:clamp(4px,.75vw,13px); flex:none; color:#c4c7c5; }
.rfs-nav svg{ width:clamp(9px,1.05vw,17px); height:clamp(9px,1.05vw,17px); fill:currentColor; display:block; }
.rfs-nav svg.is-off{ opacity:.42; }
.rfs-omni{
  flex:1; min-width:0; display:flex; align-items:center; gap:clamp(5px,.75vw,11px);
  height:74%; padding:0 clamp(7px,1.1vw,16px); border-radius:999px;
  background:#282828; color:#e8eaed;
}
.rfs-omni svg{ width:clamp(9px,1vw,16px); height:clamp(9px,1vw,16px); flex:none; fill:#c4c7c5; display:block; }
.rfs-omni .rfs-star{ margin-inline-start:auto; }
.rfs-url{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; }

.rfs-view{
  position:relative; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  background:#fff; scrollbar-width:thin; scrollbar-color:rgba(10,16,22,.35) transparent;
}
.rfs-view::-webkit-scrollbar{ width:6px; }
.rfs-view::-webkit-scrollbar-thumb{ background:rgba(10,16,22,.35); border-radius:6px; }
.rfs-view img{ display:block; width:100%; height:auto; }
.rfs-view--still{ overflow:hidden; }
.rfs-view--still img{ height:100%; object-fit:cover; }
.rfs-view:focus-visible{ outline:2px solid var(--bmx-primary,#3B55E6); outline-offset:-2px; }

/* A site with a scroll-driven intro (Foto Fuxx): the stage sticks while the
   recorded intro plays with the screen's own scroll, then the page follows.
   refs-slider.js sizes .rfs-scrub to ratio x screen height; without script the
   stage is one 16:10 screen showing the first frame. */
.rfs-scrub{ position:relative; }
.rfs-scrub-stage{ position:sticky; top:0; overflow:hidden; aspect-ratio:16/10; background:#0b0b0b; }
.rfs-scrub.is-sized .rfs-scrub-stage{ aspect-ratio:auto; }
.rfs-view .rfs-scrub-poster,
.rfs-scrub-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rfs-scrub-video{ opacity:0; transition:opacity .3s ease; }
.rfs-scrub-video.is-ready{ opacity:1; }

.rfs-hint{
  position:absolute; z-index:1; left:50%; bottom:6%;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:100px;
  background:rgba(10,16,22,.88); color:#fff;
  font:600 clamp(10px,.85vw,12.5px)/1 'Inter',system-ui,sans-serif; white-space:nowrap;
  transform:translateX(-50%); pointer-events:none;
  transition:opacity .45s var(--rfs-ease), transform .45s var(--rfs-ease);
}
.rfs-hint svg{ width:1.15em; height:1.15em; }
.rfs-screen.is-scrolled .rfs-hint{ opacity:0; transform:translate(-50%,8px); }
.rfs-soon{
  position:absolute; z-index:1; top:calc(clamp(20px,6.4%,36px) + 12px); right:12px;
  padding:7px 12px; border-radius:100px; background:#fff; color:var(--bmx-ink,#0A1016);
  font:700 clamp(9px,.75vw,11px)/1 'Inter',system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 4px 14px rgba(10,16,22,.18);
}

/* ---- project text --------------------------------------------------------- */
.rfs-info{ min-width:0; }
.rfs-badge{
  display:inline-block; padding:7px 12px; border-radius:100px;
  background:var(--bmx-ink,#0A1016); color:#fff;
  font:700 .7rem/1.2 'Inter',system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.rfs .rfs-info h3{ font-size:clamp(1.55rem,2.5vw,2.2rem); line-height:1.12; margin:18px 0 8px; color:var(--bmx-h,#0A1016); }
.rfs-domain{ display:inline-block; font-weight:600; color:var(--bmx-primary,#3B55E6); text-decoration:none; }
a.rfs-domain:hover{ text-decoration:underline; text-underline-offset:3px; }
.rfs-domain--soon{ color:var(--bmx-muted,#5F6B79); }
.rfs .rfs-info p{ margin:16px 0 26px; color:var(--bmx-muted,#5F6B79); line-height:1.7; font-size:1rem; }
.rfs-info .bmx-btn svg{ width:18px; height:18px; }

/* Text follows the laptop in, a beat later. */
.rfs-info > *{ opacity:0; transform:translateY(12px); transition:opacity .6s var(--rfs-ease), transform .6s var(--rfs-ease); }
.rfs-slide.is-active .rfs-info > *{ opacity:1; transform:none; }
.rfs-slide.is-active .rfs-info > :nth-child(1){ transition-delay:.18s; }
.rfs-slide.is-active .rfs-info > :nth-child(2){ transition-delay:.24s; }
.rfs-slide.is-active .rfs-info > :nth-child(3){ transition-delay:.30s; }
.rfs-slide.is-active .rfs-info > :nth-child(4){ transition-delay:.36s; }
.rfs-slide.is-active .rfs-info > :nth-child(5){ transition-delay:.42s; }

/* ---- controls ------------------------------------------------------------- */
.rfs-arrow{
  width:56px; height:56px; border-radius:50%; flex:none;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--bmx-line,#E2E5EA); background:#fff; color:var(--bmx-ink,#0A1016);
  box-shadow:0 6px 18px rgba(10,16,22,.08);
  transition:background-color .25s, color .25s, border-color .25s, transform .25s var(--rfs-ease);
}
.rfs-arrow svg{ width:22px; height:22px; }
.rfs-arrow--next svg{ transform:scaleX(-1); }
.rfs-arrow:hover{ background:var(--bmx-ink,#0A1016); border-color:var(--bmx-ink,#0A1016); color:#fff; }
.rfs-arrow:active{ transform:scale(.93); }
.rfs-arrow:focus-visible, .rfs-dots button:focus-visible{ outline:2px solid var(--bmx-primary,#3B55E6); outline-offset:3px; }

.rfs-pager{ display:flex; align-items:center; justify-content:center; gap:22px; }
.rfs-count{ direction:ltr; unicode-bidi:isolate; font:500 .92rem/1 'Inter',system-ui,sans-serif; color:var(--bmx-muted,#5F6B79); font-variant-numeric:tabular-nums; }
.rfs-count b{ color:var(--bmx-ink,#0A1016); font-weight:700; }
.rfs-dots{ display:flex; gap:8px; }
.rfs-dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:100px; cursor:pointer;
  background:rgba(10,16,22,.22); transition:width .35s var(--rfs-ease), background-color .35s;
}
.rfs-dots button[aria-current="true"]{ width:26px; background:var(--bmx-ink,#0A1016); }

/* ---- layout --------------------------------------------------------------- */
@media (max-width:1024px){
  .rfs{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"view view view" "prev pager next"; padding:0 16px; }
  .rfs-slide{ grid-template-columns:minmax(0,1fr); gap:30px; padding:6px 4px 10px; }
  .rfs-laptop{ max-width:720px; margin:0 auto; }
  .rfs-info{ max-width:640px; margin:0 auto; text-align:center; }
  .rfs-arrow{ width:48px; height:48px; }
}
@media (max-width:560px){
  .rfs-pager{ gap:14px; }
  .rfs-dots{ display:none; }
  .rfs-hint{ bottom:4%; padding:6px 10px; font-size:10px; }
}

/* ---- right-to-left (Arabic) ------------------------------------------------ */
[dir="rtl"] .rfs-arrow--prev svg{ transform:scaleX(-1); }
[dir="rtl"] .rfs-arrow--next svg{ transform:none; }
[dir="rtl"] .rfs-nav svg{ transform:scaleX(-1); }
[dir="rtl"] .rfs-info .bmx-btn svg{ transform:scaleX(-1); }
.rfs-url{ direction:ltr; unicode-bidi:isolate; }

/* ---- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rfs-track, .rfs-slide, .rfs-laptop, .rfs-info > *, .rfs-hint{ transition:none !important; }
  .rfs-laptop{ transform:none; }
}

/* ---- hero showcase (bemuar_hero_showcase) ----------------------------------
   The Foto Fuxx laptop in the hero's right column, where the hand clip was
   (owner, 2026-10-07). From 1100 px up the copy takes the left 54 % and the
   headline steps down a size so the laptop has room; below that the hero is
   unchanged and the laptop stays in the references slider. */
.bmx-hero-show{ display:none; }
.hs-laptop{ transform:none; transition:none; }
.hs-fig{ margin:0; }
.hs-cap{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:2px 10px;
  margin-top:clamp(14px,1.4vw,20px); text-align:center;
  font:500 .9rem/1.45 'Inter',system-ui,sans-serif; color:var(--bmx-muted,#5C6573);
}
.hs-name{ font-weight:700; color:var(--bmx-h,#0A1016); }
.hs-domain{ font-weight:600; color:var(--bmx-primary,#3B55E6); }
.hs-desc{ flex-basis:100%; }
/* The hint stays put and gives a short shake every two seconds until the
   visitor scrolls the screen. */
.hs-hint{ animation:hs-nudge 2s ease-in-out infinite; }
.rfs-screen.is-scrolled .hs-hint{ animation:none; }
@keyframes hs-nudge{
  0%, 72%, 100%{ transform:translateX(-50%); }
  77%{ transform:translateX(calc(-50% - 6px)) rotate(-2deg); }
  82%{ transform:translateX(calc(-50% + 6px)) rotate(2deg); }
  87%{ transform:translateX(calc(-50% - 4px)) rotate(-1deg); }
  92%{ transform:translateX(calc(-50% + 2px)); }
}
@media (min-width:1100px){
  .bmx-hero-show{ display:block; position:absolute; inset:0; z-index:3; pointer-events:none; }
  .hs-wrap{
    position:absolute; left:0; right:0; margin:0 auto;
    top:calc(var(--nav-h,76px) + clamp(3rem,7vw,6rem));
    bottom:calc(clamp(3.5rem,7vw,6.5rem) + 56px);
    display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:center;
  }
  .hs-fig{ grid-column:2; pointer-events:auto; }
  /* Right to left: the grid itself mirrors, column 2 is then on the left. */
  /* Slide 1 shows the laptop, slide 2 the hand clip (owner, 2026-10-07). */
  .bmx-hero.has-show .bmx-hero-show,
  .bmx-hero.has-show .bmx-hero-motion{ transition:opacity .6s ease, visibility .6s; }
  .bmx-hero.has-show:has(.bmx-slide:first-child.is-active) .bmx-hero-motion,
  .bmx-hero.has-show:has(.bmx-slide:not(:first-child).is-active) .bmx-hero-show{ opacity:0; visibility:hidden; }
  body.bmx-light .bmx-hero.has-show .bmx-hero-copy{ max-width:54%; }
  body.bmx-light .bmx-hero.has-show h1,
  body.bmx-light .bmx-hero.has-show .bmx-hero-h{ font-size:clamp(2.6rem,4.3vw,4.4rem); max-width:none; }
  body.bmx-light .bmx-hero.has-show .bmx-lead{ max-width:none; font-size:clamp(1.05rem,1.25vw,1.22rem); }
}
@media (prefers-reduced-motion:reduce){
  .hs-hint{ animation:none; }
}