/* île — front door, inside #authGate (gate behaviour unchanged).
   Presentation only: no request, no storage, no authority.
   Calm and mature: deep graphite, cream, slow motion. The wordmark is the focus;
   behind it, small moments of life (photographs and ink drawings) and drifting
   French words. île greets in its own voice. */
@property --lp-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.auth-gate{ display:block; overflow-y:auto; overflow-x:hidden; padding:0; overscroll-behavior:contain; background:#0D0D0C; }
.auth-gate[hidden]{ display:none; }

.lp{ --cream:234,224,196; position:relative; isolation:isolate; min-height:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding:clamp(28px,6vh,72px) clamp(20px,5vw,64px); }

/* ── background: flat dark ground, no light or shadow shapes ── */
.lp-words,.lp-moments{ position:absolute; inset:0; pointer-events:none; }
.lp-words{ z-index:1; } .lp-moments{ z-index:1; }
.lp-w{ position:absolute; font-family:'Spectral',serif; font-style:italic; font-weight:200; letter-spacing:.05em; white-space:nowrap;
  font-size:clamp(24px,3.2vw,44px); color:rgba(var(--cream),.42); opacity:0; transform:translateY(12px);
  transition:opacity 1.6s ease, transform 5.5s cubic-bezier(.22,1,.36,1); }
.lp-w.on{ opacity:1; transform:translateY(-6px); }
.lp-w.off{ opacity:0; transition-duration:1.8s; }

/* a moment: a small framed photograph or an ink drawing, with a caption */
.lp-m{ position:absolute; margin:0; opacity:0; transform:translateY(10px);
  transition:opacity 2.2s ease, transform 11s cubic-bezier(.3,.1,.3,1); }
.lp-m.on{ opacity:1; transform:translateY(-10px); }
.lp-m.off{ opacity:0; transition:opacity 2.4s ease, transform 11s cubic-bezier(.3,.1,.3,1); }
.lp-m-frame{ display:block; overflow:hidden; border-radius:7px; opacity:.6; line-height:0; }
.lp-m-frame img{ display:block; width:100%; height:auto; transform:scale(1); animation:lpKen 20s ease-in-out infinite alternate; }
@keyframes lpKen{ to{ transform:scale(1.07); } }
.lp-m--draw .lp-m-frame{ opacity:1; border-radius:0; }
.lp-m svg{ display:block; width:100%; height:auto; overflow:visible; }
.lp-m svg path{ fill:none; stroke:rgba(var(--cream),.6); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; }
.lp-m.on svg path{ stroke-dashoffset:0; transition:stroke-dashoffset 3.4s cubic-bezier(.5,0,.2,1); transition-delay:var(--d,0s); }
.lp-m figcaption{ margin-top:11px; font-family:'Spectral',serif; font-style:italic; font-weight:300; font-size:15px; line-height:1.35;
  color:rgba(var(--cream),.55); opacity:0; transition:opacity 1.6s ease 1.4s; }
.lp-m.on figcaption{ opacity:1; }
.lp-m figcaption span{ display:block; font-family:'DM Sans',sans-serif; font-style:normal; font-weight:300; font-size:12px; letter-spacing:.03em; color:rgba(230,226,220,.38); }

.lp-stage{ position:relative; z-index:2; width:100%; max-width:1080px; display:grid; grid-template-columns:minmax(0,1fr) 380px;
  align-items:center; column-gap:clamp(48px,9vw,140px); }

/* ── logo: a cursor that is alive (breathes and blinks; does not follow the mouse) ── */
.lp-logo{ --s:clamp(96px,21vw,260px); display:flex; width:max-content; align-items:center; gap:calc(var(--s) * .16); font-size:var(--s); line-height:1; }
.lp-cursor{ position:relative; display:flex; flex-direction:column; align-items:center; gap:calc(var(--s) * .035); align-self:center;
 }
.lp-dot{ display:block; position:relative; width:calc(var(--s) * .085); height:calc(var(--s) * .085); border-radius:50%;
  background:rgba(var(--cream),.95); opacity:0;
  animation:lpDotIn .9s ease .25s forwards, lpDotBlink 2.4s ease-in-out 4s infinite; }
@keyframes lpDotIn{ to{ opacity:1; } }
@keyframes lpDotBlink{ 0%,42%{ opacity:1; } 56%,86%{ opacity:0; } 100%{ opacity:1; } }
.lp-bar{ display:block; width:max(1.5px, calc(var(--s) * .012)); height:calc(var(--s) * .62);
  background:linear-gradient(to bottom, rgba(var(--cream),.75), rgba(var(--cream),0)); opacity:0;
  animation:lpFade 1.3s ease .9s forwards; }

.lp-word{ display:flex; align-items:baseline; font-family:'Spectral',serif; font-style:italic; font-weight:200; }
.lp-i,.lp-l,.lp-e{ display:inline-block; color:rgba(var(--cream),.94); opacity:0; filter:blur(.09em); }
.lp-i{ animation:lpLetter 1.5s cubic-bezier(.22,1,.36,1) 1.25s forwards; }
.lp-l{ animation:lpLetter 1.5s cubic-bezier(.22,1,.36,1) 1.5s forwards; }
.lp-e{ animation:lpLetter 1.5s cubic-bezier(.22,1,.36,1) 1.75s forwards; }
@keyframes lpLetter{ to{ opacity:1; filter:blur(0); } }

.lp-line{ width:max-content; max-width:100%; margin:clamp(22px,4vh,36px) 0 0; font-family:'Spectral',serif; font-style:italic; font-weight:300; font-size:clamp(20px,2.1vw,26px); line-height:1.3;
  letter-spacing:.01em; color:rgba(var(--cream),.8); opacity:0; animation:lpFade 1.4s ease 2.9s forwards; }
.lp-echo{ display:block; margin-top:8px; font-family:'DM Sans',sans-serif; font-style:normal; font-weight:300; font-size:13.5px; letter-spacing:.04em;
  color:rgba(230,226,220,.42); opacity:0; animation:lpFade 1.6s ease 4.6s forwards; }
@keyframes lpFade{ to{ opacity:1; } }

/* île speaking: French typed, English arrives beneath */
.lp-say{ width:min(24em,100%); height:4.4em; margin-top:clamp(20px,3.5vh,34px); font-size:clamp(18px,1.9vw,23px); opacity:0; animation:lpFade 1s ease 5.2s forwards; }
.lp-say-fr{ display:inline; font-family:'Spectral',serif; font-style:italic; font-weight:300; font-size:1em; line-height:1.3; color:rgba(var(--cream),.92); }
.lp-caret{ display:inline-block; width:1.5px; height:1em; margin-left:2px; vertical-align:-.14em; background:rgba(var(--cream),.85); animation:lpCaret 1.1s step-end infinite; }
.lp-say.typing .lp-caret{ animation:none; }
.lp-say-fr:empty + .lp-caret{ opacity:0; animation:none; }
@keyframes lpCaret{ 50%{ opacity:0; } }
.lp-say-en{ display:block; margin-top:6px; font-size:13.5px; font-weight:300; letter-spacing:.03em; color:rgba(230,226,220,.5); opacity:0; transition:opacity .9s ease; height:1.4em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lp-say-en.on{ opacity:1; }

/* ── sign in / sign up card ── */
.lp-stage .auth-card{ position:relative; max-width:none; margin:0; padding:38px 34px 32px; border:0; border-radius:24px;
  background:linear-gradient(155deg, rgba(34,32,29,.62), rgba(17,16,15,.58));
  -webkit-backdrop-filter:blur(26px) saturate(1.1); backdrop-filter:blur(26px) saturate(1.1);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  animation-delay:3.1s; }
.lp-stage .auth-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--lp-a), rgba(var(--cream),0) 0 58%, rgba(var(--cream),.4) 78%, rgba(var(--cream),0) 96%),
             linear-gradient(rgba(255,255,255,.075), rgba(255,255,255,.075));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:lpSweep 12s linear 4s infinite; }
