/* ============ SIGN-IN PAGES: ANIMATED BRANDING PANEL ============
   Shared by login.php, register.php, forgot_password.php and reset_password.php, loaded after
   the page's own stylesheet (login.css / register.css hold the base two-panel layout).
   Panel markup: includes/auth_panel.php · behaviour: assets/js/auth.js

   --intro is when the panel's text starts appearing: on the login page it waits for the seal
   to finish rolling in (body.auth-roll), elsewhere it starts right away. */
:root { --intro: .1s; }
body.auth-roll { --intro: .75s; }

/* ---------- Seal ----------
   Three layers so each movement has its own transform:
   .logo-stage  floats once the seal has landed; sends out a ring when it stops
   .logo-roll   slides in from the left edge and carries the shadows (which must not spin)
   .left-logo   spins as it rolls; --roll-x / --roll-deg are measured in auth.js */
.logo-stage {
  --roll-x: 60vw;
  --roll-deg: 720deg;
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
  transition: translate .4s ease-out;
  animation: float 6s ease-in-out calc(var(--intro) + .75s) infinite;
}
.logo-roll {
  position: relative;
  border-radius: 50%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: logo-pop .7s cubic-bezier(.34,1.56,.64,1) both;
}
.left-logo {
  display: block;
  width: 140px; height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
  box-shadow: none;
  animation: none;
}
@keyframes logo-pop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Login page: the seal rolls in. Move and spin share keyframe timing, so the turn always
   matches the distance travelled; the small overshoot (6px ≈ 5° on a 70px radius) is the
   seal settling into place. */
.rolls .logo-roll  { animation: logo-move .95s both; }
.rolls .left-logo  { animation: logo-spin .95s both; }
@keyframes logo-move {
  0%   { transform: translateX(calc(-1 * var(--roll-x))); animation-timing-function: cubic-bezier(.25,.7,.35,1); }
  82%  { transform: translateX(6px); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0); }
}
@keyframes logo-spin {
  0%   { transform: rotate(calc(-1 * var(--roll-deg))); animation-timing-function: cubic-bezier(.25,.7,.35,1); }
  82%  { transform: rotate(5deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0); }
}

/* Ground shadow: rides along under the rolling seal and spreads when it lands */
.logo-roll::after {
  content: '';
  position: absolute;
  left: 15%; right: 15%;
  bottom: -22px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2,6,23,0.55), transparent);
  pointer-events: none;
}
.rolls .logo-roll::after { animation: ground-land .95s both; }
@keyframes ground-land {
  0%   { transform: scaleX(.9); opacity: .6; }
  82%  { transform: scaleX(1.25); opacity: 1; }
  100% { transform: scaleX(1); opacity: .85; }
}

/* Ring that ripples out when the rolling seal stops */
.logo-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(147,197,253,0.7);
  opacity: 0;
  pointer-events: none;
}
.rolls::before { animation: logo-ring .9s cubic-bezier(.22,1,.36,1) .8s 1; }
@keyframes logo-ring {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.55); }
}

/* Dashed orbit that appears around the seal and turns slowly */
.logo-stage::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px dashed rgba(191,219,254,0.35);
  pointer-events: none;
  animation: orbit-in .8s ease-out calc(var(--intro) + .35s) both, orbit 30s linear calc(var(--intro) + .35s) infinite;
}
@keyframes orbit-in {
  from { opacity: 0; scale: .8; }
  to   { opacity: 1; scale: 1; }
}
@keyframes orbit {
  to { transform: rotate(360deg); }
}

/* While signing in, the seal turns as the loading sign (auth.js adds .signing-in) */
.signing-in .left-logo { animation: spin-wait 1.1s cubic-bezier(.45,.05,.55,.95) infinite; }
.signing-in .logo-stage::after { border-color: rgba(191,219,254,0.7); animation: orbit 3s linear infinite; }
.signing-in .right-panel .login-form { opacity: .6; transform: scale(.99); transition: opacity .2s ease-out, transform .2s ease-out; pointer-events: none; }
@keyframes spin-wait {
  to { transform: rotate(360deg); }
}

