/*
  Holographic Pokémon‑style Card implementation
  The CSS variables defined here control the size of the card and the
  appearance of the hololayer and shine effects.  When the mouse moves
  across the card the variables are updated via JavaScript to tilt
  the card and reposition the radial highlight.  A subtle animated
  glitter layer runs continuously to give the impression of a foil
  holographic surface.
*/
:root {
  --card-width: 320px;
  --card-aspect: 1.39; /* height/width ratio approximating a Pokémon TCG card */
}

.phone-mockup {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  max-height: 520px !important;
  opacity: 0;
  transform: translateY(40px);
}

.card-container {
  width: var(--card-width);
  height: calc(var(--card-width) * var(--card-aspect));
  perspective: 1000px;
  transition: transform 0.3s ease;
}

.card-container:hover {
  transform: scale(1.05);
}

.holo-card {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #222;
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px,
    rgba(17, 17, 26, 0.05) 0px 8px 32px;
  /* variables controlling rotation set via JS */
}

/* card artwork – using a galaxy background from the original repo */
.holo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Use a local image for the card art.  This file lives in the same
             directory as the HTML file.  If you wish to substitute your own
             artwork just replace galaxy.jpg with any image of the same aspect. */
  /* background-color: #0096F7; */
  background-image: url("./shareImages/cardTexture.svg");
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  border-radius: inherit;
  filter: brightness(1.1) contrast(1.2);
  z-index: 1;
}

/* center video element */
.center-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  aspect-ratio: 1;
  object-fit: cover;
  z-index: 0;
  border-radius: 24px;
}

/* animated glitter/foil layer */
.holo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* two backgrounds: a moving gradient and a glitter texture */
  background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 30%,
      rgba(255, 255, 255, 0.15) 60%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    url("./shareImages/glitter.png");
  background-size: 50% 50%, 25% 25%;
  mix-blend-mode: overlay;
  animation: holoShift 12s linear infinite;
  opacity: 0.4;
  z-index: 2;
}

/* radial shine that follows the pointer */
.shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgba(255, 255, 255, 0.3),
    transparent 60%
  );
  mix-blend-mode: screen;
  opacity: calc(var(--pointer-intensity, 0) * 0.8);
  transition: opacity 0.15s;
  z-index: 3;
}

/* label area at the bottom of the card */
.info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.9rem;
}

@keyframes holoShift {
  0% {
    background-position: 0% 0%, 0% 0%;
  }
  100% {
    background-position: 100% 100%, 100% 100%;
  }
}

/* Share Invite UI Styles */
.share-step-1,
.share-step-2 {
  margin: 40px auto;
  text-align: center;
  max-width: 400px;
  opacity: 0;
  transform: translateY(40px);
}

.share-code-container {
  margin: 16px auto 32px auto;
  max-width: 400px;
  opacity: 0;
  transform: translateY(40px);
}

.step-label {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.step-description {
  font-size: 16px;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.4;
}

.share-code-container {
  background: #f5f5f7;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: center;
}

.share-code-container:hover {
  background: #e5e5e5;
}

.share-code {
  font-family: "FT Regola Neue Medium", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 20px;
  color: #000;
}

.copy-icon {
  width: 20px;
  height: 20px;
  color: #666;
  transition: color 0.2s ease;
}

.share-code-container:hover .copy-icon {
  color: #000;
}

/* Download buttons initial hidden state */
.download-section {
  opacity: 0;
  transform: translateY(40px);
}