/* Cinematic finishing layer: deliberately separate from the core site system. */
:root {
  --cinema-blue: #8aa8ff;
  --cinema-glow: rgba(110, 148, 255, .26);
  --cinema-ease: cubic-bezier(.2, .72, .15, 1);
}

html.cinematic-intro-pending,
body.cinema-locked { overflow: hidden; }

/* Full-screen opening title sequence */
.cinematic-intro {
  position: fixed;
  z-index: 150;
  inset: 0;
  display: none;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  min-height: 100svh;
  padding: 28px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(29, 43, 79, .24), transparent 42%),
    radial-gradient(ellipse at 50% 120%, rgba(41, 62, 123, .2), transparent 45%),
    #030407;
  color: #f7f8fc;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}
html.cinematic-intro-pending .cinematic-intro,
.cinematic-intro.is-active,
.cinematic-intro.is-exiting {
  display: grid;
}
html.cinematic-intro-pending .cinematic-intro,
.cinematic-intro.is-active { opacity: 1; visibility: visible; }
.cinematic-intro.is-exiting { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-atmosphere,
.intro-grid,
.intro-rays,
.intro-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.intro-atmosphere {
  z-index: -2;
  background:
    radial-gradient(500px circle at var(--intro-x, 50%) var(--intro-y, 47%), rgba(76, 108, 190, .1), transparent 72%),
    linear-gradient(180deg, rgba(2, 3, 6, .04), rgba(1, 2, 4, .42));
}
.intro-grid {
  z-index: -1;
  opacity: .2;
  background-image: linear-gradient(rgba(190, 207, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 207, 255, .045) 1px, transparent 1px);
  background-position: center;
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 76%);
}
.intro-rays::before,
.intro-rays::after {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 1px;
  height: 165%;
  transform: translateX(-50%) rotate(25deg);
  transform-origin: 50% 50%;
  background: linear-gradient(180deg, transparent 3%, rgba(134, 164, 255, .02) 20%, rgba(134, 164, 255, .15) 49%, rgba(134, 164, 255, .025) 76%, transparent 96%);
  box-shadow: 0 0 70px 18px rgba(92, 126, 229, .045);
  content: "";
  opacity: 0;
}
.intro-rays::after {
  width: 2px;
  transform: translateX(-50%) rotate(-31deg);
  background: linear-gradient(180deg, transparent 10%, rgba(243, 224, 178, .025) 35%, rgba(158, 185, 255, .13) 52%, rgba(243, 224, 178, .025) 71%, transparent 92%);
  box-shadow: 0 0 50px 10px rgba(126, 153, 229, .04);
}
.cinematic-intro.is-active .intro-rays::before { animation: intro-ray-bloom 2.8s ease .15s both; }
.cinematic-intro.is-active .intro-rays::after { animation: intro-ray-bloom 3.1s ease .45s both; }
.intro-flicker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(128, 159, 255, .15), rgba(75, 104, 191, .035) 24%, transparent 66%);
  filter: blur(7px);
  opacity: 0;
  pointer-events: none;
}
.cinematic-intro.is-active .intro-flicker { animation: intro-flare 3.1s var(--cinema-ease) .25s both; }
.intro-particles { z-index: 0; width: 100%; height: 100%; opacity: .82; }