/* ---------- Text, features and form ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Title: rises in, then a light sweeps across the letters every few seconds */
.left-title {
  background: linear-gradient(100deg, #fff 40%, #bfdbfe 50%, #fff 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rise-in .6s ease-out var(--intro) both, title-shine 1.6s ease-in-out calc(var(--intro) + .6s) 1;
}
@keyframes title-shine {
  0%        { background-position: 100% 0; }
  25%, 100% { background-position: 0 0; }
}
.left-subtitle { animation: rise-in .6s ease-out calc(var(--intro) + .15s) both; }

.left-feature {
  transition: background .2s, border-color .2s, translate .2s;
  animation: rise-in .55s ease-out both;
}
.left-feature:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(147,197,253,0.25);
  translate: 4px 0;
}
.left-feature:nth-child(1) { animation-delay: calc(var(--intro) + .2s); }
.left-feature:nth-child(2) { animation-delay: calc(var(--intro) + .28s); }
.left-feature:nth-child(3) { animation-delay: calc(var(--intro) + .36s); }
/* Feature icons pop in with their card */
.left-feature-icon { display: inline-flex; animation: pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.left-feature:nth-child(1) .left-feature-icon { animation-delay: calc(var(--intro) + .45s); }
.left-feature:nth-child(2) .left-feature-icon { animation-delay: calc(var(--intro) + .57s); }
.left-feature:nth-child(3) .left-feature-icon { animation-delay: calc(var(--intro) + .69s); }
@keyframes pop {
  from { opacity: 0; transform: scale(.3) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* The form appears quickly, so residents can start typing right away:
   each part rises a few pixels, 40 ms apart, and everything is in place by about 0.5 s */
@keyframes form-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-form > * { animation: form-in .4s cubic-bezier(.22,1,.36,1) both; }
.login-form > :nth-child(1) { animation-delay: .05s; }
.login-form > :nth-child(2) { animation-delay: .09s; }
.login-form > :nth-child(3) { animation-delay: .13s; }
.login-form > :nth-child(4) { animation-delay: .17s; }
.login-form > :nth-child(5) { animation-delay: .21s; }
.login-form > :nth-child(6) { animation-delay: .25s; }
.login-form > :nth-child(7) { animation-delay: .29s; }
.login-form > :nth-child(8) { animation-delay: .33s; }
.login-form > .error-box { animation: form-in .4s cubic-bezier(.22,1,.36,1) .1s both, shake .4s ease-in-out .45s; }
@keyframes shake {
  0%, 100% { translate: 0; }
  20%, 60% { translate: -6px 0; }
  40%, 80% { translate: 6px 0; }
}

/* Focus: the ring grows in and the field's label turns blue (no jumping, so typing feels steady) */
.form-group input { transition: border-color .15s ease-out, box-shadow .2s cubic-bezier(.22,1,.36,1), background-color .15s ease-out; }
.form-group input:focus { box-shadow: 0 0 0 4px rgba(59,130,246,0.14); }
.form-group label { transition: color .15s ease-out; }
.form-group:focus-within label { color: #1d4ed8; }

/* Show/hide password: the eye icon swaps with a quick pop (login.php adds .flip) */
.toggle-password { display: inline-flex; transition: color .15s; }
.toggle-password:hover { color: #3b82f6 !important; }
.toggle-password.flip svg { animation: eye-flip .22s cubic-bezier(.22,1,.36,1); }
@keyframes eye-flip {
  from { opacity: 0; transform: scale(.6) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* Button press: a small, quick squeeze so a click feels answered */
.btn-login { transition: transform .15s ease-out, box-shadow .2s ease-out; }
.btn-login:active { transform: scale(.97); transition-duration: .08s; }

/* Buttons: a light sweeps across on hover; the arrow nudges forward */
.btn-login, .btn-submit { position: relative; overflow: hidden; }
.btn-login::after, .btn-submit::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-login:hover::after, .btn-submit:hover::after { left: 120%; }
.btn-arrow { display: inline-block; transition: transform .25s ease; }
.btn-login:hover .btn-arrow, .btn-submit:hover .btn-arrow { transform: translateX(5px); }

/* ---------- Panel background ---------- */
/* The two soft glows drift slowly and follow the mouse a little (auth.js sets --px / --py) */
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 30px) scale(1.12); }
}
.left-panel::before {
  translate: calc(var(--px, 0) * 28px) calc(var(--py, 0) * 28px);
  transition: translate .5s ease-out;
  animation: drift 14s ease-in-out infinite;
}
.left-panel::after {
  translate: calc(var(--px, 0) * -20px) calc(var(--py, 0) * -20px);
  transition: translate .5s ease-out;
  animation: drift 18s ease-in-out infinite reverse;
}
.logo-stage { translate: calc(var(--px, 0) * -8px) calc(var(--py, 0) * -8px); }

/* Optional photo of the barangay behind the gradient: drop it at assets/login-bg.jpg */
.panel-photo {
  position: absolute;
  inset: -4%;
  background: var(--photo) center / cover no-repeat;
  opacity: .18;
  mix-blend-mode: luminosity;
  pointer-events: none;
  animation: slow-zoom 30s ease-in-out infinite alternate;
}
@keyframes slow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

/* Specks of light drifting up the panel (positions and speeds set in auth_panel.php) */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 14px);
  transition: translate .5s ease-out;
}
.particles span {
  position: absolute;
  bottom: -12px;
  left: var(--x);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: rgba(191,219,254,0.55);
  box-shadow: 0 0 10px rgba(147,197,253,0.6);
  animation: float-up var(--d) linear var(--delay) infinite;
}
@keyframes float-up {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(18px, -55vh); }
  90%  { opacity: .8; }
  100% { transform: translate(-12px, -110vh); opacity: 0; }
}

/* ---------- Returning visitors ----------
   After the first visit in a browser session, or when the page comes back with an error,
   everything is simply there (html.no-intro, set in auth_panel.php / auth.js).
   The slow background movement stays, and an error box still shakes. */
.no-intro .logo-roll, .no-intro .left-logo, .no-intro .logo-roll::after, .no-intro .logo-stage::before,
.no-intro .left-subtitle, .no-intro .left-feature, .no-intro .left-feature-icon,
.no-intro .login-form > * { animation: none; }
.no-intro .left-title { animation: none; }
.no-intro .logo-stage { animation-delay: 0s; }
.no-intro .logo-stage::after { animation: orbit 30s linear infinite; }
.no-intro .login-form > .error-box { animation: shake .45s ease-in-out .2s; }
.no-intro.signing-in .left-logo { animation: spin-wait 1.1s cubic-bezier(.45,.05,.55,.95) infinite; }
.no-intro.signing-in .logo-stage::after { animation: orbit 3s linear infinite; }

@media (max-width: 900px) {
  .logo-stage { margin-bottom: 16px; }
  .left-logo { width: 80px; height: 80px; }
  .logo-roll::after { bottom: -16px; height: 8px; }
  /* Half the specks on phones: lighter for low-end devices */
  .particles span:nth-child(even) { display: none; }
}

/* ---- 2026-11-06: form touches and the greeting icon (user chose them) ---- */

/* The field being typed in: its label turns blue (the box already glows) */
.form-group label { transition: color .2s; }
.form-group:focus-within > label, .form-group:focus-within .pw-label-row label { color: #2563eb; }

/* Caps Lock warning (assets/js/auth.js) */
.caps-note { display: flex; align-items: center; gap: 6px; margin: -10px 0 14px; padding: 7px 11px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: #92400e; background: #fef3c7; border: 1px solid #fde68a;
  animation: caps-in .25s cubic-bezier(.22,1,.36,1); }
.caps-note[hidden] { display: none; }
.caps-note svg { width: 15px; height: 15px; flex: none; }
@keyframes caps-in { from { opacity: 0; transform: translateY(-4px); } }

/* Email looks right: a green check inside the box (assets/js/auth.js) */
input.email-ok { padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2322c55e'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 13px center !important; background-size: 18px !important;
  animation: email-ok .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes email-ok { from { background-size: 4px; } }
/* No tick while the box shows a problem, e.g. a misspelled …@gamil.com (2026-11-13) */
input.email-ok.is-invalid { background-image: none !important; animation: none; }

/* Greeting with a sun, sunrise or moon (login.php) */
.greet { display: flex; align-items: center; gap: 10px; }
.greet-icon { display: inline-flex; width: 34px; height: 34px; flex: none; }
.greet-icon svg { width: 100%; height: 100%; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.greet-icon.is-morning svg { stroke: #f59e0b; }
.greet-icon.is-morning circle { fill: #fde68a; }
.greet-icon.is-morning .gi-rise { animation: gi-rise 1.2s cubic-bezier(.22,1,.36,1) .3s both; }
.greet-icon.is-morning .gi-ground { stroke: #fbbf24; }
.greet-icon.is-afternoon svg { stroke: #f59e0b; }
.greet-icon.is-afternoon circle { fill: #fcd34d; }
.greet-icon.is-afternoon .gi-rays { transform-origin: 12px 12px; animation: gi-spin 14s linear infinite, gi-pop .6s cubic-bezier(.34,1.56,.64,1) .2s both; }
.greet-icon.is-evening svg { stroke: #6366f1; }
.greet-icon.is-evening path { fill: #c7d2fe; transform-origin: 12px 12px; animation: gi-rock 4s ease-in-out infinite; }
.greet-icon.is-evening .gi-star { fill: #a5b4fc; stroke: none; animation: gi-twinkle 2.4s ease-in-out infinite; }
.greet-icon.is-evening .gi-star.s2 { animation-delay: 1.2s; }
@keyframes gi-rise { from { transform: translateY(7px); opacity: 0; } }
@keyframes gi-spin { to { transform: rotate(360deg); } }
@keyframes gi-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes gi-rock { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } }
@keyframes gi-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* Visitors who turn off animations in their device settings get the page without movement */
@media (prefers-reduced-motion: reduce) {
  .logo-stage, .logo-stage::before, .logo-stage::after, .logo-roll, .logo-roll::after, .left-logo,
  .left-title, .left-subtitle, .left-feature, .left-feature-icon, .login-form > *, .toggle-password svg,
  .left-panel::before, .left-panel::after, .panel-photo { animation: none !important; }
  .particles, .btn-login::after, .btn-submit::after { display: none; }
  .caps-note, input.email-ok, .greet-icon *, .greet-icon .gi-rays { animation: none !important; }
}