/* Tsukiro 2.6.2 — distinct, stable 3D scenes for sign-in and registration. */
#authGuest.auth-studio {
  --auth-rx: 0deg;
  --auth-ry: 0deg;
  --auth-accent: #ff4fa3;
  --auth-violet: #8b5cf6;
  grid-template-columns: minmax(0, 1.24fr) minmax(390px, .76fr);
  min-height: 760px;
  isolation: isolate;
}

#authGuest .auth-studio-visual {
  display: block;
  min-height: 760px;
  perspective: 1500px;
  background: #08080d;
}

.auth-v262-space {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle at 17% 18%, rgba(255, 79, 163, .18), transparent 24%),
    radial-gradient(circle at 83% 26%, rgba(139, 92, 246, .2), transparent 28%),
    radial-gradient(circle at 48% 83%, rgba(54, 100, 230, .1), transparent 30%),
    linear-gradient(145deg, #12101a, #07070b 72%);
  transform: translateZ(-80px) scale(1.08);
}

.auth-v262-space::before,
.auth-v262-space::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-v262-space::before {
  background-image:
    linear-gradient(rgba(174, 114, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 79, 163, .025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 45%, #000 10%, transparent 72%);
  transform: perspective(700px) rotateX(61deg) translateY(16%);
  transform-origin: bottom;
}

.auth-v262-space::after {
  background: linear-gradient(90deg, transparent 62%, rgba(8, 8, 13, .92)), linear-gradient(0deg, rgba(8, 8, 13, .96), transparent 42%);
}

.auth-v262-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: opacity .5s ease, transform .65s cubic-bezier(.2, .75, .2, 1), visibility .5s;
}

.auth-v262-login-scene {
  opacity: 1;
  visibility: visible;
  transform: rotateX(var(--auth-rx)) rotateY(var(--auth-ry));
}

.auth-v262-register-scene {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(28px, 0, -60px) rotateX(var(--auth-rx)) rotateY(var(--auth-ry));
}

#authGuest[data-auth-mode="register"] .auth-v262-login-scene {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-28px, 0, -60px) rotateX(var(--auth-rx)) rotateY(var(--auth-ry));
}

#authGuest[data-auth-mode="register"] .auth-v262-register-scene {
  opacity: 1;
  visibility: visible;
  transform: rotateX(var(--auth-rx)) rotateY(var(--auth-ry));
}

.auth-v262-login-copy,
.auth-v262-register-copy {
  position: absolute;
  z-index: 3;
  left: clamp(34px, 5vw, 76px);
  top: clamp(48px, 7vh, 76px);
  max-width: 610px;
  transform: translateZ(55px);
}

