/* Presentation wrapper: pinned vendor CSS is untouched. The same HTML serves both modes. */
.mahrous-hero[data-mode] { --hero-background:#101014; --hero-text:#f4f0e9; --hero-muted:#b7b4bc; --hero-orange:#f18045; color-scheme:dark; background:var(--hero-background); color:var(--hero-text); min-width:0; max-width:100%; margin-block:0; font-family:var(--hero-font-family,'Segoe UI',Arial,sans-serif); position:relative; isolation:isolate; box-sizing:border-box; }
.mahrous-hero[data-mode] * { box-sizing:border-box; }
.mahrous-hero[data-mode] .primary-action { display:inline-flex; align-items:center; gap:24px; color:#1b1a1a; background:#efeae1; padding:12px 16px 12px 22px; border-radius:4px; text-decoration:none; font-weight:600; font-size:var(--hero-cta-size,14px); min-height:48px; pointer-events:auto; }
.mahrous-hero[data-mode] .primary-action:hover { background:#fff; }
.mahrous-hero[data-mode] .action-arrow { display:grid; place-items:center; background:#ded9d0; width:35px; height:35px; border-radius:2px; font-size:23px; font-weight:400; }
.mahrous-hero[data-mode] a:focus-visible,.mahrous-hero[data-mode] button:focus-visible,.mahrous-hero[data-mode] summary:focus-visible { outline:3px solid #f18045; outline-offset:5px; }
.mahrous-hero[data-mode] h1 { font-family:var(--hero-font-family,'Segoe UI',Arial,sans-serif); font-weight:var(--hero-headline-weight,400); }
.mahrous-hero[data-mode] h1 span,.mahrous-hero[data-mode] h1 em { display:block; }
.mahrous-hero[data-mode] h1 em { font-style:normal; color:var(--hero-orange); }
.mahrous-hero[data-mode] .hero-poster { object-fit:contain; display:block; max-width:100%; }
.mahrous-hero[data-mode] .intro-copy { white-space:pre-line; }
.mahrous-hero[data-mode="static"] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:24px; height:auto; min-height:780px; padding:70px clamp(24px,4.15vw,80px) 30px; overflow:clip; }
.mahrous-hero[data-mode="static"] .intro { position:relative; inset:auto; width:auto; grid-column:1; grid-row:1; z-index:1; pointer-events:auto; }
.mahrous-hero[data-mode="static"] .eyebrow { margin:0 0 24px; font-size:12px; letter-spacing:.08em; line-height:1.6; color:#c8c2bc; }
.mahrous-hero[data-mode="static"] .intro h1 { height:auto; font-size:var(--hero-headline-size,clamp(42px,5.25vw,82px)); line-height:1.09; letter-spacing:-.04em; margin:0; overflow-wrap:anywhere; }
.mahrous-hero[data-mode="static"][dir="rtl"] h1 { letter-spacing:0; line-height:1.35; }
.mahrous-hero[data-mode="static"] .intro-copy { color:var(--hero-muted); font-size:17px; line-height:1.8; margin:24px 0; }
.mahrous-hero[data-mode="static"] .intro-footnote { color:var(--hero-muted); font-size:13px; margin:20px 0 0; }
.mahrous-hero[data-mode="static"] .hero-poster { grid-column:2; grid-row:1; width:100%; height:auto; max-height:550px; }
.mahrous-hero[data-mode="static"] :is(#scene,#spatial-labels,.vignette,.chapter,.scene-caption,.journey,[role="status"]) { display:none; }
.mahrous-hero .hero-transcript { font-size:14px; line-height:1.7; color:var(--hero-muted); }
.mahrous-hero .hero-transcript summary { cursor:pointer; min-height:44px; padding-block:10px; color:var(--hero-text); }
.mahrous-hero .hero-transcript ol { padding-inline-start:24px; }
.mahrous-hero .hero-transcript li { break-inside:avoid; padding:8px; }
.mahrous-hero .hero-transcript p { margin:6px 0; }
.mahrous-hero[data-mode="static"] .hero-transcript { grid-column:1/-1; border-top:1px solid #ffffff24; }
.mahrous-hero[data-mode="static"] .hero-transcript[open] ol { columns:2; }
.mahrous-hero[data-mode="live"] { min-height:780px; }
.mahrous-hero[data-mode="live"] .hero-poster { display:none; }
.mahrous-hero[data-mode="live"] .hero-transcript { position:absolute; inset-inline-end:4.15%; bottom:0; z-index:5; max-width:600px; }
.mahrous-hero[data-mode="live"] .hero-transcript[open] { background:#101014; padding:20px; max-height:70%; overflow:auto; border:1px solid #ffffff24; }
.mahrous-hero[data-mode="live"] .stage,.mahrous-hero[data-mode="live"] #motion-toggle { min-height:44px; }
@media(min-width:1200px) and (min-height:700px) { .mahrous-hero[data-mode="static"] { min-height:max(780px,100svh); } }
/* Reserve the approved desktop editorial geometry before the deferred runtime arrives.
   These host rules mirror pinned presentation values; no world or timeline changes. */
@media(min-width:1200px) and (min-height:700px) and (hover:hover) and (pointer:fine) {
  .mahrous-hero[data-mode="static"] { display:block; height:100svh; padding:0; }
  .mahrous-hero[data-mode="static"] .intro { position:absolute; left:clamp(36px,4.15vw,80px); top:22%; width:41%; }
  .mahrous-hero[data-mode="static"][dir="rtl"] .intro { left:auto; right:clamp(36px,4.15vw,80px); }
  .mahrous-hero[data-mode="static"] .eyebrow { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:550; letter-spacing:.15em; line-height:1.7; margin:0 0 27px; color:var(--hero-muted); }
  .mahrous-hero[data-mode="static"] .eyebrow::before { content:''; width:5px; height:5px; background:var(--hero-orange); border-radius:50%; }
  .mahrous-hero[data-mode="static"][dir="rtl"] .eyebrow { letter-spacing:0; }
  .mahrous-hero[data-mode="static"] .intro h1 { height:var(--hero-headline-height,clamp(234px,18.3vw,322px)); font-size:var(--hero-headline-size,clamp(58px,5.25vw,92px)); line-height:var(--hero-headline-leading,1.065); letter-spacing:var(--hero-headline-tracking,-.065em); }
  .mahrous-hero[data-mode="static"][dir="rtl"] .intro h1 { font-size:var(--hero-headline-size,clamp(60px,5vw,88px)); line-height:var(--hero-headline-leading,1.22); letter-spacing:var(--hero-headline-tracking,-.045em); }
  .mahrous-hero[data-mode="static"] .intro-copy { font-size:var(--hero-copy-size,clamp(14px,1.08vw,18px)); line-height:var(--hero-copy-leading,1.75); margin:var(--hero-copy-spacing,26px 0); }
  .mahrous-hero[data-mode="static"] .intro-footnote { font-size:10px; letter-spacing:.015em; margin:17px 0 1em; }
  .mahrous-hero[data-mode="static"] .hero-poster { position:absolute; inset-inline-end:4.15%; top:16%; width:48%; height:65%; max-height:none; }
  .mahrous-hero[data-mode="static"] .hero-transcript { position:absolute; inset-inline-end:4.15%; bottom:0; max-width:600px; border:0; }
  .mahrous-hero[data-mode="static"] .hero-transcript[open] { background:#101014; padding:20px; max-height:70%; overflow:auto; border:1px solid #ffffff24; z-index:5; }
}
@media(min-width:1200px) and (min-height:700px) and (max-height:850px) and (hover:hover) and (pointer:fine) {
  .mahrous-hero[data-mode="static"] .intro { top:20%; }
  .mahrous-hero[data-mode="static"] .intro h1 { font-size:var(--hero-headline-size,clamp(56px,4.9vw,78px)); }
  .mahrous-hero[data-mode="static"] .eyebrow { margin-bottom:20px; }
  .mahrous-hero[data-mode="static"] .intro-copy { margin:var(--hero-copy-spacing,20px 0); }
}
@media(max-width:767px) {
  .mahrous-hero[data-mode="static"] { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:44px 24px 20px; min-height:0; }
  .mahrous-hero[data-mode="static"] .intro { order:0; }
  .mahrous-hero[data-mode="static"] .intro h1 { font-size:clamp(40px,10vw,64px); }
  .mahrous-hero[data-mode="static"] .intro-copy { font-size:16px; white-space:normal; }
  .mahrous-hero[data-mode="static"] .hero-poster { order:1; height:310px; width:100%; margin-block:12px; }
  .mahrous-hero[data-mode="static"] .hero-transcript { order:2; }
  .mahrous-hero[data-mode="static"] .hero-transcript[open] ol { columns:1; }
}
@media(prefers-reduced-motion:reduce) { .mahrous-hero[data-mode] * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }


/* Operator-authorized 2026-10-08 RESPONSIVE TRIAL, not an accepted Hero redesign.
   Frozen Three.js vendor CSS, scene, choreography and clock remain byte-identical.
   Keep all adjustments in this replaceable WordPress host stylesheet. */
@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  .mahrous-hero[data-mode="static"],
  .mahrous-hero[data-mode="live"] {
    height: clamp(650px, 78svh, 760px);
    min-height: 650px;
    max-height: none;
  }
}

/* The live 3D canvas now occupies a visual panel on mobile/tablet rather than
   inheriting the desktop-only 1024px minimum and absolute positioning. */
@media (max-width: 1199px), (hover: none), (pointer: coarse) {
  .mahrous-hero[data-mode="live"] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 38px) 28px;
    gap: 18px;
    overflow: hidden;
  }
  .mahrous-hero[data-mode="live"] .intro,
  .mahrous-hero[data-mode="live"][dir="rtl"] .intro {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 760px;
    flex: 0 0 auto;
    order: 0;
    text-align: start;
    pointer-events: auto;
  }
  .mahrous-hero[data-mode="live"] .eyebrow { margin: 0 0 16px; }
  .mahrous-hero[data-mode="live"] .intro h1 {
    height: auto;
    max-width: 100%;
    font-size: clamp(35px, 7vw, 62px);
    line-height: 1.23;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] .intro h1 {
    font-size: clamp(35px, 7vw, 60px);
    line-height: 1.37;
    letter-spacing: 0;
  }
  .mahrous-hero[data-mode="live"] .intro-copy {
    margin: 14px 0;
    font-size: clamp(14px, 1.7vw, 17px);
    line-height: 1.65;
    white-space: normal;
  }
  .mahrous-hero[data-mode="live"] .intro-footnote { margin-block: 12px 0; }
  .mahrous-hero[data-mode="live"] #scene,
  .mahrous-hero[data-mode="live"][dir="rtl"] #scene {
    position: relative;
    inset: auto;
    order: 1;
    z-index: 0;
    flex: 0 0 auto;
    width: 100%;
    height: clamp(260px, 71vw, 450px);
    min-height: 260px;
    overflow: hidden;
  }
  .mahrous-hero[data-mode="live"] #scene canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  /* Labels are still computed by the preserved runtime; mobile hides the
     desktop absolute overlays so they cannot cross the mobile headline. */
  .mahrous-hero[data-mode="live"] #spatial-labels { visibility: hidden; }
  .mahrous-hero[data-mode="live"] .vignette { display: none; }
  .mahrous-hero[data-mode="live"] .chapter,
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter,
  .mahrous-hero[data-mode="live"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]),
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    text-align: start;
  }
  .mahrous-hero[data-mode="live"] .chapter h2 {
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1.35;
    min-height: 0;
  }
  .mahrous-hero[data-mode="live"] .scene-caption { display: none; }
  .mahrous-hero[data-mode="live"] .journey,
  .mahrous-hero[data-mode="live"][dir="rtl"] .journey {
    position: relative;
    inset: auto;
    order: 3;
    width: 100%;
    margin: 0;
  }
  .mahrous-hero[data-mode="live"] .journey-top { margin-bottom: 14px; }
  .mahrous-hero[data-mode="live"] .stages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .mahrous-hero[data-mode="live"] .stage { min-width: 0; min-height: 44px; }
  .mahrous-hero[data-mode="live"] .stage-name {
    display: block;
    font-size: clamp(11px, 1.8vw, 13px);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .mahrous-hero[data-mode="live"] .stage-name small { display: block; margin-bottom: 4px; }
  .mahrous-hero[data-mode="live"] .hero-transcript {
    position: relative;
    inset: auto;
    order: 4;
    width: 100%;
    max-width: none;
    padding-top: 8px;
    border-top: 1px solid var(--hero-line, #ffffff24);
  }
}


/* 2026-10-08 visual-review correction: readable Arabic and visible mobile story.
   This is host presentation only; the pinned WebGL world/animation remains intact.
   Source snapshots showed the trial had explicitly hidden spatial labels on touch.
   Reveal only the current station's renderer-projected labels (runtime decides which). */
.mahrous-hero[dir="rtl"][data-mode] {
  --hero-font-family: "Dubai", "Noto Kufi Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, Arial, sans-serif;
}
.mahrous-hero[dir="rtl"][data-mode] :is(h1, h2, .eyebrow, .intro-copy, .primary-action, .stage-name, .chapter-top, .hero-transcript) {
  font-family: var(--hero-font-family);
  letter-spacing: 0;
}
.mahrous-hero[dir="rtl"][data-mode] h1 { font-weight: 650; }
.mahrous-hero[dir="rtl"][data-mode] .chapter h2 { font-weight: 650; line-height: 1.4; }
.mahrous-hero[dir="rtl"][data-mode] .intro-copy { line-height: 1.85; }
.mahrous-hero[dir="rtl"][data-mode] .world-label {
  font-family: var(--hero-font-family);
  letter-spacing: 0;
  line-height: 1.5;
}

@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  /* Bring the six-stage narrative into a legible, intentional editorial panel. */
  .mahrous-hero[data-mode="live"] .chapter,
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter,
  .mahrous-hero[data-mode="live"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]),
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) {
    top: 15%;
    width: clamp(280px, 24vw, 365px);
    padding: 18px 20px 20px;
    border: 1px solid #ffffff25;
    border-inline-start: 3px solid var(--hero-orange);
    background: linear-gradient(110deg, #17171de8, #17171d99);
    border-radius: 8px;
  }
  .mahrous-hero[data-mode="live"] .chapter h2 {
    font-size: clamp(25px, 2.25vw, 34px);
    line-height: 1.35;
    font-weight: 600;
    min-height: 0;
  }
  .mahrous-hero[data-mode="live"] .chapter > p {
    display: block;
    opacity: 1;
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.7;
  }
  .mahrous-hero[data-mode="live"] .stage-name { font-size: 14px; }
  .mahrous-hero[data-mode="live"] .stage-name small { font-size: 11px; }
}

@media (max-width: 1199px), (hover: none), (pointer: coarse) {
  /* The projected labels are positioned in hero coordinates by the frozen
     renderer; their coordinates already point at #scene inside the live layout. */
  .mahrous-hero[data-mode="live"] #spatial-labels {
    visibility: visible;
    z-index: 2;
    pointer-events: none;
  }
  .mahrous-hero[data-mode="live"] #spatial-labels .world-label {
    max-width: min(40vw, 170px);
    padding: 3px 5px;
    font-size: clamp(12px, 2.9vw, 15px) !important;
    font-weight: 650;
    line-height: 1.4;
    color: #fff8ee;
    text-shadow: 0 1px 6px #101014, 0 1px 14px #101014;
    background: #10101499;
    border-radius: 4px;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] #spatial-labels .world-label {
    font-family: var(--hero-font-family);
    font-size: clamp(13px, 3.2vw, 16px) !important;
    line-height: 1.5;
  }
  .mahrous-hero[data-mode="live"] .chapter,
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter,
  .mahrous-hero[data-mode="live"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]),
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) {
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid #ffffff24;
    border-inline-start: 3px solid var(--hero-orange);
    background: linear-gradient(120deg, #1d1a22, #16151b);
  }
  .mahrous-hero[data-mode="live"] .chapter h2 {
    font-size: clamp(25px, 6.1vw, 33px);
    font-weight: 650;
    line-height: 1.4;
    min-height: 0;
  }
  /* The pinned desktop presentation suppresses the explanatory copy for
     chapters 4–6; mobile keeps all six chapters readable below their scenes. */
  .mahrous-hero[data-mode="live"] .chapter > p,
  .mahrous-hero[data-mode="live"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) > p {
    display: block;
    opacity: 1;
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.7;
    margin: 8px 0 0;
  }
  .mahrous-hero[data-mode="live"] .stage-name {
    font-size: clamp(12px, 2.7vw, 14px);
  }
}

