/* ==========================================================================
   Shillong Teer — शिलांग तीर रिजल्ट
   AMP-safe stylesheet. यही फ़ाइल amp.html के amp-custom ब्लॉक में इनलाइन होती है।

   दो पाबंदियाँ याद रखें:
   1. कहीं भी `!important` नहीं (AMP में वर्जित)।
   2. @keyframes के अंदर सिर्फ़ opacity / transform / visibility —
      background-position, box-shadow, filter वहाँ नहीं चलते।
      इसीलिए हर चमक-दमक अलग परत (pseudo-element) पर बनी है।
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. टोकन / वेरिएबल
   -------------------------------------------------------------------------- */
:root {
  /* रंग */
  --teal-deep:   #045757;
  --teal-bright: #5ECCCC;
  --teal-mid:    #43A7BA;
  --teal-glow:   #BFFAFA;
  --red:         #f54242;
  --gold:        #d4af37;
  --gold-soft:   #f0d67a;
  --gold-pale:   #FFF3C4;
  --gold-deep:   #A97C0B;
  --ink:         #2A1B00;
  --black:       #000000;

  /* टाइपोग्राफ़ी — देवनागरी को थोड़ी बड़ी साइज़ और ज़्यादा line-height चाहिए */
  --font-body:    'Poppins', 'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif;
  --fs-tagline:   clamp(11px, 3.1vw, 13px);
  --fs-h1:        clamp(21px, 6.2vw, 27px);
  --fs-sub:       clamp(12px, 3.5vw, 14px);
  --fs-intro:     clamp(12px, 3.4vw, 14px);
  --fs-btn:       clamp(15px, 4.2vw, 18px);
  --fs-grid:      clamp(11px, 3.2vw, 13px);
  --fs-ribbon:    clamp(10px, 2.9vw, 12px);
  --fs-copyright: clamp(10px, 2.9vw, 12px);

  /* लेआउट */
  --container-max: 420px;
  --radius-card:   30px;
  --radius-pill:   50px;
  --gap:           clamp(11px, 3.2vw, 15px);

  /* बैनर — क्रॉप की ऊँचाई और फ़ोकस यहीं से बदलें।
     पूरा बिना कटा बैनर चाहिए? --banner-max-h को `none` कर दें। */
  --banner-ratio: 941 / 1672;
  --banner-max-h: 36svh;
  --banner-focus: 50% 38%;
}

/* --------------------------------------------------------------------------
   2. रीसेट
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img {
  display: block;
  max-width: 100%;
  /* `height: auto` ज़रूरी है: HTML के width/height एट्रिब्यूट presentational hint
     बन जाते हैं, और CSS से सिर्फ़ width बदलने पर ऊँचाई अटकी रह जाती है। */
  height: auto;
}

