/* Mounir Institute motion layer (28 October 2026, trimmed the same day at the owners' request).
   It keeps three things: the button glows, a soft gold light that follows the mouse, and a smoother,
   an orb of light flowing across the four principles. html.mi-motion is only set when the visitor has not
   asked for reduced motion, and html.mi-fine only for a mouse or trackpad.
   Selectors start with "html" because many of the page's own style blocks sit in <body> and use !important. */

@keyframes mi-shine { 0%, 60% { transform: translateX(-135%); } 80%, 100% { transform: translateX(135%); } }
@keyframes mi-pulse {
  0% { box-shadow: 0 0 0 0 rgba(215, 181, 109, .45); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(215, 181, 109, 0); }
}
@keyframes mi-sheen { from { background-position: 0 0, 115% 0; } to { background-position: 0 0, -15% 0; } }
@keyframes mi-halo { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }

/* ---------- Button glows: a light sweeps across, and the main hero button pulses ---------- */
html.mi-motion .cta, html.mi-motion .topbar-cta { position: relative; overflow: hidden; isolation: isolate; }
html.mi-motion .cta::after, html.mi-motion .topbar-cta::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 250, 232, .5) 47%, rgba(255, 255, 255, .8) 50%, rgba(255, 250, 232, .5) 53%, transparent 70%);
  transform: translateX(-135%);
  animation: mi-shine 6s cubic-bezier(.6, 0, .2, 1) 2s infinite;
}
html.mi-motion .cta.secondary::after { background: linear-gradient(110deg, transparent 35%, rgba(240, 220, 165, .2) 50%, transparent 65%); }
html.mi-motion .hero .cta:not(.secondary) { animation: mi-pulse 2.8s ease-out 1.5s infinite; }

/* ---------- A soft gold light that follows the mouse ---------- */
.mi-aura {
  position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; z-index: 900; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, rgba(240, 220, 165, .085) 0%, rgba(215, 181, 109, .035) 36%, transparent 66%);
  mix-blend-mode: screen; will-change: transform;
}
.mi-aura.on { opacity: 1; }

/* ---------- The four principles: the gradient that marks the lit card (29 October 2026) ----------
   The same warm white-to-gold fill and edge are used by the gliding light on wider screens and by the
   lit card in the phone carousel, so the lit principle clearly stands out from the other three. */
:root {
  --mi-lit-fill:
    radial-gradient(130% 78% at 50% -12%, rgba(255, 249, 232, .27) 0%, rgba(244, 226, 176, .15) 30%, rgba(215, 181, 109, .06) 56%, rgba(215, 181, 109, 0) 78%),
    linear-gradient(180deg, rgba(240, 220, 165, .07) 0%, rgba(215, 181, 109, 0) 48%, rgba(215, 181, 109, .09) 100%);
  --mi-lit-edge: linear-gradient(165deg, #ffffff 0%, #f7e7b9 28%, rgba(222, 190, 120, .8) 60%, rgba(215, 181, 109, .22) 100%);
}
/* Every card gets a little depth, so the lit one reads as light falling on it */
html #method .method-step .method-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(160deg, #181713 0%, #0f0f0e 100%) !important;
}
/* The section title's gold words in the same gold gradient as the header and footer wordmarks */
html #method #method-title .gold {
  background: linear-gradient(180deg, #f8ebc4 0%, #e7c983 52%, #c19a52 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
}

/* ---------- The four principles: the white glow flows from card to card ----------
   The page's script moves .is-active along the visible cards. Here each change cross-fades slowly
   instead of snapping (in under a second), a soft sheen drifts across the lit card, and its number's halo breathes. */
