/* ==========================================================================
   SlotMoi Landing — standalone export
   All landing-specific styles lifted verbatim from src/app/globals.css
   ========================================================================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #120102;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Animations ─────────────────────────────────────────────────────── */

@keyframes landingGoldGlow {
  0% {
    opacity: 0.62;
    box-shadow: 0 0 8px rgba(252, 209, 22, 0.2), 0 0 0 rgba(252, 209, 22, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 16px rgba(252, 209, 22, 0.78), 0 0 30px rgba(252, 209, 22, 0.45);
  }
  100% {
    opacity: 0.66;
    box-shadow: 0 0 10px rgba(252, 209, 22, 0.3), 0 0 0 rgba(252, 209, 22, 0);
  }
}

@keyframes landingRedGlow {
  0% {
    opacity: 0.7;
    box-shadow: 0 0 6px rgba(255, 80, 0, 0.3), 0 0 0 rgba(255, 80, 0, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(255, 90, 0, 0.85), 0 0 40px rgba(220, 30, 0, 0.45);
  }
  100% {
    opacity: 0.75;
    box-shadow: 0 0 10px rgba(255, 80, 0, 0.35), 0 0 0 rgba(255, 80, 0, 0);
  }
}

@keyframes landingForegroundGlow {
  0% {
    filter: drop-shadow(0 0 8px rgba(252, 209, 22, 0.2)) drop-shadow(0 0 16px rgba(252, 209, 22, 0));
  }
  50% {
    filter: drop-shadow(0 0 24px rgba(252, 209, 22, 0.65)) drop-shadow(0 0 40px rgba(252, 209, 22, 0.35));
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(252, 209, 22, 0.25)) drop-shadow(0 0 20px rgba(252, 209, 22, 0));
  }
}

@keyframes landingTextShimmer {
  0%   { background-position: -150% 50%; }
  100% { background-position:  250% 50%; }
}

@keyframes landingIconAttention {
  0%        { transform: rotate(0deg)   scale(1); }
  6%        { transform: rotate(-18deg) scale(1.15); }
  12%       { transform: rotate(18deg)  scale(1.15); }
  18%       { transform: rotate(-12deg) scale(1.1); }
  24%       { transform: rotate(12deg)  scale(1.1); }
  30%       { transform: rotate(-6deg)  scale(1.05); }
  36%, 100% { transform: rotate(0deg)   scale(1); }
}

/* ── Hero box (gold-bordered overlay) ───────────────────────────────── */

.landing-top-box {
  position: absolute;
  isolation: isolate;
  inset-inline: var(--landing-hero-inset-x);
  top: var(--landing-hero-top);
  height: var(--landing-hero-h);
  border-radius: var(--landing-hero-radius);
  padding: var(--landing-hero-py) var(--landing-hero-px);
}

.landing-top-box::before,
.landing-top-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: landingGoldGlow 2.8s ease-in-out infinite;
}

.landing-top-box::before {
  border: 1px solid rgba(252, 209, 22, 0.85);
}

.landing-top-box::after {
  inset: 10px;
  border-radius: 14px;
  border: 1px solid rgba(252, 209, 22, 0.55);
  animation-delay: 0.9s;
}

.landing-foreground {
  top: var(--landing-fore-top);
  width: var(--landing-fore-w);
  animation: landingForegroundGlow 3s ease-in-out infinite;
}

@media (min-width: 640px) {
  .landing-top-box {
    inset-inline: var(--landing-hero-inset-x-sm);
    top: var(--landing-hero-top-sm);
    height: var(--landing-hero-h-sm);
    padding: var(--landing-hero-py-sm) var(--landing-hero-px-sm);
  }
  .landing-foreground {
    top: var(--landing-fore-top-sm);
    width: var(--landing-fore-w-sm);
  }
}

@media (min-width: 1024px) {
  .landing-top-box {
    inset-inline: var(--landing-hero-inset-x-lg);
    padding-inline: var(--landing-hero-px-lg);
  }
}

/* ── Telegram button ────────────────────────────────────────────────── */

