/* Arabic lines in the easter-egg bubble: Alexandria (Google Fonts, OFL), Arabic glyphs only */
@font-face { font-family: "Alexandria Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Alexandria-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
/* ==========================================================================
   B’s FX layer: breathing, hover zoom, pointer reactions, doodles, glitches.
   Everything here switches off with the Motion switch (html.no-motion)
   and with the visitor's reduced-motion setting.
   ========================================================================== */
html, body { overflow-x: clip; }

/* ---------- breathing: pieces slowly swell while they are on screen ---------- */
.tile, .float .frame, .pcard .pc-thumb, .glitch, .brand-tile { overflow: hidden; }
.fx-on .tile img, .fx-on .float .frame img, .fx-on .pcard img.pc-img, .fx-on .brand-tile img, .fx-on .glitch > img {
  transition: scale .7s var(--ease), translate .5s var(--ease), filter var(--t-mid) var(--ease);
}
.fx-on .fx-breathe.fx-in img:not(.pan) { animation: fx-breathe var(--fx-dur, 7s) ease-in-out var(--fx-delay, 0s) infinite alternate; }
@keyframes fx-breathe { from { scale: 1; } to { scale: 1.045; } }
.fx-on .level .node, .fx-on .nr-logo::after { animation: fx-pulse 2.8s ease-in-out infinite; }
@keyframes fx-pulse { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .55; scale: .82; } }

/* ---------- hover: the piece lifts and enlarges ---------- */
.fx-on .fx-lift { transition: scale .45s var(--ease), box-shadow .45s var(--ease), border-color var(--t-fast) var(--ease); }
.fx-on .fx-lift:hover { position: relative; z-index: 5; scale: 1.035; box-shadow: 0 18px 50px -18px rgba(0,0,0,.85), 0 0 0 1px var(--lime); }
.fx-on .fx-lift:hover img { animation-play-state: paused; scale: 1.09; }
.fx-on .sc-stage .fx-lift:hover { scale: 1.02; }

/* pointer glare + scanline glitch flash on pieces */
.fx-lift { --mx: 50%; --my: 50%; }
.fx-on .fx-lift::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(200,255,50,.22), transparent 42%);
  transition: opacity .35s var(--ease); }
.fx-on .fx-lift:hover::after { opacity: 1; }
.fx-on .fx-lift::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(180deg, rgba(200,255,50,.0) 0 3px, rgba(200,255,50,.35) 3px 4px), linear-gradient(90deg, rgba(200,255,50,.22), rgba(243,240,232,.18));
  mix-blend-mode: screen; clip-path: inset(100% 0 0 0); }
.fx-on .fx-lift.fx-zap::before { animation: fx-slices .42s steps(1, end) 1; }
@keyframes fx-slices {
  0% { opacity: 1; clip-path: inset(12% 0 70% 0); translate: -6px 0; }
  20% { clip-path: inset(55% 0 30% 0); translate: 5px 0; }
  40% { clip-path: inset(80% 0 6% 0); translate: -3px 0; }
  60% { clip-path: inset(30% 0 52% 0); translate: 7px 0; }
  80% { clip-path: inset(66% 0 18% 0); translate: -4px 0; }
  100% { opacity: 0; clip-path: inset(100% 0 0 0); translate: 0 0; }
}

/* tilt for cards that own their transform */
.fx-on .fx-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), border-color var(--t-fast) var(--ease); }
.fx-on .fx-tilt.fx-hot { transition: transform .08s linear, border-color var(--t-fast) var(--ease); }
.fx-on .pcard:hover, .fx-on .pcard:focus-visible { translate: 0 -3px; }

/* magnetic buttons */
.fx-on .fx-mag { transition: translate .35s var(--ease); }
.fx-on .fx-mag.fx-hot { transition: translate .1s linear; }

/* ---------- cursor ring (mouse only) ---------- */
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 200; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none;
  border: 1.5px solid var(--lime); border-radius: 50%; mix-blend-mode: difference; opacity: 0;
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), opacity .2s, background .25s;
  display: grid; place-items: center; font: 600 10px/1 var(--mono); letter-spacing: .1em; color: var(--ink); }
