/* Dr. Shadi Alshaikh Clinic: the SA monogram as an inline mark, and the
   storyboard intro (spark, gold trace, complete, reveal). Shared by the hub
   and every concept; colours are inherited so each page keeps its palette. */
.sa-mark { display: inline-block; height: 1em; aspect-ratio: 555 / 579; background: currentColor; -webkit-mask: url("sa-mark.png") center / contain no-repeat; mask: url("sa-mark.png") center / contain no-repeat; vertical-align: middle; }

.sa-intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; align-content: center; grid-auto-rows: max-content; background: var(--sa-bg, #FBF9F5); color: var(--sa-ink, #14120F); opacity: 1; transition: opacity 640ms ease; }
.sa-intro.is-done { opacity: 0; pointer-events: none; }
.sa-intro--inline { position: relative; inset: auto; z-index: auto; background: none; display: block; }
.sa-intro svg { display: block; width: min(46vw, 210px); height: auto; overflow: visible; }
.sa-intro--inline svg { width: 100%; }
.sa-intro path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sa-intro .ink { display: none; }
.sa-intro__frame { position: relative; width: min(46vw, 210px); }
.sa-intro--inline .sa-intro__frame { width: 100%; }
.sa-intro__frame svg { width: 100%; }
.sa-intro__final { position: absolute; inset: 0; background: currentColor; -webkit-mask: url("sa-mark.png") center / contain no-repeat; mask: url("sa-mark.png") center / contain no-repeat; opacity: 0; transition: opacity 900ms ease; }
.sa-intro.is-reveal .sa-intro__final { opacity: 1; }
.sa-intro__slogan { margin: 26px 0 0; padding: 0 24px; max-width: 34ch; text-align: center; font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight: 700; font-size: clamp(15px, 2.4vw, 21px); line-height: 1.6; color: inherit; opacity: 0; transform: translateY(6px); transition: opacity 900ms ease 260ms, transform 900ms ease 260ms; }
.sa-intro.is-reveal .sa-intro__slogan { opacity: 1; transform: none; }
.sa-intro .gold path { stroke: url(#sa-gold); stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); filter: url(#sa-glow); }
.sa-intro .reveal path { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.sa-intro.is-playing .reveal path { animation: sa-draw var(--dur) cubic-bezier(.45, 0, .2, 1) var(--delay) forwards; }
.sa-intro .goldwrap { transition: opacity 1100ms ease 320ms; }
.sa-intro.is-reveal .goldwrap { opacity: 0; }
.sa-intro .spark { opacity: 0; fill: #FFF3C4; filter: url(#sa-glow); offset-rotate: 0deg; }
.sa-intro .dust { opacity: 0; fill: #F1D58A; }
.sa-intro.is-reveal .spark, .sa-intro.is-reveal .dust { opacity: 0 !important; transition: opacity 400ms ease; }
@keyframes sa-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sa-intro { display: none; }
  .sa-intro--inline { display: block; }
  .sa-intro--inline .sa-intro__final { opacity: 1; transition: none; }
  .sa-intro--inline .goldwrap, .sa-intro--inline .spark, .sa-intro--inline .dust { display: none; }
}

/* Chrome entrance: dark stage, one-line slogan, gold rule, wordmark, curtain exit along the rule. */
.sa-intro--chrome { overflow: hidden; }
.sa-intro__stage { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; grid-auto-rows: max-content; }
.sa-intro--chrome .sa-intro__slogan--one { white-space: nowrap; max-width: none; margin-top: 30px; padding: 0 24px; font-size: clamp(14px, 2vw, 22px); line-height: 1.5; color: #F2F3F5; }
.sa-intro.is-gold .sa-intro--chrome .sa-intro__slogan--one, .sa-intro--chrome.is-gold .sa-intro__slogan--one { background-image: linear-gradient(110deg, #F1E3BE 0%, #C5A059 22%, #F7EBCB 40%, #A8843F 58%, #E9D7A8 76%, #C5A059 100%); background-size: 220% 100%; background-position: 100% 0; color: transparent; -webkit-background-clip: text; background-clip: text; animation: sa-gold-sweep 1500ms cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes sa-gold-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .sa-intro--chrome .sa-intro__slogan--one { animation: none !important; } }
.sa-intro__rule { width: min(56vw, 380px); height: 1px; margin-top: 24px; background: linear-gradient(90deg, rgba(197,160,89,0) 0%, #C5A059 18%, #F7EBCB 50%, #C5A059 82%, rgba(197,160,89,0) 100%); transform: scaleX(0); opacity: 0; transition: transform 800ms cubic-bezier(.22, 1, .36, 1), opacity 300ms ease; }
.sa-intro.is-rule .sa-intro__rule { transform: scaleX(1); opacity: 1; }
.sa-intro__name { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; opacity: 0; transform: translateY(8px); transition: opacity 700ms ease, transform 700ms ease; direction: ltr; }
.sa-intro.is-name .sa-intro__name { opacity: 1; transform: none; }
.sa-intro__wordmark { font-family: 'SA Mono', 'Cormorant Garamond', 'Times New Roman', serif; font-size: clamp(17px, 2.6vw, 28px); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
html.sa-intro-lock, html.sa-intro-lock body { overflow: hidden; }
.sa-intro__enter { margin-top: 38px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity 600ms ease, transform 600ms ease; will-change: transform; }
.sa-intro.is-enter .sa-intro__enter { opacity: 1; transform: none; transition: opacity 600ms ease; }
.sa-intro__enter-face { display: inline-block; padding: 15px 40px; font: 700 15px/1 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; letter-spacing: 0.06em; color: #F2F3F5; border: 1px solid #C5A059; border-start-start-radius: 30px; border-end-end-radius: 30px; border-start-end-radius: 10px; border-end-start-radius: 10px; background: rgba(197,160,89,0.06); box-shadow: 0 0 0 0 rgba(197,160,89,0.32), 0 18px 40px -22px rgba(0,0,0,0.9); animation: sa-float 3.4s ease-in-out infinite, sa-halo 3.4s ease-in-out infinite; transition: background 260ms ease, color 260ms ease, border-color 260ms ease; }
.sa-intro__enter:hover .sa-intro__enter-face, .sa-intro__enter.is-near .sa-intro__enter-face { background: linear-gradient(135deg, #E6CD8C 0%, #C5A059 55%, #A6843F 100%); color: #111A24; border-color: #E6CD8C; }
.sa-intro__enter:focus { outline: none; }
.sa-intro__enter:focus-visible .sa-intro__enter-face { outline: 2px solid #F7EBCB; outline-offset: 4px; }
.sa-intro.is-leaving .sa-intro__enter { visibility: hidden; }
.sa-intro__credit { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(242,243,245,0.96); box-shadow: 0 6px 20px rgba(0,0,0,0.25); font-family: 'Manrope', 'Segoe UI', Arial, sans-serif; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0.02em; color: rgba(17,26,36,0.72); text-decoration: none; white-space: nowrap; opacity: 0; transition: opacity 700ms ease 250ms; }
.sa-intro.is-enter .sa-intro__credit { opacity: 1; }
.sa-intro__credit img { display: block; height: 22px; width: auto; }
/* The logo's tall dP mark makes the image box taller than the wordmark; the
   label is nudged down to the wordmark's own centre line. */
.sa-intro__credit-label { transform: translateY(6px); }
.sa-intro__credit:hover { color: #111A24; background: #FFFFFF; }
.sa-intro__credit:hover img { opacity: 1; }
@keyframes sa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sa-halo { 0%, 100% { box-shadow: 0 0 0 0 rgba(197,160,89,0.32), 0 18px 40px -22px rgba(0,0,0,0.9); } 50% { box-shadow: 0 0 0 9px rgba(197,160,89,0), 0 18px 40px -22px rgba(0,0,0,0.9); } }
/* Exit: the stage lifts, the rule becomes a full-width seam, the plate parts. */
.sa-intro.is-leaving .sa-intro__stage { opacity: 0; transform: translateY(-14px); transition: opacity 380ms cubic-bezier(.4, 0, 1, 1), transform 420ms cubic-bezier(.4, 0, 1, 1); pointer-events: none; }
.sa-intro.is-leaving .sa-intro__stage .sa-intro__rule { opacity: 0; transition: opacity 120ms ease; }
.sa-pane { position: absolute; left: 0; right: 0; z-index: 1; background: var(--sa-bg, #111A24); will-change: transform; transition: transform 820ms cubic-bezier(.76, 0, .24, 1); }
.sa-pane--top { top: 0; }
.sa-pane--bottom { bottom: 0; }
.sa-intro.is-open .sa-pane--top { transform: translateY(-100%); }
.sa-intro.is-open .sa-pane--bottom { transform: translateY(100%); }
.sa-seam { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; background: linear-gradient(90deg, rgba(197,160,89,0) 0%, #C5A059 12%, #F7EBCB 50%, #C5A059 88%, rgba(197,160,89,0) 100%); box-shadow: 0 0 18px rgba(230,205,140,0.55); transform: scaleX(0); opacity: 0; will-change: transform, opacity; transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease; pointer-events: none; }
.sa-intro.is-seam .sa-seam { transform: scaleX(1); opacity: 1; }
.sa-intro.is-open .sa-seam { opacity: 0; transition: opacity 360ms ease 120ms; }
.sa-intro.is-open .sa-pane--top::after, .sa-intro.is-open .sa-pane--bottom::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(197,160,89,0) 0%, #C5A059 30%, #F7EBCB 50%, #C5A059 70%, rgba(197,160,89,0) 100%); opacity: 0.9; }
.sa-intro.is-open .sa-pane--top::after { bottom: 0; }
.sa-intro.is-open .sa-pane--bottom::before { top: 0; }