/* First-open gate study only. Existing 00–09 styles and animations stay intact. */
.efg-screen {
  --efg-surface: light-dark(#f0ede6, #141a1c);
  --efg-ink: light-dark(#252523, #f0eee8);
  --efg-muted: light-dark(#68665e, #c0bdb5);
  --efg-line: light-dark(#66645752, #d4d5cf4f);
  --efg-focus: light-dark(#837452, #d3c7a8);
  --efg-light: light-dark(#fffbe8a8, #e6d7ad2b);
  --efg-button: light-dark(#ffffff73, #ffffff12);
  --efg-button-edge: light-dark(#ffffffd9, #ffffff2e);
  --efg-error: light-dark(#874637, #e0aa99);
  --efg-ease: cubic-bezier(.2,.7,.2,1);
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 390px; min-height: 760px; margin-inline: auto;
  border-radius: 30px; background: var(--efg-surface); color: var(--efg-ink);
  font: 400 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
  display: flex; flex-direction: column; box-sizing: border-box;
  box-shadow: inset 0 0 0 1px light-dark(#fff9, #ffffff14);
}
.efg-screen *, .efg-screen *::before, .efg-screen *::after { box-sizing: border-box; }
.efg-screen p { margin: 0; }
.efg-scene { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.efg-scene__architecture {
  position: absolute; inset: -6%; background: url("../../assets/images/profile-background.avif") 66% 20% / cover no-repeat;
  opacity: .27; filter: saturate(.45); transform: scale(1.12);
  animation: efg-drift 24s ease-in-out infinite alternate;
}
.efg-scene__veil { position: absolute; inset: 0; background: linear-gradient(180deg, light-dark(#f5f2ea08,#141a1c12), light-dark(#f3f0e750,#141a1c14) 33%, light-dark(#f0ede6ce,#141a1cdd) 76%,var(--efg-surface)); }
.efg-scene__light {
  position: absolute; width: 150%; height: 120%; top: -22%; left: -8%;
  background: linear-gradient(112deg, transparent 31%, var(--efg-light) 41%, light-dark(#fffef38c,#e0dec422) 48%, transparent 65%);
  filter: blur(23px); transform: translate3d(8%,0,0) rotate(-8deg); opacity: .8;
  animation: efg-light-pass 18s ease-in-out infinite alternate;
}
.efg-scene__wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 74% 18%,light-dark(#fffdf537,#c1d4e611),transparent 65%); }
.efg-brand {
  position: relative; padding-top: 70px; text-align: center;
  font: 400 35px/1.2 "Bodoni Moda", "Times New Roman", serif;
  letter-spacing: -.045em; color: light-dark(#171719,#f6f6f7);
  animation: efg-arrive 1000ms var(--efg-ease) both;
}
.efg-content { position: relative; width: 100%; padding: 0 34px 87px; margin-top: auto; }
.efg-form { width: 100%; margin: 0; animation: efg-arrive 1000ms 200ms var(--efg-ease) both; transition: translate 400ms var(--efg-ease); }
.efg-form__label { display: block; font-size: 23px; line-height: 1.45; font-weight: 500; letter-spacing: .035em; margin-bottom: 25px; }
.efg-form__field { position: relative; }
.efg-form__input {
  display: block; width: 100%; height: 54px; border: 0; border-radius: 0; padding: 10px 0;
  background: transparent; color: var(--efg-ink); font-weight: 400;
  font-family: inherit; font-size: 17px; line-height: 1.5; letter-spacing: .045em;
  border-bottom: 1px solid var(--efg-line); caret-color: var(--efg-focus);
  -webkit-appearance: none; appearance: none;
}
.efg-form__input::placeholder { color: var(--efg-muted); opacity: .8; letter-spacing: 0; font-size: 15px; }
.efg-form__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--efg-focus); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--efg-ease); }
.efg-form__field:focus-within .efg-form__line { transform: scaleX(1); }
.efg-form__note { color: var(--efg-muted); font-size: 12px; line-height: 1.8; padding-top: 15px; }
.efg-form__enter {
  position: relative; display: block; width: 100%; min-height: 52px; margin-top: 42px; padding: 12px 24px;
  border-radius: 19px; border: 1px solid var(--efg-button-edge);
  background: linear-gradient(135deg,light-dark(#ffffff78,#ffffff10),transparent 55%),var(--efg-button);
  color: var(--efg-ink); font: 500 15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;
  box-shadow: inset 0 1px 0 light-dark(#ffffffc7,#ffffff24),0 5px 20px light-dark(#7f786a12,#00000017);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background 250ms, color 250ms, transform 250ms var(--efg-ease), opacity 250ms;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.efg-form__enter:disabled { color: var(--efg-muted); opacity: .6; }
.efg-form__enter:active:not(:disabled) { transform: scale(.985); }
.efg-form__message { position: absolute; padding-top: 12px; font-size: 12px; color: var(--efg-error); }
.efg-screen[data-focus="true"] .efg-form { translate: 0 -20px; }
.efg-screen[data-focus="true"] .efg-scene__architecture,
.efg-screen[data-focus="true"] .efg-scene__light,
.efg-screen[data-paused="true"] .efg-scene__architecture,
.efg-screen[data-paused="true"] .efg-scene__light { animation-play-state: paused; }
.efg-screen[data-state="error"] .efg-form__line { background: var(--efg-error); transform: scaleX(1); }
.efg-screen[data-state="leaving"] .efg-content { animation: efg-leave 460ms var(--efg-ease) both; }
.efg-screen[data-state="returning"] .efg-content { animation: efg-return 520ms var(--efg-ease) both; }
.efg-screen[data-state="leaving"] .efg-scene__wash { opacity: .35; transition: opacity 800ms; }
@keyframes efg-drift { from { transform: translate3d(-2px,0,0) scale(1.12); } to { transform: translate3d(5px,-7px,0) scale(1.14); } }
@keyframes efg-light-pass { from { transform: translate3d(8%,0,0) rotate(-8deg); opacity: .55; } to { transform: translate3d(-7%,3%,0) rotate(-5deg); opacity: .95; } }
@keyframes efg-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes efg-leave { to { opacity: 0; transform: translateX(-22px); } }
@keyframes efg-return { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width:360px) { .efg-content { padding-inline: 28px; } .efg-screen { min-height: 710px; } }
@media (prefers-reduced-motion:reduce) { .efg-screen *, .efg-screen *::before, .efg-screen *::after { animation: none !important; transition: none !important; } .efg-screen[data-focus="true"] .efg-form { translate: none; } }