.fx-cursor.on { opacity: 1; }
.fx-cursor.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: var(--lime); mix-blend-mode: normal; }
.fx-cursor.link { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(200,255,50,.18); }
.fx-cursor.down { scale: .8; }
html.no-motion .fx-cursor { display: none; }

/* ---------- headline glitch: RGB split on hover and now and then ---------- */
.fx-glitch { position: relative; }
.fx-on .fx-glitch::before, .fx-on .fx-glitch::after { content: attr(data-fx-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; white-space: inherit; }
.fx-on .fx-glitch::before { color: var(--lime); }
.fx-on .fx-glitch::after { color: var(--paper); }
.fx-on .fx-glitch.fx-glitching::before { animation: fx-rgb-a .5s steps(2, end) 1; }
.fx-on .fx-glitch.fx-glitching::after { animation: fx-rgb-b .5s steps(2, end) 1; }
@keyframes fx-rgb-a {
  0% { opacity: .9; translate: -4px 0; clip-path: inset(0 0 62% 0); }
  25% { translate: 3px 0; clip-path: inset(40% 0 30% 0); }
  50% { translate: -2px 0; clip-path: inset(70% 0 4% 0); }
  75% { translate: 5px 0; clip-path: inset(18% 0 55% 0); }
  100% { opacity: 0; translate: 0 0; clip-path: inset(0); }
}
@keyframes fx-rgb-b {
  0% { opacity: .9; translate: 4px 0; clip-path: inset(55% 0 10% 0); }
  25% { translate: -3px 0; clip-path: inset(10% 0 66% 0); }
  50% { translate: 2px 0; clip-path: inset(34% 0 40% 0); }
  75% { translate: -5px 0; clip-path: inset(76% 0 2% 0); }
  100% { opacity: 0; translate: 0 0; clip-path: inset(0); }
}
.fx-on .fx-glitch.fx-glitching { animation: fx-jitter .5s steps(3, end) 1; }
@keyframes fx-jitter { 0% { translate: 1px 0; } 33% { translate: -2px 0; } 66% { translate: 1px 0; } 100% { translate: 0 0; } }

/* ---------- doodles: hand-drawn lime marks that draw themselves in ---------- */
.fx-doodle { position: absolute; z-index: 2; pointer-events: none; color: var(--lime); overflow: visible; }
.fx-doodle path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx-on .fx-doodle path { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.fx-on .fx-doodle.fx-in path { animation: fx-draw 1.1s cubic-bezier(.6,.05,.3,1) var(--fx-delay, .1s) forwards; }
.fx-on .fx-doodle.fx-in { animation: fx-wobble 5s ease-in-out 1.4s infinite; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-wobble { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--wob, 4deg); } }
.fx-dh { position: relative; width: fit-content; max-width: 100%; }
.fx-doodle--star { right: -.75em; top: -.3em; width: .6em; height: .6em; min-width: 22px; min-height: 22px; max-width: 46px; max-height: 46px; }

/* ---------- HUD labels scramble in ---------- */

/* ---------- reveal: sections rise in as they enter ---------- */
.fx-on .fx-rise { opacity: 0; translate: 0 26px; transition: opacity .7s var(--ease), translate .8s var(--ease); }
.fx-on .fx-rise.fx-in { opacity: 1; translate: 0 0; }

/* ---------- motion off / reduced motion: everything still and visible ---------- */
html.no-motion .fx-doodle path { stroke-dasharray: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .fx-on *, .fx-on *::before, .fx-on *::after { animation: none !important; }
  .fx-on .fx-rise { opacity: 1; translate: none; }
  .fx-on .fx-doodle path { stroke-dashoffset: 0; }
  .fx-cursor { display: none; }
}
@media (hover: none) { .fx-cursor { display: none; } }

/* ---------- confetti canvas ---------- */
.fx-px { position: fixed; z-index: 250; margin: -4px 0 0 -4px; pointer-events: none; animation: fx-px .62s steps(6, end) forwards; }
@keyframes fx-px { 0% { translate: 0 0; opacity: 1; } 70% { opacity: 1; } 100% { translate: var(--dx) var(--dy); opacity: 0; } }
.fx-on .fx-burst { animation: fx-tear .55s steps(1, end) 1; }
@keyframes fx-tear {
  0% { clip-path: inset(0 0 58% 0); translate: -6px 0; filter: drop-shadow(4px 0 0 var(--lime)); }
  15% { clip-path: inset(40% 0 22% 0); translate: 8px 0; filter: drop-shadow(-4px 0 0 var(--paper)); }
  30% { clip-path: inset(70% 0 0 0); translate: -4px 0; }
  45% { clip-path: inset(10% 0 45% 0); translate: 5px 0; filter: drop-shadow(3px 0 0 var(--lime)); }
  60% { clip-path: none; translate: 0 0; filter: none; }
  100% { clip-path: none; translate: 0 0; filter: none; }
}

/* ---------- hidden contact details ---------- */
.contact-item.is-hidden .v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ci-mask { font-family: var(--mono); letter-spacing: -.05em; color: var(--muted); }
.ci-hint { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.fx-on .contact-item.is-hidden .ci-hint { animation: fx-blink 1.6s steps(2, end) infinite; }
@keyframes fx-blink { 50% { opacity: .35; } }
.contact-item.is-hidden .ci-link { cursor: pointer; }
.contact-item.is-open { border-color: var(--lime); }

/* ---------- agent mode bits ---------- */
.site-footer .wrap { position: relative; }
.agent-dot { width: 12px; height: 12px; padding: 0; margin-left: 10px; border: 0; background: var(--lime); cursor: pointer; vertical-align: middle; clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%); }
.agent-dot:hover, .agent-dot:focus-visible { background: var(--lime-hi); outline-offset: 4px; }
.agent-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 260; translate: -50% 0; max-width: calc(100vw - 32px); padding: 10px 16px; background: var(--lime); color: var(--lime-ink); font: 600 13px/1.4 var(--mono); transition: opacity .35s, translate .35s; }
.agent-toast.out { opacity: 0; translate: -50% 10px; }
.agent-ask { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 260; }
.agent-ask input { width: 180px; padding: 8px 10px; font: 500 14px var(--mono); color: var(--paper); background: var(--ink); border: 1px solid var(--line); }
html.agent-open { overflow: hidden; }

