/* ============================================================
   STUDLE — cinematic auth (night scene + anchored beacon)
   Loaded after styles.css: authoritative over earlier auth drafts.
   ============================================================ */
.auth-shell{position:relative;min-height:100vh;min-height:100svh;display:block;overflow:hidden;background:#04070d;color:#f4efe6;isolation:isolate}
.auth-shell[hidden]{display:none}

/* ---- Night sky + stars + sea ---- */
.night-scene{position:absolute;inset:0;overflow:hidden;z-index:0}
.sky{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 30% 30%, #16283a 0%, #0b1725 34%, #060d16 62%, #03070d 100%),
  linear-gradient(180deg,#04070e 0%,#060d17 55%,#04080f 100%)}
.stars{position:absolute;inset:0 0 32% 0;
  background-image:radial-gradient(1.4px 1.4px at 20px 30px,#dfeaf0 40%,transparent),
    radial-gradient(1.2px 1.2px at 120px 80px,#b9ccd8 40%,transparent),
    radial-gradient(1px 1px at 220px 40px,#e7f0f4 40%,transparent),
    radial-gradient(1.3px 1.3px at 320px 120px,#a9c0cf 40%,transparent),
    radial-gradient(1px 1px at 80px 160px,#cfe0e8 40%,transparent);
  background-size:360px 220px;opacity:.5;animation:twinkle 9s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.42}50%{opacity:.6}}
.sea{position:absolute;left:0;right:0;bottom:0;height:32%;
  background:linear-gradient(180deg,#0a1622 0%,#070f19 40%,#03070d 100%);
  box-shadow:inset 0 1px 0 rgba(150,190,210,.10)}
.sea-shimmer{position:absolute;left:26%;top:0;width:120px;height:100%;transform:translateX(-50%);
  background:radial-gradient(60% 80% at 50% 0,rgba(255,232,180,.22),transparent 70%);
  filter:blur(10px);opacity:.7;animation:seapulse 6s ease-in-out infinite}
@keyframes seapulse{0%,100%{opacity:.35}50%{opacity:.75}}

/* ---- Lighthouse (positioned parent; lantern carries the beam) ---- */
.lighthouse{position:absolute;left:28%;bottom:30%;width:176px;height:280px;z-index:3;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.lh-cliff{position:absolute;left:-120px;bottom:-46px;width:420px;height:120px;
  background:linear-gradient(160deg,#0c1620,#05090f);
  clip-path:polygon(0 62%,16% 40%,30% 54%,46% 30%,60% 48%,74% 26%,88% 44%,100% 34%,100% 100%,0 100%)}
.lh-base{position:absolute;left:50%;bottom:36px;width:120px;height:40px;transform:translateX(-50%);
  background:linear-gradient(90deg,#2b3946,#4a5b68 55%,#232f3a);border-radius:6px 6px 3px 3px}
.lh-tower{position:absolute;left:50%;bottom:70px;width:96px;height:150px;transform:translateX(-50%);
  background:linear-gradient(90deg,#33424f 0%,#8794a0 38%,#c3cdd4 52%,#7c8994 66%,#28333d 100%);
  clip-path:polygon(31% 0,69% 0,80% 100%,20% 100%)}
.lh-window{position:absolute;left:50%;width:11px;height:16px;transform:translateX(-50%);border-radius:5px 5px 3px 3px;
  background:radial-gradient(circle at 50% 40%,#ffe6a8,#b07b2e);box-shadow:0 0 8px rgba(255,214,130,.6)}
.lh-window:nth-of-type(1){bottom:150px}
.lh-window:nth-of-type(2){bottom:110px}
.lh-gallery{position:absolute;left:50%;bottom:214px;width:74px;height:12px;transform:translateX(-50%);
  background:linear-gradient(90deg,#222c35,#556571 50%,#1f2a33);border-radius:4px}
.lh-lantern{position:absolute;left:50%;bottom:222px;width:50px;height:42px;transform:translateX(-50%);
  background:linear-gradient(180deg,#3a4a56 0 12%,#fff4d2 12% 82%,#4a5a66 82% 100%);
  border-radius:7px 7px 3px 3px;border:2px solid #2a3742;overflow:visible;
  box-shadow:0 0 34px 6px rgba(255,224,150,.55)}
.lh-glass{position:absolute;inset:5px 6px;border-radius:4px;
  background:linear-gradient(180deg,#fff6dc,#ffdf9e 55%,#f0c069);
  box-shadow:0 0 18px rgba(255,231,170,.9)}
.lh-roof{position:absolute;left:50%;bottom:262px;width:64px;height:26px;transform:translateX(-50%);
  background:linear-gradient(90deg,#26313b,#465764 50%,#212b34);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.lantern-bloom{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,232,178,.55) 0%,rgba(255,224,150,.18) 34%,transparent 68%);
  pointer-events:none;animation:bloom 6s ease-in-out infinite}
@keyframes bloom{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* ---- Beacon: origin exactly at lantern centre ---- */
.beacon{position:absolute;left:50%;top:50%;width:0;height:0;transform-origin:0 0;z-index:2;
  animation:sweep 15s linear infinite;will-change:transform,opacity}
.beam{position:absolute;left:0;top:0;transform:translateY(-50%);mix-blend-mode:screen;pointer-events:none}
.beam-main{width:76vw;height:30vh;clip-path:polygon(0 47%,100% 12%,100% 88%,0 53%);
  background:linear-gradient(90deg,rgba(255,243,210,.62),rgba(255,231,175,.16) 40%,rgba(255,225,160,.02) 74%,transparent 88%);
  filter:blur(6px)}
.beam-soft{width:88vw;height:52vh;clip-path:polygon(0 45%,100% 2%,100% 98%,0 55%);
  background:linear-gradient(90deg,rgba(255,236,196,.30),rgba(255,228,170,.05) 55%,transparent 80%);
  filter:blur(24px);opacity:.7}
@keyframes sweep{
  0%{transform:rotate(-96deg);opacity:.16}
  14%{opacity:.5}
  26%{transform:rotate(3deg);opacity:1}
  40%{opacity:.55}
  52%{transform:rotate(90deg);opacity:.18}
  70%{transform:rotate(168deg);opacity:.05}
  88%{opacity:.05}
  100%{transform:rotate(264deg);opacity:.16}}

/* ---- Ambient mist ---- */
.mist{position:absolute;left:-15%;width:130%;height:150px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(150,178,196,.10) 0,transparent 66%);filter:blur(16px);z-index:2}
.mist-a{top:52%;animation:drift 26s ease-in-out infinite alternate}
.mist-b{top:64%;opacity:.6;animation:drift 34s ease-in-out infinite alternate-reverse}
@keyframes drift{0%{transform:translateX(-4%) scaleY(1)}100%{transform:translateX(6%) scaleY(1.12)}}

/* ---- Scene quote ---- */
.scene-quote{position:absolute;left:5.5%;bottom:11%;max-width:330px;margin:0;z-index:4;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;
  font-size:1.18rem;line-height:1.5;color:#dfe7ea;text-shadow:0 2px 18px rgba(0,0,0,.6);
  transition:opacity .9s ease}

/* ---- Brand (top-left) ---- */
.auth-brand{position:absolute;top:30px;left:42px;z-index:6;display:flex;align-items:center;gap:11px;color:#f4efe6}
.auth-brand .brand-mark{width:36px;height:36px;border-radius:10px;background:#3f7a63;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:"Iowan Old Style",Georgia,serif;box-shadow:0 4px 16px rgba(63,122,99,.4)}
.auth-brand .brand-word{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;font-size:1.32rem;letter-spacing:.01em}
.auth-brand small{display:none;color:#93a6b3;font-size:.72rem;letter-spacing:.14em;margin-left:4px}
@media(min-width:900px){.auth-brand small{display:inline}}

/* ---- Glass auth card (right) ---- */
.auth-card{position:absolute;top:50%;right:6vw;left:auto;transform:translateY(-50%);z-index:7;
  width:min(400px,42vw);padding:38px 34px 30px;border-radius:24px;
  background:linear-gradient(158deg,rgba(17,28,41,.66),rgba(7,13,21,.76));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 34px 90px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15)}
.auth-kicker{margin:0 0 2px;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#8aa0ad;font-weight:600}
.auth-card h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:600;font-size:2.5rem;line-height:1.02;margin:0 0 12px;color:#f6f1e7;letter-spacing:.005em}
.auth-lede{margin:0 0 22px;color:#b7c4cd;font-size:.96rem;line-height:1.55}
.auth-tabs{display:flex;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:13px;padding:5px;margin:0 0 18px}
.auth-tabs button{flex:1;padding:10px 0;border:0;border-radius:9px;background:transparent;color:#9fb0bd;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .2s,color .2s}
.auth-tabs button.active{background:linear-gradient(180deg,#3f7a63,#356a56);color:#fff;box-shadow:0 4px 14px rgba(63,122,99,.35)}
#auth-form{display:flex;flex-direction:column;gap:12px}
#auth-email{width:100%;padding:13px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(6,12,20,.6);color:#f4efe6;font:inherit;transition:border-color .2s,box-shadow .2s}
#auth-email::placeholder{color:#7d909d}
#auth-email:focus{outline:none;border-color:#4f9d80;box-shadow:0 0 0 3px rgba(63,122,99,.28)}
.auth-continue{width:100%;padding:13px 0;border:0;border-radius:12px;cursor:pointer;font:inherit;font-weight:700;font-size:1rem;color:#fff;background:linear-gradient(180deg,#47876e,#356a56);box-shadow:0 8px 22px rgba(63,122,99,.32);transition:transform .12s ease,box-shadow .2s,filter .2s}
.auth-continue:hover{filter:brightness(1.06);box-shadow:0 10px 26px rgba(63,122,99,.42)}
.auth-continue:active{transform:translateY(1px)}
.auth-continue:disabled{opacity:.55;cursor:progress}
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:#7d909d;font-size:.78rem;letter-spacing:.1em}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.auth-or span{white-space:nowrap}
.social-row{display:flex;gap:10px;margin-top:0}
.social-row .social-btn.icon-only{flex:1;display:flex;align-items:center;justify-content:center;padding:13px 0;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.04);cursor:pointer;transition:background .2s,border-color .2s,transform .12s}
.social-row .social-btn.icon-only:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.social-row .social-btn.icon-only:active{transform:translateY(1px)}
.social-row .social-btn.icon-only:disabled{opacity:.5;cursor:progress}
.social-ico{width:20px;height:20px}
.auth-terms{margin:18px 0 0;text-align:center;color:#8194a1;font-size:.8rem;line-height:1.5}
.auth-terms a{color:#8fc3ac;text-decoration:none}
.auth-terms a:hover{text-decoration:underline}
.auth-setup{margin:12px 0 0;text-align:center;color:#93a4b0;font-size:.82rem;background:none;border:0;padding:0}

/* ---- Mobile: lighthouse on top, glass bottom sheet ---- */
@media(max-width:820px){
  .auth-brand{top:20px;left:20px}
  .lighthouse{left:50%;bottom:auto;top:12%;transform:translateX(-50%) scale(.92);transform-origin:top center}
  .sea{height:24%}
  .sea-shimmer{left:50%}
  .scene-quote{left:50%;right:auto;transform:translateX(-50%);bottom:auto;top:calc(12% + 300px);text-align:center;max-width:82%;font-size:1.02rem}
  .auth-card{position:absolute;top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-height:82vh;overflow:auto;
    padding:26px 22px calc(24px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;
    background:linear-gradient(180deg,rgba(12,20,30,.86),rgba(6,11,18,.94));backdrop-filter:blur(24px)}
  .auth-card h1{font-size:2.1rem}
  .auth-lede{font-size:.92rem;margin-bottom:18px}
  .desktop-only{display:none}
}
@media(max-width:820px) and (max-height:680px){
  .lighthouse{transform:translateX(-50%) scale(.7);top:6%}
  .scene-quote{display:none}
}

/* ---- Reduced motion: freeze a beautiful frame ---- */
@media(prefers-reduced-motion:reduce){
  .beacon{animation:none;transform:rotate(-8deg);opacity:.92}
  .stars,.mist-a,.mist-b,.lantern-bloom,.sea-shimmer{animation:none}
  .lantern-bloom{opacity:.95}
}