/* ==========================================================================
   Public-site "illumination" layer: motion and decoration on top of academy.css.
   Loaded only by layouts/public (never the portals). Everything here is
   decorative: without magic.js, or with reduced motion, the page is unchanged.
   Hidden-until-revealed states apply only under html.m-motion (set by magic.js).
   ========================================================================== */

/* ---------- Gold reading-progress hairline under the sticky header ---------- */
.m-progress { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; pointer-events: none; transform: scaleX(var(--m-p, 0)); transform-origin: left; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold)); }
[dir="rtl"] .m-progress { transform-origin: right; }
.site-header { transition: box-shadow .3s; }
.site-header.m-scrolled { box-shadow: 0 10px 28px -20px rgba(14, 43, 35, .55); }

/* ---------- Girih rosette (drawn by magic.js) ---------- */
.m-rosette { position: absolute; pointer-events: none; color: var(--gold-light); opacity: .14; aspect-ratio: 1; }
.m-rosette svg { width: 100%; height: 100%; overflow: visible; }
.m-rosette g { transform-origin: 50% 50%; transform-box: view-box; }
.m-motion .m-rosette .m-spin { animation: m-spin 240s linear infinite; }
.m-motion .m-rosette .m-spin-rev { animation: m-spin 180s linear infinite reverse; }
.hero .m-rosette { width: min(1100px, 150vw); top: 50%; inset-inline-end: -22%; translate: 0 -50%; opacity: .11; }
@media (max-width: 1023px) { .hero .m-rosette { inset-inline-end: -60%; top: 72%; } }
.page-head { isolation: isolate; }
.page-head .m-rosette { width: 620px; top: 50%; inset-inline-end: -180px; translate: 0 -50%; opacity: .16; z-index: -1; }
.m-has-rosette { overflow: hidden; }
.section .m-rosette { width: 760px; top: 50%; left: 50%; translate: -50% -50%; opacity: .1; }
.section--ivory .m-rosette { color: var(--gold-dark); opacity: .09; }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* ---------- Hero: lamplight, dust in the light, the arch drawing itself ---------- */
.hero .container { z-index: 2; }
.m-motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.m-light { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .6s; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), rgba(207, 178, 122, .16), transparent 70%); }
.hero:hover .m-light { opacity: 1; }
.hero .m-rosette { z-index: 1; }
.m-motion .arch { transition: opacity .7s ease, transform .7s ease, translate .25s linear; translate: var(--ax, 0) var(--ay, 0); }

.m-motion .arch .m-draw { animation: m-draw 2.6s cubic-bezier(.65, 0, .35, 1) .2s both; }
.m-motion .arch .m-draw--late { animation-delay: .9s; }
@keyframes m-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.m-motion .arch .m-lamp { transform-box: view-box; transform-origin: 210px 34px; animation: m-swing 6s ease-in-out infinite alternate; }
@keyframes m-swing { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.m-motion .arch .m-glow { transform-box: fill-box; transform-origin: center; animation: m-breathe 4.5s ease-in-out infinite alternate; }
@keyframes m-breathe { from { opacity: .7; transform: scale(.92); } to { opacity: 1; transform: scale(1.12); } }

/* Words arrive one by one: hero title and the verse in the arch */
.m-word { display: inline-block; }
.m-motion .m-words .m-word { opacity: 0; translate: 0 .35em; filter: blur(6px); animation: m-word .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--m-start, .2s) + var(--wi) * var(--m-step, 70ms)); }
@keyframes m-word { to { opacity: 1; translate: 0 0; filter: blur(0); } }
.arch__verse.m-words { --m-start: 1.3s; --m-step: 160ms; }

/* Pointed-arch scallop where the dark head meets the next section */
.m-edge {
  position: absolute; inset-inline: 0; bottom: -1px; height: 14px; z-index: 3; pointer-events: none;
  background: var(--m-edge-c, var(--parchment));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 14V8C5 8 9 5 14 0C19 5 23 8 28 8V14Z'/%3E%3C/svg%3E") repeat-x bottom / 28px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 14V8C5 8 9 5 14 0C19 5 23 8 28 8V14Z'/%3E%3C/svg%3E") repeat-x bottom / 28px 14px;
}

/* ---------- Section headings: the star turns, a gilded flourish draws out ---------- */
.section-head h2::after {
  content: ""; display: block; width: 96px; height: 10px; margin-block-start: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='10' viewBox='0 0 96 10'%3E%3Cg fill='%23B18A46'%3E%3Cpath d='M0 4.6h38v.8H0zM58 4.6h38v.8H58z'/%3E%3Cpath d='M48 0l5 5-5 5-5-5z'/%3E%3Cpath d='M40 5l2.2-2.2L44.4 5l-2.2 2.2zM51.6 5l2.2-2.2L56 5l-2.2 2.2z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.section-head--center h2::after { margin-inline: auto; }
.section--emerald .section-head h2::after, .section--walnut .section-head h2::after { filter: brightness(1.35); }
.m-motion .section-head h2::after { clip-path: inset(0 50%); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) .25s; }
.m-motion .section-head.m-in h2::after { clip-path: inset(0 0); }
.m-motion .section-head .eyebrow .star-icon { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); transform: rotate(-135deg) scale(.4); }
.m-motion .section-head.m-in .eyebrow .star-icon { transform: none; }