/* 2026-10-08 operator video revision: keep the approved English desktop world.
   One chapter card appears at a time in the same right-side lane; it flashes
   through three stable levels (1/4, 2/5, 3/6) without travelling over the
   headline on the left. The pinned vendor world and timeline are untouched. */
@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  .mahrous-hero[data-mode="live"][dir="ltr"] .chapter,
  .mahrous-hero[data-mode="live"][dir="ltr"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) {
    left: auto;
    right: var(--hero-gutter);
    transition: none;
  }
  .mahrous-hero[data-mode="live"][dir="ltr"] .chapter:is([data-chapter="1"], [data-chapter="4"]) { top: 12%; }
  .mahrous-hero[data-mode="live"][dir="ltr"] .chapter:is([data-chapter="2"], [data-chapter="5"]) { top: 30%; }
  .mahrous-hero[data-mode="live"][dir="ltr"] .chapter:is([data-chapter="3"], [data-chapter="6"]) { top: 48%; }
}

/* The mobile chapter is NOT a dark box obscuring the 3D motion. Instead, the
   currently playing stage gets a simple typographic caption immediately
   ABOVE the canvas. All six stage descriptions remain visible and editable.
   WebGL labels follow the scene without solid black badges. */
@media (max-width: 767px), (max-width: 1199px) and (pointer: coarse) {
  .mahrous-hero[data-mode="live"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto clamp(288px, 78vw, 445px) auto auto auto;
    column-gap: 0;
    row-gap: 12px;
    align-items: stretch;
  }
  .mahrous-hero[data-mode="live"] .intro,
  .mahrous-hero[data-mode="live"][dir="rtl"] .intro {
    grid-column: 1;
    grid-row: 1;
    order: unset;
    margin-bottom: 0;
  }
  .mahrous-hero[data-mode="live"] .chapter,
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter,
  .mahrous-hero[data-mode="live"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]),
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    inset: auto;
    justify-self: stretch;
    align-self: start;
    z-index: 1;
    order: unset;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 8px 0 8px 12px;
    padding-inline-start: 12px;
    padding-inline-end: 0;
    border: 0;
    border-inline-start: 2px solid var(--hero-orange);
    border-radius: 0;
    box-shadow: none;
    background: none;
    pointer-events: none;
  }
  .mahrous-hero[data-mode="live"] .chapter-top {
    font-size: 10px;
    line-height: 1.4;
  }
  .mahrous-hero[data-mode="live"] .chapter h2,
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter h2 {
    margin: 5px 0 3px;
    font-size: clamp(20px, 5.25vw, 25px);
    line-height: 1.38;
    min-height: 0;
  }
  .mahrous-hero[data-mode="live"] .chapter > p,
  .mahrous-hero[data-mode="live"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) > p {
    display: block;
    margin: 4px 0 0;
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.6;
    max-width: none;
    opacity: 1;
  }
  .mahrous-hero[data-mode="live"] #scene,
  .mahrous-hero[data-mode="live"][dir="rtl"] #scene {
    grid-column: 1;
    grid-row: 3;
    order: unset;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-self: stretch;
  }
  .mahrous-hero[data-mode="live"] .journey,
  .mahrous-hero[data-mode="live"][dir="rtl"] .journey {
    grid-column: 1;
    grid-row: 4;
    order: unset;
  }
  .mahrous-hero[data-mode="live"] .hero-transcript {
    grid-column: 1;
    grid-row: 5;
    order: unset;
  }
  .mahrous-hero[data-mode="live"] #spatial-labels .world-label,
  .mahrous-hero[data-mode="live"][dir="rtl"] #spatial-labels .world-label {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: min(37vw, 150px);
    font-size: clamp(11px, 2.8vw, 14px) !important;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 1px 4px #101014, 0 1px 8px #101014;
  }
}