.intro-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 540px);
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 17px, 0) scale(.985);
  transition: opacity .8s var(--cinema-ease), transform 1s var(--cinema-ease);
}
.cinematic-intro.is-active .intro-stage { opacity: 1; transform: none; transition-delay: .18s; }
.intro-mark-wrap {
  position: relative;
  width: clamp(104px, 18vw, 152px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  perspective: 900px;
}
.intro-mark-halo {
  position: absolute;
  inset: -20%;
  border: 1px solid rgba(137, 165, 245, .12);
  border-radius: 50%;
  box-shadow: 0 0 55px rgba(84, 119, 223, .1), inset 0 0 40px rgba(84, 119, 223, .05);
  opacity: 0;
  transform: scale(.82) rotate(-18deg);
}
.intro-mark-halo::before,
.intro-mark-halo::after {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(230, 183, 79, .09);
  border-radius: 50%;
  content: "";
}
.intro-mark-halo::after { inset: 21%; border-color: rgba(137, 165, 245, .1); }
.intro-brand-mark {
  position: relative;
  z-index: 1;
  width: 72%;
  height: 72%;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(230, 183, 79, .56);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(25, 21, 13, .96), rgba(6, 8, 13, .98));
  box-shadow: 0 0 0 7px rgba(230, 183, 79, .025), 0 18px 70px rgba(0, 0, 0, .52), 0 0 48px rgba(230, 183, 79, .1);
  opacity: 0;
  transform: rotateY(-78deg) rotateX(16deg) scale(.72);
  transform-style: preserve-3d;
}
.intro-brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }
.cinematic-intro.is-active .intro-mark-halo { animation: intro-halo-arrive 1.35s var(--cinema-ease) .16s both; }
.cinematic-intro.is-active .intro-brand-mark { animation: intro-logo-arrive 1.35s var(--cinema-ease) .3s both; }
.intro-wordmark {
  margin: 0;
  color: #f4f5f8;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.2;
  text-indent: .22em;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}
