/* =========================================================================
   Shiv Shakti — login / register popup
   Markup and behaviour live in assets/auth-modal.js; assets/site-header.js
   loads both files on every page. Every selector is namespaced .am- so it
   never collides with the per-page styles.
   ========================================================================= */

/* ---------------------------------------------------------------- shell */
.am-root{
  position:fixed; inset:0; z-index:950;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.am-backdrop{
  position:absolute; inset:0;
  background:rgba(20,3,6,.64);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s ease;
}
.am-root.is-open .am-backdrop{opacity:1;}

.am-dialog{
  position:relative; isolation:isolate;
  width:min(960px,100%);
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  border-radius:28px; overflow:hidden;
  background:var(--cream-050);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(217,176,74,.4);
  opacity:0; transform:translateY(24px) scale(.96);
  transition:opacity .35s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.am-root.is-open .am-dialog{opacity:1; transform:none;}

.am-x{
  position:absolute; z-index:6; top:16px; right:16px;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--maroon-700);
  box-shadow:0 6px 16px -10px rgba(58,10,17,.5);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), background .25s, color .25s, border-color .25s;
}
.am-x svg{width:18px; height:18px;}
.am-x:hover{transform:rotate(90deg); background:var(--maroon-700); color:var(--gold-300); border-color:var(--maroon-700);}

