/* LoggerFlex sign-in stage (Views/Shared/_LoginStage3D.cshtml). Loaded only when that partial renders, i.e. on
   Account/Login for loggerflex.com hosts with no tenant profile. Every rule is scoped to .login-row.lf3d or
   .lf3d-pane, so no other page, tenant or layout element is touched. */

.login-row.lf3d {
  --lf3d-form-w: clamp(400px, 34vw, 500px);
  --lf3d-cyan: #00ccff;
  --lf3d-ink: #f4f7fb;
  --lf3d-ink-2: rgba(244, 247, 251, .74);
  --lf3d-ink-3: rgba(244, 247, 251, .5);
  --lf3d-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}

/* ---------------- desktop: the form at a comfortable fixed width, the stage takes the rest */
@media (min-width: 992px) {
  .login-row.lf3d > .left-pane { flex: 0 0 var(--lf3d-form-w); max-width: var(--lf3d-form-w); width: var(--lf3d-form-w); z-index: 2; }
  .login-row.lf3d > .lf3d-pane { flex: 1 1 0; max-width: none; width: auto; }
  /* the logo sits centred over the sign-in fields (owner, 2026-11-11); custom.css puts it in the top-left corner */
  .login-row.lf3d > .left-pane { padding-top: 92px; }
  .login-row.lf3d > .left-pane > .brand { top: 24px; left: 50%; right: auto; transform: translateX(-50%); }
}

.lf3d-pane {
  position: relative; overflow: hidden; isolation: isolate; min-width: 0; height: 100vh; height: 100dvh;
  background: url("img/backdrop.jpg") center / cover no-repeat, radial-gradient(120% 90% at 70% 35%, #0b1a3d 0%, #060d22 46%, #03060f 100%);
  font-family: var(--lf3d-font); color: var(--lf3d-ink);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.lf3d-pane::before {      /* soft seam against the black form pane */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 120px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, 0) 100%);
}
html[dir="rtl"] .lf3d-pane::before { inset: 0 0 0 auto; background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, 0) 100%); }
.lf3d-pane .stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; opacity: 0; transition: opacity .9s ease; touch-action: pan-y; cursor: grab; outline: none; }
.lf3d-pane .stage-canvas.is-live { opacity: 1; }
.lf3d-pane.is-dragging .stage-canvas { cursor: grabbing; }
.lf3d-pane .stage-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--lf3d-cyan); }
.lf3d-pane .stage-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.lf3d-pane .stage-ui > * { pointer-events: auto; }