.intro-wordmark span { display: block; margin-top: 9px; color: #aeb9d2; font-size: .42em; font-weight: 500; letter-spacing: .4em; }
.cinematic-intro.is-active .intro-wordmark { animation: intro-type-reveal 1.05s var(--cinema-ease) 1.05s both; }
.intro-rule {
  position: relative;
  width: 112px;
  height: 1px;
  margin: 27px 0 16px;
  overflow: hidden;
  background: rgba(225, 232, 248, .12);
  opacity: 0;
}
.intro-rule i { position: absolute; inset: 0 auto 0 0; width: 100%; transform: translateX(-102%); background: linear-gradient(90deg, transparent, var(--cinema-blue), rgba(230, 183, 79, .76), transparent); }
.cinematic-intro.is-active .intro-rule { animation: intro-opacity .45s ease 1.78s both; }
.cinematic-intro.is-active .intro-rule i { animation: intro-line-draw 1s var(--cinema-ease) 1.82s both; }
.intro-tagline {
  margin: 0;
  color: #a0acc3;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .25em;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(8px);
}
.cinematic-intro.is-active .intro-tagline { animation: intro-tagline 1s var(--cinema-ease) 1.92s both; }
.intro-skip {
  position: absolute;
  z-index: 4;
  right: clamp(18px, 4vw, 44px);
  bottom: clamp(18px, 4vh, 38px);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border: 1px solid rgba(216, 227, 255, .2);
  border-radius: 999px;
  background: rgba(9, 12, 20, .64);
  color: #d9dfec;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  backdrop-filter: blur(12px);
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .25s var(--cinema-ease);
}
.intro-skip:hover { transform: translateY(-2px); border-color: rgba(138, 168, 255, .55); background: rgba(24, 34, 60, .8); color: #fff; }
.intro-skip span { color: var(--cinema-blue); font-size: 13px; }
.intro-sound {
  position: absolute;
  z-index: 4;
  top: clamp(18px, 4vh, 38px);
  right: clamp(18px, 4vw, 44px);
}

/* Sound controls: opt-in only; the audio engine is created after an explicit click. */
.sound-toggle {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(226, 234, 250, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: #aab4c8;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease, translate .3s var(--cinema-ease);
}
.sound-toggle:hover,
.sound-toggle[aria-pressed="true"] { border-color: rgba(138, 168, 255, .42); background: rgba(99, 137, 255, .09); color: #e8edff; }
.sound-toggle-icon { color: var(--cinema-blue); font-size: 15px; line-height: 1; }
.sound-toggle-label b { color: #7d879a; font-size: 8px; font-weight: 700; }
.sound-toggle[aria-pressed="true"] .sound-toggle-label b { color: var(--cinema-blue); }

/* Fine-pointer affordances only; touch and reduced-motion users keep native cursors. */
.cinema-cursor { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.has-cinema-cursor,
  html.has-cinema-cursor body,
  html.has-cinema-cursor a,
  html.has-cinema-cursor button,
  html.has-cinema-cursor input,
  html.has-cinema-cursor textarea,
  html.has-cinema-cursor [role="button"] { cursor: none !important; }
  .cinema-cursor {
    position: fixed;
    z-index: 145;
    top: 0;
    left: 0;
    display: block;
    width: 1px;
    height: 1px;
    transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0);
    pointer-events: none;
    will-change: transform;
  }
  .cinema-cursor-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(164, 188, 255, .63);
    border-radius: 50%;
    background: rgba(91, 127, 232, .035);
    box-shadow: 0 0 18px rgba(86, 122, 225, .1);
    transition: width .24s var(--cinema-ease), height .24s var(--cinema-ease), border-color .24s ease, background .24s ease;
  }
  .cinema-cursor-core {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #e5ecff;
    box-shadow: 0 0 12px rgba(138, 168, 255, .85);
  }
  .cinema-cursor.is-hovering .cinema-cursor-ring { width: 48px; height: 48px; border-color: rgba(188, 205, 255, .92); background: rgba(99, 137, 255, .09); }
  .cinema-cursor.is-pressing .cinema-cursor-ring { width: 27px; height: 27px; background: rgba(138, 168, 255, .18); }
  html.cinematic-intro-active .cinema-cursor { display: none; }
  .magnetic-target { transition-property: transform, translate, color, background, border-color, box-shadow; }
}

/* Subtle scene change cue for in-page navigation. */
.scene-wipe {
  position: fixed;
  z-index: 110;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(100deg, #030407 0%, #080b13 52%, #11192b 100%);
  opacity: 0;
  pointer-events: none;
}
.scene-wipe.is-active { animation: scene-wipe .76s cubic-bezier(.74, 0, .2, 1) both; }

/* Letter-by-letter headline reveal, preserving the original words and nested colour spans. */
.cinema-char { display: inline-block; }
.letter-reveal.is-letter-visible .cinema-char {
  animation: letter-arrive .7s var(--cinema-ease) both;
  animation-delay: calc(70ms + var(--char-delay, 0ms));
  transform-origin: 50% 100%;
}

/* Gallery finish: 3D image-plane movement, soft spotlight, and restrained light sweep. */
.gallery-frame,
.identity-card,
.mpesa-card { transform-style: preserve-3d; transition: transform .36s var(--cinema-ease), box-shadow .36s ease, border-color .36s ease; }
.gallery-frame { will-change: transform; }
.gallery-frame::before,
.gallery-frame::after { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; }
.gallery-frame::before {
  inset: -40% auto -40% -38%;
  width: 29%;
  transform: translateX(-160%) rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(239, 244, 255, .04) 22%, rgba(239, 244, 255, .26) 50%, rgba(239, 244, 255, .06) 78%, transparent);
  opacity: 0;
}
.gallery-frame::after {
  background: radial-gradient(280px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(214, 225, 255, .18), transparent 62%);
  opacity: 0;
  transition: opacity .35s ease;
}
.gallery-item:hover .gallery-frame::before,
.gallery-item:focus-visible .gallery-frame::before { animation: image-light-sweep .9s var(--cinema-ease) both; }
.gallery-item:hover .gallery-frame::after,
.gallery-item:focus-visible .gallery-frame::after { opacity: .72; }
.gallery-item:hover .gallery-frame { border-color: rgba(138, 168, 255, .35); box-shadow: 0 18px 46px rgba(0, 0, 0, .24), 0 0 24px rgba(86, 122, 225, .06); }
.gallery-view { z-index: 2; }
.gallery-item:hover .gallery-frame img,
.gallery-item:focus-visible .gallery-frame img { transform: scale(1.045) translate(var(--image-pan-x, 0px), var(--image-pan-y, 0px)); filter: saturate(1.06) brightness(1.04); }

/* Keep work filters in reach while browsing the portfolio on larger screens. */
@media (min-width: 761px) {
  .work-toolbar {
    position: sticky;
    z-index: 18;
    top: 94px;
    margin-right: -14px;
    margin-left: -14px;
    padding: 10px 14px;
    border: 1px solid rgba(226, 234, 250, .055);
    border-radius: 12px;
    background: rgba(11, 16, 25, .78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* Small-screen composition: no magnetic pull or custom cursor; keep the intro clear. */
@media (max-width: 760px) {
  .intro-grid { background-size: 58px 58px; opacity: .14; }
  .intro-mark-wrap { margin-bottom: 22px; }
  .intro-sound { top: 16px; right: 16px; }
  .intro-skip { right: 16px; bottom: 17px; }
  .intro-tagline { max-width: 260px; font-size: 8px; letter-spacing: .17em; }
  .sound-toggle { min-height: 34px; padding-inline: 9px; }
  .site-header .sound-toggle { gap: 5px; }
}
@media (max-width: 420px) {
  .site-header .sound-toggle { gap: 5px; padding-inline: 8px; font-size: 8px; }
  .site-header .sound-toggle-icon { font-size: 13px; }
  .nav-shell { gap: 10px; }
  .intro-wordmark { letter-spacing: .16em; text-indent: .16em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .cinematic-intro,
  .cinematic-intro.is-active,
  .cinematic-intro.is-exiting,
  .scene-wipe,
  .cinema-cursor { display: none !important; }
  .gallery-frame,
  .identity-card,
  .mpesa-card,
  .gallery-frame img,
  .sound-toggle { transition: none !important; }
  .gallery-frame::before,
  .gallery-frame::after { display: none !important; }
  .letter-reveal.is-letter-visible .cinema-char { animation: none !important; }
}

@keyframes intro-ray-bloom {
  0% { opacity: 0; filter: blur(1px); }
  25% { opacity: .62; }
  57% { opacity: .2; }
  100% { opacity: .36; filter: blur(0); }
}
@keyframes intro-flare {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  23% { opacity: .8; }
  41% { opacity: .27; }
  100% { opacity: .53; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes intro-halo-arrive {
  0% { opacity: 0; transform: scale(.7) rotate(-30deg); }
  70% { opacity: .95; transform: scale(1.03) rotate(4deg); }
  100% { opacity: .65; transform: scale(1) rotate(0); }
}
@keyframes intro-logo-arrive {
  0% { opacity: 0; transform: rotateY(-78deg) rotateX(16deg) scale(.72); filter: brightness(.45) blur(5px); }
  58% { opacity: 1; transform: rotateY(12deg) rotateX(-3deg) scale(1.04); filter: brightness(1.35) blur(0); }
  78% { transform: rotateY(-4deg) rotateX(1deg) scale(.99); filter: brightness(1.08); }
  100% { opacity: 1; transform: rotateY(0) rotateX(0) scale(1); filter: brightness(1); }
}
@keyframes intro-type-reveal {
  from { clip-path: inset(0 100% 0 0); opacity: 0; filter: blur(3px); }
  to { clip-path: inset(0 0 0 0); opacity: 1; filter: blur(0); }
}
@keyframes intro-opacity { to { opacity: 1; } }
@keyframes intro-line-draw { to { transform: translateX(102%); } }
@keyframes intro-tagline {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes letter-arrive {
  0% { opacity: 0; transform: translate3d(0, .52em, 0) rotateX(-22deg); filter: blur(4px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); filter: blur(0); }
}
@keyframes image-light-sweep {
  0% { transform: translateX(-160%) rotate(18deg); opacity: 0; }
  18% { opacity: .8; }
  100% { transform: translateX(520%) rotate(18deg); opacity: 0; }
}
@keyframes scene-wipe {
  0% { transform: scaleX(0); transform-origin: left center; opacity: 0; }
  13% { opacity: 1; }
  43% { transform: scaleX(1); transform-origin: left center; opacity: 1; }
  58% { transform: scaleX(1); transform-origin: right center; opacity: 1; }
  100% { transform: scaleX(0); transform-origin: right center; opacity: 0; }
}


/* Keep custom-pointer affordances visible over the intro; the active overlay remains modal. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cinema-cursor { z-index: 160; }
  html.cinematic-intro-active .cinema-cursor { display: block; }
  .magnetic-target {
    transition: translate .32s var(--cinema-ease), transform .22s var(--ease), box-shadow .22s ease, background .22s ease, border-color .22s ease, color .2s ease;
  }
}


/* Atmospheric layers: slow CSS haze and a short, understated anamorphic flare. */
.intro-fog {
  position: absolute;
  z-index: 0;
  top: 52%;
  left: 7%;
  width: min(74vw, 920px);
  height: min(48vh, 520px);
  transform: translate3d(-7%, 0, 0) scale(.88);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(87, 111, 172, .16), rgba(60, 78, 123, .055) 38%, transparent 72%);
  filter: blur(48px);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.intro-fog-two {
  top: 33%;
  right: 4%;
  left: auto;
  width: min(64vw, 760px);
  height: min(42vh, 440px);
  transform: translate3d(8%, 0, 0) scale(.94);
  background: radial-gradient(ellipse, rgba(106, 83, 119, .11), rgba(65, 76, 119, .045) 42%, transparent 72%);
}
.cinematic-intro.is-active .intro-fog-one { animation: intro-fog-drift 6.5s ease-in-out .1s both; }
.cinematic-intro.is-active .intro-fog-two { animation: intro-fog-drift-alt 7s ease-in-out .45s both; }
.intro-lens-flare {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.intro-lens-flare::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82vw, 1040px);
  height: 1px;
  transform: translate(-50%, -50%) scaleX(.05);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(152, 179, 255, .14) 24%, rgba(226, 235, 255, .72) 49%, rgba(238, 211, 153, .24) 51%, rgba(152, 179, 255, .12) 76%, transparent);
  box-shadow: 0 0 22px 3px rgba(137, 167, 255, .13);
  opacity: 0;
  content: "";
}
.intro-lens-flare::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) scale(.45);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 235, 219, .12), rgba(131, 159, 242, .07) 21%, rgba(90, 122, 205, .025) 45%, transparent 72%);
  filter: blur(4px);
  opacity: 0;
  content: "";
}
.cinematic-intro.is-active .intro-lens-flare::before { animation: intro-lens-streak 2.2s ease .62s both; }
.cinematic-intro.is-active .intro-lens-flare::after { animation: intro-flare 2s var(--cinema-ease) .72s both; }
@media (max-width: 760px) {
  .intro-fog { filter: blur(30px); }
  .intro-lens-flare::before { width: 92vw; }
  .intro-lens-flare::after { width: 130px; height: 130px; }
}
@keyframes intro-fog-drift {
  0% { opacity: 0; transform: translate3d(-7%, 5%, 0) scale(.88); }
  28% { opacity: .63; }
  70% { opacity: .43; }
  100% { opacity: .22; transform: translate3d(5%, -3%, 0) scale(1.04); }
}
@keyframes intro-fog-drift-alt {
  0% { opacity: 0; transform: translate3d(8%, -4%, 0) scale(.94); }
  34% { opacity: .48; }
  72% { opacity: .24; }
  100% { opacity: .15; transform: translate3d(-4%, 4%, 0) scale(1.08); }
}
@keyframes intro-lens-streak {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.05); }
  27% { opacity: .85; }
  58% { opacity: .18; }
  100% { opacity: .3; transform: translate(-50%, -50%) scaleX(1); }
}