/* ─────────────────────────────────────────────────────────────
   Layout repairs for the de-framework'd build.

   Swiper.js sized .swiper-slide at runtime. With the JS runtime
   stripped, every slide defaulted to 100% width and only the first
   was visible. These rules lay the slides out statically instead.

   Loaded AFTER the original stylesheets; the originals are untouched.
   ───────────────────────────────────────────────────────────── */

/* ── Section backgrounds (Media, footer) ───────────────────
   index.html's asset paths were made relative, which renamed these
   Tailwind classes ('/assets/…' -> 'assets/…'). The original rules in
   css/7c1e3b819285c07d.css only match the old names, so re-attach the
   same images to the new ones. */
[class~="bg-[url('assets/mobile/section2/bg.jpg')]"] {
  background-image: url(images/bg.jpg);
}
[class~="bg-[url('assets/desktop/section17/bg.jpg')]"] {
  background-image: url(images/bg_1.jpg);
}
@media (min-width: 640px) {
  [class~="sm:bg-[url('assets/desktop/section2/bg.jpg')]"] {
    background-image: url(images/bg_2.jpg);
  }
}

/* ── Carousels → static rows ─────────────────────────────── */
.swiper {
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  /* Swiper drove position via transform; neutralise it. */
  transform: none !important;
  width: 100% !important;
}

.swiper-slide {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

.swiper-slide > * {
  height: 100%;
}

/* Three-up sections: platform cards, buy steps, roadmap phases */
#influencerPlatform .swiper-wrapper,
#howtobuy .swiper-wrapper,
#roadmap .swiper-wrapper {
  flex-wrap: wrap;
  justify-content: center;
}

#influencerPlatform .swiper-slide,
#howtobuy .swiper-slide,
#roadmap .swiper-slide {
  flex: 1 1 300px;
  max-width: 33.333%;
}

@media (max-width: 1023px) {
  #influencerPlatform .swiper-slide,
  #howtobuy .swiper-slide,
  #roadmap .swiper-slide {
    max-width: 100%;
    flex-basis: 100%;
  }
}

/* How to Buy: each card is a fixed 465px (lg:w-[465px]) inside a slide
   stretched to a third of the row, so the cards sat left-aligned: flush
   against the screen's left edge, with a gap growing on the right as the
   screen widens. Centre one row of equal cards with even margins. */
@media (min-width: 1024px) {
  #howtobuy .swiper-wrapper {
    max-width: min(94%, 1500px);
    margin: 0 auto;
    gap: 2rem;
  }
  #howtobuy .swiper-slide {
    flex: 1 1 0;
    max-width: 465px;
  }
  #howtobuy .swiper-slide > div {
    width: 100%;
  }
}

/* Media reel: 6 slides — scroll them continuously, as the carousel did */
#media .swiper-wrapper {
  width: max-content !important;
  gap: 2rem;
  animation: reel-scroll 40s linear infinite;
}

#media .swiper-slide {
  flex: 0 0 auto;
  width: 320px !important;
}

#media .swiper:hover .swiper-wrapper {
  animation-play-state: paused;
}

@keyframes reel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Swiper's own chrome is meaningless without the library */
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination,
.swiper-scrollbar {
  display: none !important;
}

/* ── Announcement tickers ────────────────────────────────── */
/* The original animation lived in styled-jsx, which went with the
   runtime. Content ran off the right edge and never moved. */
.scrolling-banner {
  width: max-content !important;
  animation: banner-scroll 30s linear infinite;
  will-change: transform;
}

.scrolling-banner:hover {
  animation-play-state: paused;
}

@keyframes banner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── "As Featured In" logo strip ─────────────────────────── */
/* Same lost styled-jsx marquee. Without it the flex row squeezed every
   logo to 0px wide (a % -width image has no minimum width). The trailing
   padding equals the 3rem gap, so -50% lands exactly one set along. */
.scrolling-container {
  width: max-content !important;
  padding-right: 3rem;
  animation: banner-scroll 40s linear infinite;
  will-change: transform;
}

.scrolling-container > * {
  flex-shrink: 0;
}

