/* Emila opening sequence. Uses the original transparent logo as a mask. */
.emila-intro {
  --emila-intro-ready: 1;
  --emila-burgundy: #2a0a12;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  pointer-events: none;
  color: #ead7ad;
  font-family: Arial, Helvetica, sans-serif;
}

.emila-intro *, .emila-intro *::before, .emila-intro *::after {
  box-sizing: border-box;
}

.emila-intro__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 48% 43%, #58182a 0%, #3a0d19 40%, #210810 78%, #19070d 100%);
  opacity: 1;
  transition: opacity 1050ms cubic-bezier(.4,0,.2,1);
  pointer-events: auto;
}

.emila-intro__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 18%, #c69b6410 42%, transparent 68%);
  opacity: .55;
}

.emila-intro__halo {
  position: absolute;
  width: min(90vw, 1100px);
  height: min(48vw, 540px);
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #dba7660b 0%, transparent 65%);
  opacity: 0;
  animation: emila-halo 1700ms ease-out both;
}

.emila-intro__logo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(62vw, 406px);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}

.emila-intro__base, .emila-intro__shine {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--emila-logo-url);
  mask-image: var(--emila-logo-url);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.emila-intro__base {
  background: linear-gradient(112deg, #9e7342 0%, #cfad76 15%, #f3e1b7 31%, #c89d61 47%, #dfc28d 63%, #f7e8c3 80%, #b38950 100%);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: emila-logo-reveal 1250ms cubic-bezier(.2,.55,.25,1) 100ms both;
}

.emila-intro__base::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, #7c858d 0%, #c4cbd1 15%, #fbfdff 31%, #a1aab2 47%, #d5dbe1 63%, #f7fbff 80%, #8d98a2 100%);
  /* All of the Emila word, above the empty gap at source y=121/203. */
  clip-path: inset(0 0 40.394089% 0);
}

.emila-intro__base::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, #9e7342 0%, #cfad76 15%, #f3e1b7 31%, #c89d61 47%, #dfc28d 63%, #f7e8c3 80%, #b38950 100%);
  /* The original i dot only: x=198..232, y=12..39, with a clear 1px margin. */
  clip-path: inset(5.418719% 42.364532% 79.802956% 48.522167%);
}

.emila-intro__shine {
  background: linear-gradient(108deg, transparent 36%, #ffffff3b 44%, #ffffffa3 48%, #ffffffed 50%, #ffffff70 52%, transparent 60%) -140% 0 / 240% 100% no-repeat;
  opacity: 0;
  animation: emila-metal-light 1650ms cubic-bezier(.25,.25,.3,1) 260ms both;
  mix-blend-mode: screen;
}

.emila-intro__skip {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e6d4b4;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
  cursor: pointer;
  pointer-events: auto;
  transition: color 180ms ease, opacity 350ms ease;
}

.emila-intro__skip:hover { color: #fff3d9; }
.emila-intro__skip:focus-visible { outline: 2px solid #e6d4b4; outline-offset: 4px; }
.emila-intro[data-phase="dock"] .emila-intro__backdrop { opacity: 0; pointer-events: none; }
.emila-intro[data-phase="dock"] .emila-intro__halo { visibility: hidden; }
.emila-intro[data-phase="dock"] .emila-intro__skip { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes emila-logo-reveal {
  0% { opacity: .08; clip-path: inset(0 100% 0 0); }
  25% { opacity: .7; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes emila-metal-light {
  0% { opacity: 0; background-position: 160% 0; }
  17% { opacity: .4; }
  42% { opacity: .88; }
  76% { opacity: .55; }
  100% { opacity: 0; background-position: -60% 0; }
}

@keyframes emila-halo {
  0% { opacity: 0; }
  60% { opacity: 1; }
  100% { opacity: .75; }
}

@media (max-width: 480px) {
  .emila-intro__logo { width: min(78vw, 350px); }
  .emila-intro__skip { right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .emila-intro { display: none !important; }
  .emila-intro *, .emila-intro *::before, .emila-intro *::after { animation: none !important; transition: none !important; }
}