/* --------------------------------------------------------------------------
   3. बॉडी और बैकग्राउंड
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  line-height: 1.6;
  background-color: var(--black);
  background-image:
    radial-gradient(rgba(212, 175, 55, 0.15) 1px, transparent 1px),
    radial-gradient(rgba(212, 175, 55, 0.10) 1px, transparent 1px);
  background-size: 40px 40px, 80px 80px;
  background-position: 0 0, 20px 20px;
  background-attachment: fixed;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    max(16px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));

  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.10), transparent 50%);
  pointer-events: none;
  z-index: -1;
  animation: pulseBg 8s ease-in-out infinite;
}

@keyframes pulseBg {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   4. मुख्य कार्ड
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: auto;
  padding: clamp(18px, 5vw, 25px) clamp(15px, 4.5vw, 20px);

  display: flex;
  flex-direction: column;
  gap: var(--gap);

  background: rgba(10, 2, 2, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(212, 55, 55, 0.3);
  border-radius: var(--radius-card);
  box-shadow:
    0 0 0 1px rgba(212, 55, 55, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.8),
    inset 0 0 30px rgba(212, 55, 55, 0.1);

  position: relative;
  overflow: hidden;
  animation: cardBoom 1s cubic-bezier(0.18, 1.2, 0.32, 1) both;
}

.container::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(
    from 0deg,
    transparent,
    var(--teal-deep),
    var(--red),
    var(--teal-deep),
    transparent
  );
  border-radius: calc(var(--radius-card) + 2px);
  z-index: -2;
  animation: rotateBorder 6s linear infinite;
}

.container::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: calc(var(--radius-card) - 2px);
  z-index: -1;
}

@keyframes rotateBorder {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* पूरा कार्ड धमाके के साथ आता है — थोड़ा ओवरशूट, थोड़ा टिल्ट */
@keyframes cardBoom {
  0%   { opacity: 0; transform: translateY(48px) scale(0.86) rotate(-1.6deg); }
  55%  { opacity: 1; transform: translateY(-8px) scale(1.03) rotate(0.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* --------------------------------------------------------------------------
   5. ब्रांड
   -------------------------------------------------------------------------- */
.brand {
  text-align: center;
}

/* .brand__logo एफ़िलिएट लिंक (<a>) है, img उसकी पूरी चौड़ाई भरती है।
   <a> inline होता है — block के बिना width/margin लागू नहीं होंगे। */
.brand__logo {
  display: block;
  width: min(175px, 52%);
  margin: 0 auto 6px;
  animation:
    logoSlam 1.1s cubic-bezier(0.16, 1.5, 0.3, 1) 0.15s backwards,
    tada 5s 2.2s both infinite;
}

.brand__tagline {
  font-size: var(--fs-tagline);
  color: var(--teal-bright);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-shadow: 0 0 10px rgba(94, 204, 204, 0.35);
  animation: riseIn 0.7s ease 0.55s backwards;
}

@keyframes logoSlam {
  0%   { opacity: 0; transform: scale(2.1) rotate(-9deg); }
  60%  { opacity: 1; transform: scale(0.94) rotate(3deg); }
  80%  { transform: scale(1.04) rotate(-1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes tada {
  0%                 { transform: scale3d(1, 1, 1); }
  10%, 20%           { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80%      { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100%               { transform: scale3d(1, 1, 1); }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   6. शीर्षक और परिचय
   -------------------------------------------------------------------------- */
.headline {
  text-align: center;
  position: relative;
}

/* शीर्षक के पीछे धड़कती सुनहरी आभा */
.headline::before {
  content: '';
  position: absolute;
  inset: -34% -12%;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.30), transparent 72%);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 3.2s ease-in-out infinite;
}

.headline h1,
.headline p {
  position: relative;
  z-index: 1;
}

.headline h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.35;
  color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
  animation: bangIn 0.85s cubic-bezier(0.16, 1.4, 0.3, 1) 0.4s backwards;
}

.headline p {
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--teal-bright);
  margin-top: 2px;
  animation: riseIn 0.7s ease 0.62s backwards;
}

.intro {
  font-size: var(--fs-intro);
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  line-height: 1.7;
  animation: riseIn 0.7s ease 0.8s backwards;
}

.intro strong {
  color: var(--gold-soft);
  font-weight: 700;
}

@keyframes bangIn {
  0%   { opacity: 0; transform: scale(1.6); }
  60%  { opacity: 1; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   7. बैनर
   चयनकर्ता जानबूझकर दोनों के लिए लिखे गए हैं:
   index.html का picture/img और amp.html का amp-img.
   .banner एफ़िलिएट लिंक (<a>) है, इसलिए display: block ज़रूरी है।
   -------------------------------------------------------------------------- */
.banner {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--banner-ratio);
  max-height: var(--banner-max-h);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(212, 175, 55, 0.3),
    inset 0 0 20px rgba(212, 175, 55, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: bannerZoom 1s cubic-bezier(0.18, 1.15, 0.32, 1) 0.5s backwards;
}

.banner picture,
.banner amp-img {
  position: absolute;
  inset: 0;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-focus);
}

@keyframes bannerZoom {
  0%   { opacity: 0; transform: scale(1.18) translateY(14px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (hover: hover) {
  .banner:hover {
    transform: scale(1.02);
    box-shadow:
      0 15px 30px rgba(0, 0, 0, 0.6),
      0 0 0 3px rgba(212, 175, 55, 0.5),
      inset 0 0 30px rgba(212, 175, 55, 0.3);
  }
}

/* --------------------------------------------------------------------------
   8. मुख्य बटन — लॉगिन (नियॉन ग्लास) और रजिस्टर (पिघला हुआ सोना)
   ढाँचा: a.btn > span.btn__face > [span.cta__flare, span.btn__label, span.btn__arrow]
   बाहरी आभा और घूमती रिंग .btn पर; चमक और ग्लॉस .btn__face के अंदर (क्लिप होकर)।
   -------------------------------------------------------------------------- */
.cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.btn {
  position: relative;
  display: block;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn--login    { animation: btnDrop 0.95s cubic-bezier(0.16, 1.55, 0.3, 1) 0.95s backwards; }
.btn--register { animation: btnDrop 0.95s cubic-bezier(0.16, 1.55, 0.3, 1) 1.10s backwards; }

/* 8a. बाहरी धड़कती आभा */
.btn::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 64px;
  z-index: 0;
  pointer-events: none;
  animation: auraPulse 2.8s ease-in-out infinite;
}

.btn--login::before {
  background: radial-gradient(closest-side, rgba(94, 204, 204, 0.55), transparent 76%);
}

.btn--register::before {
  background: radial-gradient(closest-side, rgba(240, 214, 122, 0.5), transparent 78%);
  animation-delay: 0.5s;
}

/* 8b. रजिस्टर के चारों ओर घूमती इंद्रधनुषी रिंग।
   ज़रूरी बारीकी: घूमने वाली परत वर्गाकार होनी चाहिए। चौड़े-चपटे आयत को घुमाओ तो
   वह तिरछी पट्टी बनकर बटन से बाहर निकल जाता है, किनारा नहीं बनता। इसलिए
   .btn__ring सिर्फ़ क्लिप करता है और असली कोनिक ग्रेडिएंट उसके ::before पर है। */
.btn__ring {
  position: absolute;
  inset: -5px;
  z-index: 0;
  border-radius: 56px;
  overflow: hidden;
  clip-path: inset(0 round 56px);
  pointer-events: none;
}

.btn__ring::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  background: conic-gradient(
    from 0deg,
    #FFFFFF 0deg,
    var(--red) 52deg,
    #4A0F0F 96deg,
    var(--teal-deep) 140deg,
    var(--teal-bright) 180deg,
    #FFFFFF 214deg,
    var(--red) 258deg,
    #4A0F0F 300deg,
    var(--gold) 336deg,
    #FFFFFF 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation:
    ringSpin 3.4s linear infinite,
    ringBreathe 2.4s ease-in-out infinite;
}

/* 8c. असली गोली — रंग यहीं से बदलें */
.btn__face {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: clamp(12px, 3.5vw, 15px) clamp(18px, 5vw, 24px);
  border-radius: var(--radius-pill);
  overflow: hidden;
  clip-path: inset(0 round var(--radius-pill));
  font-family: inherit;
  font-size: var(--fs-btn);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn--login .btn__face {
  background:
    linear-gradient(180deg, rgba(94, 204, 204, 0.24), rgba(4, 87, 87, 0.34)),
    rgba(3, 20, 22, 0.78);
  color: var(--teal-glow);
  border: 2px solid rgba(94, 204, 204, 0.85);
  text-shadow: 0 0 12px rgba(94, 204, 204, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(191, 250, 250, 0.35),
    inset 0 0 26px rgba(94, 204, 204, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(94, 204, 204, 0.28);
}

.btn--register .btn__face {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 46%),
    linear-gradient(150deg,
      var(--gold-pale) 0%,
      #F5D97E 22%,
      var(--gold) 52%,
      var(--gold-deep) 78%,
      #FFE9A8 100%);
  color: var(--ink);
  border: 1px solid #FFF0B8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -4px 12px rgba(120, 80, 0, 0.45),
    0 10px 26px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(212, 175, 55, 0.32);
}

/* 8d. धीमी चौड़ी चमक — लगातार दौड़ती रहती है */
.btn__face::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-180%) skewX(-18deg);
  animation: sheen 3.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.btn--register .btn__face::before { animation-delay: 0.9s; }

/* 8e. ऊपरी ग्लॉस — स्थिर, बटन को उभार देता है */
.btn__face::after {
  content: '';
  position: absolute;
  inset: 1px 1px auto;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  border-radius: var(--radius-pill) var(--radius-pill) 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
}

/* 8f. तेज़ फ़्लैश — amp.html में <amp-animation> चलाता है, index.html में main.js।
       CSS इसे जानबूझकर स्थिर रखता है, ताकि दोनों बिल्ड में एक ही चाल दिखे। */
.cta__flare {
  position: absolute;
  top: 0;
  left: 0;
  width: 26%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
}

.btn__label {
  position: relative;
  z-index: 3;
}

.btn__arrow {
  position: relative;
  z-index: 3;
  font-weight: 700;
  animation: arrowNudge 1.6s ease-in-out infinite;
}

/* रजिस्टर मुख्य CTA है — इसे धड़कन मिलती है, लॉगिन शांत रहता है */
.btn--register .btn__label { animation: beat 2.6s ease-in-out 1.9s infinite; }

@keyframes btnDrop {
  0%   { opacity: 0; transform: translateY(34px) scale(0.72); }
  55%  { opacity: 1; transform: translateY(-6px) scale(1.06); }
  75%  { transform: translateY(2px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes auraPulse {
  0%, 100% { opacity: 0.30; transform: scale(0.90); }
  50%      { opacity: 0.95; transform: scale(1.07); }
}

@keyframes ringSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ringBreathe {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@keyframes sheen {
  0%        { opacity: 0; transform: translateX(-180%) skewX(-18deg); }
  8%        { opacity: 1; }
  38%       { opacity: 1; }
  46%, 100% { opacity: 0; transform: translateX(460%) skewX(-18deg); }
}

@keyframes beat {
  0%, 62%, 100% { transform: scale(1); }
  70%           { transform: scale(1.11); }
  78%           { transform: scale(0.97); }
  86%           { transform: scale(1.05); }
}

@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

.btn:active .btn__face { transform: translateY(2px) scale(0.985); }

@media (hover: hover) {
  .btn:hover .btn__face { transform: translateY(-3px); filter: brightness(1.12); }
  .btn--login:hover .btn__face {
    box-shadow:
      inset 0 1px 0 rgba(191, 250, 250, 0.5),
      inset 0 0 34px rgba(94, 204, 204, 0.3),
      0 12px 30px rgba(0, 0, 0, 0.65),
      0 0 40px rgba(94, 204, 204, 0.55);
  }
  .btn--register:hover .btn__face {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -4px 12px rgba(120, 80, 0, 0.5),
      0 14px 34px rgba(0, 0, 0, 0.65),
      0 0 46px rgba(240, 214, 122, 0.7);
  }
}

/* --------------------------------------------------------------------------
   9. राउंड / रिजल्ट ग्रिड
   -------------------------------------------------------------------------- */
.button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.button-grid a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: var(--fs-grid);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border-radius: 40px;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-mid));
  border: 1px solid rgba(212, 55, 55, 0.4);
  color: #ffffff;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, background 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
  animation: popUp 0.6s cubic-bezier(0.16, 1.5, 0.3, 1) backwards;
}

.button-grid a:nth-child(1) { animation-delay: 1.25s; }
.button-grid a:nth-child(2) { animation-delay: 1.33s; }
.button-grid a:nth-child(3) { animation-delay: 1.41s; }
.button-grid a:nth-child(4) { animation-delay: 1.49s; }

.button-grid a::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -100%;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 55, 55, 0.2), transparent);
  transition: left 0.5s ease;
}

@keyframes popUp {
  0%   { opacity: 0; transform: translateY(16px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (hover: hover) {
  .button-grid a:hover::before { left: 100%; }
  .button-grid a:hover {
    background: linear-gradient(135deg, #2a0a0a, var(--teal-bright));
    border-color: var(--teal-deep);
    box-shadow: 0 0 20px rgba(212, 55, 55, 0.3);
    transform: translateY(-2px);
  }
}

/* --------------------------------------------------------------------------
   10. पट्टी और कॉपीराइट
   -------------------------------------------------------------------------- */
.ribbon {
  background: rgba(212, 175, 55, 0.05);
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  border: 1px dashed rgba(212, 175, 55, 0.3);
  color: var(--gold);
  font-size: var(--fs-ribbon);
  line-height: 1.6;
  overflow-wrap: anywhere;
  animation: riseIn 0.7s ease 1.6s backwards;
}

.copyright {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-copyright);
  letter-spacing: 0.3px;
  border-top: 1px solid rgba(212, 55, 55, 0.2);
  padding-top: 14px;
  animation: riseIn 0.7s ease 1.7s backwards;
}

.copyright strong {
  color: var(--teal-bright);
  text-shadow: 0 0 10px rgba(94, 204, 204, 0.4);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   11. चमक (sparkles)
   -------------------------------------------------------------------------- */
.sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.sparkles span {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: 6px;
  height: 6px;
  background: var(--teal-deep);
  border-radius: 50%;
  box-shadow: 0 0 20px #05FAFA;
  opacity: 0;
  animation: sparkle 3s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* amp.html में कस्टम JS नहीं चलता, इसलिए वहाँ ये स्थिर पोज़िशन काम आती हैं */
.sparkles span:nth-child(1) { --x: 20%; --y: 10%; --d: 0s; }
.sparkles span:nth-child(2) { --x: 80%; --y: 30%; --d: 1s; }
.sparkles span:nth-child(3) { --x: 40%; --y: 70%; --d: 2s; }
.sparkles span:nth-child(4) { --x: 70%; --y: 85%; --d: 1.5s; }
.sparkles span:nth-child(5) { --x: 15%; --y: 45%; --d: 2.5s; }
.sparkles span:nth-child(6) { --x: 90%; --y: 60%; --d: 0.8s; }

@keyframes sparkle {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   12. सुगम्यता (accessibility)
   -------------------------------------------------------------------------- */
a:focus-visible {
  outline: 3px solid var(--teal-bright);
  outline-offset: 3px;
}

.btn:focus-visible {
  outline: 3px solid var(--gold-pale);
  outline-offset: 5px;
}

/* AMP में `!important` वर्जित है — इसलिए हर सेलेक्टर अलग से लिखा गया */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .container,
  .container::before,
  .brand__logo,
  .brand__tagline,
  .headline::before,
  .headline h1,
  .headline p,
  .intro,
  .banner,
  .btn--login,
  .btn--register,
  .btn::before,
  .btn__ring::before,
  .btn__face::before,
  .btn__arrow,
  .btn--register .btn__label,
  .button-grid a,
  .ribbon,
  .copyright,
  .sparkles span {
    animation: none;
  }
  .sparkles { display: none; }
  .cta__flare { display: none; }
  .banner,
  .btn__face,
  .button-grid a,
  .button-grid a::before {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   13. ब्रेकपॉइंट
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root {
    --radius-card: 22px;
    --banner-max-h: 32svh;
  }
  .container { padding: 16px 13px; }
  .brand__logo { width: min(155px, 48%); }
}

/* कम ऊँचाई वाले फ़ोन (iPhone SE आदि) — बैनर छोटा करो ताकि लॉगिन बटन फोल्ड के ऊपर रहे */
@media (max-height: 720px) and (orientation: portrait) {
  :root { --banner-max-h: 27svh; }
  .brand__logo { width: min(140px, 44%); }
}

/* फ़ोन लैंडस्केप — बहुत कम ऊँचाई। कार्ड फिर भी स्क्रॉल होगा, पर कम। */
@media (max-height: 620px) and (orientation: landscape) {
  :root {
    --banner-max-h: 30svh;
    --banner-focus: 50% 32%;
  }
  body { align-items: flex-start; }
  .brand__logo { width: min(120px, 28%); }
}

@media (min-width: 600px) {
  :root {
    --container-max: 460px;
    --banner-max-h: 40svh;
  }
  .cta { flex-direction: row; gap: 16px; }
  .cta .btn { flex: 1; }
}

@media (min-width: 1024px) {
  :root { --banner-max-h: 30svh; }
}

@media (min-height: 900px) and (max-width: 599px) {
  :root { --banner-max-h: 44svh; }
}

/* --------------------------------------------------------------------------
   14. प्रिंट
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  body::before,
  .sparkles { display: none; }
  .container {
    box-shadow: none;
    border: 1px solid #000;
    backdrop-filter: none;
  }
  .container::before,
  .container::after { display: none; }
  .btn::before,
  .btn__ring,
  .btn__face::before,
  .cta__flare { display: none; }
}