/* Step 1: premium locally hosted typography only, no world/choreography edits.
   Both WebGL live and server-rendered fallback share the same type families. */
.mahrous-hero[data-mode][dir="ltr"] {
  --hero-font-family: 'MAHROUS Manrope', 'Segoe UI', Arial, sans-serif;
}
.mahrous-hero[data-mode][dir="rtl"] {
  --hero-font-family: 'MAHROUS Alexandria', 'MAHROUS Manrope', Tahoma, Arial, sans-serif;
}
.mahrous-hero[data-mode] :is(
  .intro h1, .eyebrow, .intro-copy, .intro-footnote, .primary-action,
  .chapter-top, .chapter h2, .chapter > p, .journey-top, .stage-name,
  .world-label, .hero-transcript
) { font-family: var(--hero-font-family); }
.mahrous-hero[data-mode] .intro h1,
.mahrous-hero[data-mode] .chapter h2 { font-weight: 700; }
.mahrous-hero[data-mode] .eyebrow,
.mahrous-hero[data-mode] .chapter-top,
.mahrous-hero[data-mode] .stage-name,
.mahrous-hero[data-mode] .world-label { font-weight: 600; }
.mahrous-hero[data-mode] .intro-copy,
.mahrous-hero[data-mode] .chapter > p,
.mahrous-hero[data-mode] .intro-footnote { font-weight: 400; }
.mahrous-hero[data-mode][dir="rtl"] :is(
  .intro h1, .eyebrow, .intro-copy, .intro-footnote, .primary-action,
  .chapter-top, .chapter h2, .chapter > p, .journey-top, .stage-name,
  .world-label
) { letter-spacing: 0; }
.mahrous-hero[data-mode][dir="rtl"] .intro h1 { line-height: 1.44; }
.mahrous-hero[data-mode][dir="rtl"] .intro-copy { line-height: 1.95; }
.mahrous-hero[data-mode][dir="rtl"] .chapter h2 { line-height: 1.55; }
.mahrous-hero[data-mode][dir="rtl"] .stage-name { line-height: 1.75; }