.landing-telegram-btn {
  position: relative;
  padding: var(--landing-btn-py) var(--landing-btn-px);
  border-radius: var(--landing-btn-radius);
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 115, 20, 0.62) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 92%, rgba(0, 0, 0, 0.65) 0%, transparent 50%),
    linear-gradient(180deg, #c41a00 0%, #8f0000 38%, #5c0000 68%, #270000 100%);
  border: none;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    0 0 24px rgba(255, 70, 0, 0.75),
    0 0 60px rgba(180, 20, 0, 0.38),
    inset 0 1px 0 rgba(255, 155, 60, 0.45),
    inset 0 -3px 10px rgba(0, 0, 0, 0.8);
}

.landing-telegram-btn::before,
.landing-telegram-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: landingRedGlow 2.8s ease-in-out infinite;
}

.landing-telegram-btn::before {
  border: 1.5px solid rgba(255, 105, 30, 0.92);
  box-shadow: inset 0 0 18px rgba(255, 75, 0, 0.28);
}

.landing-telegram-btn::after {
  inset: 4px;
  border: 1px solid rgba(255, 165, 60, 0.32);
  animation-delay: 0.9s;
}

.landing-btn-text {
  background-image:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(180deg, #FFFACC 0%, #FFE040 20%, #C8860A 55%, #7A4A00 85%, #4A2800 100%);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
  animation: landingTextShimmer 3.6s linear infinite;
}

.landing-telegram-icon {
  animation: landingIconAttention 3.6s ease-in-out infinite;
  transform-origin: center center;
}

/* ── Headline / amount gold text + shimmer ──────────────────────────── */

.landing-headline,
.landing-amount {
  background: linear-gradient(180deg, #FFE680 0%, #FCD116 45%, #B8860B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  filter: drop-shadow(0 0 10px rgba(252, 209, 22, 0.35));
}

.landing-shimmer {
  position: relative;
  background-image:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(180deg, #FFE680 0%, #FCD116 45%, #B8860B 100%);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: landingTextShimmer 3.6s linear infinite;
}

.landing-lotus {
  color: #FCD116;
  filter: drop-shadow(0 0 8px rgba(252, 209, 22, 0.5));
}

/* ── Info card ─────────────────────────────────────────────────────── */

.landing-info-card {
  isolation: isolate;
  border-radius: var(--landing-card-radius);
  padding: var(--landing-card-py) var(--landing-card-px);
}

.landing-info-card::before,
.landing-info-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: landingGoldGlow 2.8s ease-in-out infinite;
}

.landing-info-card::before {
  border: 1px solid rgba(252, 209, 22, 0.7);
}

.landing-info-card::after {
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(252, 209, 22, 0.4);
  animation-delay: 0.9s;
}

.landing-dragon {
  filter: drop-shadow(0 0 6px rgba(252, 209, 22, 0.5));
}

/* ================================================================
   LANDING PAGE LAYOUT TUNING
   Breakpoints: mobile = <640 px  |  sm = ≥640 px  |  lg = ≥1024 px
   ================================================================ */
:root {
  /* 1. PAGE WRAPPER */
  --landing-page-max-w:      460px;
  --landing-page-max-w-sm:   820px;
  --landing-page-col-gap:    1.5rem;
  --landing-page-col-gap-sm: 2.5rem;

  /* 2. IMAGE CONTAINER */
  --landing-box-radius:    28px;
  --landing-box-aspect-sm: 5/6;

  /* 3. HERO BOX */
  --landing-hero-inset-x:    1.5rem;
  --landing-hero-inset-x-sm: 2rem;
  --landing-hero-inset-x-lg: 3rem;
  --landing-hero-top:        1rem;
  --landing-hero-top-sm:     2rem;
  --landing-hero-h:          67%;
  --landing-hero-h-sm:       65%;
  --landing-hero-radius:     22px;
  --landing-hero-px:         1rem;
  --landing-hero-py:         1rem;
  --landing-hero-px-sm:      2rem;
  --landing-hero-py-sm:      1.5rem;
  --landing-hero-px-lg:      3rem;
  --landing-hero-pt:         8%;

  /* 4. FOREGROUND IMAGE */
  --landing-fore-top:    65%;
  --landing-fore-top-sm: 62%;
  --landing-fore-w:      92%;
  --landing-fore-w-sm:   78%;

  /* 5. HEADLINE TEXT */
  --landing-headline-size:    2.25rem;
  --landing-headline-size-sm: 3.75rem;
  --landing-headline-size-lg: 4.5rem;

  /* 6. AMOUNT TEXT */
  --landing-amount-size:    3rem;
  --landing-amount-size-sm: 4.5rem;
  --landing-amount-size-lg: 6rem;

  /* 7. SUBTITLE TEXT */
  --landing-subtitle-size:    1rem;
  --landing-subtitle-size-sm: 1.25rem;
  --landing-subtitle-size-lg: 1.5rem;

  /* 8. CTA SECTION */
  --landing-cta-overlap:    -6.5rem;
  --landing-cta-overlap-sm: -15rem;
  --landing-cta-gap:        1.25rem;
  --landing-cta-gap-sm:     1.5rem;

  /* 9. TELEGRAM BUTTON */
  --landing-btn-px:     3rem;
  --landing-btn-py:     1.25rem;
  --landing-btn-px-sm:  4rem;
  --landing-btn-py-sm:  1.5rem;
  --landing-btn-radius: 0.75rem;

  /* 10. INFO CARD */
  --landing-card-max-w:  760px;
  --landing-card-radius: 14px;
  --landing-card-px:     1.25rem;
  --landing-card-py:     1.5rem;
  --landing-card-px-sm:  2rem;
  --landing-card-py-sm:  2rem;

  /* 11. LEFT COIN */
  --landing-coin-l-w:     28%;
  --landing-coin-l-w-sm:  22%;
  --landing-coin-l-max-w: 200px;
  --landing-coin-l-x:    -18%;
  --landing-coin-l-y:     12%;

  /* 12. RIGHT COIN */
  --landing-coin-r-w:     22%;
  --landing-coin-r-w-sm:  18%;
  --landing-coin-r-max-w: 160px;
  --landing-coin-r-x:     18%;
  --landing-coin-r-y:     7%;
}

/* ── Component styles wired to the vars ─────────────────────────────── */

.landing-col {
  max-width: var(--landing-page-max-w);
  gap: var(--landing-page-col-gap);
  margin-left: auto;
  margin-right: auto;
}

.landing-image-box {
  border-radius: var(--landing-box-radius);
}

.landing-hero-content {
  padding-top: var(--landing-hero-pt);
}

.landing-headline-text { font-size: var(--landing-headline-size); }
.landing-amount-text   { font-size: var(--landing-amount-size); }
.landing-subtitle-text { font-size: var(--landing-subtitle-size); }

.landing-cta {
  margin-top: var(--landing-cta-overlap);
  gap: var(--landing-cta-gap);
}

.landing-card-wrap {
  max-width: var(--landing-card-max-w);
  margin-left: auto;
  margin-right: auto;
}

.landing-coin-l {
  width: var(--landing-coin-l-w);
  max-width: var(--landing-coin-l-max-w);
  transform: translateX(var(--landing-coin-l-x)) translateY(var(--landing-coin-l-y));
}

.landing-coin-r {
  width: var(--landing-coin-r-w);
  max-width: var(--landing-coin-r-max-w);
  transform: translateX(var(--landing-coin-r-x)) translateY(var(--landing-coin-r-y));
}

@media (min-width: 640px) {
  .landing-col           { max-width: var(--landing-page-max-w-sm); gap: var(--landing-page-col-gap-sm); }
  .landing-image-box     { aspect-ratio: var(--landing-box-aspect-sm); }
  .landing-headline-text { font-size: var(--landing-headline-size-sm); }
  .landing-amount-text   { font-size: var(--landing-amount-size-sm); }
  .landing-subtitle-text { font-size: var(--landing-subtitle-size-sm); }
  .landing-cta           { margin-top: var(--landing-cta-overlap-sm); gap: var(--landing-cta-gap-sm); }
  .landing-telegram-btn  { padding: var(--landing-btn-py-sm) var(--landing-btn-px-sm); }
  .landing-info-card     { padding: var(--landing-card-py-sm) var(--landing-card-px-sm); }
  .landing-coin-l        { width: var(--landing-coin-l-w-sm); }
  .landing-coin-r        { width: var(--landing-coin-r-w-sm); }
}

@media (min-width: 1024px) {
  .landing-headline-text { font-size: var(--landing-headline-size-lg); }
  .landing-amount-text   { font-size: var(--landing-amount-size-lg); }
  .landing-subtitle-text { font-size: var(--landing-subtitle-size-lg); }
}