/* ---------- Gilded Arabic: a slow light passes over the gold lettering ---------- */
.m-gild {
  background: linear-gradient(105deg, var(--gold-dark) 0 38%, #F1DDAA 48%, #FFF4D6 50%, #F1DDAA 52%, var(--gold-dark) 62% 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section--walnut .m-gild, .section--emerald .m-gild { background-image: linear-gradient(105deg, var(--gold-light) 0 38%, #FFF4D6 50%, var(--gold-light) 62% 100%); }
.m-motion .m-gild.m-in { animation: m-gild 2.4s ease-in-out .3s both; }
@keyframes m-gild { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- Cards ---------- */
.m-motion .program-card.m-rise { opacity: 0; translate: 0 18px; }
.m-motion .program-card.m-rise.m-in { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate .8s cubic-bezier(.2, .7, .2, 1), border-color .2s, box-shadow .2s, transform .2s; transition-delay: var(--m-d, 0s), var(--m-d, 0s), 0s, 0s, 0s; }
.program-card { transform-style: preserve-3d; will-change: transform; }
.program-card__arch::before { transition: background-position 6s linear; }
.program-card:hover .program-card__arch::before { background-position: 60px 30px; }
.program-card__arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, .28) 48%, transparent 62%) -100% 0 / 250% 100% no-repeat; pointer-events: none; }
.program-card:hover .program-card__arch::after { background-position: 100% 0; transition: background-position 1.1s ease; }
.program-card__title-ar { transition: translate .5s cubic-bezier(.2, .7, .2, 1), text-shadow .5s; }
.program-card:hover .program-card__title-ar { translate: 0 -6px; text-shadow: 0 0 22px rgba(207, 178, 122, .55); }

/* Keep the scroll reveal (opacity/transform) and add the hover lift */
.js :is(.pillar, .mode, .frame, .steps li) { transition: opacity .7s ease, transform .7s ease, border-color .3s, box-shadow .3s, translate .3s; transition-delay: var(--m-d, 0s), var(--m-d, 0s), 0s, 0s, 0s; }
.pillar:hover, .mode:hover, .steps li:hover { border-color: var(--gold); box-shadow: var(--shadow); translate: 0 -3px; }

/* Ottoman corner ornaments on framed panels */
.m-corners > .m-corner { position: absolute; width: 22px; height: 22px; color: var(--gold); pointer-events: none; }
.m-corner--ss { inset-block-start: -1px; inset-inline-start: -1px; }
.m-corner--se { inset-block-start: -1px; inset-inline-end: -1px; rotate: 90deg; }
.m-corner--es { inset-block-end: -1px; inset-inline-end: -1px; rotate: 180deg; }
.m-corner--ee { inset-block-end: -1px; inset-inline-start: -1px; rotate: 270deg; }
[dir="rtl"] .m-corner--se { rotate: -90deg; }
[dir="rtl"] .m-corner--ee { rotate: -270deg; }
.m-motion .m-corners > .m-corner { opacity: 0; scale: .3; transition: opacity .6s, scale .8s cubic-bezier(.2, .7, .2, 1); }
.m-motion .m-corners.m-in > .m-corner { opacity: 1; scale: 1; }

/* Octagonal step numbers turn into place */
.m-motion .steps li::before { transition: transform 1s cubic-bezier(.2, .7, .2, 1) .15s; transform: rotate(-135deg) scale(.5); }
.m-motion .steps li.is-visible::before { transform: none; }

/* Teacher seals are inked stroke by stroke */
.m-motion .seal-steps .seal rect { stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-motion .seal-steps.m-in .seal rect { transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--m-d, 0s) + .2s); stroke-dashoffset: 0; }
.m-motion .seal-steps .seal text { opacity: 0; transition: opacity .6s; }
.m-motion .seal-steps.m-in .seal text { opacity: 1; transition-delay: calc(var(--m-d, 0s) + 1.1s); }

/* Staggered arrivals inside a grid (delay set per item by magic.js) */
.js .reveal { transition-delay: var(--m-d, 0s); }

/* ---------- Buttons: a streak of light on hover ---------- */
.btn--gold, .btn--emerald { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after, .btn--emerald::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgba(255, 248, 225, .55) 50%, transparent 65%) -120% 0 / 250% 100% no-repeat; }
.btn--emerald::after { background-image: linear-gradient(110deg, transparent 35%, rgba(207, 178, 122, .35) 50%, transparent 65%); }
.btn--gold:hover::after, .btn--emerald:hover::after { background-position: 120% 0; transition: background-position .9s ease; }

/* ---------- Live analog dials beside the world clocks ---------- */
.m-dial { display: none; }
@media (min-width: 1024px) {
  .clock { position: relative; padding-inline-end: 72px; }
  .m-dial { display: block; position: absolute; inset-inline-end: 16px; top: 50%; translate: 0 -50%; width: 44px; height: 44px; color: var(--gold-light); }
  .m-dial line { stroke: currentColor; stroke-linecap: round; }
  .m-dial .m-h, .m-dial .m-m, .m-dial .m-s { transform-origin: 22px 22px; }
  .m-dial .m-s { stroke: #E7C987; }
}

/* ---------- FAQ answers unfold ---------- */
.m-motion .faq details[open] p { animation: m-unfold .45s ease both; }
@keyframes m-unfold { from { opacity: 0; translate: 0 -6px; } }

@media (prefers-reduced-motion: reduce) {
  .m-motes, .m-light { display: none; }
}