/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: 'AppleGaramond';
  src: url('AppleGaramond-BoldItalic.woff2') format('woff2'),
       url('AppleGaramond-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

html, body {
  height: 100%;
  font-family: 'AppleGaramond', serif;
  background: transparent; /* blå bakgrund lik bilden */
  color: white;
  font-size: 18px;
}

/* Full-page background image behind everything */
body::before {
  content: "";
  position: fixed;      /* sticks to the viewport */
  inset: 0;
  background: url('city-bg.png') center / cover no-repeat;
  z-index: -1;          /* sits behind all content */
  filter: blur(4px) brightness(0.75);         /* or try blur(2px) brightness(0.9) */
}

/* Optional: add a subtle overlay for contrast */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);  /* darken a touch for readability */
  z-index: -1;
}

.container {
  max-width: 900px;
  margin: 24px auto 48px;
  padding: 0 16px;
}

/* Kort runt videon */
.card {
  background: none;          /* tar bort den grå bakgrunden */
  border: none;              /* tar bort ramen */
  box-shadow: none;          /* tar bort skuggan */
  border-radius: 0;          /* tar bort rundade hörn */
  padding: 0;                /* tar bort inre marginal */
}

/* Håller 16:9-format och gör videon responsiv */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 8px;
  overflow: hidden;
}

/* Själva videon/iframes fyller hela ytan */
.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.caption {
  opacity: 0.9;
  margin-top: 18px;
  line-height: 1.5;
}

/* Ny grupp som håller ihop PUMP + PETE + X tätt */
.logo-group {
  display: flex;
  align-items: center;
  gap: 48px;   /* justera 4–10px efter smak */
}

/* pump.fun till vänster */
.pump-logo {
  width: 80px;   /* matcha visuellt mot X-loggan */
  height: auto;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.pump-logo:hover { opacity: 1; }

/* X till höger */
.x-logo {
  width: 80px;   /* lite mindre än pump */
  height: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.x-logo:hover { opacity: 1; }

/* Animation för PETE-loggan */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.95; }
  100% { transform: scale(1); opacity: 1; }
}

.logo {
  height: auto;
  max-width: 350px;
  animation: pulse 3s ease-in-out infinite;
}

.rick-gif {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

/* HEADER SECTION */
.header {
  position: relative;
  width: 100%;
  height: 160px;              /* your banner height */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Banner image behind the logos */
.banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px) brightness(0.7);
  transform: scale(1.05);
  z-index: 0;

    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
.title { z-index: 1; }

/* Logos row centered on top of banner */
.title {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 100%;
}

/* Space between stacked video sections */
.video-section { margin-top: 32px; }
.video-section:first-of-type { margin-top: 0; }
   
/* Default överallt */
html, body {
  cursor: url('cursor-default.png') 16 16, auto;
}

/* Hover över klickbara element (länkar, knappar, etc.) */
a, button, [role="button"], .btn {
  cursor: url('cursor-hover.png') 16 16, pointer;
}

/* Active (mousedown) – CSS räcker på elementnivå */
a:active, button:active, [role="button"]:active, .btn:active {
  cursor: url('cursor-active.png') 16 16, pointer;
}

/* Global aktiv cursor medan musknappen hålls nere var som helst */
body.is-clicking {
  cursor: url('cursor-active.png') 16 16, auto;
}

#custom-cursor.is-angry {
  background-image: url('cursor-angry.png'); /* lägg din sura bild här */
  transform: translate(-50%, -50%) rotate(10deg) scale(1.2);
  filter: hue-rotate(-20deg) brightness(0.9);
}

/* Angry-läge */
body.angry-cursor {
  cursor: url('cursor-angry.png') 16 16, auto !important;
}

@media (max-width: 480px) {
  .logo { max-width: 160px; }
  .pump-logo { width: 24px; }
  .x-logo { width: 22px; }
  .logo-group { gap: 6px; }
  .caption { font-size: 14px; line-height: 1.3; }
}