/* Waypeak 1.0.69 anim69: alpine sign-in scene (land43/hero69.js) for /login and the app's #auth screen.
   Only transform / opacity / short one-off SVG strokes; loops pause off screen (.h69-off).
   prefers-reduced-motion: reduce -> everything static (relief, chips with final numbers, no curtain). */
:root { --h69-ease: cubic-bezier(.22, 1, .36, 1); --h69-spring: cubic-bezier(.34, 1.56, .64, 1); --h69-inout: cubic-bezier(.65, 0, .35, 1); }

/* --- relief (behind the phones, under the text) ----------------------------------------------------------- */
.h69-relief { position: absolute; left: 0; right: 0; bottom: 0; height: auto; aspect-ratio: 10 / 3; max-height: 42%; z-index: -1; pointer-events: none; }
.h69-relief-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.h69-far { fill: #2b3f69; opacity: .5; }
.h69-facet { fill: #121c33; opacity: .32; }
.h69-snow { fill: #f3ecdf; opacity: .9; }
.h69-near { fill: #121c33; }
.h69-trail { fill: none; stroke: #f3ecdf; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 7; opacity: .7; }
.h69-trail-draw { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 100; stroke-dashoffset: 0; }
.h69-dot { fill: #e7c07a; }
.h69-ring { fill: none; stroke: #e7c07a; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.h69-glow { opacity: 1; }
.h43-compact .h43-route { display: none; } /* 1.0.69: no route line over the map mockup (own look, see RESUME anim69) */

/* --- live mini scenes next to the phones (desktop only; phones are hidden on small screens) ---------------- */
.h69-live { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.h69-chip { position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem .5rem .55rem; border-radius: 14px;
  background: rgba(18, 28, 51, .9); color: #f3ecdf; border: 1px solid rgba(243, 236, 223, .16); box-shadow: 0 14px 30px -14px rgba(3, 7, 18, .7);
  font-family: "Outfit", Arial, sans-serif; font-size: .95rem; line-height: 1; white-space: nowrap; }
.h69-chip b { font-weight: 650; font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; min-width: 1.6ch; }
.h69-chip i { font-style: normal; color: #aeb8cc; font-size: .85rem; }
.h69-chip-a { left: calc(6% - 26px); top: 54px; }
.h69-chip-b { left: calc(50% + 150px); top: 292px; padding-right: .9rem; }
.h69-plus { position: absolute; right: -10px; top: -10px; font-size: .72rem; font-weight: 700; color: #1b2a4a; background: #e7c07a; border-radius: 999px; padding: .2rem .38rem; opacity: 0; transform: scale(.4); }
.h69-live.is-done .h69-plus { opacity: 1; transform: none; }
.h69-globe, .h69-peak { width: 26px; height: 26px; flex: none; display: block; }
.h69-globe-sea { fill: #3b5f8f; }
.h69-globe-land { fill: #e7c07a; }
.h69-globe-mer { fill: none; stroke: rgba(243, 236, 223, .28); stroke-width: .6; }
.h69-globe-lat { fill: none; stroke: rgba(243, 236, 223, .22); stroke-width: .6; }
.h69-globe-rim { fill: none; stroke: rgba(243, 236, 223, .55); stroke-width: 1; }
.h69-peak-m { fill: #f3ecdf; }
.h69-peak-s { fill: #e7c07a; }
.h69-bar { position: absolute; left: .7rem; right: .7rem; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(243, 236, 223, .14); overflow: hidden; }
.h69-bar span { display: block; height: 100%; width: 100%; background: #e7c07a; transform-origin: left center; transform: scaleX(1); }

/* postcard that flips (front: own alpine drawing, back: stamp + lines) */
.h69-card { position: absolute; left: 33%; top: 352px; width: 132px; height: 88px; perspective: 600px; transform: rotate(-5deg); }
.h69-card-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.h69-card-face { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 16px 30px -14px rgba(3, 7, 18, .75); border: 3px solid #fffaf3; background: #fffaf3; }
.h69-card-front svg { display: block; width: 100%; height: 100%; }
.h69-pc-sky { fill: #3b5f8f; } .h69-pc-sun { fill: #e7c07a; } .h69-pc-m1 { fill: #1b2a4a; } .h69-pc-snow { fill: #f3ecdf; } .h69-pc-m2 { fill: #24365c; }
.h69-card-back { transform: rotateY(180deg); padding: 9px; }
.h69-pc-stamp { position: absolute; right: 8px; top: 8px; width: 24px; height: 28px; display: grid; place-items: center; background: #1b2a4a; outline: 2px dotted #fffaf3; outline-offset: -2px; border-radius: 2px; }
.h69-pc-stamp .h69-peak { width: 18px; height: 18px; }
.h69-pc-mark { position: absolute; right: 22px; top: 22px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(184, 67, 36, .55); }
.h69-pc-line { display: block; width: 46%; height: 3px; margin: 12px 0 0 54%; border-radius: 2px; background: #cdbfa8; }
.h69-pc-line:first-of-type { margin-top: 40px; }
.h69-pc-line.s { width: 30%; }
.h69-pc-div { position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px; background: #ddcfb8; }
.h69-pc-div::before { content: ""; position: absolute; right: 12px; top: 6px; width: 40px; height: 3px; border-radius: 2px; background: #cdbfa8; box-shadow: 0 9px 0 #cdbfa8, 0 18px 0 #cdbfa8, -6px 27px 0 #cdbfa8; }

/* glint over the map mockup ("scratched free") */
.h69-glint { position: absolute; inset: -20% -60%; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 225, .38) 48%, rgba(255, 246, 225, .0) 58%); transform: translateX(-70%); opacity: 0; }

/* --- forms: focus, error, busy ------------------------------------------------------------------------------------- */
.l43-login .beta-form input, #auth-form input { transition: border-color .18s ease, box-shadow .24s var(--h69-ease), background-color .18s ease; }
.l43-login .beta-form input:focus, #auth-form input:focus { box-shadow: 0 0 0 4px rgba(184, 67, 36, .14); border-color: #b84324; }
.l43-login .beta-form label span, #auth-form label > span { transition: color .18s ease; }
.l43-login .beta-form label:focus-within > span, #auth-form label:focus-within > span { color: #b84324; }
.h69-bad input:not(:focus) { border-color: rgba(184, 67, 36, .7); }
.l43-login .beta-btn.primary, #auth-submit { position: relative; transition: transform .18s var(--h69-spring), box-shadow .22s ease, background-color .15s ease; }
.l43-login .beta-btn.primary:hover:not(:disabled), #auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(184, 67, 36, .75); }
.l43-login .beta-btn.primary:active:not(:disabled), #auth-submit:active:not(:disabled) { transform: translateY(0) scale(.985); box-shadow: none; transition-duration: .08s; }
.h69-busy button[type="submit"] { color: transparent !important; }
.h69-busy button[type="submit"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .95); border-right-color: transparent; }

/* --- exit curtain (wp69.leave) ------------------------------------------------------------------------------------ */
.h69-curtain { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: radial-gradient(110% 80% at 50% 48%, #24365c 0%, #1b2a4a 48%, #121c33 100%);
  clip-path: circle(0 at var(--h69-x, 50%) var(--h69-y, 50%)); animation: h69-open .56s var(--h69-inout) forwards; }
.h69-curtain-peak { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -40px 0 0 -32px; opacity: 0; animation: h69-fade .3s .26s ease forwards; }
.h69-curtain-peak .h69-peak { width: 100%; height: 100%; }

/* --- motion -------------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* headline: lines rise out of a wipe (replaces the 1.0.43 fade on the sign-in hero) */
  .h43-compact .h43-line { animation: h69-line .9s .05s var(--h69-ease) both; }
  .h43-compact .h43-line + .h43-line { animation-delay: .17s; }
  .h43-compact .h43-rule { animation: h69-rule .8s .45s var(--h69-ease) both; }
  .h43-compact .h43-sub { animation: h69-up .8s .38s var(--h69-ease) both; }
  .l43-login .l43-auth { animation: h69-card .8s .12s var(--h69-ease) both; }

  .h69 .h43-topo-a path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: h69-contour 3.2s calc(var(--h69-i, 0) * 90ms + .1s) cubic-bezier(.45, .05, .25, 1) forwards; }
  .h69-relief { animation: h69-rise 1.4s .05s var(--h69-ease) both; }
  .h69-glow { animation: h69-fade 2.4s .6s ease both; }
  .h69-trail-draw { stroke-dashoffset: 100; animation: h69-draw 2.6s .9s cubic-bezier(.45, .05, .25, 1) forwards; }
  .h69-dot { transform-box: fill-box; transform-origin: center; animation: h69-pop .6s 3.2s var(--h69-spring) both; }
  .h69-ring { animation: h69-ring 3.2s 3.4s ease-out infinite; }
  .h69-ring2 { animation-delay: 5s; }

  .h69-chip-a { animation: h69-chip .8s 1.25s var(--h69-spring) both, h69-bob 6s 2.2s ease-in-out infinite; }
  .h69-chip-b { animation: h69-chip .8s 1.45s var(--h69-spring) both, h69-bob 7s 2.6s ease-in-out infinite reverse; }
  .h69-globe-spin { animation: h69-spin 9s linear infinite; }
  .h69-live.is-plus .h69-plus { animation: h69-plus .9s var(--h69-spring) both; }
  .h69-bar span { transform: scaleX(0); animation: h69-bar 1.5s 1.5s cubic-bezier(.3, .6, .2, 1) forwards; }
  .h69-card { animation: h69-chip .9s 1.7s var(--h69-spring) both; }
  .h69-card-in { animation: h69-flip 7s 3s var(--h69-inout) infinite; }
  .h69-glint { animation: h69-glint 9s 2s ease-in-out infinite; }
  .h69-off .h69-ring, .h69-off .h69-chip, .h69-off .h69-globe-spin, .h69-off .h69-card-in, .h69-off .h69-glint { animation-play-state: paused; }

  .h69-shake { animation: h69-shake .42s cubic-bezier(.36, .07, .19, .97) both; }
  .h69-busy button[type="submit"]::after { animation: h69-spin .7s linear infinite; }
  html.h69-leaving .l43-auth, html.h69-leaving #auth-form { transition: transform .4s var(--h69-ease), opacity .3s ease; transform: scale(.98); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .h69-ring { opacity: 0; }
  .h69-curtain { display: none; }
}

@keyframes h69-line { from { transform: translateY(.55em); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(-.4em -.4em -.4em -.4em); } }
@keyframes h69-up { from { opacity: .001; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes h69-rule { from { transform: scaleX(0); } 60% { transform: scaleX(1.12); } to { transform: scaleX(1); } }
@keyframes h69-card { from { opacity: .001; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes h69-contour { to { stroke-dashoffset: 0; } }
@keyframes h69-rise { from { transform: translateY(14%); opacity: .001; } to { transform: none; opacity: 1; } }
@keyframes h69-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes h69-draw { to { stroke-dashoffset: 0; } }
@keyframes h69-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes h69-ring { 0% { opacity: .9; transform: scale(.5); } 70% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes h69-chip { from { opacity: .001; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes h69-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes h69-spin { to { transform: rotate(360deg); } }
@keyframes h69-plus { 0% { opacity: 0; transform: translateY(6px) scale(.4); } 60% { opacity: 1; transform: translateY(-2px) scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes h69-bar { to { transform: scaleX(1); } }
@keyframes h69-flip { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes h69-glint { 0% { transform: translateX(-70%); opacity: 0; } 4% { opacity: 1; } 16% { transform: translateX(70%); opacity: 0; } 100% { transform: translateX(70%); opacity: 0; } }
@keyframes h69-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes h69-open { to { clip-path: circle(150vmax at var(--h69-x, 50%) var(--h69-y, 50%)); } }

/* globe spin: the land strip moves sideways (32 units = one turn) */
.h69-globe-spin { transform-box: view-box; }
@keyframes h69-spin-x { to { transform: translateX(-32px); } }
@media (prefers-reduced-motion: no-preference) { .h69-globe-spin { animation-name: h69-spin-x; } }

/* --- small screens: phones (and so the chips) are hidden; the relief stays as a low band ------------------- */
@media (max-width: 860px) {
  .h69-relief { height: 30vw; max-height: 170px; opacity: .85; }
  .h43-compact .h43-inner { position: relative; }
}

/* --- 1.0.69 land69: the same scene on the landing hero (.h43-scene, bigger phones -> own chip / card spots) --- */
.h43-scene .h43-route { display: none; }
.h43-scene .h69-chip-a { left: calc(8% - 34px); top: 74px; }
.h43-scene .h69-chip-b { left: calc(52% + 132px); top: 430px; }
.h43-scene .h69-card { left: 29%; top: 452px; }
@media (prefers-reduced-motion: no-preference) {
  .h43-scene .h43-rule { animation: h69-rule .8s .45s var(--h69-ease) both; }
}
@media (max-width: 860px) {
  /* login / app poster: the relief band sat on the last subtitle line on narrow phones -> keep the text above it */
  .h43-compact .h43-inner { padding-bottom: calc(1.4rem + min(30vw, 170px) * .72); }
  .h43-scene .h69-live { display: none; }
  .h43-scene .h69-relief { max-height: 150px; }
}
.h43-scene .h69-relief { aspect-ratio: auto; height: min(36%, 300px); max-height: none; }
.h43-scene .h69-relief { right: -10%; } /* summit + trail sit right of the phones instead of behind them */
@media (max-width: 860px) {
  .h43-scene .h69-relief { right: 0; }
  .h43-scene .h43-phones { height: 456px; margin: 1.2rem auto 0; }
}
/* land69: the altitude chip hangs off the right edge of the phones, never off the screen (1024 px) */
.h43-scene .h69-chip-b { left: auto; right: 0; }