@keyframes lpSweep{ to{ --lp-a:360deg; } }
.lp-stage .auth-card-brand{ display:none; }

.lp-stage .auth-tabs{ gap:26px; margin:0 0 26px; padding:0; background:none; border-radius:0; border-bottom:1px solid rgba(255,255,255,.08); }
.lp-stage .auth-tab{ position:relative; flex:none; padding:0 0 13px; border-radius:0; background:none; text-transform:none; letter-spacing:.02em;
  font-size:14px; font-weight:400; color:rgba(230,226,220,.42); }
.lp-stage .auth-tab[aria-pressed="true"]{ background:none; color:rgba(var(--cream),.96); }
.lp-stage .auth-tab::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:rgb(var(--cream));
  transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.lp-stage .auth-tab[aria-pressed="true"]::after{ transform:scaleX(1); }
.lp-stage .auth-tab:hover{ color:rgba(var(--cream),.8); }

.lp-stage .auth-form{ gap:20px; }
.lp-stage .auth-field{ gap:2px; }
.lp-stage .auth-field label{ text-transform:none; letter-spacing:.02em; font-size:12.5px; font-weight:400; color:rgba(230,226,220,.46); }
.lp-stage .auth-field input{ background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.14); border-radius:0;
  padding:9px 1px 11px; font-size:16px; color:rgba(var(--cream),.96); transition:border-color .35s, box-shadow .35s; }