/* ---------- easter-egg speech bubble ---------- */
.bs-bubble { position: fixed; left: clamp(16px, 3vw, 32px); bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom, 0px)); z-index: 240; display: flex; align-items: flex-end; gap: 10px; max-width: min(360px, calc(100vw - 32px)); pointer-events: none; opacity: 0; translate: 0 24px; scale: .8; transform-origin: 0 100%; }
.bs-bubble.in { opacity: 1; translate: 0 0; scale: 1; transition: opacity .25s, translate .5s cubic-bezier(.3,1.6,.5,1), scale .5s cubic-bezier(.3,1.6,.5,1); }
.bs-bubble.out { opacity: 0; translate: 0 12px; scale: .9; transition: opacity .35s, translate .4s, scale .4s; }
.bs-av { flex: none; display: flex; align-items: center; justify-content: center; white-space: nowrap; width: 48px; height: 44px; background: var(--paper); color: var(--ink); font: 900 16px/1 var(--display); font-stretch: 125%; letter-spacing: -.04em; clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 78%); }
.bs-av i { font-style: normal; color: var(--lime-dim); }
.bs-bubble .bs-say p { position: relative; margin: 0 0 18px; padding: 12px 16px; background: var(--lime); color: var(--lime-ink); font: 700 16px/1.45 "Alexandria Arabic", var(--body), "Geeza Pro", Tahoma, sans-serif; box-shadow: 0 12px 30px -12px rgba(0,0,0,.7); }
.bs-bubble .bs-say p::after { content: ""; position: absolute; left: -9px; bottom: 0; width: 12px; height: 14px; background: var(--lime); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.fx-on .bs-bubble.in .bs-say p { animation: fx-wiggle 1.2s ease-in-out .5s 2; }
@keyframes fx-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
@media (prefers-reduced-motion: reduce) { .bs-bubble.in, .bs-bubble.out { transition: opacity .2s; translate: none; scale: none; } }
.copy-ic[hidden] { display: none; }
.help-card h3 { font-size: clamp(16px, 1.3vw, 21px); overflow-wrap: anywhere; }
/* on lime headlines the glitch splits into paper and ink instead */
.fx-on .h-display.fx-glitch::before { color: var(--paper); }
.fx-on .h-display.fx-glitch::after { color: var(--lime-dim); }

/* ---------- Digital artworks: lime heart easter egg ---------- */
#digital-wall .tile, #digital-wall .film { transition: transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease); }
#digital-wall.fx-turned .tile, #digital-wall.fx-turned .film { transform: perspective(700px) rotateY(180deg); opacity: .18; filter: grayscale(1); }
#digital-wall .jrows { position: relative; }
.fx-heart { position: absolute; z-index: 5; translate: -50% -50%; pointer-events: none; }
.fx-heart i { position: absolute; background: var(--lime); box-shadow: 0 0 18px rgba(200,255,50,.35); clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); opacity: 0; scale: .2; rotate: 90deg; animation: fx-cell .5s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes fx-cell { to { opacity: 1; scale: 1; rotate: 0deg; } }
.fx-heart:not(.out) { animation: fx-beat 1.1s ease-in-out 1.2s 3; }
@keyframes fx-beat { 0%, 100% { scale: 1; } 15% { scale: 1.08; } 30% { scale: .98; } 45% { scale: 1.05; } }
.fx-heart.out i { animation: fx-cell-out .5s steps(4, end) forwards; }
@keyframes fx-cell-out { from { opacity: 1; } to { opacity: 0; scale: .4; } }
.bold-trio .tile img { transition: opacity .8s ease-in-out, filter var(--t-mid) var(--ease); }
.bold-trio.fx-trade .tile img { opacity: 0; }

/* speech bubble: tap it to reply */
.bs-bubble { pointer-events: none; }
.bs-bubble.in { pointer-events: auto; }
.bs-body { display: grid; gap: 8px; min-width: 0; }
.bs-say { display: block; padding: 0; margin: 0; border: 0; background: none; text-align: inherit; color: inherit; font: inherit; cursor: pointer; }
.bs-say p { margin-bottom: 0; }
.bs-cue { display: inline-block; margin: 6px 0 0 2px; padding: 3px 7px; background: var(--ink); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); opacity: .85; }
.bs-say:hover .bs-cue, .bs-say:focus-visible .bs-cue { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.bs-bubble.is-reply .bs-cue { display: none; }
.bs-bubble.is-reply { max-width: min(380px, calc(100vw - 32px)); }
.bs-form { display: grid; gap: 8px; width: min(300px, calc(100vw - 90px)); padding: 12px; background: var(--ink-2); border: 1px solid var(--lime); box-shadow: 0 14px 34px -12px rgba(0,0,0,.8); }
.bs-lab { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bs-form textarea, .bs-form input { width: 100%; box-sizing: border-box; padding: 9px 10px; background: var(--ink); color: var(--paper); border: 1px solid var(--line); font: 500 16px/1.4 "Alexandria Arabic", var(--body), sans-serif; resize: vertical; }
.bs-form textarea:focus, .bs-form input:focus { outline: none; border-color: var(--lime); }
.bs-form .bs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bs-row { display: flex; justify-content: space-between; gap: 8px; }
.bs-x, .bs-send { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); background: none; color: var(--muted); font: 600 13px var(--mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.bs-send { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.bs-send:disabled { opacity: .5; cursor: wait; }
.bs-status { margin: 0; min-height: 1em; font: 500 12px var(--mono); color: var(--muted); }
.bs-thanks { margin: 0; font: 700 15px var(--body); color: var(--lime); }