/* ═══════════════════════════════════════════════════════
   SINHALA NEW YEAR CAMPAIGN — STYLESHEET (UPDATED)
   Theme: Festive Sri Lankan — Gold, Crimson, Saffron
═══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --gold:       #F5C518;
  --gold-dark:  #C9960C;
  --gold-light: #FFE87A;
  --crimson:    #C01B2C;
  --crimson-dk: #8B0000;
  --saffron:    #FF7722;
  --orange:     #FF5500;
  --cream:      #FFF8E7;
  --maroon:     #6D0B1E;
  --white:      #FFFFFF;
  --text-dark:  #2A0A0A;

  --card-bg:    rgba(255, 248, 225, 0.97);
  --shadow-gold: 0 8px 40px rgba(197,150,12,0.45);
  --radius-card: 24px;

  --font-si: 'Noto Sans Sinhala', sans-serif;
  --font-en: 'Cinzel Decorative', serif;
  --font-body: 'Playfair Display', serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--crimson-dk);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ══════════════════════════════════════════
   ANIMATED BACKGROUND
══════════════════════════════════════════ */
.bg-rays {
  position: fixed;
  z-index: 0;
  /* Oversized so corners never show during rotation */
  width: 200vmax;
  height: 200vmax;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      #8B0000 0deg,  #C0392B 30deg,  #8B0000 60deg,
      #A93226 90deg, #8B0000 120deg, #C0392B 150deg,
      #8B0000 180deg,#A93226 210deg, #8B0000 240deg,
      #C0392B 270deg,#8B0000 300deg, #A93226 330deg,
      #8B0000 360deg
    );
  animation: rotateBg 60s linear infinite;
  opacity: 0.6;
}
@keyframes rotateBg { to { transform: rotate(360deg); } }

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(245,197,24,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,119,34,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(139,0,0,0.6) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Fireworks Canvas ── */
#fireworks-canvas {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
}