/* Mobile: make copy legible without covering/repositioning the actual scene. */
@media (max-width: 767px) {
  .mahrous-hero[data-mode="live"] .intro h1,
  .mahrous-hero[data-mode="static"] .intro h1 {
    font-size: clamp(34px, 9.5vw, 43px);
    line-height: 1.2;
    letter-spacing: -.035em;
    overflow-wrap: normal;
  }
  .mahrous-hero[data-mode][dir="rtl"] .intro h1 {
    font-size: clamp(31px, 8.7vw, 40px);
    line-height: 1.48;
    letter-spacing: 0;
  }
  .mahrous-hero[data-mode] .eyebrow {
    font-size: 11px;
    line-height: 1.65;
    letter-spacing: .045em;
  }
  .mahrous-hero[data-mode] .intro-copy {
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.8;
    overflow-wrap: normal;
  }
  .mahrous-hero[data-mode][dir="rtl"] .intro-copy { line-height: 2; }
  .mahrous-hero[data-mode="live"] .chapter h2,
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter h2 {
    font-size: clamp(20px, 5.3vw, 25px);
    line-height: 1.52;
  }
  .mahrous-hero[data-mode="live"] .chapter > p {
    font-size: clamp(13px, 3.25vw, 14px);
    line-height: 1.75;
  }
  .mahrous-hero[data-mode="live"] .stage-name {
    font-size: clamp(12px, 3vw, 13px);
    line-height: 1.65;
    overflow-wrap: normal;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] #spatial-labels .world-label {
    font-weight: 600;
    line-height: 1.65;
  }
}


