/* El Fouad brand entrance. Finite animations; the form is accessible after exit. */
.school-intro {
  --intro-blue: #2b3990;
  --intro-gold: #d6b779;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 100%;
  padding: max(28px, env(safe-area-inset-top)) 24px max(96px, calc(env(safe-area-inset-bottom) + 80px));
  overflow: hidden;
  isolation: isolate;
  background: var(--intro-blue);
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  opacity: 1;
  transition: opacity 550ms ease, visibility 550ms;
}
.school-intro[hidden] { display: none !important; }
body.school-intro-active { overflow: hidden; }
.school-intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.school-intro__content { position: relative; z-index: 1; width: min(100%, 640px); text-align: center; transform: translateY(15px); }
.school-intro__logo-window { padding: 28px 16px 34px; overflow: hidden; }
.school-intro__logo-plate {
  box-sizing: border-box;
  width: clamp(200px, 34vw, 300px);
  margin: auto;
  padding: 18px 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 64px #121b5d3b;
  animation: intro-logo-reveal 850ms cubic-bezier(.16, 1, .3, 1) 80ms both;
}
.school-intro__logo-plate img { display: block; width: 100%; height: auto; }
.school-intro__identity { text-align: center; }
.school-intro__word-window { overflow: hidden; padding: 3px 0 8px; }
.school-intro__name {
  display: block;
  font-size: clamp(44px, 7.5vw, 76px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  animation: intro-name-reveal 900ms cubic-bezier(.16, 1, .3, 1) 230ms both;
}
.school-intro__descriptor {
  display: block;
  font-size: clamp(11px, 2.1vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #ffffffe6;
  animation: intro-name-reveal 900ms cubic-bezier(.16, 1, .3, 1) 430ms both;
}
.school-intro__accent { width: 76px; height: 3px; margin: 26px auto 0; overflow: hidden; border-radius: 3px; }
.school-intro__accent span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(100deg, #96703f, #f4e4bd 46%, #c49a59);
  transform-origin: left;
  animation: intro-accent-reveal 1100ms cubic-bezier(.25, .65, .25, 1) 600ms both;
}
.school-intro__orbit { position: absolute; z-index: -1; box-sizing: border-box; width: min(88vw, 880px); aspect-ratio: 1; border: 1px solid #ffffff0c; border-radius: 50%; pointer-events: none; animation: intro-orbit-reveal 2200ms cubic-bezier(.16, 1, .3, 1) both; }
.school-intro__orbit--outer { inset-inline-end: -35%; top: -42%; }
.school-intro__orbit--inner { width: min(58vw, 600px); inset-inline-start: -18%; bottom: -30%; border-width: 36px; border-color: #ffffff04; }
.school-intro__edge { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #96703f, #f4e4bd 46%, #c49a59); transform-origin: left; animation: intro-accent-reveal 1200ms cubic-bezier(.25, .65, .25, 1) both; }
.school-intro__skip {
  position: absolute;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  inset-inline-end: max(28px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid #ffffff40;
  border-radius: 8px;
  background: #ffffff08;
  color: #fff;
  font: 13px/1.5 Tahoma, Arial, sans-serif;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.school-intro__skip span { padding-inline-start: 12px; border-inline-start: 1px solid #ffffff40; color: #ffffffc7; font: 12px/1.5 Helvetica, Arial, sans-serif; }
.school-intro__skip:hover { background: #ffffff16; border-color: #ffffff80; }
.school-intro__skip:focus-visible { outline: 2px solid var(--intro-gold); outline-offset: 4px; }
.school-intro.is-leaving .school-intro__content { transform: translateY(-9px); transition: transform 550ms cubic-bezier(.3, 0, .7, 1); }
#workshop-feedback-concept.intro-revealed .wf-paper { animation: intro-form-reveal 600ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes intro-logo-reveal { from { opacity: 0; transform: translateY(38px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes intro-name-reveal { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-accent-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-orbit-reveal { from { opacity: 0; transform: translate(2%, 3%) scale(.94); } to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes intro-form-reveal { from { opacity: .6; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 500px) {
  .school-intro { padding-inline: 20px; }
  .school-intro__logo-plate { width: min(230px, 100%); padding: 16px 20px; }
  .school-intro__logo-window { padding-bottom: 30px; }
  .school-intro__descriptor { letter-spacing: .18em; }
  .school-intro__skip { inset-inline-end: 20px; }
  .school-intro__orbit--outer { width: 140vw; top: -8%; inset-inline-end: -95%; }
  .school-intro__orbit--inner { width: 120vw; bottom: -13%; inset-inline-start: -70%; }
}
@media (max-height: 500px) {
  .school-intro { padding-block: 12px 66px; }
  .school-intro__content { transform: none; }
  .school-intro__logo-window { padding: 6px 12px 12px; }
  .school-intro__logo-plate { width: 170px; padding: 10px 16px; border-radius: 9px; }
  .school-intro__name { font-size: 40px; }
  .school-intro__descriptor { font-size: 11px; }
  .school-intro__accent { margin-top: 12px; }
  .school-intro__skip { bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .school-intro, .school-intro *, #workshop-feedback-concept.intro-revealed .wf-paper { animation: none !important; transition: none !important; }
}