.lp-stage .auth-field input:focus{ background:transparent; border-bottom-color:rgba(var(--cream),.85); box-shadow:0 1px 0 rgba(var(--cream),.5); }
.lp-stage #authUpNameField:not([hidden]){ animation:lpReveal .6s cubic-bezier(.22,1,.36,1); }
@keyframes lpReveal{ from{ opacity:0; transform:translateY(-6px); } }

/* learner / teacher: a quiet two-way switch instead of tick boxes */
.lp-stage .auth-role{ display:block; margin:0; padding:0; border:0; }
.lp-stage .auth-role legend{ float:none; display:block; padding:0 0 9px; text-transform:none; letter-spacing:.02em; font-size:12.5px; font-weight:400; color:rgba(230,226,220,.46); }
.lp-stage .auth-role-track{ position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02); }
.lp-stage .auth-role-opt{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; min-height:38px; gap:0; cursor:pointer;
  font-size:14px; letter-spacing:.02em; color:rgba(230,226,220,.5); transition:color .4s; }
.lp-stage .auth-role-opt input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.lp-stage .auth-role-opt:hover{ color:rgba(var(--cream),.8); }
.lp-stage .auth-role-opt:has(input:checked){ color:rgba(var(--cream),.97); }
.lp-stage .auth-role-opt span{ padding:0 14px; border-radius:999px; line-height:38px; }
.lp-stage .auth-role-opt input:checked + span{ background:rgba(var(--cream),.12); box-shadow:inset 0 0 0 1px rgba(var(--cream),.25); }
@supports selector(:has(*)){
  .lp-stage .auth-role-track::before{ content:''; position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px;
    background:rgba(var(--cream),.12); box-shadow:inset 0 0 0 1px rgba(var(--cream),.25); transition:transform .5s cubic-bezier(.22,1,.36,1); }
  .lp-stage .auth-role-track:has(#authUpRoleTeacher:checked)::before{ transform:translateX(100%); }
  .lp-stage .auth-role-opt input:checked + span{ background:none; box-shadow:none; }
}
.lp-stage .auth-role-opt input:focus-visible + span{ outline:2px solid rgb(var(--cream)); outline-offset:2px; }

.lp-stage .auth-submit{ margin-top:8px; padding:0; min-height:48px; border-radius:24px; font-size:14px; letter-spacing:.03em;
  background:rgba(var(--cream),.1); border:1px solid rgba(var(--cream),.3); color:rgba(var(--cream),.95);
  transition:background .4s, border-color .4s, transform .4s cubic-bezier(.34,1.1,.64,1); }
.lp-stage .auth-submit:hover:not(:disabled){ background:rgba(var(--cream),.18); border-color:rgba(var(--cream),.55); transform:translateY(-1px); }
.lp-stage .auth-message{ min-height:16px; }

@media (max-width:899px){
  .lp{ align-items:flex-start; }
  .lp-stage{ grid-template-columns:minmax(0,1fr); row-gap:36px; justify-items:center; text-align:center; padding-top:clamp(8px,4vh,40px); }
  .lp-brand{ display:flex; flex-direction:column; align-items:center; }
  .lp-logo{ --s:clamp(84px,26vw,128px); }
  .lp-stage .auth-card{ max-width:420px; text-align:left; padding:32px 26px 26px; }
  .lp-stage .auth-tab{ min-height:36px; }
  .lp-w{ font-size:clamp(20px,6vw,30px); }
  .lp-m figcaption{ font-size:13px; }
  .lp-m-frame{ opacity:.34; }
  .lp-m--draw .lp-m-frame{ opacity:.7; }
}

.lp button:focus-visible,.lp a:focus-visible,.lp input:focus-visible{ outline:2px solid rgb(var(--cream)); outline-offset:3px; }
.lp-stage .auth-field input:focus-visible{ outline:none; }
.lp-stage .auth-field input:-webkit-autofill,.lp-stage .auth-field input:-webkit-autofill:hover,.lp-stage .auth-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:rgba(var(--cream),.96);caret-color:rgba(var(--cream),.96);
  transition:background-color 600000s 0s,color 600000s 0s,border-color .35s,box-shadow .35s;
}
@media (prefers-reduced-motion:reduce){
  .lp-dot,.lp-bar,.lp-i,.lp-l,.lp-e,.lp-line,.lp-echo,.lp-say{ animation:none; opacity:1; transform:none; filter:none; }
  .lp-caret{ animation:none; }
  .lp-words,.lp-moments{ display:none; }
  .lp-say-en{ opacity:1; transition:none; }
  .lp-stage .auth-card{ animation:none; opacity:1; transform:none; }
  .lp-stage .auth-card::before{ animation:none; }
}