/* Arabic desktop visual correction after operator screenshot review.
   Only the RTL WordPress presentation changes. The six-scene 3D, headline
   content, English-approved positions and all mobile grid rules stay intact.
   The frozen vendor stylesheet shifts chapters 4/5 onto the Arabic headline;
   override that legacy exception in this isolated host layer. */
@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter,
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) {
    left: var(--hero-gutter);
    right: auto;
    width: clamp(238px, 20vw, 280px);
    padding: 15px 16px 16px;
    text-align: right;
    transition: none;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="1"], [data-chapter="4"]) { top: 12%; }
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="2"], [data-chapter="5"]) { top: 30%; }
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="3"], [data-chapter="6"]) { top: 48%; }

  /* Alexandria has different Arabic shaping/metrics from the old fallback;
     fixed H1 height caused the intro description to sit on its last line. */
  .mahrous-hero[data-mode="live"][dir="rtl"] .intro {
    top: 18%;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] .intro h1 {
    height: auto;
    font-size: clamp(52px, 4.55vw, 65px);
    font-weight: 600;
    line-height: 1.27;
    letter-spacing: 0;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] .eyebrow {
    margin-bottom: 18px;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] .intro-copy {
    margin: 16px 0;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.85;
    white-space: pre-line;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter h2,
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="4"], [data-chapter="5"]) h2 {
    margin: 8px 0 6px;
    font-size: clamp(21px, 1.8vw, 26px);
    font-weight: 600;
    line-height: 1.5;
    min-height: 0;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter > p,
  .mahrous-hero[data-mode="live"][dir="rtl"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) > p {
    display: block;
    margin: 6px 0 0;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.7;
    opacity: 1;
  }
  /* Separate timeline names from the bottom transcript affordance. */
  .mahrous-hero[data-mode="live"][dir="rtl"] .journey { bottom: 56px; }
  .mahrous-hero[data-mode="live"][dir="rtl"] .stage-name {
    font-size: clamp(12px, 1.03vw, 14px);
    line-height: 1.6;
  }
}

/* Independent Codex desktop collision QA: bounded host-only repair trial, 2026-10-09.
   Evidence: 48 AR/EN chapter x viewport states; P1 CTA/rail and P2 caption,
   missing EN description and transcript/rail. Layout only: NO frozen vendor,
   camera, world, story duration, JS, mobile/touch or main modifications.
   Operator to remeasure at 1262x824 + 1440x900 BEFORE acceptance. */
@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  /* Use the otherwise-empty top gutter for the desktop proposition instead
     of letting a fixed H1 spacer push CTA and footnote into bottom navigation. */
  .mahrous-hero[data-mode="live"] .intro,
  .mahrous-hero[data-mode="live"][dir="rtl"] .intro {
    top: 6%;
  }
  .mahrous-hero[data-mode="live"] .intro h1 {
    height: auto;
  }
  .mahrous-hero[data-mode="live"] .intro-copy,
  .mahrous-hero[data-mode="live"][dir="rtl"] .intro-copy {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  .mahrous-hero[data-mode="live"] .intro-footnote {
    margin-top: 12px;
  }

  /* A small central scene annotation may not share the left RTL motion button
     or the English chapter-3 card. Preserve every stage's action copy. */
  .mahrous-hero[data-mode="live"] .scene-caption,
  .mahrous-hero[data-mode="live"][dir="rtl"] .scene-caption {
    left: 50%;
    right: auto;
    bottom: 28%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(38%, 340px);
    text-align: center;
    justify-content: center;
    white-space: normal;
  }

  /* The transcript is a separate navigation affordance, not a seventh stage;
     park its collapsed affordance in the empty top corner instead of placing
     its hit area over stage 6. The expanded state still needs dedicated QA. */
  .mahrous-hero[data-mode="live"] .hero-transcript {
    top: 12px;
    bottom: auto;
  }

  /* Frozen vendor intentionally hid descriptions for 4/5/6, but the
     WordPress six-stage explanatory content is meant to be readable. This
     selector outranks the vendor's chapter-specific display:none. */
  .mahrous-hero[data-mode="live"][dir="ltr"]
    .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) > p {
    display: block;
    opacity: var(--copy-opacity, 1);
  }
}

/* Operator visual revision — place the ONE stage action in the quiet upper
   3D lane circled in the screenshot (below header, above scene objects).
   Host adapter reuses the SAME node; neither copy nor vendor clock changes. */
