/* ============================================================================
   Log in (login.html). Grammar: a doorway. Two tall doors in their frames.
   On hover or keyboard focus (fine pointers for hover) a door swings a few
   degrees on its left hinge and the product behind shows through the gap.
   ========================================================================== */

.lg-in { min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem)) 0 clamp(3rem, 2rem + 3vw, 5rem); }
.lg-in__head { max-width: 40rem; }
.lg-in__head .lede { margin-top: var(--s-5); }

/* ----------------------------------------------------------------- doors -- */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.door { position: relative; display: block; height: clamp(380px, 20vw + 180px, 480px); padding: 10px; border-radius: var(--r-xl); background: var(--bg-dusk); border: 1px solid var(--line-2); box-shadow: inset 0 2px 18px hsl(var(--shadow-c) / 0.35); text-decoration: none; color: var(--ink); perspective: 1600px; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.door:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: var(--r-xl); }

/* what is behind the door: the real product, dim until the door opens */
.door__peek { position: absolute; inset: 10px; z-index: 0; border-radius: calc(var(--r-xl) - 8px); overflow: hidden; background: #05040a; }
.door__peek img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 0; opacity: 0.35; transform: scale(1.04); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.door__peek--room img { position: absolute; left: 38%; top: 0; width: 100%; height: 100%; object-position: 50% 50%; }
.door__peek .poster-light { display: none; }
:root[data-theme="light"] .door__peek { background: #e9e6f2; }
:root[data-theme="light"] .door__peek .poster-dark { display: none; }
:root[data-theme="light"] .door__peek .poster-light { display: block; }

/* the leaf */
.door__leaf { position: absolute; inset: 10px; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); border-radius: calc(var(--r-xl) - 8px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e2), var(--edge); transform-origin: 0 50%; transform: rotateY(0deg); transition: transform 760ms var(--ease-out), box-shadow 760ms var(--ease-out); will-change: transform; backface-visibility: hidden; }
/* two inset panels, the way a real door is built */
.door__leaf::before { content: ""; position: absolute; inset: clamp(1rem, 0.6rem + 1vw, 1.5rem); border-radius: var(--r-md); border: 1px solid var(--line); pointer-events: none; }
.door__top, .door__bottom { position: relative; }
.door__top { display: flex; align-items: center; gap: 12px; }
.door__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
.door__ico .i { width: 21px; height: 21px; }
.door__kind { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.door__handle { position: absolute; right: clamp(1.6rem, 1rem + 1.5vw, 2.6rem); top: 50%; width: 6px; height: 64px; margin-top: -32px; border-radius: 6px; background: var(--line-2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12); transition: background-color var(--d-3) var(--ease-out); }
.door__bottom { display: grid; justify-items: start; }
.door__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); letter-spacing: -0.032em; line-height: 1.04; }
.door__url { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-sm); color: var(--accent-text); letter-spacing: 0.01em; }
.door__desc { margin-top: var(--s-4); max-width: 38ch; font-size: var(--t-base); line-height: 1.55; color: var(--ink-2); }
.door__go { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); min-width: 60%; font-weight: 600; font-size: var(--t-sm); color: var(--ink); }
.door__go .i { width: 17px; height: 17px; color: var(--accent-text); transition: transform var(--d-2) var(--ease-out); }

/* open: hover (fine pointer) or keyboard focus */
.door:focus-visible .door__leaf { transform: rotateY(13deg); box-shadow: -18px 18px 50px -18px hsl(var(--shadow-c) / 0.7), var(--edge); }
.door:focus-visible .door__peek img { opacity: 0.95; transform: scale(1); }
.door:focus-visible .door__handle { background: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .door:hover .door__leaf { transform: rotateY(13deg); box-shadow: -18px 18px 50px -18px hsl(var(--shadow-c) / 0.7), var(--edge); }
  .door:hover .door__peek img { opacity: 0.95; transform: scale(1); }
  .door:hover .door__handle { background: var(--accent); }
  .door:hover .door__go .i { transform: translateX(3px); }
}
.door:active .door__leaf { transform: rotateY(13deg) scale(0.995); }

/* ------------------------------------------------------------ side doors -- */
.side-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1rem, 0.5rem + 2vw, 2.5rem); margin-top: var(--s-6); }
.side-doors a { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.side-doors__k { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.side-doors__v { font-weight: 600; }
.side-doors__v small { display: block; margin-top: 2px; font-family: var(--f-mono); font-weight: 400; font-size: 0.75rem; color: var(--ink-3); overflow-wrap: anywhere; }
.side-doors .i { color: var(--ink-3); transition: transform var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .side-doors a:hover .i { color: var(--accent-text); transform: translate(2px, -2px); } .side-doors a:hover .side-doors__v { text-decoration: underline; text-underline-offset: 0.2em; } }

.lg-in__foot { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s-6); color: var(--ink-3); }
.lg-in__foot .i { width: 16px; height: 16px; margin-top: 3px; }
.lg-in__foot a { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  .doors, .side-doors { grid-template-columns: 1fr; }
  .door { height: auto; min-height: 340px; }
  .door__leaf { position: relative; inset: auto; min-height: 320px; }
  .side-doors a { grid-template-columns: minmax(0, 1fr) auto; }
  .side-doors__k { grid-column: 1 / -1; }
  .side-doors .i { grid-column: 2; grid-row: 2; }
  .side-doors li + li a { border-top: 0; }
}
@media (max-width: 760px) {
  .lg-in { padding-top: calc(var(--nav-h) + 1.75rem); }
  .lg-in__head .d-1 { font-size: clamp(2.25rem, 10vw, 3rem); }
  .lg-in__head .lede { font-size: var(--t-base); }
  .door__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .door__handle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .door__leaf, .door__peek img { transition-duration: 1ms !important; }
  .door:focus-visible .door__leaf, .door:hover .door__leaf { transform: none !important; }
}

/* light theme: the frame is a soft recess, not a heavy grey border */
:root[data-theme="light"] .door { background: var(--bg-dusk); border-color: var(--line); box-shadow: inset 0 1px 8px hsl(var(--shadow-c) / 0.12); }