/* Feelo auth pages (login / signup): the "studio pass" scene.
   Loads after chrome.css and turns it into the same night world as the landing opening.
   Everything moves with transform/opacity only, so it stays smooth on phones. */

:root{ --out:cubic-bezier(.16,1,.3,1); --glide:cubic-bezier(.65,0,.25,1); }
body.night{ background:#140F24; color:#fff; min-height:100vh; min-height:100svh; overflow-x:hidden; }
body.night::before{ content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(70% 55% at 10% 6%, rgba(244,63,110,.32), transparent 70%), radial-gradient(60% 50% at 95% 35%, rgba(124,58,237,.36), transparent 70%), radial-gradient(70% 45% at 50% 110%, rgba(255,122,26,.24), transparent 70%); }
.sky{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.sky i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#FFF3F7; opacity:.3; animation:tw 3.6s ease-in-out infinite; }
@keyframes tw{ 50%{ opacity:.95; } }
.sky b{ position:absolute; bottom:-30px; font-weight:400; color:#FFB3C6; opacity:0; animation:drift var(--d,18s) linear infinite; animation-delay:var(--dl,0s); }
@keyframes drift{ 0%{ opacity:0; transform:translate(0,0) rotate(0deg); } 12%{ opacity:.45; } 85%{ opacity:.3; } 100%{ opacity:0; transform:translate(var(--sx,20px),-105vh) rotate(160deg); } }

.night .brand{ color:#fff; }
.night .brand-word span{ color:#FF8FA8; }
.auth-top{ display:flex; align-items:center; justify-content:space-between; max-width:1120px; margin:0 auto; padding:18px 18px 0; }
.auth-top a.alt{ font-size:.9rem; font-weight:600; color:rgba(255,255,255,.75); text-decoration:none; }
.auth-top a.alt b{ color:#fff; }

.scene{ max-width:1120px; margin:0 auto; padding:18px 18px 48px; display:grid; gap:22px; align-items:center; grid-template-columns:minmax(0,1fr); grid-template-areas:"pass" "form"; }
@media(min-width:960px){ .scene{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-areas:"form pass"; gap:64px; padding-top:40px; min-height:calc(100vh - 80px); } }
.form-side{ grid-area:form; }
.pass-side{ grid-area:pass; display:flex; flex-direction:column; align-items:center; gap:16px; }

/* ---------- the form ---------- */
.night .pill{ background:rgba(255,255,255,.08); color:#FFD58A; border-color:rgba(255,255,255,.14); }
.night h1{ margin:14px 0 10px; font-weight:800; letter-spacing:-.035em; line-height:1.04; font-size:clamp(2.2rem,5.6vw,3.3rem); }
.night .tagline{ margin:0 0 24px; color:rgba(255,255,255,.7); font-size:1.03rem; max-width:440px; }
.form-side > form > *{ animation:rise .9s var(--out) both; }
.form-side > form > *:nth-child(2){ animation-delay:.08s; } .form-side > form > *:nth-child(3){ animation-delay:.16s; } .form-side > form > *:nth-child(4){ animation-delay:.24s; }
.form-side > form > *:nth-child(5){ animation-delay:.32s; } .form-side > form > *:nth-child(6){ animation-delay:.4s; } .form-side > form > *:nth-child(n+7){ animation-delay:.48s; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } }
.night .field{ display:block; margin-bottom:14px; }
.night .field-label{ display:block; margin-bottom:7px; font-size:.84rem; font-weight:600; color:rgba(255,255,255,.75); }
.night .chrome-input{ width:100%; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#fff; font:inherit; font-size:1rem; outline:none; transition:border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.night .chrome-input::placeholder{ color:rgba(255,255,255,.38); }
.night .chrome-input:focus{ border-color:rgba(255,143,168,.75); background:rgba(255,255,255,.1); box-shadow:0 0 0 5px rgba(244,63,110,.16); }
.pw{ position:relative; display:block; }
.pw .chrome-input{ padding-right:68px; }
.pw-toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); padding:7px 10px; border:none; border-radius:10px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); font-size:.76rem; font-weight:700; }
.pw-toggle:hover{ background:rgba(255,255,255,.14); }
.form-card{ max-width:460px; }
.night .submit{ width:100%; margin-top:8px; padding:16px; font-size:1.02rem; }
.night .submit:disabled{ opacity:.7; }
.night .submit .dots{ display:none; }
.night .submit.busy .lbl{ display:none; }
.night .submit.busy .dots{ display:inline-flex; gap:5px; }
.night .submit .dots i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:dot 1s ease-in-out infinite; }
.night .submit .dots i:nth-child(2){ animation-delay:.15s; } .night .submit .dots i:nth-child(3){ animation-delay:.3s; }
@keyframes dot{ 0%,100%{ opacity:.35; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-4px); } }
.night .form-error{ display:none; margin-top:12px; padding:10px 14px; border-radius:12px; background:rgba(244,63,110,.14); border:1px solid rgba(244,63,110,.35); color:#FFD0DC; font-size:.9rem; font-weight:600; animation:rise .5s var(--out); }
.night .auth-switch{ margin-top:18px; color:rgba(255,255,255,.65); font-size:.94rem; }
.night .auth-switch a{ color:#FF8FA8; font-weight:700; text-decoration:none; }

/* studio rules: consent as two little cards you tick */
.rules{ display:grid; gap:10px; margin:6px 0 22px; }   /* room before the button, so a tap meant for it can’t tick a box */
.rule{ position:relative; display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); cursor:pointer; transition:border-color .3s ease, background .3s ease; }
.rule input{ position:absolute; opacity:0; pointer-events:none; }
/* the card itself doesn't respond to taps; the tick box (a full finger-sized target) and its sentence do */
.rule{ cursor:default; }
.rule .tick{ position:relative; flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; margin:-10px -8px -10px -10px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.rule .txt{ cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.rule .box{ flex:0 0 24px; width:24px; height:24px; margin-top:1px; border-radius:8px; border:1.5px solid rgba(255,255,255,.35); display:grid; place-items:center; font-size:.8rem; font-weight:900; color:transparent; transition:all .35s var(--out); }
.rule .txt{ font-size:.9rem; line-height:1.4; color:rgba(255,255,255,.82); }
.rule .txt em{ color:rgba(255,255,255,.5); font-style:normal; }
.rule:has(input:checked){ border-color:rgba(255,143,168,.5); background:rgba(244,63,110,.08); }
.rule input:checked + .box{ background:linear-gradient(120deg,#F43F6E,#FF6A5E); border-color:transparent; color:#fff; transform:rotate(-8deg) scale(1.08); }
.rule input:focus-visible + .box{ box-shadow:0 0 0 4px rgba(244,63,110,.35); }

/* ---------- the printer: the pass comes out of a glowing slot ---------- */
.printer{ position:relative; display:flex; flex-direction:column; align-items:center; width:min(404px,94vw); }
@media(min-width:960px){ .printer{ width:min(490px,42vw); } }
.slot{ position:relative; z-index:3; width:100%; height:14px; border-radius:10px; background:#0B0716; border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 24px -8px rgba(0,0,0,.8); }
.slot span{ position:absolute; left:12px; right:12px; top:5px; height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,#FF8FA8,#FFD58A,#FF8FA8,transparent); animation:glow 2.4s ease-in-out infinite; }
@keyframes glow{ 50%{ opacity:.45; } }
.slot small{ position:absolute; right:4px; top:-18px; font-size:.56rem; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.4); }
.emerge{ margin-top:-6px; animation:print 1.7s var(--out) .35s backwards; transition:transform .7s cubic-bezier(.5,0,.2,1), opacity .6s ease; }
@keyframes print{
  from{ transform:translateY(-100%); clip-path:polygon(-30% 100%, 130% 100%, 130% 160%, -30% 160%); }
  to{ transform:translateY(0); clip-path:polygon(-30% 0, 130% 0, 130% 160%, -30% 160%); } }
.emerge.leave{ transform:translateY(-30px) scale(1.18); opacity:0; }
.pass-float{ position:relative; padding:14px 0 26px; animation:pfl 7s ease-in-out 2.1s infinite; perspective:1300px; }
@keyframes pfl{ 0%,100%{ transform:translateY(0) rotate(0deg); } 30%{ transform:translateY(-7px) rotate(-1.2deg); } 70%{ transform:translateY(-3px) rotate(1deg); } }
.pass-shadow{ position:absolute; left:14%; right:14%; bottom:6px; height:24px; border-radius:50%; background:rgba(244,63,110,.55); filter:blur(14px); opacity:.8; }

/* ---------- the pass (front and back) ---------- */
.pass{ position:relative; width:min(380px,88vw); aspect-ratio:1.62; transform-style:preserve-3d; transition:transform .5s var(--out); }
@media(min-width:960px){ .pass{ width:min(460px,40vw); } }
.flipper{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform 1.1s var(--glide); }
.flipper.flipped{ transform:rotateY(180deg); }
.face{ position:absolute; inset:0; display:flex; border-radius:22px; color:#fff; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  -webkit-mask:radial-gradient(circle 13px at 70% 0, transparent 97%, #000) top/100% 51% no-repeat, radial-gradient(circle 13px at 70% 100%, transparent 97%, #000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 13px at 70% 0, transparent 97%, #000) top/100% 51% no-repeat, radial-gradient(circle 13px at 70% 100%, transparent 97%, #000) bottom/100% 51% no-repeat; }
.face.front{ background:linear-gradient(135deg,#FF8FA8 0%,#F43F6E 28%,#B0247A 58%,#5B21B6 86%,#3B1A70 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.face.back{ transform:rotateY(180deg); flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 24px; gap:4px;
  background:radial-gradient(90% 90% at 50% 0%, rgba(255,214,138,.35), transparent 60%), linear-gradient(145deg,#3B1A70 0%,#7C1F7A 45%,#F43F6E 100%); }
.face.front::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.14; background:repeating-radial-gradient(circle at 20% 120%, #fff 0 1px, transparent 1px 9px); }
.pass-main{ position:relative; flex:0 0 70%; padding:16px 16px 14px 18px; display:flex; flex-direction:column; min-width:0; }
.pass-top{ display:flex; align-items:center; gap:8px; font-size:.6rem; font-weight:800; letter-spacing:.18em; white-space:nowrap; }
@media(max-width:480px){ .pass-top{ font-size:.52rem; letter-spacing:.1em; gap:6px; } .pass-kind{ letter-spacing:.08em; padding:3px 6px; } }
@media(min-width:960px){ .portrait{ width:84px; height:84px; } }
.pass-logo{ width:24px; height:24px; border-radius:8px; background:url(/brand/feelo-mark.svg) center/72% no-repeat, #fff; color:#F43F6E; display:grid; place-items:center; font-weight:900; font-size:.85rem; letter-spacing:0; }
.pass-kind{ margin-left:auto; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.2); letter-spacing:.14em; }
.pass-holder{ margin-top:auto; display:flex; align-items:center; gap:12px; min-width:0; }
.ph-text{ min-width:0; flex:1; }
.pass-label{ font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.75; }
.pass-name{ font-size:clamp(.98rem,4.2vw,1.3rem); font-weight:800; letter-spacing:-.01em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.2em; }
.pass-name.empty{ opacity:.45; font-weight:600; }
.pass-name span{ display:inline-block; white-space:pre; }
.pass-name span.in{ animation:emboss .5s var(--out) both; }
@keyframes emboss{ from{ opacity:0; transform:translateY(-6px) scale(1.4); text-shadow:0 0 14px #fff; } 60%{ text-shadow:0 0 10px rgba(255,255,255,.9); } }
.pass-row{ display:flex; gap:18px; margin-top:10px; }
.pass-row small{ display:block; font-size:.54rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.7; }
.pass-row b{ display:block; font-size:.8rem; font-weight:700; white-space:nowrap; }
.pass-row b.swap{ animation:swap .6s var(--out); }
@keyframes swap{ from{ opacity:0; transform:translateY(6px); } }
.sec{ display:inline-flex; gap:4px; vertical-align:middle; }
.sec i{ width:8px; height:8px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); transition:background .3s ease, transform .4s var(--out); }
.sec i.on{ background:#fff; border-color:#fff; animation:secPop .45s var(--out); }
@keyframes secPop{ from{ transform:scale(1.9); box-shadow:0 0 12px #fff; } }
.pass-stub{ position:relative; flex:1; padding:14px 10px; border-left:2px dashed rgba(255,255,255,.4); display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; }
.pass-no{ font-size:.56rem; font-weight:700; letter-spacing:.14em; opacity:.8; }
.pass-no b{ display:block; font-size:1.02rem; letter-spacing:.02em; opacity:1; }
.barcode{ width:70%; height:42%; border-radius:3px; background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 12px); opacity:.9; }
.pass-perk{ font-size:.56rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.holo{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.85;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.6) 32%, rgba(255,214,120,.5) 40%, rgba(140,220,255,.45) 48%, transparent 60%) no-repeat;
  background-size:250% 100%; background-position:var(--hx,100%) 0; transition:background-position .3s ease; }
.pass.sheen .holo{ animation:holo 1.6s var(--out); }
@keyframes holo{ from{ background-position:120% 0; } to{ background-position:-20% 0; } }
.scan{ position:absolute; left:0; right:0; top:0; height:3px; opacity:0; pointer-events:none; background:#fff; box-shadow:0 0 18px 6px rgba(255,255,255,.7); }
.pass.scanning .scan{ opacity:1; animation:scan .9s cubic-bezier(.65,0,.35,1) infinite alternate; }
.pass.denied .scan{ opacity:1; background:#FFB4C4; box-shadow:0 0 18px 6px rgba(255,80,110,.8); animation:scan .5s ease 2 alternate; }
@keyframes scan{ from{ top:4%; } to{ top:94%; } }
.pass.denied{ animation:deny .55s ease; }
@keyframes deny{ 20%,60%{ transform:translateX(-9px) rotate(-1deg); } 40%,80%{ transform:translateX(9px) rotate(1deg); } }
.stamp{ position:absolute; left:42%; top:50%; padding:7px 14px; border:3px solid #fff; border-radius:10px; font-weight:900; font-size:1.05rem; letter-spacing:.12em; white-space:nowrap; color:#fff;
  transform:translate(-50%,-50%) rotate(-10deg) scale(1.8); opacity:0; pointer-events:none; text-shadow:0 2px 10px rgba(0,0,0,.25); background:rgba(20,15,36,.22); }
.pass.granted .stamp{ animation:stampIn .5s cubic-bezier(.2,1,.3,1) forwards; }
@keyframes stampIn{ to{ opacity:1; transform:translate(-50%,-50%) rotate(-10deg) scale(1); } }
.b-logo{ width:46px; height:46px; border-radius:14px; background:url(/brand/feelo-mark.svg) center/72% no-repeat, #fff; color:#F43F6E; display:grid; place-items:center; font-weight:900; font-size:1.5rem; box-shadow:0 10px 24px -8px rgba(0,0,0,.5); margin-bottom:8px; }
.b-kicker{ font-size:.6rem; font-weight:800; letter-spacing:.24em; color:#FFD58A; }
.b-title{ font-size:clamp(1.3rem,5.4vw,1.75rem); font-weight:800; letter-spacing:-.02em; line-height:1.1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.b-sub{ font-size:.85rem; opacity:.8; }

/* ---------- the mascot on the pass ---------- */
.portrait{ flex:0 0 auto; width:clamp(52px,15vw,62px); height:clamp(52px,15vw,62px); border-radius:50%; box-shadow:0 8px 18px -8px rgba(0,0,0,.55); }
.mascot{ width:100%; height:100%; display:block; overflow:visible; }
.mascot .eyes{ transition:transform .28s var(--out); }
.mascot .blink{ transform-box:fill-box; transform-origin:50% 50%; animation:blink 4.6s infinite; }
@keyframes blink{ 0%,93%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.1); } }
.mascot .heye, .mascot .brow{ opacity:0; transition:opacity .25s ease; }
.mascot.happy .eyes{ opacity:0; } .mascot.happy .heye{ opacity:1; }
.mascot.sad .brow{ opacity:1; }
.mascot .hand{ transition:transform .55s var(--out); transform:translateY(34px); }
.mascot.cover .hand{ transform:translateY(0); }
.mascot.cover.peek .hand.l{ transform:translateY(9px) rotate(-12deg); }
.mascot .hand.l{ transform-box:fill-box; transform-origin:50% 100%; }
.mascot .mouth{ transition:d .35s var(--out); }
.mascot.wave .arm{ animation:wave 1.1s ease-in-out 2; }
.mascot .arm{ transform-box:fill-box; transform-origin:20% 100%; opacity:0; }
.mascot.wave .arm{ opacity:1; }
@keyframes wave{ 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-22deg); } 75%{ transform:rotate(14deg); } }

/* ---------- confetti and flash ---------- */
.burst{ position:absolute; left:50%; top:52%; width:0; height:0; z-index:5; pointer-events:none; }
.burst i{ position:absolute; left:0; top:0; width:8px; height:12px; border-radius:2px; opacity:0; animation:conf 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
.burst i.c{ width:8px; height:8px; border-radius:50%; }
@keyframes conf{ 0%{ opacity:1; transform:translate(-50%,-50%) rotate(0); } 100%{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); } }
.flash{ position:fixed; inset:0; z-index:40; pointer-events:none; background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.95), rgba(255,143,168,.45) 40%, transparent 70%); opacity:0; }
.flash.go{ animation:flash 1s ease forwards; }
@keyframes flash{ 35%{ opacity:1; } 100%{ opacity:0; } }
.pass-caption{ font-size:.86rem; font-weight:600; color:rgba(255,255,255,.6); text-align:center; min-height:1.3em; animation:rise 1s var(--out) 1.8s both; }
.pass-caption b{ color:#fff; }
.pass-caption.swap{ animation:swap .6s var(--out); }
@media(max-width:959px){ .pass-caption{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .emerge, .pass-float, .sky i, .sky b, .form-side > form > *, .mascot .blink{ animation:none !important; }
  .pass.scanning .scan{ animation:none; top:50%; }
}

/* ---------- the card reader (login): the pass is swiped through it ---------- */
.slot.reader{ height:36px; border-radius:12px; display:flex; align-items:center; gap:9px; padding:0 14px; background:linear-gradient(180deg,#221A38,#0B0716); }
.slot.reader span{ top:auto; bottom:3px; height:2px; }
.slot.reader small{ position:static; margin-left:auto; top:auto; }
.led{ width:9px; height:9px; border-radius:50%; background:#4B4466; box-shadow:inset 0 1px 1px rgba(0,0,0,.5); transition:background .3s ease, box-shadow .3s ease; }
.rd{ font-style:normal; font-family:ui-monospace,'Cascadia Mono','Courier New',monospace; font-size:.66rem; font-weight:700; letter-spacing:.18em; color:rgba(255,255,255,.55); transition:color .3s ease; }
.printer{ --bc:255,181,71; }
.printer.scanning .led{ background:#FFB547; box-shadow:0 0 10px 2px rgba(255,181,71,.8); animation:led .5s steps(2) infinite; }
.printer.scanning .rd{ color:#FFD58A; }
.printer.ok{ --bc:52,211,153; } .printer.ok .led{ background:#34D399; box-shadow:0 0 12px 3px rgba(52,211,153,.85); } .printer.ok .rd{ color:#8FF0C6; }
.printer.deny{ --bc:255,77,109; } .printer.deny .led{ background:#FF4D6D; box-shadow:0 0 12px 3px rgba(255,77,109,.85); } .printer.deny .rd{ color:#FF9CB0; }
@keyframes led{ 50%{ opacity:.35; } }
.beam{ position:absolute; left:7%; right:7%; top:32px; height:84px; z-index:4; pointer-events:none; opacity:0; mix-blend-mode:screen; transition:opacity .35s ease;
  background:linear-gradient(180deg, rgba(var(--bc),.7), rgba(var(--bc),.18) 45%, transparent); clip-path:polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.beam::before{ content:''; position:absolute; left:10%; right:10%; top:0; height:3px; border-radius:3px; background:rgb(var(--bc)); box-shadow:0 0 14px 4px rgba(var(--bc),.9); }
.printer.scanning .beam{ opacity:1; animation:beam .18s steps(2) infinite; }
.printer.ok .beam, .printer.deny .beam{ opacity:1; animation:beamOut .9s ease forwards; }
@keyframes beam{ 50%{ opacity:.75; } }
@keyframes beamOut{ 0%{ opacity:1; } 100%{ opacity:0; } }
.printer.has-reader .emerge{ clip-path:polygon(-30% 0, 130% 0, 130% 160%, -30% 160%); }
.printer.has-reader.free .emerge{ clip-path:none; }
.scanmove{ will-change:transform; }
.printer.scanning .scanmove{ animation:swipe 1.3s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes swipe{ 0%,100%{ transform:translateY(0); } 42%,58%{ transform:translateY(-44%); } }
@media (prefers-reduced-motion: reduce){ .printer.scanning .scanmove{ animation:none; } }

/* the agreement line above the signup button */
.legal-line{ margin:-8px 0 14px; font-size:.82rem; line-height:1.45; color:rgba(255,255,255,.62); }
.legal-line a{ color:#FF8FA8; font-weight:700; text-decoration:none; }
.legal-line a:hover{ text-decoration:underline; }