/* ── Falling Petals ── */
.petals-container {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
}
.petal {
  position: absolute; top: -40px;
  animation: petalFall linear infinite;
  opacity: 0.85;
}
@keyframes petalFall {
  0%   { transform: translateY(-40px) rotate(0deg); opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ══════════════════════════════════════════
   HANGING LANTERNS
══════════════════════════════════════════ */
.lantern {
  position: fixed;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
}

.lantern-left  { left: 20px;  animation: swayLeft  4s ease-in-out infinite alternate; }
.lantern-right { right: 20px; animation: swayRight 4.4s ease-in-out infinite alternate; }

@keyframes swayLeft {
  0%   { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}
@keyframes swayRight {
  0%   { transform: rotate(8deg); }
  100% { transform: rotate(-8deg); }
}

/* .lantern-rope {
  width: 2px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(197,150,12,0.5), var(--gold-dark));
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}
.lantern-rope::before {
  content: '';
  position: absolute;
  left: -6px; top: 0;
  width: 14px; height: 10px;
  background: var(--gold-dark);
  border-radius: 50%;
  opacity: 0.8;
} */
.logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 16px;
}

.header-logo {
  width: 100%;
  max-width: 440px;
  height: auto;
}

/* Mobile */
@media (max-width: 480px) {
  .header-logo {
    max-width: 220px;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .header-logo {
    max-width: 220px;
  }
}
.lantern-svg {
  width: 100px;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(255,150,30,0.7)) drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

.lantern-glow {
  width: 300px;
  height: auto;
  background: radial-gradient(ellipse, rgba(255,200,50,0.35) 0%, transparent 70%);
  margin-top: -20px;
  pointer-events: none;
  animation: glowPulse 2s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  from { opacity: 0.6; transform: scale(0.9); }
  to   { opacity: 1;   transform: scale(1.15); }
}

/* Hide lanterns on very small screens if they overlap form */
@media (max-width: 640px) {
  .lantern { display: none; }
}

/* ══════════════════════════════════════════
   PERSON FIGURES — SIDES
══════════════════════════════════════════ */
.person-figure {
  position: fixed;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.person-left  { left: 0;  animation: personSway 5s ease-in-out infinite alternate; }
.person-right { right: 0; animation: personSwayR 5.5s ease-in-out infinite alternate; transform-origin: bottom center; }

@keyframes personSway {
  0%   { transform: rotate(-2deg) translateY(0); }
  50%  { transform: rotate(1deg)  translateY(-6px); }
  100% { transform: rotate(-1.5deg) translateY(0); }
}
@keyframes personSwayR {
  0%   { transform: rotate(2deg)  translateY(0); }
  50%  { transform: rotate(-1deg) translateY(-8px); }
  100% { transform: rotate(1.5deg) translateY(0); }
}

.person-svg {
  width: 300px;
  height: auto;
  filter: drop-shadow(0 0 12px rgba(245,197,24,0.5)) drop-shadow(4px 0 20px rgba(0,0,0,0.4));
}

/* Hand-held diya / item subtle flicker */
.hand-flame {
  animation: handFlicker 1.3s ease-in-out infinite alternate;
}
@keyframes handFlicker {
  from { opacity: 0.8; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.2); }
}

/* Hide persons on narrow viewports */
@media (max-width: 900px) {
  .person-figure { display: none; }
}

/* ══════════════════════════════════════════
   MUSIC TOGGLE
══════════════════════════════════════════ */
.music-toggle {
  position: fixed; top: 18px; right: 18px; z-index: 999;
  display: flex; align-items: center; gap: 6px;
  background: rgba(197,150,12,0.9);
  border: 2px solid var(--gold-light);
  border-radius: 50px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--text-dark);
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
}
.music-toggle:hover {
  background: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.4);
}
.music-toggle svg { flex-shrink: 0; }

/* ══════════════════════════════════════════
   SLIDE WRAPPER
══════════════════════════════════════════ */
.slide-wrapper {
  position: relative; z-index: 10;
  width: 100%; min-height: 100vh;
  overflow: hidden;
}

.slide {
  width: 100%; min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 30px 16px 50px;
  transition: transform 0.7s cubic-bezier(0.77,0,0.175,1), opacity 0.7s ease;
}

.slide-hidden {
  position: absolute; top: 0; left: 0; width: 100%;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

.slide-inner {
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
}

/* ══════════════════════════════════════════
   SVG FLAME ANIMATIONS (shared)
══════════════════════════════════════════ */
.flame-anim {
  animation: flickerSvg 1.1s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
.flame-anim-inner {
  animation: flickerSvg 0.8s ease-in-out infinite alternate-reverse;
  transform-origin: center bottom;
}
@keyframes flickerSvg {
  0%   { transform: scaleX(1)    scaleY(1);    opacity: 1; }
  33%  { transform: scaleX(0.88) scaleY(1.06); opacity: 0.95; }
  66%  { transform: scaleX(1.06) scaleY(0.94); opacity: 1; }
  100% { transform: scaleX(0.93) scaleY(1.09); opacity: 0.9; }
}

.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite alternate;
}

/* ══════════════════════════════════════════
   DIYA / LAMP ROW (Page 1 top)
══════════════════════════════════════════ */
.lamps-row {
  width: 100%;
  display: flex; justify-content: space-between;
  padding: 0 10px;
  margin-bottom: -10px;
}

.diya-svg {
  width: 72px; height: auto;
  filter: drop-shadow(0 0 10px rgba(255,210,50,0.7));
}

/* ══════════════════════════════════════════
   HERO HEADER
══════════════════════════════════════════ */
.hero-header {
  text-align: center;
  padding: 24px 20px 16px;
  width: 100%;
}

.badge-wrap { margin-bottom: 10px; }
.year-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  color: var(--text-dark);
  font-family: var(--font-en);
  font-size: 0.8rem; font-weight: 700;
  padding: 4px 18px;
  border-radius: 50px;
  letter-spacing: 3px;
  box-shadow: 0 3px 14px rgba(245,197,24,0.5);
  animation: pulseBadge 2s ease-in-out infinite;
}
@keyframes pulseBadge {
  0%, 100% { box-shadow: 0 3px 14px rgba(245,197,24,0.5); }
  50%       { box-shadow: 0 3px 28px rgba(245,197,24,0.9); }
}

.hero-title {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.line-si {
  font-family: var(--font-si);
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(255,232,122,0.7);
  letter-spacing: 2px;
}
.line-big {
  font-family: var(--font-si);
  font-size: clamp(2rem, 7vw, 3.4rem);
  font-weight: 900;
  color: var(--gold);
  text-shadow:
    0 0 20px rgba(245,197,24,0.8),
    0 4px 0px rgba(0,0,0,0.5),
    0 2px 40px rgba(245,197,24,0.4);
  line-height: 1.1;
  animation: titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  from { text-shadow: 0 0 20px rgba(245,197,24,0.8), 0 4px 0 rgba(0,0,0,0.5); }
  to   { text-shadow: 0 0 40px rgba(245,197,24,1),   0 4px 0 rgba(0,0,0,0.5), 0 0 80px rgba(255,119,34,0.5); }
}
.line-en {
  font-family: var(--font-en);
  font-size: clamp(0.65rem, 2.5vw, 0.9rem);
  font-weight: 700;
  color: rgba(255,232,122,0.75);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 4px;
}

.header-deco {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 12px;
}
.deco-dot  { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.deco-line { width: 60px; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.deco-lotus {
  width: 36px; height: 36px;
  animation: spinDiamond 8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(245,197,24,0.7));
}
@keyframes spinDiamond { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════
   KOLAM BORDER
══════════════════════════════════════════ */
.kolam-border {
  width: 100%; height: 12px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold) 0px,     var(--gold) 8px,
    var(--saffron) 8px,  var(--saffron) 12px,
    var(--crimson) 12px, var(--crimson) 20px,
    var(--saffron) 20px, var(--saffron) 24px
  );
  margin: 8px 0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ══════════════════════════════════════════
   FORM CARD
══════════════════════════════════════════ */
.form-card {
  width: 100%;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 0 6px var(--crimson),
    var(--shadow-gold);
  animation: cardEntrance 0.8s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes cardEntrance {
  from { transform: translateY(30px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.card-shine {
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
  animation: cardShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardShine {
  0%   { transform: translateX(-100%) rotate(30deg); }
  50%  { transform: translateX(100%)  rotate(30deg); }
  100% { transform: translateX(-100%) rotate(30deg); }
}

.form-card::before,
.form-card::after {
  content: '❋';
  position: absolute;
  font-size: 2.5rem;
  color: rgba(192,27,44,0.15);
  line-height: 1;
}
.form-card::before { top: 10px; left: 10px; }
.form-card::after  { bottom: 10px; right: 10px; transform: rotate(180deg); }

.card-ornament.top {
  text-align: center;
  margin-bottom: 16px;
  display: flex; justify-content: center;
  animation: floatOrnament 3s ease-in-out infinite alternate;
}
@keyframes floatOrnament {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

.card-title {
  font-family: var(--font-en);
  font-size: 1.4rem;
  color: var(--crimson-dk);
  text-align: center;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.card-sub {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--saffron);
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 24px;
}

/* ── Fields ── */
.field { margin-bottom: 20px; }
.label {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.label-en {
  font-family: var(--font-en);
  font-size: 0.78rem; font-weight: 700;
  color: var(--crimson-dk);
  letter-spacing: 1px;
}
.label-si {
  font-family: var(--font-si);
  font-size: 0.78rem;
  color: var(--saffron);
  font-weight: 600;
}

.input-box {
  display: flex; align-items: center;
  background: #fff;
  border: 2.5px solid #e0c060;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.input-box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.25), 0 2px 10px rgba(0,0,0,0.08);
}

.input-ico {
  padding: 0 12px;
  background: rgba(245,197,24,0.12);
  border-right: 1.5px solid #e0c060;
  height: 52px;
  display: flex; align-items: center;
}

.prefix {
  padding: 0 12px;
  background: rgba(245,197,24,0.12);
  border-right: 1.5px solid #e0c060;
  height: 52px;
  display: flex; align-items: center;
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--crimson-dk);
  white-space: nowrap;
  gap: 4px;
}

input[type="text"],
input[type="tel"] {
  flex: 1;
  border: none; outline: none;
  height: 52px;
  padding: 0 14px;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: transparent;
}
input::placeholder { color: #bbb; font-style: italic; }

.tick {
  padding: 0 10px;
  font-size: 1.1rem;
  transition: all 0.3s;
}

.field.valid   .input-box { border-color: #2ecc71; }
.field.invalid .input-box { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(192,27,44,0.15); }

.err-msg {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--crimson);
  margin-top: 5px;
  display: none;
  padding-left: 4px;
  font-style: italic;
}
.field.invalid .err-msg { display: block; animation: slideErrIn 0.3s ease; }
@keyframes slideErrIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.api-err-box {
  display: none;
  background: rgba(192,27,44,0.1);
  border: 1.5px solid var(--crimson);
  color: var(--crimson-dk);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-family: var(--font-body);
  margin-bottom: 14px;
  text-align: center;
}
.api-err-box.visible { display: block; animation: fadeIn 0.3s ease; }

/* ── Submit Button ── */
.submit-btn {
  width: 100%;
  position: relative;
  background: linear-gradient(135deg, var(--crimson) 0%, var(--maroon) 100%);
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 16px 24px;
  font-family: var(--font-en);
  font-size: 1rem; font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(192,27,44,0.5);
}
.submit-btn:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--crimson-dk);
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(197,150,12,0.6);
}
.submit-btn:hover .btn-arrow-svg { transform: translateX(5px); }
.submit-btn:active { transform: translateY(-1px); }

.btn-label { position: relative; z-index: 1; }
.btn-arrow-svg {
  position: relative; z-index: 1;
  transition: transform 0.3s;
  flex-shrink: 0;
}

.btn-glow {
  position: absolute; top: 50%; left: -60%;
  width: 50%; height: 200%;
  background: rgba(255,255,255,0.2);
  transform: translateY(-50%) skewX(-20deg);
  animation: btnShimmer 2.5s infinite;
}
@keyframes btnShimmer { 0% { left: -60%; } 100% { left: 120%; } }

.submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* ── Loader ── */
.loader-wrap {
  display: none;
  flex-direction: column; align-items: center; gap: 12px;
  margin-top: 16px;
}
.loader-wrap.visible { display: flex; animation: fadeIn 0.3s ease; }

.diya-loader-svg { animation: floatOrnament 1s ease-in-out infinite alternate; }

.loading-text {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--crimson-dk);
  font-size: 0.95rem;
}
.dot-anim i { font-style: normal; animation: dotPulse 1.2s infinite; }
.dot-anim i:nth-child(2) { animation-delay: 0.2s; }
.dot-anim i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

.card-ornament.bottom {
  text-align: center;
  margin-top: 20px;
  color: var(--gold-dark);
  font-family: var(--font-en);
  font-size: 0.85rem;
  letter-spacing: 4px;
}

/* ── Flower row ── */
.flower-row {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 20px;
  align-items: center;
}
.float-flower {
  animation: floatFlower 2.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.float-flower-alt {
  animation: floatFlower 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes floatFlower {
  from { transform: translateY(0) rotate(-5deg); }
  to   { transform: translateY(-8px) rotate(5deg); }
}

/* ══════════════════════════════════════════
   PAGE 2 — GREETING
══════════════════════════════════════════ */
.page2-inner {
  min-height: 100vh;
  padding-top: 20px; padding-bottom: 40px;
  position: relative;
}

.starburst-bg {
  position: absolute; top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    rgba(245,197,24,0.12) 0deg,   transparent 15deg,
    rgba(245,197,24,0.10) 30deg,  transparent 45deg,
    rgba(255,119,34,0.08) 60deg,  transparent 75deg,
    rgba(245,197,24,0.12) 90deg,  transparent 105deg,
    rgba(245,197,24,0.10) 120deg, transparent 135deg,
    rgba(255,119,34,0.08) 150deg, transparent 165deg,
    rgba(245,197,24,0.12) 180deg, transparent 195deg,
    rgba(245,197,24,0.10) 210deg, transparent 225deg,
    rgba(255,119,34,0.08) 240deg, transparent 255deg,
    rgba(245,197,24,0.12) 270deg, transparent 285deg,
    rgba(245,197,24,0.10) 300deg, transparent 315deg,
    rgba(255,119,34,0.08) 330deg, transparent 345deg,
    rgba(245,197,24,0.12) 360deg
  );
  border-radius: 50%;
  animation: rotateBg 20s linear infinite;
  pointer-events: none;
}

.big-lamp-center {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 10px;
  animation: floatLamp 3s ease-in-out infinite alternate;
}
@keyframes floatLamp {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}
.big-diya-svg {
  filter: drop-shadow(0 0 24px rgba(255,210,50,0.8)) drop-shadow(0 8px 20px rgba(0,0,0,0.4));
}

.greeting-main {
  font-family: var(--font-si);
  font-size: clamp(1.8rem, 7vw, 3.2rem);
  font-weight: 900;
  color: var(--gold);
  text-align: center;
  text-shadow:
    0 0 30px rgba(245,197,24,0.9),
    0 4px 0 rgba(0,0,0,0.6),
    0 0 80px rgba(255,119,34,0.4);
  line-height: 1.2;
  animation: greetPulse 2s ease-in-out infinite alternate, fadeSlideUp 0.8s ease both;
  margin-top: 8px;
}
@keyframes greetPulse {
  from { text-shadow: 0 0 30px rgba(245,197,24,0.9), 0 4px 0 rgba(0,0,0,0.6); }
  to   { text-shadow: 0 0 60px rgba(245,197,24,1), 0 4px 0 rgba(0,0,0,0.6), 0 0 120px rgba(255,119,34,0.6); }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.greeting-flowers {
  display: flex; justify-content: center;
  margin: 12px 0;
  animation: floatFlower 2.5s ease-in-out infinite alternate;
}

.greeting-en {
  font-family: var(--font-en);
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  color: rgba(255,232,122,0.85);
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.user-welcome {
  font-family: var(--font-si);
  font-size: 1.2rem;
  color: var(--white);
  text-align: center;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(245,197,24,0.4);
  border-radius: 50px;
  padding: 10px 28px;
  margin-bottom: 14px;
  animation: fadeIn 0.6s 0.3s ease both;
}

.sms-badge {
  display: flex; align-items: center; gap: 10px;
  background: rgba(46,204,113,0.15);
  border: 1.5px solid rgba(46,204,113,0.5);
  border-radius: 50px;
  color: #a8ffc9;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 10px 22px;
  margin-bottom: 24px;
  animation: fadeIn 0.6s 0.5s ease both;
}

/* Timer ring */
.redirect-block {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin-bottom: 20px;
}
.redirect-label {
  font-family: var(--font-body);
  font-style: italic;
  color: rgba(255,232,122,0.75);
  font-size: 0.9rem;
}
.timer-ring {
  position: relative; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.ring-svg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.ring-bg  { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 6; }
.ring-fill {
  fill: none; stroke: var(--gold);
  stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 188.5; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px var(--gold));
  transition: stroke-dashoffset 1s linear;
}
.timer-num {
  position: relative; z-index: 1;
  font-family: var(--font-en);
  font-size: 2rem; font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(245,197,24,0.8);
}

/* Go button */
.go-btn {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--gold) 0%, var(--saffron) 100%);
  color: var(--crimson-dk);
  border: 2.5px solid var(--crimson);
  border-radius: 14px;
  padding: 16px 40px;
  font-family: var(--font-en);
  font-size: 1.05rem; font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(245,197,24,0.5);
  transition: all 0.3s ease;
  margin-bottom: 14px;
  animation: fadeIn 0.6s 0.7s ease both;
}
.go-btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 40px rgba(245,197,24,0.7);
}

.fb-note {
  font-family: var(--font-body);
  font-style: italic;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  text-align: center;
  animation: fadeIn 0.6s 0.9s ease both;
  display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════
   UTILS
══════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 480px) {
  .form-card  { padding: 24px 18px; }
  .line-big   { font-size: 2.2rem; }
  .music-label { display: none; }
  .greeting-main { font-size: 2rem; }
}