.scrolling-container:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .scrolling-banner,
  .scrolling-container,
  #media .swiper-wrapper {
    animation: none !important;
  }
  .scrolling-banner { width: 100% !important; }
  .scrolling-container {
    width: 100% !important;
    padding: 0 1rem;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.5rem;
  }
  .scrolling-container > [aria-hidden="true"] { display: none; }
}

/* ── Phones: stop the sideways wobble ────────────────────── */
/* The ticker wrapper measured 376px on a 375px screen, and a coin image
   sits at right:-2rem. `clip` stops horizontal scroll without creating a
   scroll container, so fixed/sticky elements keep working. */
html,
body {
  overflow-x: clip;
}

#staking .bg-\[\#8A1C1D\] {
  max-width: 100%;
}

/* ── Tablets & phones: carousels swipe, one card at a time ── */
/* The original Swiper showed one slide and let you swipe. Native
   scroll-snap reproduces that with no library. Covers the mobile-only
   tokenomics carousel, which was being crushed to 56px slides. */
@media (max-width: 1023px) {
  .swiper {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .swiper::-webkit-scrollbar {
    display: none;
  }

  .swiper-wrapper,
  #influencerPlatform .swiper-wrapper,
  #howtobuy .swiper-wrapper,
  #roadmap .swiper-wrapper {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content !important;
    gap: 1rem;
    padding: 0 7.5vw;
  }

  .swiper-slide,
  #influencerPlatform .swiper-slide,
  #howtobuy .swiper-slide,
  #roadmap .swiper-slide,
  #tokenomics .swiper-slide {
    flex: 0 0 85vw !important;
    width: 85vw !important;
    max-width: 85vw !important;
    scroll-snap-align: center;
  }

  /* The media reel keeps its continuous marquee rather than snapping */
  #media .swiper {
    overflow: hidden;
    scroll-snap-type: none;
  }
  #media .swiper-wrapper {
    padding: 0;
  }
  #media .swiper-slide {
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: none !important;
    scroll-snap-align: none;
  }
}

/* ── Staking page dashboard ────────────────────────────────────────────
   The vendor stylesheet (c5c4e823531d8334.css) was never archived. The
   STRUCTURE and TYPOGRAPHY below are measured from the same vendor's live
   dashboard (Web3Payments — identical markup: .box-wrap/.box/.title/
   .chart-wrapper/.graph-parent): 2px white card borders, 16px radius,
   20px padding and gaps, uppercase titles tracked 1.4px, a 3px-bordered
   20px-radius chart panel with a 14px uppercase title. The COLOURS are
   INPEPE's own, from the homepage buy widget: #35384F panel at 70% with
   backdrop blur, white borders, and the teal glow rgb(99,165,178).
   Scoped to .page-staking so the homepage is untouched. ─────────────── */
.page-staking .dashboard {
  position: relative;
}
/* the container ships with no side padding, so cards and chart hit the
   screen edge on phones; give both one shared gutter and one width */
.page-staking .dashboard .container {
  padding-left: 16px;
  padding-right: 16px;
}
.page-staking .heading {
  font-family: GroBold, sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.2;
  text-shadow: rgb(99, 165, 178) 0 0 18px, rgb(99, 165, 178) 0 0 1px;
}
.page-staking .sub-head {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 500;
}
.page-staking .box-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  width: 100%;
}
.page-staking .box,
.page-staking .chart-wrapper {
  background: rgba(53, 56, 79, 0.7);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 2px solid #fff;
  box-shadow: 0 0 2px #fff;
  color: #fff;
}
.page-staking .box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 20px;
  border-radius: 16px;
}
.page-staking .box .title {
  display: block;
  font-family: Cairo, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 1.4px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
}
.page-staking .box h2 {
  font-family: Cairo, system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
}
.page-staking .chart-wrapper {
  border-width: 3px;
  border-radius: 20px;
  padding: 0 0 12px;
}
.page-staking .chart-wrapper h4 {
  margin: 0;
  padding: 20px 8px 18px;
  font-family: Cairo, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
}
.page-staking .graph-parent {
  width: auto;
  padding: 0 8px;
}
.page-staking .token,
.page-staking .img-fluid {
  max-width: 100%;
  height: auto;
}
.page-staking .w-100 {
  width: 100%;
}