/* ------------------------------------------------------------ art side */
.am-art{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:30px 30px 24px;
  color:var(--cream-100);
  background:
    radial-gradient(120% 55% at 50% 0%,rgba(217,176,74,.28),transparent 62%),
    radial-gradient(90% 60% at 100% 100%,rgba(165,35,50,.5),transparent 60%),
    linear-gradient(165deg,var(--maroon-800),var(--maroon-950) 78%);
}
.am-art::before{                       /* gold dot lattice, strongest behind the emblem */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.14; pointer-events:none;
  background-image:radial-gradient(circle,rgba(217,176,74,.95) 1px,transparent 1.3px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 28%,#000 15%,transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 28%,#000 15%,transparent 72%);
}

/* embers drifting up from the bottom edge */
.am-embers{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.am-embers i{
  position:absolute; bottom:-12px; left:var(--x);
  width:6px; height:6px; border-radius:50%; opacity:0;
  background:radial-gradient(circle,#fff1c9 0%,rgba(232,200,118,.85) 42%,transparent 72%);
  animation:amRise var(--t,7s) linear var(--d,0s) infinite;
}
@keyframes amRise{
  0%{opacity:0; transform:translate(0,0) scale(.5);}
  15%{opacity:.95;}
  100%{opacity:0; transform:translate(var(--dx,18px),-620px) scale(1.1);}
}

/* logo on a slowly turning mandala */
.am-emblem{
  position:relative; width:176px; aspect-ratio:1; flex:none;
  display:grid; place-items:center; margin:0 0 8px;
}
.am-mandala{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--gold-300); opacity:.5;
  animation:amSpin 80s linear infinite;
}
.am-halo{
  position:absolute; inset:21%; border-radius:50%;
  border:1px dashed rgba(232,200,118,.55);
  animation:amSpin 40s linear infinite reverse;
}
.am-logo{
  position:relative; width:84px; height:84px; border-radius:50%; padding:3px;
  background:conic-gradient(from 210deg,var(--gold-600),var(--gold-300),var(--gold-500),var(--gold-600));
  box-shadow:0 0 0 6px rgba(40,5,9,.55), 0 0 44px 8px rgba(232,200,118,.32);
  animation:amGlow 4.5s ease-in-out infinite;
}
.am-logo img{width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; background:var(--maroon-950);}
@keyframes amSpin{to{transform:rotate(360deg);}}
@keyframes amGlow{
  0%,100%{box-shadow:0 0 0 6px rgba(40,5,9,.55), 0 0 36px 4px rgba(232,200,118,.24);}
  50%{box-shadow:0 0 0 6px rgba(40,5,9,.55), 0 0 56px 12px rgba(232,200,118,.42);}
}

.am-motto{
  margin:0 0 4px;
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--gold-300);
}
.am-art-title{
  margin:0 0 6px;
  font-family:var(--display); font-weight:600; font-size:clamp(1.45rem,2.1vw,1.8rem); line-height:1.15;
  background:linear-gradient(95deg,var(--gold-300),#fff1c9 45%,var(--gold-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.am-art-sub{margin:0 auto 16px; max-width:30ch; font-size:.88rem; line-height:1.6; color:#e3d2bb; text-wrap:balance;}
.am-art-copy.is-swap > *{animation:amSwap .5s cubic-bezier(.22,1,.36,1) both;}
.am-art-copy.is-swap > :nth-child(2){animation-delay:.05s;}
.am-art-copy.is-swap > :nth-child(3){animation-delay:.1s;}
@keyframes amSwap{from{opacity:0; transform:translateY(10px);}}

.am-perks{
  display:grid; gap:7px; width:100%; max-width:290px;
  margin:0; padding:0; list-style:none; text-align:left;
}
.am-perks li{
  display:flex; align-items:center; gap:12px;
  padding:7px 12px; border-radius:13px;
  font-size:.84rem; color:#f0e2cc;
  background:linear-gradient(100deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(217,176,74,.2);
}
.am-perks .ic{
  width:30px; height:30px; flex:none; border-radius:9px;
  display:grid; place-items:center; color:var(--maroon-950);
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600));
  box-shadow:0 8px 16px -10px rgba(169,121,31,.9);
}
.am-perks .ic svg{width:17px; height:17px;}
.am-trust{margin:auto 0 0; padding-top:14px; font-size:.78rem; color:#cdb79c;}
.am-trust .stars{color:var(--gold-400); letter-spacing:.12em; margin-right:6px;}
.am-trust b{color:var(--gold-300);}

/* ----------------------------------------------------------- form side */
.am-main{
  position:relative; min-width:0;
  padding:28px 40px 18px;
  overflow-y:auto; overscroll-behavior:contain;
  background:
    radial-gradient(70% 36% at 100% 0%,rgba(232,200,118,.22),transparent 70%),
    var(--cream-050);
}

/* Log In | Register switch with a sliding pill */
.am-seg{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  max-width:300px; margin:0 56px 20px 0; padding:4px;
  border-radius:999px; background:var(--paper); border:1px solid var(--line);
}
.am-seg::before{
  content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  border-radius:999px;
  background:linear-gradient(135deg,var(--maroon-700),var(--maroon-950));
  box-shadow:0 8px 18px -8px rgba(58,10,17,.8), inset 0 0 0 1px rgba(217,176,74,.35);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.am-dialog[data-mode="register"] .am-seg::before{transform:translateX(100%);}
.am-dialog[data-mode="otp"] .am-seg,
.am-dialog[data-mode="done"] .am-seg{display:none;}
.am-seg button{
  position:relative; z-index:1; padding:9px 0; border:0; border-radius:999px;
  background:none; cursor:pointer;
  font-family:inherit; font-size:.88rem; font-weight:600; letter-spacing:.03em;
  color:var(--maroon-700); transition:color .35s;
}
.am-seg button[aria-selected="true"]{color:#fff3d6;}

.am-view{animation:amIn .45s cubic-bezier(.22,1,.36,1) both;}
@keyframes amIn{from{opacity:0; transform:translateY(12px);}}

.am-h{
  margin:0 0 4px; padding-right:48px;
  font-family:var(--display); font-weight:600; font-size:1.45rem; line-height:1.2;
  color:var(--maroon-800);
}
.am-sub{margin:0 0 16px; font-size:.9rem; line-height:1.55; color:var(--ink-soft);}
.am-sub b{color:var(--maroon-700);}

/* floating-label fields */
.am-field{margin-bottom:11px;}
.am-control{
  position:relative; display:flex; align-items:center;
  height:50px; border-radius:13px;
  background:#fff; border:1px solid var(--line);
  transition:border-color .25s, box-shadow .25s;
}
.am-control:focus-within{border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(217,176,74,.2);}
.am-lead{width:18px; height:18px; flex:none; margin-left:16px; color:var(--gold-600); transition:color .25s;}
.am-control:focus-within .am-lead{color:var(--maroon-600);}
.am-prefix{
  flex:none; margin-left:10px; padding:4px 8px; border-radius:8px;
  font-size:.85rem; font-weight:600; color:var(--maroon-700); background:var(--paper);
}
.am-input{position:relative; flex:1; min-width:0; height:100%;}
.am-input input{
  width:100%; height:100%; padding:17px 12px 2px;
  border:0; outline:none; background:transparent;
  font-family:inherit; font-size:.96rem; color:var(--ink);
}
.am-input input:focus-visible{outline:none;}          /* the field shows the ring */
.am-input input::-ms-reveal,
.am-input input::-ms-clear{display:none;}             /* Edge's own eye would double ours */
.am-input label{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:.93rem; color:#9c8471; pointer-events:none; white-space:nowrap;
  transition:top .22s ease, font-size .22s ease, color .22s ease, letter-spacing .22s ease;
}
.am-input input:focus + label,
.am-input input:not(:placeholder-shown) + label{
  top:13px; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-600);
}
.am-eye{
  flex:none; width:40px; height:40px; margin-right:5px; border:0; border-radius:10px;
  display:grid; place-items:center; cursor:pointer;
  background:none; color:var(--maroon-700); transition:background .2s;
}
.am-eye:hover{background:var(--paper);}
.am-eye svg{width:19px; height:19px;}

.am-err{margin:6px 4px 0; font-size:.76rem; color:#b3261e;}
.am-err:empty{display:none;}
.am-field.is-bad .am-control{border-color:#c0392b; box-shadow:0 0 0 4px rgba(192,57,43,.12); animation:amShake .4s;}
.am-field.is-bad .am-lead{color:#c0392b;}
@keyframes amShake{20%,60%{transform:translateX(-5px);} 40%,80%{transform:translateX(5px);}}

/* password strength */
.am-meter{display:flex; align-items:center; gap:12px; margin:-3px 2px 11px;}
.am-meter .bars{flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:5px;}
.am-meter .bars i{height:4px; border-radius:4px; background:var(--line); transition:background .3s;}
.am-meter span{min-width:52px; text-align:right; font-size:.72rem; font-weight:600; color:#a58f78;}
.am-meter[data-score="1"] .bars i:nth-child(-n+1){background:#d9534f;}
.am-meter[data-score="2"] .bars i:nth-child(-n+2){background:#e8a33d;}
.am-meter[data-score="3"] .bars i:nth-child(-n+3){background:var(--gold-500);}
.am-meter[data-score="4"] .bars i{background:#2e9e5b;}
.am-meter[data-score="1"] span{color:#d9534f;}
.am-meter[data-score="2"] span{color:#c7861f;}
.am-meter[data-score="3"] span{color:var(--gold-600);}
.am-meter[data-score="4"] span{color:#2e9e5b;}

/* remember me / terms */
.am-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; font-size:.85rem;}
.am-check{display:inline-flex; align-items:flex-start; gap:9px; cursor:pointer; color:var(--ink-soft); line-height:1.4;}
.am-check input{
  -webkit-appearance:none; appearance:none; flex:none;
  width:18px; height:18px; margin:1px 0 0; border-radius:6px; cursor:pointer;
  border:1.5px solid var(--gold-500); background:#fff;
  transition:background .2s, border-color .2s;
}
.am-check input:checked{
  border-color:var(--maroon-700);
  background:var(--maroon-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5e6bd' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.am-check a{color:var(--maroon-600); font-weight:600;}
.am-terms{margin:2px 0 16px; font-size:.83rem;}
.am-terms.is-bad .am-check input{border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.14); animation:amShake .4s;}
.am-terms .am-err{margin-left:27px;}

.am-link{
  padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:600; color:var(--maroon-600);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:text-decoration-color .2s, color .2s;
}
.am-link:hover{color:var(--maroon-700); text-decoration-color:currentColor;}

/* primary action */
.am-submit{
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; height:50px; border:0; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:1rem; font-weight:700; letter-spacing:.04em;
  color:var(--maroon-950);
  background:linear-gradient(180deg,var(--gold-300),var(--gold-500) 55%,var(--gold-600));
  box-shadow:0 16px 30px -14px rgba(169,121,31,.9), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, filter .3s;
}
.am-submit::before{                      /* light sweep on hover */
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); transition:left .8s cubic-bezier(.22,1,.36,1);
}
.am-submit:hover{transform:translateY(-2px); box-shadow:0 20px 34px -14px rgba(169,121,31,.95), inset 0 1px 0 rgba(255,255,255,.55);}
.am-submit:hover::before{left:125%;}
.am-submit svg{width:18px; height:18px; transition:transform .35s cubic-bezier(.22,1,.36,1);}
.am-submit:hover svg{transform:translateX(4px);}
.am-submit.is-busy > *{visibility:hidden;}
.am-submit.is-busy::after{
  content:""; position:absolute; width:22px; height:22px; border-radius:50%;
  border:2.5px solid rgba(40,5,9,.25); border-top-color:var(--maroon-900);
  animation:amSpin .7s linear infinite;
}
.am-submit[disabled]{cursor:progress;}

/* "or" divider + alternatives */
.am-or{
  display:flex; align-items:center; gap:14px; margin:16px 0 12px;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#a58f78;
}
.am-or::before, .am-or::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line));}
.am-or::after{transform:scaleX(-1);}
.am-alt{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.am-alt button{
  position:relative; height:44px; border-radius:13px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:.86rem; font-weight:600; color:var(--maroon-800);
  background:#fff; border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s;
}
.am-alt button:hover{transform:translateY(-2px); border-color:var(--gold-500); box-shadow:0 12px 22px -14px rgba(58,10,17,.5);}
.am-alt svg{width:19px; height:19px; flex:none;}
.am-alt .ic-otp{color:var(--maroon-600);}
.am-alt button.is-busy > *{visibility:hidden;}
.am-alt button.is-busy::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--maroon-700);
  animation:amSpin .7s linear infinite;
}

.am-switch{margin:14px 0 0; text-align:center; font-size:.88rem; color:var(--ink-soft);}
.am-legal{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:14px 0 0; font-size:.72rem; color:#a58f78;
}
.am-legal svg{width:14px; height:14px; color:var(--gold-600);}

/* ---------------------------------------------------------------- OTP */
.am-back{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 14px;
  padding:0; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:.84rem; font-weight:600; color:var(--maroon-600);
}
.am-back svg{width:16px; height:16px; transition:transform .3s;}
.am-back:hover svg{transform:translateX(-3px);}
.am-otp{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:0 0 6px;}
.am-otp input{
  width:100%; height:54px; padding:0; text-align:center;
  font-family:var(--display); font-size:1.55rem; font-weight:600; color:var(--maroon-800);
  border-radius:14px; border:1px solid var(--line); background:#fff; outline:none;
  caret-color:var(--gold-600);
  transition:border-color .2s, box-shadow .2s, background .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.am-otp input:focus{border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(217,176,74,.22);}
.am-otp input.is-filled{border-color:var(--maroon-600); background:#fffaf0; transform:scale(1.04);}
.am-otp.is-bad input{border-color:#c0392b; animation:amShake .4s;}
.am-otp-err{margin:4px 2px 0; font-size:.76rem; color:#b3261e;}
.am-otp-err:empty{display:none;}
.am-timer{margin:12px 0 16px; font-size:.84rem; color:var(--ink-soft);}
.am-timer b{color:var(--maroon-700); font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------- success */
.am-done{padding:22px 0 4px; text-align:center;}
.am-tick{
  width:84px; height:84px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle,rgba(232,200,118,.35),transparent 70%);
}
.am-tick svg{width:74px; height:74px; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.am-tick circle{stroke:var(--gold-500); stroke-width:3; stroke-dasharray:227; stroke-dashoffset:227; animation:amDraw .7s ease-out forwards;}
.am-tick path{stroke:var(--maroon-700); stroke-width:4.5; stroke-dasharray:50; stroke-dashoffset:50; animation:amDraw .45s ease-out .55s forwards;}
@keyframes amDraw{to{stroke-dashoffset:0;}}
.am-done .am-h{padding:0;}
.am-done-title:focus{outline:none;}          /* focused from script so screen readers announce it */
.am-done .am-sub{max-width:34ch; margin:0 auto 20px; text-wrap:balance;}
.am-done-ctas{display:grid; gap:10px;}
.am-done-ctas .am-ghost{
  height:46px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:.92rem; font-weight:600; color:var(--maroon-700);
  background:transparent; border:1px solid var(--maroon-600);
  transition:background .25s;
}
.am-done-ctas .am-ghost:hover{background:rgba(110,22,34,.06);}
.am-done-ctas a.am-submit{text-decoration:none;}

/* marigold petals falling across the whole dialog on success */
.am-petals{position:absolute; inset:0; z-index:5; overflow:hidden; pointer-events:none;}
.am-petals i{
  position:absolute; top:-24px; left:var(--x);
  width:11px; height:15px; border-radius:60% 0 60% 0;
  background:var(--c);
  opacity:.95;
  animation:amFall var(--t,2.8s) cubic-bezier(.35,.1,.6,1) var(--d,0s) forwards;
}
@keyframes amFall{
  to{transform:translate(var(--dx,30px),min(720px,100dvh)) rotate(var(--r,540deg)); opacity:0;}
}

/* ------------------------------------------------------------ phones */
@media (max-width:760px){
  .am-root{padding:0; align-items:flex-end;}
  .am-dialog{
    display:flex; flex-direction:column;
    width:100%; max-height:94vh; max-height:94dvh;
    border-radius:26px 26px 0 0;
    transform:translateY(100%); opacity:1;
  }
  .am-root.is-open .am-dialog{transform:none;}
  .am-dialog::before{                     /* grab handle */
    content:""; position:absolute; z-index:6; top:8px; left:50%;
    width:44px; height:4px; margin-left:-22px; border-radius:4px;
    background:rgba(251,245,232,.45);
  }
  /* the art side becomes a compact banner above the form */
  .am-art{flex:none; flex-direction:row; align-items:center; gap:12px; padding:18px 64px 14px 18px; text-align:left;}
  .am-emblem{width:62px; margin:0;}
  .am-logo{width:46px; height:46px; padding:2px; box-shadow:0 0 0 4px rgba(40,5,9,.55), 0 0 24px 4px rgba(232,200,118,.3); animation:none;}
  .am-halo{inset:4%;}
  .am-motto{font-size:.84rem; margin:0 0 2px;}
  .am-art-title{font-size:1.3rem; margin:0;}
  .am-art-sub, .am-perks, .am-trust{display:none;}
  .am-x{top:18px; right:14px; width:38px; height:38px; background:rgba(255,255,255,.12); color:var(--gold-300); border-color:rgba(217,176,74,.35); box-shadow:none;}
  .am-main{flex:1; padding:18px 18px 16px;}
  .am-seg{max-width:none; margin:0 0 16px;}
  .am-h{font-size:1.25rem; padding:0;}
  .am-input input{font-size:16px;}        /* 16px stops iOS zooming into the field */
  .am-otp{gap:7px;}
  .am-otp input{height:48px; font-size:1.3rem;}
}
@media (max-width:380px){
  .am-alt{grid-template-columns:1fr;}
  .am-row{flex-direction:column; align-items:flex-start;}
}

/* the global reduced-motion rule shortens durations, which would make the
   endless spins and embers flicker — stop them outright instead */
@media (prefers-reduced-motion: reduce){
  .am-mandala, .am-halo, .am-logo{animation:none;}
  .am-embers, .am-petals{display:none;}
}