/* ---------------- headline (also rendered by Razor before any script, as .lf3d-precopy) */
.lf3d-pane .st-copy { position: absolute; left: clamp(28px, 6%, 72px); top: clamp(28px, 7%, 72px); max-width: min(520px, 78%); pointer-events: none; z-index: 4; }
html[dir="rtl"] .lf3d-pane .st-copy { left: auto; right: clamp(28px, 6%, 72px); }
.lf3d-pane .st-eyebrow { margin: 0 0 12px; font: 600 12px/1 var(--lf3d-font); letter-spacing: .16em; text-transform: uppercase; color: var(--lf3d-cyan); }
.lf3d-pane .st-h { margin: 0; font: 800 clamp(30px, 3.3vw, 50px)/1.04 var(--lf3d-font); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.lf3d-pane .st-h span { background: linear-gradient(90deg, #00ccff, #6fe3ff 60%, #b9f2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lf3d-pane .st-line { margin: 16px 0 0; max-width: 40ch; font: 400 16px/1.5 var(--lf3d-font); color: var(--lf3d-ink-2); min-height: 4.5em; }
.lf3d-pane .st-line.in { animation: lf3dIn .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lf3dIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------------- chapter buttons */
.lf3d-pane .st-chips { position: absolute; left: 50%; bottom: clamp(20px, 4.5%, 44px); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px;
  border-radius: 999px; background: rgba(8, 16, 38, .55); border: 1px solid rgba(120, 190, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lf3d-pane .st-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; overflow: hidden;
  background: transparent; color: var(--lf3d-ink-2); font: 600 14px/1 var(--lf3d-font); cursor: pointer; transition: background .3s, color .3s; white-space: nowrap; }
.lf3d-pane .st-chip svg { width: 22px; height: 22px; flex: none; }
.lf3d-pane .st-chip:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.lf3d-pane .st-chip:focus-visible { outline: 2px solid var(--lf3d-cyan); outline-offset: 2px; }
.lf3d-pane .st-chip.on { color: #fff; background: rgba(0, 150, 255, .18); }
.lf3d-pane .st-chip.on svg { color: var(--lf3d-cyan); }
.lf3d-pane .st-chip i { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--lf3d-cyan); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; }
.lf3d-pane .st-chip.on i { opacity: .85; }
.lf3d-pane .ic-fallback { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid currentColor; font-size: 11px; }

/* ---------------- tags anchored in the scene */
.lf3d-pane .st-tags { position: absolute; inset: 0; pointer-events: none; }
.lf3d-pane .st-tag { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; white-space: nowrap; font: 500 13px/1.25 var(--lf3d-font); color: var(--lf3d-ink); }
.lf3d-pane .st-tag > * { vertical-align: -3px; }
.lf3d-pane .st-tag.orb { margin: -17px 0 0 -17px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--lf3d-cyan);
  background: rgba(6, 18, 44, .72); border: 1px solid rgba(0, 204, 255, .35); box-shadow: 0 0 18px rgba(0, 204, 255, .25); pointer-events: auto; cursor: default; transition: box-shadow .25s, background .25s; }
.lf3d-pane .st-tag.orb svg { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.lf3d-pane .st-tag.orb:hover { background: rgba(0, 60, 110, .9); box-shadow: 0 0 0 1px rgba(0, 204, 255, .9), 0 0 26px rgba(0, 204, 255, .55); z-index: 2; }
.lf3d-pane .st-tag.orb:hover svg { transform: scale(1.18); color: #fff; }
.lf3d-pane .st-tag.orb::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 9px); translate: -50% 4px; padding: 6px 10px; border-radius: 8px;
  background: rgba(6, 18, 44, .92); border: 1px solid rgba(0, 204, 255, .45); color: #fff; font: 600 13px/1 var(--lf3d-font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; }
.lf3d-pane .st-tag.orb:hover::after { opacity: 1; translate: -50% 0; }
.lf3d-pane .st-tag.t-limit { color: #ff8a8e; font-weight: 600; letter-spacing: .02em; }
.lf3d-pane .st-tag.t-now { color: var(--lf3d-ink-3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-left: -14px; }
.lf3d-pane .st-tag.t-amber, .lf3d-pane .st-tag.t-cyan, .lf3d-pane .st-tag.t-plain { padding: 8px 12px; border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); translate: -50% -100%; }
.lf3d-pane .st-tag.t-amber { background: rgba(60, 34, 4, .62); border: 1px solid rgba(255, 168, 38, .55); color: #ffe2b8; }
.lf3d-pane .st-tag.t-amber svg { color: #ffa826; }
.lf3d-pane .st-tag.t-cyan { background: rgba(0, 40, 80, .6); border: 1px solid rgba(0, 204, 255, .5); color: #d9f7ff; }
.lf3d-pane .st-tag.t-cyan svg { color: var(--lf3d-cyan); }
.lf3d-pane .st-tag.t-plain { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: var(--lf3d-ink-2); translate: -50% 0; }
.lf3d-pane .st-tag b { font-weight: 700; margin: 0 4px; color: #fff; }
.lf3d-pane .st-tag.pin i { display: inline-block; width: 7px; height: 7px; margin: -3.5px 6px 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(0, 204, 255, .25), 0 0 12px #00ccff; }
.lf3d-pane .st-ripple { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(0, 204, 255, .9); box-shadow: 0 0 18px rgba(0, 204, 255, .6); animation: lf3dRipple 1.1s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes lf3dRipple { to { transform: scale(14); opacity: 0; border-width: .5px; } }
.lf3d-pane .st-hint { position: absolute; left: 50%; bottom: calc(clamp(20px, 4.5%, 44px) + 64px); translate: -50% 0; margin: 0; font: 500 13px/1 var(--lf3d-font);
  color: rgba(244, 247, 251, .62); letter-spacing: .02em; pointer-events: none; transition: opacity .8s; }
.lf3d-pane .st-hint.gone { opacity: 0; }

/* ---------------- calendar occasions (season.js sets data-season on the pane) */
.lf3d-pane[data-season=xmas] .st-eyebrow { color: #ffcf6b; }
.lf3d-pane[data-season=xmas] .st-h span { background-image: linear-gradient(90deg, #ff5a63, #ffb35c 55%, #ffe3a3); }
.lf3d-pane[data-season=xmas] .st-chip.on svg { color: #ffcf6b; }
.lf3d-pane[data-season=xmas] .st-chip i { background: linear-gradient(90deg, #ff5a63, #ffcf6b, #2ee67a); }
.lf3d-pane[data-season=spring] .st-eyebrow { color: #5ff0a0; }
.lf3d-pane[data-season=spring] .st-h span { background-image: linear-gradient(90deg, #2ee67a, #8cf7b8 60%, #d6ffe6); }
.lf3d-pane[data-season=spring] .st-chip.on { background: rgba(46, 230, 122, .16); }
.lf3d-pane[data-season=spring] .st-chip.on svg, .lf3d-pane[data-season=spring] .st-tag.orb { color: #5ff0a0; }
.lf3d-pane[data-season=spring] .st-chip i { background: #5ff0a0; }

/* ---------------- phones and small tablets in a browser: the sign-in form first, exactly as before; the stage follows it
   (the page scrolls normally) and its scene only loads when the visitor scrolls near it (boot.js) */
@media (max-width: 991.98px) and (display-mode: browser) {
  .login-row.lf3d > .lf3d-pane { display: block; height: clamp(380px, 64svh, 560px); }
  .login-row.lf3d > .lf3d-pane::before { inset: 0 0 auto 0; width: auto; height: 90px; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 40%, rgba(0, 0, 0, 0) 100%); }
  .lf3d-pane .st-copy { left: 18px; right: 18px; top: 40px; max-width: none; }
  .lf3d-pane .st-eyebrow { display: block; margin-bottom: 8px; }
  .lf3d-pane .st-line, .lf3d-pane .st-hint { display: none; }
  .lf3d-pane .st-h { font-size: clamp(26px, 7vw, 34px); }
  .lf3d-pane .st-chips { bottom: 14px; gap: 2px; padding: 4px; max-width: calc(100% - 20px); }
  .lf3d-pane .st-chip { padding: 0 10px; gap: 0; }
  .lf3d-pane .st-chip span { display: none; }
  .lf3d-pane .st-chip.on span { display: inline; margin-left: 6px; }
  .lf3d-pane .st-tag.t-amber, .lf3d-pane .st-tag.t-cyan, .lf3d-pane .st-tag.t-plain { font-size: 11px; padding: 5px 8px; }
  .lf3d-pane .st-tag.orb { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .lf3d-pane .st-tag.orb svg { width: 14px; height: 14px; }
}
/* the installed app on a phone opens straight to the form, as today */
@media (max-width: 991.98px) and (not (display-mode: browser)) { .login-row.lf3d > .lf3d-pane { display: none; } }
@media (hover: none) { .lf3d-pane .st-tag.orb::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .lf3d-pane .st-ripple { animation-duration: .01s; } .lf3d-pane .st-line.in { animation: none; } }

/* ---------------- poster (shown at once; stays when WebGL2 is missing; fades out when the live scene starts) */
/* the still is only the fallback for browsers without WebGL2: everyone else sees the background and headline at once and the
   real device fades in only when it is fully loaded and drawn (owner, 2026-11-11: never a low-resolution device first).
   A hidden lazy image is not downloaded. */
.lf3d-pane .stage-poster { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lf3d-pane.no-webgl .stage-poster { display: block; }

/* ---------------- chapter buttons are links to loggerflex.com (new tab); spring grass */
.lf3d-pane a.st-chip { text-decoration: none; }
.lf3d-pane .st-grass { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 15%; pointer-events: none; overflow: visible; }
.lf3d-pane .st-grass path { transform-box: fill-box; transform-origin: 50% 100%; animation: lf3dSway 5s ease-in-out infinite alternate; }
.lf3d-pane .st-grass .g0 { fill: #1f9d55; } .lf3d-pane .st-grass .g1 { fill: #2ecc71; animation-duration: 6.5s; animation-delay: -2s; } .lf3d-pane .st-grass .g2 { fill: #157a42; animation-duration: 4.2s; animation-delay: -1s; }
@keyframes lf3dSway { from { transform: skewX(-5deg); } to { transform: skewX(6deg); } }
@media (prefers-reduced-motion: reduce) { .lf3d-pane .st-grass path { animation: none; } }