/* Staking dashboard: never strand the 5th card on a row of its own.
   Wide: 5 across. Tablet: 3 + 2, second row centred. Phone: stacked. */
@media (min-width: 1200px) {
  .page-staking .box-wrap {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .page-staking .box-wrap {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .page-staking .box-wrap > .box {
    grid-column: span 2;
  }
  .page-staking .box-wrap > .box:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .page-staking .box-wrap > .box:nth-child(5) {
    grid-column: 4 / span 2;
  }
}
@media (max-width: 767px) {
  .page-staking .box-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Match the vendor dashboard's own desktop proportions: the second card
   (% of Pool — two stats and a button) runs ~31% wider than the rest.
   Measured on the same vendor's live staking page. */
@media (min-width: 1200px) {
  .page-staking .box-wrap {
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 1.31fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* The Total Supply chart (drawn by app.js into .graph-parent) */
.page-staking .graph-parent {
  min-height: 1px;
}
.page-staking .graph-parent svg rect {
  transition: opacity 0.15s ease;
}
.page-staking .graph-parent svg rect:hover {
  opacity: 0.75;
}

/* ── Utilities the saved CSS lost ──────────────────────────────────────
   These classes are in the original markup but no captured stylesheet
   defines them (they lived in a CSS chunk that was never saved). They are
   standard Tailwind v3 utilities, so the rules follow exactly from the
   class names, at the site's own breakpoints (lg 1024px, 2xl 1536px).
   Attribute selectors avoid escaping the class names. ────────────────── */
@media (min-width: 1536px) {
  [class~="2xl:-mt-[6rem]"]      { margin-top: -6rem; }
  [class~="2xl:bg-white"]        { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); }
  [class~="2xl:bg-opacity-30"]   { --tw-bg-opacity: 0.3; }
  [class~="2xl:gap-10"]          { gap: 2.5rem; }
  [class~="2xl:gap-20"]          { gap: 5rem; }
  [class~="2xl:gap-[3rem]"]      { gap: 3rem; }
  [class~="2xl:h-[5rem]"]        { height: 5rem; }
  [class~="2xl:h-[23rem]"]       { height: 23rem; }
  [class~="2xl:h-[28rem]"]       { height: 28rem; }
  [class~="2xl:h-[30rem]"]       { height: 30rem; }
  [class~="2xl:min-h-[100vh]"]   { min-height: 100vh; }
  [class~="2xl:w-[15rem]"]       { width: 15rem; }
  [class~="2xl:w-[25%]"]         { width: 25%; }
  [class~="2xl:w-[28rem]"]       { width: 28rem; }
  [class~="2xl:w-[40%]"]         { width: 40%; }
  [class~="2xl:w-[50rem]"]       { width: 50rem; }
  [class~="2xl:w-[80%]"]         { width: 80%; }
  [class~="2xl:items-end"]       { align-items: flex-end; }
  [class~="2xl:justify-end"]     { justify-content: flex-end; }
  [class~="2xl:px-10"]           { padding-left: 2.5rem; padding-right: 2.5rem; }
  [class~="2xl:text-[3.4rem]"]   { font-size: 3.4rem; }
  [class~="2xl:text-sm"]         { font-size: 0.875rem; line-height: 1.25rem; }
  [class~="2xl:top-[48%]"]       { top: 48%; }
  [class~="2xl:top-[5.4rem]"]    { top: 5.4rem; }
}
@media (min-width: 1024px) {
  [class~="lg:from-[rgba(24,13,82,0)]"] {
    --tw-gradient-from: rgba(24, 13, 82, 0) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(24, 13, 82, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  [class~="lg:via-[rgba(24,13,82,0.3)]"] {
    --tw-gradient-to: rgba(24, 13, 82, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(24, 13, 82, 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
  }
  /* Tailwind emits `to` after `via`; restate it so the via rule above
     (loaded later than the original sheet) doesn't clobber the end colour */
  [class~="lg:to-[#131B58]"] {
    --tw-gradient-to: #131b58 var(--tw-gradient-to-position);
  }
}
[class~="via-47%"] { --tw-gradient-via-position: 47%; }
[class~="hover:drop-shadow-[0px_0px_18px_rgb(99,165,178)]"]:hover {
  filter: drop-shadow(0 0 18px rgb(99, 165, 178));
}

/* Media reel is now driven by app.js so its arrows work (was a CSS loop) */
#media .swiper-wrapper {
  animation: none !important;
  will-change: transform;
}

/* ── "Let's Compare the Numbers" (#memeCoin) ─────────────── */
/* The desktop headline block ("$INPEPE's Mission" + the yellow
   no-wrap tagline) has no phone breakpoint, so phones showed it twice:
   once running off the screen, once properly in the phone-only block
   further down. The PEPE/DOGE row's -mt-10 then pulled the coins on top
   of it. Phones: hide the desktop copy, give the coins room.
   Tablets: keep it, but let the tagline wrap and centre it. */
@media (max-width: 1023px) {
  #memeCoin .overflow-x-hidden > .text-center.w-full.pl-10 {
    padding: 0 1.5rem;
  }
  #memeCoin .overflow-x-hidden > .text-center.w-full.pl-10 .whitespace-nowrap {
    white-space: normal;
  }
}
@media (max-width: 639px) {
  #memeCoin .overflow-x-hidden > .text-center.w-full.pl-10 {
    display: none;
  }
  #memeCoin [class~="-mt-10"] {
    margin-top: 2rem;
  }
}

/* ── "Why Invest Now?" cards (#risingAbove) ──────────────── */
/* Each card's empty 80px slot held a Lottie animation ("small head
   flashing": the sunglasses Pepe head with a golden starburst that grows,
   turns and fades behind it every 2.3 s). The player went with the
   runtime and the animation itself was a 4.7 MB JSON, so it is rebuilt
   here from its own two images (assets/why/) with the same timing. */
#risingAbove .bg-\[\#779E5A\] {
  position: relative;
  background: linear-gradient(160deg, #93c26f 0%, #74a352 50%, #5b8b3a 100%);
  border: 2px solid rgba(255, 255, 255, 0.35);
  filter: none;
  box-shadow: 0 18px 40px -14px rgba(18, 42, 8, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
#risingAbove .bg-\[\#779E5A\]:hover {
  transform: translateY(-6px);
  border-color: #ffd157;
  box-shadow: 0 26px 50px -14px rgba(18, 42, 8, 0.65), 0 0 0 4px rgba(255, 209, 87, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
#risingAbove .bg-\[\#779E5A\] > p {
  padding: 1.1rem 1.5rem 2rem;
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}
/* gold rule between the icon and the text */
#risingAbove .bg-\[\#779E5A\] > p::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin: 0 auto 1rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #ffc300, #ffe28a);
  box-shadow: 0 0 10px rgba(255, 209, 87, 0.7);
}

/* the icon: burst behind (::before), badge with the head in front (::after) */
#risingAbove .bg-\[\#779E5A\] [style*="width:80px"] {
  position: relative;
  isolation: isolate;
  animation: why-bob 2.3s ease-in-out infinite;
  animation-delay: var(--why-delay, 0s);
}
#risingAbove .bg-\[\#779E5A\] [style*="width:80px"]::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  background: url(assets/why/burst.png) center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: why-burst 2.3s ease-in-out infinite;
  animation-delay: var(--why-delay, 0s);
}
#risingAbove .bg-\[\#779E5A\] [style*="width:80px"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  border: 3px solid #ffd157;
  background: url(assets/why/head.png) center 60% / 82% no-repeat,
    radial-gradient(circle at 35% 30%, #5d9139, #2c5220 75%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 0 5px rgba(255, 209, 87, 0.22);
}
/* stagger the three flashes */
#risingAbove .grid > :nth-child(2) { --why-delay: 0.45s; }
#risingAbove .grid > :nth-child(3) { --why-delay: 0.9s; }

@keyframes why-burst {
  0%   { opacity: 0; transform: scale(0.3) rotate(24deg); }
  65%  { opacity: 1; transform: scale(1) rotate(-40deg); }
  87%  { opacity: 1; transform: scale(1) rotate(-40deg); }
  100% { opacity: 0; transform: scale(0.3) rotate(24deg); }
}
@keyframes why-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  #risingAbove .bg-\[\#779E5A\],
  #risingAbove .bg-\[\#779E5A\]:hover { transform: none; transition: none; }
  #risingAbove .bg-\[\#779E5A\] [style*="width:80px"] { animation: none; }
  #risingAbove .bg-\[\#779E5A\] [style*="width:80px"]::before {
    animation: none;
    opacity: 0.85;
    transform: scale(0.9);
  }
}