html.mi-motion #method .method-step .method-card {
  transition: border-color .8s cubic-bezier(.45, 0, .2, 1), box-shadow .8s cubic-bezier(.45, 0, .2, 1), background-color .8s ease !important;
}
html.mi-motion #method .method-step .method-card::before {
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .07) 44%, rgba(255, 248, 228, .13) 50%, rgba(215, 181, 109, .07) 56%, transparent 75%) !important;
  background-size: 100% 100%, 260% 100% !important;
  background-repeat: no-repeat !important;
  transition: opacity .8s cubic-bezier(.45, 0, .2, 1) !important;
}
html.mi-motion #method .method-step.is-active .method-card::before { animation: mi-sheen 7s ease-in-out infinite alternate !important; }
html.mi-motion #method .method-card h3, html.mi-motion #method .method-step-tag { transition: color .7s ease, text-shadow .7s ease !important; }
html.mi-motion #method .method-number { transition: border-color .8s ease, color .8s ease, background-color .8s ease !important; }
html.mi-motion #method .method-number::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 16px rgba(255, 255, 255, .42), 0 0 34px rgba(255, 255, 255, .16);
  opacity: 0; transition: opacity .8s cubic-bezier(.45, 0, .2, 1);
}
html.mi-motion #method .method-step.is-active .method-number::after { opacity: 1; animation: mi-halo 3.4s ease-in-out infinite; }

/* On wider screens all four principles sit in view (two by two, then one row from 1100px), so a single light
   can glide from card to card. Phones get their own layout for the same light, further down. */
@media (min-width: 761px) {
  html #method .method-timeline {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 18px !important;
    overflow: visible !important; position: relative !important; scroll-snap-type: none !important; padding: 8px 0 0 !important;
  }
  html #method .method-timeline > .method-step { flex: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
  html #method .carousel-hint, html #method .carousel-dots { display: none !important; }
}
@media (min-width: 1100px) {
  html #method .method-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---------- The four principles: an orb of light flows between the numbers (31 October 2026) ----------
   motion.js adds a hairline through the numbers, an orb that glides from number to number with a softer glow
   trailing a little behind it, and a lit layer in each card that fades in as the orb arrives. The orb sits behind
   the number circles, so a resting orb shows as light around the lit number. Phones (from 1 November 2026) put the
   numbers in a row above a row of cards, set out further down. */
@keyframes mi-orb-breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes mi-lit-sheen { from { background-position: 115% 0; } to { background-position: -15% 0; } }
.mi-orb, .mi-orb-trail, .mi-orb-line, .mi-lit { display: none; pointer-events: none; }
.mi-orb, .mi-orb-trail, .mi-orb-line { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; opacity: 0; will-change: transform; }
.mi-orb-line {
  height: 1px; margin-top: -.5px;
  background: linear-gradient(90deg, rgba(215, 181, 109, 0), rgba(215, 181, 109, .42) 10%, rgba(215, 181, 109, .42) 90%, rgba(215, 181, 109, 0));
}
.mi-orb-core {
  position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0%, rgba(255, 249, 230, .94) 13%, rgba(247, 228, 176, .6) 29%, rgba(215, 181, 109, .24) 49%, rgba(215, 181, 109, 0) 70%);
  transform: rotate(var(--mi-orb-angle, 0deg)) scale(1, 1);
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}
.mi-orb-core::after {
  content: ""; position: absolute; inset: -46px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 190, .2) 0%, rgba(215, 181, 109, .08) 42%, rgba(215, 181, 109, 0) 70%);
  animation: mi-orb-breathe 3.2s ease-in-out infinite;
}
.mi-orb.moving .mi-orb-core { transform: rotate(var(--mi-orb-angle, 0deg)) scale(1.55, .8); }
.mi-orb-trail::before {
  content: ""; position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 240, 200, .34) 0%, rgba(230, 200, 130, .14) 38%, rgba(215, 181, 109, 0) 68%);
}
.mi-orb.on, .mi-orb-trail.on, .mi-orb-line.on { opacity: 1; transition: opacity .8s ease; }
.mi-orb.ready { transition: transform .7s cubic-bezier(.45, .05, .25, 1), opacity .8s ease; }
.mi-orb-trail.ready { transition: transform 1.05s cubic-bezier(.45, .05, .25, 1), opacity .8s ease; }
/* The card's light: the warm white-to-gold fill, its bright edge and a slow sheen */
.mi-lit {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; opacity: 0; mix-blend-mode: screen; overflow: hidden;
  background: var(--mi-lit-fill);
  box-shadow: 0 0 36px rgba(255, 236, 190, .16), 0 0 90px rgba(215, 181, 109, .1), inset 0 0 30px rgba(255, 244, 214, .05);
  transition: opacity .55s cubic-bezier(.45, 0, .2, 1);
}
.mi-lit::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--mi-lit-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.mi-lit::after {
  content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-size: 260% 100%;
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 248, 228, .15) 50%, transparent 70%);
  animation: mi-lit-sheen 7s ease-in-out infinite alternate;
}
html.mi-motion #method.mi-gliding .mi-orb, html.mi-motion #method.mi-gliding .mi-orb-trail,
html.mi-motion #method.mi-gliding .mi-orb-line, html.mi-motion #method.mi-gliding .mi-lit { display: block; }
html.mi-motion #method.mi-gliding .method-number { position: relative !important; z-index: 1 !important; }
html.mi-motion #method.mi-gliding .method-card { position: relative !important; }
/* The card lights a moment after the orb sets off, so it brightens as the orb arrives. (The page forces every
   direct child of a card to full opacity, so these rules have to be this specific.) */