.mahrous-hero[data-mode="live"] > .scene-caption,
.mahrous-hero[data-mode="live"][dir="rtl"] > .scene-caption {
  position: absolute;
  inset: auto;
  top: clamp(26px, 5.1%, 42px);
  left: 55%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(400px, 32vw);
  max-width: 400px;
  min-height: 46px;
  margin: 0;
  padding: 4px 10px 8px;
  gap: 10px;
  border: 0;
  background: transparent;
  font-family: var(--hero-font-family);
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.4;
  font-weight: 750;
  letter-spacing: .008em;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  color: var(--hero-text);
  text-shadow: 0 2px 14px #101014b8;
  z-index: 4;
  pointer-events: none;
}
.mahrous-hero[data-mode="live"] > .scene-caption::before {
  content: "";
  width: 24px;
  height: 2px;
  flex: 0 0 24px;
  background: var(--hero-orange);
  border-radius: 2px;
  box-shadow: 0 0 12px #f1804540;
}
.mahrous-hero[data-mode="live"][dir="rtl"] > .scene-caption {
  font-size: clamp(22px, 1.82vw, 27px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
}

/* One measured stage clock drives the two-phrase title already; increase
   only its subtle editorial lift, with NO secondary JavaScript animation loop. */
.mahrous-hero[data-mode="live"] .chapter h2 span {
  filter: blur(max(0px, calc((1 - var(--reveal, 1)) * 2px)));
  transform: translateY(calc((1 - var(--reveal, 1)) * 11px));
}

/* Preserve the existing per-frame fade-out when changing chapters; host
   paragraph appearance below only owns the first fraction of each chapter. */
.mahrous-hero[data-mode="live"] .chapter > p,
.mahrous-hero[data-mode="live"][dir="rtl"] .chapter > p,
.mahrous-hero[data-mode="live"][dir="ltr"] .chapter:is([data-chapter="4"], [data-chapter="5"], [data-chapter="6"]) > p {
  opacity: var(--copy-opacity, 1);
}

/* Alternate two identically styled animation NAMES so each stage change
   restarts the reveal by CSS selector. Graceful no-animation fallback on
   engines without :has() support. Do not mask text until JS sets the chapter. */
@keyframes mahrous-context-odd {
  from { opacity: 0; filter: blur(4px); translate: 0 12px; }
  to { opacity: 1; filter: blur(0); translate: 0 0; }
}
@keyframes mahrous-context-even {
  from { opacity: 0; filter: blur(4px); translate: 0 12px; }
  to { opacity: 1; filter: blur(0); translate: 0 0; }
}
@keyframes mahrous-detail-odd {
  from { opacity: 0; filter: blur(2px); transform: translateY(9px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes mahrous-detail-even {
  from { opacity: 0; filter: blur(2px); transform: translateY(9px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@supports selector(.mahrous-hero:has(.chapter)) {
  .mahrous-hero[data-mode="live"]:has(.chapter:is([data-chapter="1"], [data-chapter="3"], [data-chapter="5"])) > .scene-caption {
    animation: mahrous-context-odd 760ms cubic-bezier(.22, 1, .36, 1) both;
  }
  .mahrous-hero[data-mode="live"]:has(.chapter:is([data-chapter="2"], [data-chapter="4"], [data-chapter="6"])) > .scene-caption {
    animation: mahrous-context-even 760ms cubic-bezier(.22, 1, .36, 1) both;
  }
  .mahrous-hero[data-mode="live"]:has(.chapter:is([data-chapter="1"], [data-chapter="3"], [data-chapter="5"])) .chapter > p {
    animation: mahrous-detail-odd 650ms 170ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .mahrous-hero[data-mode="live"]:has(.chapter:is([data-chapter="2"], [data-chapter="4"], [data-chapter="6"])) .chapter > p {
    animation: mahrous-detail-even 650ms 170ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
}

/* Mobile and touch remain a live 3D story, with a compact context label above
   the six stage choices and NO opaque over-scene narration card. */
@media (max-width: 1199px), (hover: none), (pointer: coarse) {
  .mahrous-hero[data-mode="live"] > .scene-caption,
  .mahrous-hero[data-mode="live"][dir="rtl"] > .scene-caption {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    display: flex;
    order: 3;
    z-index: 1;
    margin: 0 0 12px;
    width: 100%;
    max-width: 100%;
    padding: 0 0 8px;
    justify-content: flex-start;
    text-align: start;
    text-wrap: pretty;
    font-size: clamp(15px, 3.7vw, 18px);
    line-height: 1.6;
    min-height: 0;
  }
  .mahrous-hero[data-mode="live"] .journey,
  .mahrous-hero[data-mode="live"][dir="rtl"] .journey { order: 4; }
  .mahrous-hero[data-mode="live"] .hero-transcript { order: 5; }
  .mahrous-hero[data-mode="live"] > .scene-caption::before {
    width: 16px;
    flex-basis: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mahrous-hero[data-mode="live"] > .scene-caption,
  .mahrous-hero[data-mode="live"] .chapter > p {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Open desktop transcript must live BELOW the 3D Hero, not over the
   chapter/3D/CTA/nav. The previous top-corner placement is correct only while
   the details are collapsed. This expands the document below the fixed-size
   Hero without resizing or covering the frozen canvas or its editorial lanes.
   Constrain the reading panel height and reserve the SAME height plus a gap. */
@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  .mahrous-hero[data-mode="live"]:has(> .hero-transcript[open]) {
    overflow: visible;
    margin-block-end: calc(min(56svh, 500px) + 40px);
  }
  .mahrous-hero[data-mode="live"] > .hero-transcript[open] {
    top: calc(100% + 16px);
    bottom: auto;
    inset-inline-end: var(--hero-gutter);
    width: min(640px, 90%);
    max-width: none;
    max-height: min(56svh, 500px);
    overflow: auto;
    overscroll-behavior: contain;
    z-index: 5;
    box-shadow: 0 18px 40px #0008;
  }
}

/* The stage context is the new row between the live canvas and the rail:
   never an overlaid banner or implicit CSS-grid extra track. */
@media (max-width: 767px), (max-width: 1199px) and (pointer: coarse) {
  .mahrous-hero[data-mode="live"] > .scene-caption,
  .mahrous-hero[data-mode="live"][dir="rtl"] > .scene-caption {
    grid-column: 1;
    grid-row: 4;
    order: unset;
    align-self: start;
    justify-self: stretch;
  }
  .mahrous-hero[data-mode="live"] .journey,
  .mahrous-hero[data-mode="live"][dir="rtl"] .journey { grid-row: 5; order: unset; }
  .mahrous-hero[data-mode="live"] .hero-transcript { grid-row: 6; order: unset; }
}

/* CINEMATIC HERO PASS v1 — operator-authorized 2026-10-09.
   Host presentation ONLY. Frozen 3D renderer, world, scene, camera,
   choreography, chapter timing and all approved AR/EN text are unchanged.
   No extra animation loop or external library. Motion is CSS-composited,
   tied to live-Hero mount and the existing chapter data attribute. */

/* 1. The fixed proposition: controlled line-by-line entrance, once on mount.
   Each line is still real, selectable, localized HTML. */
@keyframes mm-cinema-line {
  0% { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px); }
  58% { opacity: .86; filter: blur(1.5px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes mm-cinema-small {
  0% { opacity: 0; transform: translate3d(0, 12px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes mm-cinema-accent {
  0% { background-position: 110% 50%; }
  100% { background-position: -20% 50%; }
}
.mahrous-hero[data-mode="live"] .eyebrow {
  animation: mm-cinema-small 720ms 100ms both cubic-bezier(.22,1,.36,1);
}
.mahrous-hero[data-mode="live"] .intro h1 > span,
.mahrous-hero[data-mode="live"] .intro h1 > em {
  animation: mm-cinema-line 960ms both cubic-bezier(.22,1,.36,1);
  backface-visibility: hidden;
}
.mahrous-hero[data-mode="live"] .intro h1 > :nth-child(1) { animation-delay: 180ms; }
.mahrous-hero[data-mode="live"] .intro h1 > :nth-child(2) { animation-delay: 350ms; }
.mahrous-hero[data-mode="live"] .intro h1 > :nth-child(3) { animation-delay: 510ms; }
.mahrous-hero[data-mode="live"] .intro h1 > :nth-child(n+4) { animation-delay: 630ms; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .mahrous-hero[data-mode="live"] .intro h1 > em {
    background-image: linear-gradient(107deg,
      #f18045 0%, #f18045 34%, #ffbe87 50%, #f18045 66%, #f18045 100%);
    background-size: 225% 100%;
    background-position: 110% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mm-cinema-line 960ms 510ms both cubic-bezier(.22,1,.36,1),
               mm-cinema-accent 1900ms 980ms both ease-in-out;
  }
}
.mahrous-hero[data-mode="live"] .intro-copy {
  animation: mm-cinema-small 740ms 750ms both cubic-bezier(.22,1,.36,1);
}
.mahrous-hero[data-mode="live"] .primary-action {
  animation: mm-cinema-small 730ms 890ms both cubic-bezier(.22,1,.36,1);
}
.mahrous-hero[data-mode="live"] .intro-footnote {
  animation: mm-cinema-small 640ms 980ms both cubic-bezier(.22,1,.36,1);
}

/* 2. The stage card feels like a new editorial shot on each chapter.
   Two distinct names alternate; the already-existing data-chapter changes
   1->2->3->4->5->6 and naturally retriggers these pure CSS keyframes. */
@keyframes mm-cinema-chapter-a {
  0% { opacity: .2; transform: translate3d(0, 15px, 0) scale(.978); filter: blur(3px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes mm-cinema-chapter-b {
  0% { opacity: .2; transform: translate3d(0, 15px, 0) scale(.978); filter: blur(3px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes mm-cinema-keyline-a {
  from { opacity: 0; transform: scaleY(.15); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes mm-cinema-keyline-b {
  from { opacity: 0; transform: scaleY(.15); }
  to { opacity: 1; transform: scaleY(1); }
}
.mahrous-hero[data-mode="live"] .chapter { transform-origin: center; }
.mahrous-hero[data-mode="live"] .chapter::before {
  content: "";
  position: absolute;
  inset-block: 13px;
  inset-inline-start: -3px;
  width: 3px;
  background: linear-gradient(180deg, #ffb47b, var(--hero-orange) 60%, #f1804500);
  box-shadow: 0 0 16px #f1804552;
  transform-origin: top center;
  pointer-events: none;
}
@supports selector(.mahrous-hero:has(.chapter)) {
  .mahrous-hero[data-mode="live"]:has(.chapter:is([data-chapter="1"],[data-chapter="3"],[data-chapter="5"])) .chapter {
    animation: mm-cinema-chapter-a 810ms cubic-bezier(.22,1,.36,1) both;
  }
  .mahrous-hero[data-mode="live"]:has(.chapter:is([data-chapter="2"],[data-chapter="4"],[data-chapter="6"])) .chapter {
    animation: mm-cinema-chapter-b 810ms cubic-bezier(.22,1,.36,1) both;
  }
  .mahrous-hero[data-mode="live"]:has(.chapter:is([data-chapter="1"],[data-chapter="3"],[data-chapter="5"])) .chapter::before {
    animation: mm-cinema-keyline-a 920ms 100ms both cubic-bezier(.22,1,.36,1);
  }
  .mahrous-hero[data-mode="live"]:has(.chapter:is([data-chapter="2"],[data-chapter="4"],[data-chapter="6"])) .chapter::before {
    animation: mm-cinema-keyline-b 920ms 100ms both cubic-bezier(.22,1,.36,1);
  }
}

/* 3. The operator's top-center context is a title, not an in-scene annotation.
   Center its orange rule directly above the text, also when the text wraps. */
@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  .mahrous-hero[data-mode="live"] > .scene-caption,
  .mahrous-hero[data-mode="live"][dir="rtl"] > .scene-caption {
    display: block;
    position: absolute;
    padding: 18px 12px 8px;
    line-height: 1.32;
    text-align: center;
    text-wrap: balance;
    max-width: min(400px, 32vw);
    isolation: isolate;
  }
  .mahrous-hero[data-mode="live"] > .scene-caption::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f18045 27%, #ffbf89 50%, #f18045 73%, transparent);
    box-shadow: 0 0 16px #f1804550;
  }
}

/* 4. A quiet spatial atmosphere behind the labels. One entrance only;
   never animate the WebGL canvas or request another frame clock. */
@keyframes mm-cinema-atmosphere {
  from { opacity: 0; }
  to { opacity: .6; }
}
@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  .mahrous-hero[data-mode="live"]::before {
    content: "";
    position: absolute;
    inset: 2% 26% 20% 26%;
    background: radial-gradient(ellipse at 53% 34%, #4274ac18 0%, #28527a09 37%, transparent 72%);
    pointer-events: none;
    z-index: 0;
    animation: mm-cinema-atmosphere 1800ms 300ms both ease-out;
  }
}

/* 5. The journey and CTA inherit the original six-stage clock and links. */
.mahrous-hero[data-mode="live"] .stage,
.mahrous-hero[data-mode="live"] .stage-name {
  transition: color 260ms ease, text-shadow 260ms ease;
}
.mahrous-hero[data-mode="live"] .stage.active .stage-name {
  text-shadow: 0 0 18px #f1804540;
}
.mahrous-hero[data-mode="live"] .stage.active .stage-track {
  box-shadow: 0 0 13px #f180452c;
}
.mahrous-hero[data-mode="live"] .primary-action {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background 220ms ease, transform 300ms cubic-bezier(.22,1,.36,1), box-shadow 300ms ease;
}
.mahrous-hero[data-mode="live"] .primary-action > span {
  position: relative;
  z-index: 1;
}
.mahrous-hero[data-mode="live"] .primary-action::after {
  content: "";
  position: absolute;
  inset: -65% -40%;
  background: linear-gradient(105deg, transparent 40%, #ffffff98 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 780ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.mahrous-hero[data-mode="live"] .primary-action:is(:hover,:focus-visible) {
  box-shadow: 0 9px 24px #0007, 0 0 0 1px #ffffff3d;
}
.mahrous-hero[data-mode="live"] .primary-action:is(:hover,:focus-visible)::after {
  transform: translateX(120%);
}
.mahrous-hero[data-mode="live"] .action-arrow {
  transition: transform 260ms cubic-bezier(.22,1,.36,1);
}
.mahrous-hero[data-mode="live"] .primary-action:is(:hover,:focus-visible) .action-arrow {
  transform: translate(2px, -2px);
}

/* Smaller touch devices keep the same readable type without deep blur effects.
   No opaque mobile panel over the live three-dimensional scene. */
@media (max-width: 1199px), (hover: none), (pointer: coarse) {
  .mahrous-hero[data-mode="live"] .intro h1 > span,
  .mahrous-hero[data-mode="live"] .intro h1 > em {
    animation-duration: 620ms;
    filter: none;
  }
  .mahrous-hero[data-mode="live"] .chapter::before {
    display: none;
  }
  .mahrous-hero[data-mode="live"] .chapter {
    transform-origin: center;
  }
  .mahrous-hero[data-mode="live"] > .scene-caption::before {
    box-shadow: none;
  }
}

/* Accessibility: no delayed hidden copy, motion or flashes when users prefer
   reduced motion. The original server-rendered fallback remains unchanged. */
@media (prefers-reduced-motion: reduce) {
  .mahrous-hero[data-mode="live"] :is(
    .eyebrow, .intro h1 > span, .intro h1 > em,
    .intro-copy, .intro-footnote, .primary-action,
    .chapter, .stage, .stage-name
  ) {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .mahrous-hero[data-mode="live"] .chapter::before {
    animation: none !important;
  }
  .mahrous-hero[data-mode="live"] .primary-action::after,
  .mahrous-hero[data-mode="live"]::before {
    display: none !important;
  }
}

/* Operator scene-centering trial — 2026-10-09.
   Screenshots show the EN WebGL object too close to the right chapter card
   and the AR object too close to the left card. Shift only the desktop #scene
   VIEWPORT toward the gap between the stationary headline and stage card.
   Preserve its ORIGINAL 64%-wide canvas, perspective, camera and frozen
   world animation. Vendor placeLabels() uses #scene.getBoundingClientRect()
   every frame, so projected HTML labels track the repositioned canvas.
   Mobile/touch scene layout is intentionally unchanged. */
@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  .mahrous-hero[data-mode="live"] {
    --mm-scene-editorial-shift: clamp(54px, 6.2vw, 88px);
  }
  .mahrous-hero[data-mode="live"][dir="ltr"] #scene {
    left: calc(30% - var(--mm-scene-editorial-shift));
    right: calc(6% + var(--mm-scene-editorial-shift));
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] #scene {
    left: calc(6% + var(--mm-scene-editorial-shift));
    right: calc(30% - var(--mm-scene-editorial-shift));
  }
}

/* Operator mobile in-scene label microtype trial — 2026-10-09.
   Operator accepted rollback of detached badges and explicitly asked for
   a SMALLER, cleaner font INSIDE the moving 3D scene. Keep the frozen world
   projection and original label positions, DOM, animation, background
   transparency and desktop typography untouched. This is a reversible
   ~1-1.5px mobile-only typographic correction, NOT collision QA acceptance. */
@media (max-width: 767px) {
  .mahrous-hero[data-mode="live"][dir="ltr"] #spatial-labels .world-label {
    font-size: clamp(10px, 2.55vw, 12px) !important;
    font-weight: 550;
    line-height: 1.3;
    letter-spacing: 0;
    text-shadow: 0 1px 3px #101014, 0 1px 7px #101014;
  }
  .mahrous-hero[data-mode="live"][dir="rtl"] #spatial-labels .world-label {
    font-family: var(--hero-font-family);
    font-size: clamp(11.5px, 2.85vw, 13.25px) !important;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: 0;
    text-shadow: 0 1px 3px #101014, 0 1px 7px #101014;
  }
}