/* ── Ticker icons ───────────────────────────────────────────── */
/* Same "small head flashing" Lottie at 40px between the red ticker's
   messages (the live site showed the Pepe head there); the empty slots left
   bare gaps. Head only, no badge ring, same burst behind it. */
.scrolling-banner [style*="width:40px"] {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
}
.scrolling-banner [style*="width:40px"]::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  background: url(assets/why/burst.png) center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: why-burst 2.3s ease-in-out infinite;
}
.scrolling-banner [style*="width:40px"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url(assets/why/head.png) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .scrolling-banner [style*="width:40px"]::before { animation: none; opacity: 0; }
}

/* ── How to Buy: "You are now an $INPEPE Investor!" ─────────── */
/* Its wrapper is nudged 40px left on desktop (lg:-left-10) so the pointing
   Pepe lines up, which dragged the full-width caption off centre with it.
   Shift the caption back; the image keeps the original offset. */
@media (min-width: 1024px) {
  #howtobuy .absolute.w-full.flex-col > p.absolute {
    left: 2.5rem;
  }
}

/* ── Staking page: heading hidden under the fixed header ────── */
/* The vendor stylesheet that spaced the dashboard below the fixed navbar
   + ticker (140px on phones, 132px on desktop) was never archived, so
   "Welcome to $INPEPE Staking" and its intro sat underneath them. The page
   also had no ground colour: past the 100vh video, phones showed a pale
   page and the white footer text vanished. Use the video's own fallback. */