html.mi-motion #method.mi-gliding .method-step .method-card > .mi-lit { opacity: 0 !important; }
html.mi-motion #method.mi-gliding .method-step.is-active .method-card > .mi-lit { opacity: 1 !important; transition: opacity .75s cubic-bezier(.45, 0, .2, 1) .38s; }
html.mi-motion #method.mi-gliding .method-step.is-active .method-number { border-color: rgba(255, 246, 222, .85) !important; color: #fff !important; transition-delay: .38s !important; }
/* The orb and the card's light replace each card's own white edge, sheen and number halo. */
html.mi-motion #method.mi-gliding .method-step.is-active .method-card { border-color: rgba(215, 181, 109, .2) !important; box-shadow: none !important; }
html.mi-motion #method.mi-gliding .method-step.is-active .method-card::before { opacity: 0 !important; animation: none !important; }
html.mi-motion #method.mi-gliding .method-step.is-active .method-number::after { opacity: 0 !important; animation: none !important; }

/* ---------- The four principles: a warm panel with a faint lattice, framed in gold (31 October 2026) ----------
   So the section stands out from the black sections around it. The pattern is an ogee lattice (1 November 2026: it replaced
   eight-point stars, which the owner felt could be mistaken for another symbol); it fades out towards the edges. */
html #method.method-section {
  position: relative !important; isolation: isolate;
  background:
    radial-gradient(75% 60% at 50% 60%, rgba(215, 181, 109, .15) 0%, rgba(215, 181, 109, .05) 45%, rgba(215, 181, 109, 0) 75%),
    linear-gradient(180deg, #16120b 0%, #1d180f 50%, #16120b 100%) !important;
  border-top: 1px solid rgba(215, 181, 109, .32) !important; border-bottom: 1px solid rgba(215, 181, 109, .32) !important;
}
html #method.method-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='96' viewBox='0 0 64 96'%3E%3Cpath d='M0 0C0 24 32 24 32 48S0 72 0 96M64 0C64 24 32 24 32 48S64 72 64 96' fill='none' stroke='%23d7b56d' stroke-width='1'/%3E%3Cg fill='%23d7b56d'%3E%3Ccircle cx='32' cy='48' r='1.8'/%3E%3Ccircle r='1.8'/%3E%3Ccircle cx='64' r='1.8'/%3E%3Ccircle cy='96' r='1.8'/%3E%3Ccircle cx='64' cy='96' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center / 64px 96px repeat;
  -webkit-mask-image: radial-gradient(85% 75% at 50% 55%, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 88%);
  mask-image: radial-gradient(85% 75% at 50% 55%, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 88%);
}
/* The number circles: a dark warm fill on the new panel, without the old ring that matched the grey background */
html #method .method-number { background: #15110b !important; box-shadow: none !important; }

/* Phones without the orb (visitors who ask for reduced motion): the carousel's lit card wears the gradient itself
   (the page's own phone styles had faded it to 23%). */
@media (max-width: 760px) {
  html:not(.mi-motion) #method .method-step .method-card { position: relative !important; }
  html:not(.mi-motion) #method .method-step .method-card::after {
    content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important;
    border-radius: inherit !important; padding: 1.5px !important; pointer-events: none !important;
    background: var(--mi-lit-edge) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important;
    opacity: 0 !important; transition: opacity .7s ease !important; animation: none !important;
  }
  html:not(.mi-motion) #method .method-step.is-active .method-card {
    background: var(--mi-lit-fill), linear-gradient(160deg, #1d1b16 0%, #0f0e0c 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 0 18px rgba(255, 236, 190, .12), 0 10px 22px -6px rgba(215, 181, 109, .14) !important;
  }
  html:not(.mi-motion) #method .method-step.is-active .method-card::after { opacity: 1 !important; }
  html:not(.mi-motion) #method .method-step.is-active .method-card::before { opacity: .55 !important; }
  html:not(.mi-motion) #method .method-step.is-active .method-card h3 { color: #fff !important; text-shadow: 0 0 18px rgba(255, 240, 205, .28) !important; }

