/* mamostai, for now: black, quiet, one teacher in the middle. The glow is the
   Poli21 talking teacher's: a soft aura and a crisp ring that breathe with his voice. */
@font-face { font-family: 'Teacher Arabic'; font-weight: 400; font-display: swap; src: local('Noto Sans Arabic'), local('NotoSansArabic-Regular'), url(fonts/noto-sans-arabic-arabic-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Teacher Arabic'; font-weight: 600; font-display: swap; src: local('Noto Sans Arabic SemiBold'), local('NotoSansArabic-SemiBold'), url(fonts/noto-sans-arabic-arabic-600-normal.woff2) format('woff2'); }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: dark;
  --label: #f5f5f7; --label-2: #a1a1a6; --label-3: #6e6e73;
  --fill: rgba(255, 255, 255, .08); --fill-press: rgba(255, 255, 255, .14); --line: rgba(255, 255, 255, .14);
  --ai: #ff8a5c, #ff5fa2, #b26bff, #4f8dff, #34d4ff, #ff8a5c;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --avatar: clamp(180px, 34vmin, 280px);
  /* Never -apple-system or system-ui here: iOS Safari renders Kurdish in them as empty
     boxes with no fallback. SF Arabic exists by name on Macs; everything else gets Noto. */
  font-family: 'SF Arabic', 'Teacher Arabic', 'Noto Sans Arabic', sans-serif;
  background: #000; color: var(--label);
  -webkit-font-smoothing: antialiased; font-synthesis: none; text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; overflow-x: clip; }
button, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(64, 156, 255, .6); outline-offset: 4px; }
[hidden] { display: none !important; }
.icon { display: block; flex: none; }

.page {
  position: relative; isolation: isolate; min-height: 100dvh; max-width: 640px; margin: 0 auto;
  display: grid; justify-items: center; align-content: center; gap: 0;
  padding: max(40px, env(safe-area-inset-top)) 24px max(36px, env(safe-area-inset-bottom)); text-align: center;
}
/* The only colour at rest: a faint field behind him. */
.page::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 620px; height: 620px; translate: -50% -62%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(178, 107, 255, .16), rgba(79, 141, 255, .07) 55%, transparent);
  transition: opacity 1s var(--ease); opacity: .85;
}
.page.is-playing::before { opacity: 1; }

/* the teacher: also the play button */
.teacher { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; touch-action: manipulation; }
/* While he speaks silently (sound not yet allowed), a small hint sits on his circle. */
.sound-hint {
  position: absolute; z-index: 3; left: 50%; bottom: -14px; translate: -50% 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 12px; border-radius: 999px; white-space: nowrap; font-size: 13.5px; line-height: 1.4; color: var(--label);
  background: rgba(28, 28, 30, .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 26px -10px rgba(0, 0, 0, .9);
  animation: hint-in .5s var(--ease) both, hint-pulse 2.6s ease-in-out .8s infinite;
}
.sound-hint .icon { color: var(--label-2); }
@keyframes hint-in { from { opacity: 0; translate: -50% 6px; } }
@keyframes hint-pulse { 50% { box-shadow: inset 0 0 0 1px rgba(178, 107, 255, .55), 0 0 0 6px rgba(178, 107, 255, .12); } }
.avatar-stage { position: relative; display: block; width: var(--avatar); height: var(--avatar); }
.avatar {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #3a3a3e 0%, #232326 55%, #161618 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.portrait { position: absolute; height: 130%; aspect-ratio: 1048 / 1501; left: 50%; top: -1%; transform: translateX(-50%); }
.portrait :is(canvas, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.aura, .ring { position: absolute; pointer-events: none; transition: opacity .7s var(--ease), scale .25s linear, inset .7s var(--ease); }
.aura i, .ring i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from var(--spin), var(--ai)); animation: spin 10s linear infinite; }
/* The aura is a turning colour disc faded by a radial mask, not a blur filter: iOS
   Safari drew the blurred disc as a square, and a mask is cheaper on phones too. */
.aura { inset: -56px; opacity: .5; }
.aura i { -webkit-mask: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .45) 70%, transparent 100%); mask: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .45) 70%, transparent 100%); }
.ring { border-radius: 50%; }
.ring { inset: -4px; opacity: .55; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
@keyframes spin { to { --spin: 360deg; } }
.page[data-mode="speaking"] .ring { opacity: .95; }
.page[data-mode="speaking"] .aura { opacity: calc(.45 + var(--lv, 0) * .5); scale: calc(1 + var(--lv, 0) * .07); }
.page[data-mode="speaking"] :is(.aura, .ring) i { animation-duration: 6s; }
.teacher:hover .ring { opacity: .85; }

/* the message, also in writing; the sentence he is saying lights up */
.message { margin-top: clamp(28px, 5vh, 44px); max-width: 30em; }
.message h1 { margin: 0 0 10px; font-size: clamp(26px, 6.4vw, 36px); font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
.message p { margin: 0; font-size: clamp(18px, 4.4vw, 22px); line-height: 1.85; color: var(--label-2); text-wrap: balance; }
.line { transition: color .45s var(--ease), opacity .45s var(--ease); }
.page.is-playing .line { opacity: .38; }
.page.is-playing .line.is-now { opacity: 1; color: var(--label); }
.page.is-playing h1.line.is-now { color: var(--label); }

/* listen, then follow */
.listen {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; min-height: 44px; padding: 8px 18px 8px 20px;
  border: 0; border-radius: 999px; background: var(--fill); color: var(--label); font-size: 15px; cursor: pointer; touch-action: manipulation;
  transition: background .2s;
}
.listen:hover { background: var(--fill-press); }
.listen:active { transform: scale(.98); }
.page.waiting .listen { animation: invite 2.4s var(--ease) infinite; }
@keyframes invite { 0%, 100% { box-shadow: 0 0 0 0 rgba(178, 107, 255, 0); } 50% { box-shadow: 0 0 0 6px rgba(178, 107, 255, .18); } }

.instagram {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(36px, 7vh, 64px); padding: 12px 22px 12px 18px;
  border-radius: 18px; text-decoration: none; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line);
  transition: background .2s, box-shadow .2s;
}
.instagram:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.ig { flex: none; }
.ig-text { display: grid; justify-items: start; line-height: 1.45; text-align: start; }
.ig-text > span { font-size: 15px; font-weight: 600; }
/* While he says the Instagram line, the card he is talking about lights up with it. */
.page.is-playing .instagram .line { opacity: .55; }
.page.is-playing .instagram .line.is-now { opacity: 1; }
.page.is-playing .instagram:has(.line.is-now) { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.ig-text bdi { font-size: 13px; color: var(--label-2); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; }

@media (max-height: 640px) { :root { --avatar: clamp(140px, 30vmin, 200px); } .message { margin-top: 20px; } .instagram { margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}