.page-staking {
  background-color: #172047;
}
.page-staking .dashboard {
  padding-top: 170px;
}
@media (min-width: 1024px) {
  .page-staking .dashboard { padding-top: 165px; }
}

/* ── Tokenomics (phones): cards stuck in their start state ──── */
/* The swipe cards carry framer-motion's inline start state (opacity 0,
   50px offset). Inside the sideways scroller the reveal never fired, so
   card 1 sat half off-screen and cards 2–5 stayed invisible. */
#tokenomics .swiper-slide > [style*="opacity"] {
  opacity: 1 !important;
  transform: none !important;
}
/* ground colour under the desktop artwork, for the room app.js adds
   when the allocation panel is taller than the artwork */
#tokenomics {
  background-color: #0d1a1d;
}

/* ── Menus that wrapped onto two lines ──────────────────────── */
/* 1024–1279px: "Who is InfluencerPepe?" and "How to Buy" broke in two and
   the menu collided with the icons. Keep every item on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .navbar ul.flex { gap: 0.5rem; margin-right: 0.9rem; }
  .navbar ul.flex li a {
    white-space: nowrap;
    font-size: 0.64rem;
  }
  .navbar a[href="#"] img.lg\:block { width: 7rem; }
}
/* footer menu wrapped the same two items on every desktop width */
@media (min-width: 1024px) {
  #footer ul li a { white-space: nowrap; }
}

/* ── Header legibility over light sections (desktop) ────────── */
/* The desktop bar is 10% black + blur; over the pale teal "How to Buy"
   and grey tokenomics panels its white menu text all but disappeared. */
@media (min-width: 1024px) {
  .navbar {
    background-color: rgba(16, 20, 48, 0.55);
  }
}

/* ── Utility section: the same paragraph printed twice ──────── */
/* "With $INPEPE as the standard currency…" appears three times in the
   markup: once for all widths plus a desktop-only and a phone-only copy,
   so every visitor read it twice. Keep the first. */
#details p.hidden.lg\:block.mt-12,
#details p.my-6.px-5 {
  display: none !important;
}

/* phones: the tokenomics card keeps the original carousel's 48px offset
   (left-[3rem]); with Swiper gone that pushed it past its slide's right
   edge, so card 1 sat half off-screen */
@media (max-width: 1023px) {
  #tokenomics .swiper-slide > .left-\[3rem\] {
    left: 0;
  }
}