/* Phones (1 November 2026): the same orb as on wider screens. The four numbers sit in a row with the orb flowing
   along them, and the principles sit side by side below, one in front with the edge of the next showing at the side
   of the screen (people could not tell they swipe), and the row slides along as the orb reaches each number.
   The page's script lingers longer on each principle here so there is time to read it, and a tap on a number or on
   the card showing at the side, or a swipe across the cards, moves to another. Visitors who ask for reduced motion
   keep the swipeable carousel. */
@media (max-width: 760px) {
  html.mi-motion #method .method-timeline {
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: auto auto !important;
    gap: 18px 0 !important; overflow: visible !important; scroll-snap-type: none !important; position: relative !important; padding: 6px 0 0 !important;
    /* Reaches the screen's edges so the next card shows right up to the edge (the page clips the rest). */
    margin-inline: calc(50% - 50vw) !important; padding-inline: calc(50vw - 50%) !important; width: auto !important; max-width: none !important;
    --mi-peek: 48px; --mi-at: 0; --mi-end: 0; --mi-dx: 0px;
  }
  html.mi-motion #method .method-timeline::before, html.mi-motion #method .method-timeline::after { display: none !important; }
  html.mi-motion #method .method-timeline > .method-step { display: contents !important; }
  html.mi-motion #method .method-step .method-number {
    display: grid !important; place-items: center !important; grid-row: 1; justify-self: center; width: 46px !important; height: 46px !important;
    margin: 0 !important; border-radius: 50% !important; font-size: 16px !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html.mi-motion #method .method-step:nth-of-type(1) .method-number { grid-column: 1; }
  html.mi-motion #method .method-step:nth-of-type(2) .method-number { grid-column: 2; }
  html.mi-motion #method .method-step:nth-of-type(3) .method-number { grid-column: 3; }
  html.mi-motion #method .method-step:nth-of-type(4) .method-number { grid-column: 4; }
  /* The cards share one grid cell and each is moved along by its place in the row (--mi-i) less the principle in
     front (--mi-at), so the front card lines up with the text above and 46px of the next one shows at the screen's
     edge. The gap between cards is the screen's side margin plus 2px, so no sliver of the card before shows on the
     left. The last card lines up with the right edge instead (--mi-end), so 46px of the one before it shows on the
     left. --mi-dx is the finger's travel during a swipe. */
  html.mi-motion #method .method-step .method-card {
    grid-row: 2; grid-column: 1 / -1; justify-self: start; width: calc(100% - var(--mi-peek)) !important; max-width: none !important; margin: 0 !important;
    --mi-i: 0; opacity: .6 !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transform: translateX(calc((var(--mi-i) - var(--mi-at)) * (100% + (100vw - 100% - var(--mi-peek)) / 2 + 2px) + var(--mi-end) * var(--mi-peek) + var(--mi-dx))) !important;
    transition: transform .55s cubic-bezier(.25, .8, .3, 1), opacity .45s ease !important;
  }
  html.mi-motion #method .method-step:nth-of-type(2) .method-card { --mi-i: 1; }
  html.mi-motion #method .method-step:nth-of-type(3) .method-card { --mi-i: 2; }
  html.mi-motion #method .method-step:nth-of-type(4) .method-card { --mi-i: 3; }
  html.mi-motion #method .method-step.is-active .method-card { opacity: 1 !important; cursor: auto; }
  html.mi-motion #method .method-timeline.mi-dragging .method-card { transition: opacity .45s ease !important; }
  html.mi-motion #method .carousel-hint, html.mi-motion #method .carousel-dots { display: none !important; }
  /* Sideways swipes belong to the cards (the page's script moves them), so the page only scrolls up and down here. */
  html.mi-motion #method .method-timeline { touch-action: pan-y pinch-zoom; }
}
}