.auth-v262-login-copy > span,
.auth-v262-register-copy > span {
  color: #df79b0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.auth-v262-login-copy h1,
.auth-v262-register-copy h1 {
  margin: 13px 0 16px;
  font-size: clamp(52px, 6vw, 88px);
  line-height: .91;
  letter-spacing: -.07em;
}

.auth-v262-login-copy p,
.auth-v262-register-copy p {
  max-width: 480px;
  margin: 0;
  color: #a19eaa;
  font-size: 14px;
  line-height: 1.6;
}

.auth-v262-orbit {
  position: absolute;
  z-index: 2;
  right: clamp(46px, 7vw, 116px);
  top: 292px;
  width: 310px;
  height: 310px;
  transform-style: preserve-3d;
  transform: translateZ(30px) rotateX(63deg) rotateZ(-12deg);
}

.auth-v262-orbit-ring {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(205, 114, 255, .28);
  border-radius: 50%;
  box-shadow: inset 0 0 48px rgba(139, 92, 246, .05);
}

.auth-v262-orbit-ring-b { inset: 27%; border-color: rgba(255, 79, 163, .36); transform: translateZ(34px); }
.auth-v262-orbit-core { position: absolute; inset: 37%; display: grid; place-items: center; border: 1px solid rgba(255, 92, 174, .24); border-radius: 30%; background: linear-gradient(145deg, #221827, #0d0c12); box-shadow: 0 24px 70px rgba(0, 0, 0, .52); transform: translateZ(72px) rotateZ(12deg) rotateX(-63deg); }
.auth-v262-orbit-core img { width: 42px; height: 42px; }
.auth-v262-orbit-core b { margin-top: -8px; color: #a788b0; font-size: 7px; letter-spacing: .16em; }
.auth-v262-orbit-chip { position: absolute; display: grid; gap: 4px; min-width: 150px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(19, 17, 25, .94); box-shadow: 0 20px 55px rgba(0, 0, 0, .4); transform: rotateZ(12deg) rotateX(-63deg); }
.auth-v262-orbit-chip small { color: #73707c; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.auth-v262-orbit-chip strong { font-size: 11px; }
.auth-v262-orbit-chip-a { left: -23px; top: 50%; transform: translateZ(80px) rotateZ(12deg) rotateX(-63deg); }
.auth-v262-orbit-chip-b { right: -25px; top: 16%; transform: translateZ(48px) rotateZ(12deg) rotateX(-63deg); }

.auth-v262-resume-card {
  position: absolute;
  z-index: 4;
  left: clamp(34px, 5vw, 76px);
  right: clamp(38px, 5.5vw, 86px);
  bottom: 52px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 15px;
  min-height: 96px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(25, 21, 31, .94), rgba(12, 11, 16, .96));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .4);
  transform: translateZ(76px) rotateX(-1deg);
}

.auth-v262-resume-poster { width: 66px; height: 70px; border-radius: 13px; background: linear-gradient(135deg, rgba(255, 79, 163, .72), rgba(139, 92, 246, .42) 52%, #15121c); }
.auth-v262-resume-card div:nth-child(2) { min-width: 0; }
.auth-v262-resume-card small, .auth-v262-resume-card strong, .auth-v262-resume-card span { display: block; }
.auth-v262-resume-card small { color: #7c7885; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.auth-v262-resume-card strong { margin-top: 5px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.auth-v262-resume-card span { margin-top: 7px; color: #85818d; font-size: 9px; }
.auth-v262-resume-card span i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #58d699; box-shadow: 0 0 12px rgba(88, 214, 153, .35); }
.auth-v262-resume-card > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(135deg, rgba(255, 79, 163, .92), rgba(139, 92, 246, .82)); font-size: 12px; }

.auth-v262-feature-ribbon {
  position: absolute;
  z-index: 3;
  left: clamp(34px, 5vw, 76px);
  right: clamp(40px, 6vw, 100px);
  top: 320px;
  display: grid;
  gap: 10px;
  perspective: 1300px;
  transform-style: preserve-3d;
}

.auth-v262-feature-ribbon article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: linear-gradient(105deg, rgba(25, 21, 31, .96), rgba(12, 11, 17, .92));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .32);
  transform: translate3d(calc(var(--i) * 15px), 0, calc((3 - var(--i)) * 20px)) rotateY(-7deg);
  transform-origin: left center;
}

.auth-v262-feature-ribbon article:nth-child(even) { border-color: rgba(170, 106, 246, .13); }
.auth-v262-feature-ribbon article > b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 79, 163, .08); color: #e989bb; font-size: 10px; }
.auth-v262-feature-ribbon small, .auth-v262-feature-ribbon strong, .auth-v262-feature-ribbon span { display: block; }
.auth-v262-feature-ribbon small { color: #d477aa; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.auth-v262-feature-ribbon strong { margin-top: 4px; font-size: 12px; }
.auth-v262-feature-ribbon span { margin-top: 4px; color: #777480; font-size: 9px; }
.auth-v262-register-status { position: absolute; z-index: 4; right: clamp(40px, 6vw, 100px); bottom: 35px; display: grid; grid-template-columns: 8px auto; gap: 2px 9px; padding: 11px 14px; border: 1px solid rgba(84, 212, 151, .12); border-radius: 13px; background: rgba(11, 16, 15, .76); transform: translateZ(65px); }
.auth-v262-register-status > span { grid-row: 1 / 3; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: #58d699; box-shadow: 0 0 14px rgba(88, 214, 153, .4); }
.auth-v262-register-status b { font-size: 9px; }
.auth-v262-register-status small { color: #6e7773; font-size: 8px; }

#authGuest .auth-studio-panel { position: relative; z-index: 5; transition: background .45s ease; }
#authGuest[data-auth-mode="register"] .auth-studio-panel { background: radial-gradient(circle at 100% 0, rgba(139, 92, 246, .15), transparent 28%), linear-gradient(155deg, #131119, #0b0b10 70%); }
#authGuest .auth-studio-heading h2, #authGuest .auth-studio-heading p, #authGuest .auth-studio-heading .eyebrow { transition: opacity .2s ease, transform .25s ease; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .auth-v262-orbit { animation: authV262Orbit 11s ease-in-out infinite alternate; }
  .auth-v262-feature-ribbon article { animation: authV262Ribbon 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1s); }
}

@keyframes authV262Orbit { from { translate: 0 -3px; } to { translate: 0 7px; } }
@keyframes authV262Ribbon { from { margin-left: 0; } to { margin-left: 8px; } }

@media (max-width: 1000px) {
  #authGuest.auth-studio { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); }
  .auth-v262-login-copy h1, .auth-v262-register-copy h1 { font-size: 58px; }
  .auth-v262-orbit { right: 20px; width: 250px; height: 250px; }
  .auth-v262-feature-ribbon { right: 38px; }
}

@media (max-width: 820px) {
  #authGuest.auth-studio { grid-template-columns: 1fr; border-radius: 25px; }
  #authGuest .auth-studio-visual { display: block !important; min-height: 320px; }
  .auth-v262-login-copy, .auth-v262-register-copy { left: 24px; top: 28px; right: 24px; }
  .auth-v262-login-copy h1, .auth-v262-register-copy h1 { margin-top: 8px; font-size: clamp(38px, 11vw, 54px); }
  .auth-v262-login-copy p, .auth-v262-register-copy p { font-size: 11px; }
  .auth-v262-orbit { right: -18px; top: 112px; width: 190px; height: 190px; opacity: .82; }
  .auth-v262-orbit-chip { display: none; }
  .auth-v262-resume-card { left: 24px; right: 24px; bottom: 20px; min-height: 78px; grid-template-columns: 50px minmax(0, 1fr) 36px; }
  .auth-v262-resume-poster { width: 50px; height: 52px; }
  .auth-v262-resume-card > b { width: 34px; height: 34px; }
  .auth-v262-feature-ribbon { left: 24px; right: 24px; top: 142px; gap: 6px; }
  .auth-v262-feature-ribbon article { min-height: 36px; grid-template-columns: 30px 1fr; padding: 7px 10px; border-radius: 12px; transform: translate3d(calc(var(--i) * 4px), 0, 0); }
  .auth-v262-feature-ribbon article > b { width: 27px; height: 27px; border-radius: 8px; }
  .auth-v262-feature-ribbon span { display: none; }
  .auth-v262-register-status { display: none; }
  #authGuest .auth-studio-panel { min-height: 0; padding-top: 32px; }
}

@media (max-width: 520px) {
  #authGuest.auth-studio { margin-inline: -4px !important; }
  #authGuest .auth-studio-visual { min-height: 300px; }
  .auth-v262-login-copy h1, .auth-v262-register-copy h1 { font-size: 40px; }
  .auth-v262-resume-card { grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 10px; padding: 10px; }
  .auth-v262-resume-poster { width: 44px; height: 48px; }
  .auth-v262-resume-card strong { font-size: 11px; }
  .auth-v262-resume-card span { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #authGuest.auth-studio { --auth-rx: 0deg !important; --auth-ry: 0deg !important; }
  .auth-v262-scene, .auth-v262-orbit, .auth-v262-feature-ribbon article { animation: none !important; transition: none !important; }
}