:root {
  --red-500: #e5092f;
  --red-700: #b00020;
  --black: #09090b;
  --ink: #18181b;
  --white: #ffffff;
  --soft-white: #fff8f8;
  --shadow: 0 28px 90px rgba(176, 0, 32, 0.24);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Crimson Text", Georgia, serif;
  background: var(--black);
}

/* ── Tela de entrada ── */
.entry-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(176, 0, 32, 0.18) 0, transparent 60%),
    rgba(9, 9, 11, 0.92);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: opacity 600ms ease, visibility 600ms ease;
}

.entry-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entry-content {
  text-align: center;
  color: #fff;
  user-select: none;
}

.entry-eyebrow {
  margin: 0 0 0.5rem;
  color: rgba(229, 9, 47, 0.9);
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.entry-title {
  margin: 0 0 2rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.8rem, 12vw, 8rem);
  font-weight: 700;
  line-height: 0.92;
  color: #fff8f8;
  text-shadow: 0 0 60px rgba(229, 9, 47, 0.35);
}

.entry-cta {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.82rem 1.6rem;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(229, 9, 47, 0.22);
  animation: entry-pulse 2s ease-in-out infinite;
}

@keyframes entry-pulse {
  0%, 100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(229, 9, 47, 0.4); }
  50%       { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(229, 9, 47, 0); }
}

.sound-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.72rem 1rem;
  color: var(--white);
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(9, 9, 11, 0.72);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.sound-toggle[hidden] {
  display: none;
}

.tribute {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: block;
  color: var(--ink);
  background: var(--black);
  overflow: visible;
}

.tribute::before {
  position: fixed;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 44%, transparent 0 23rem, rgba(0, 0, 0, 0.2) 39rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.48));
}

.photo-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--black);
}

.photo-background::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.58)),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.42));
}

.photo-track {
  display: flex;
  gap: 0;
  width: max-content;
  height: 100vh;
  padding: 0;
  opacity: 0.58;
  filter: saturate(1.08) contrast(1.05);
  animation: photo-scroll 34s linear infinite;
}

.photo-track img {
  width: clamp(15rem, 25vw, 28rem);
  height: 100vh;
  object-fit: cover;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 3rem 1.25rem;
}

.hero::before,
.hero::after {
  position: absolute;
  width: min(36vw, 24rem);
  aspect-ratio: 1;
  content: "";
  border-radius: 999px;
  filter: blur(4px);
  opacity: 0.5;
}

.hero::before {
  right: -7rem;
  top: 5rem;
  background: rgba(229, 9, 47, 0.12);
  animation: float-glow 9s ease-in-out infinite;
}

.hero::after {
  bottom: -10rem;
  left: -6rem;
  background: rgba(9, 9, 11, 0.1);
  animation: float-glow 11s ease-in-out infinite reverse;
}

.content {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  padding: clamp(2rem, 6vw, 4.5rem);
  text-align: center;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 255, 255, 0.36), transparent 12rem),
    radial-gradient(circle at 84% 88%, rgba(91, 48, 18, 0.2), transparent 11rem),
    repeating-linear-gradient(
      88deg,
      rgba(84, 48, 19, 0.045) 0 1px,
      transparent 1px 7px
    ),
    linear-gradient(180deg, rgba(255, 246, 209, 0.76), rgba(217, 176, 107, 0.7));
  border: 1px solid rgba(84, 48, 19, 0.38);
  border-radius: 6px;
  box-shadow:
    0 28px 88px rgba(0, 0, 0, 0.42),
    inset 0 0 54px rgba(84, 48, 19, 0.2),
    inset 18px 0 28px rgba(91, 48, 18, 0.12),
    inset -18px 0 28px rgba(91, 48, 18, 0.12);
  backdrop-filter: blur(4px) saturate(0.86);
  opacity: 0;
  transform: translateY(1.5rem) scale(0.98);
  animation: content-enter 900ms 120ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  clip-path: polygon(
    0.8% 1.1%,
    8% 0.4%,
    18% 1%,
    31% 0.35%,
    48% 0.9%,
    62% 0.3%,
    78% 0.95%,
    91% 0.35%,
    99.2% 1.1%,
    98.9% 12%,
    99.5% 28%,
    99% 45%,
    99.45% 63%,
    98.8% 82%,
    99.1% 98.8%,
    88% 99.5%,
    73% 99%,
    56% 99.55%,
    42% 99.05%,
    25% 99.6%,
    10% 99.1%,
    0.9% 98.7%,
    1.35% 82%,
    0.55% 64%,
    1.15% 47%,
    0.45% 30%,
    1.1% 14%
  );
}

.content::before,
.content::after {
  position: absolute;
  inset: 0.9rem;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(94, 54, 20, 0.2);
  border-radius: 2px;
}

.content::after {
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(84, 48, 19, 0.12), transparent 8rem),
    radial-gradient(circle at 82% 74%, rgba(84, 48, 19, 0.12), transparent 9rem),
    linear-gradient(90deg, rgba(74, 37, 12, 0.18), transparent 7%, transparent 93%, rgba(74, 37, 12, 0.16)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 18%, transparent 78%, rgba(77, 37, 11, 0.18));
  border-radius: inherit;
  mix-blend-mode: multiply;
}

/* show-message está no HTML desde o início; a animação CSS cuida da entrada */

.eyebrow {
  margin: 0 0 0.75rem;
  color: #8a1a16;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
}

h1 {
  margin: 0;
  color: #2b160c;
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  font-weight: 700;
  line-height: 0.92;
  text-shadow: 0 2px 0 rgba(255, 244, 210, 0.34);
}

.lead {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  color: #3e2416;
  font-size: clamp(1.22rem, 2.5vw, 1.62rem);
  font-style: italic;
  line-height: 1.65;
}

.message {
  display: grid;
  gap: 0.85rem;
  max-width: 38rem;
  margin: 2rem auto;
}

.content.generator-mode .lead,
.content.generator-mode .message,
.content.photo-poem-mode .lead,
.content.photo-poem-mode .message,
.content.music-mode .lead,
.content.music-mode .message,
.content.generator-mode .love-button {
  display: none;
}

.message p {
  margin: 0;
  color: #2f1d13;
  font-size: clamp(1.02rem, 1.8vw, 1.16rem);
  line-height: 1.65;
}

.phrase-generator {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.85rem;
  max-width: 38rem;
  margin: 2rem auto 0;
  text-align: left;
}

.phrase-generator[hidden] {
  display: none;
}

.phrase-generator label {
  color: #2f1d13;
  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  font-style: italic;
  font-weight: 600;
}

.phrase-category,
.phrase-password {
  width: 100%;
  border: 1px solid rgba(70, 38, 16, 0.34);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  color: #2f1d13;
  font: inherit;
  font-size: 1.08rem;
  background: rgba(255, 241, 196, 0.42);
  box-shadow: inset 0 0 20px rgba(92, 53, 20, 0.1);
  outline: none;
  cursor: pointer;
}

.phrase-password {
  cursor: text;
}

.phrase-password[hidden] {
  display: none;
}

.phrase-category:focus,
.phrase-password:focus {
  border-color: rgba(138, 26, 22, 0.6);
  box-shadow:
    inset 0 0 20px rgba(92, 53, 20, 0.1),
    0 0 0 3px rgba(138, 26, 22, 0.12);
}

.generate-phrase {
  justify-self: center;
  border: 0;
  border-radius: 999px;
  padding: 0.78rem 1.2rem;
  color: var(--white);
  font: inherit;
  font-weight: 700;
  background: linear-gradient(135deg, var(--red-500), var(--red-700));
  box-shadow: 0 14px 30px rgba(229, 9, 47, 0.28);
  cursor: pointer;
}

.generated-phrase {
  min-height: 3rem;
  margin: 0;
  color: #3e2416;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-style: italic;
  line-height: 1.55;
  text-align: center;
}

.photo-poem {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.2rem;
  margin: 1.8rem auto 0;
}

.photo-poem[hidden] {
  display: none;
}

.photo-poem-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.photo-poem-gallery figure {
  margin: 0;
}

.photo-poem-gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(70, 38, 16, 0.38);
  box-shadow:
    0 12px 24px rgba(61, 32, 11, 0.18),
    inset 0 0 16px rgba(61, 32, 11, 0.16);
  filter: sepia(0.12) saturate(0.94) contrast(0.98);
}

.photo-poem-gallery figcaption {
  margin-top: 0.35rem;
  color: rgba(48, 25, 13, 0.72);
  font-size: 0.92rem;
  font-style: italic;
}

.photo-poem-body {
  display: grid;
  gap: 0.85rem;
  max-width: 38rem;
  margin: 0 auto;
  text-align: left;
}

.photo-poem-body p {
  margin: 0;
  color: #2f1d13;
  font-size: clamp(1.02rem, 1.75vw, 1.18rem);
  font-style: italic;
  line-height: 1.62;
}

.music-poems {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  max-width: 40rem;
  margin: 2rem auto 0;
  text-align: left;
}

.music-poems[hidden] {
  display: none;
}

.music-card {
  padding: 1rem;
  border: 1px solid rgba(70, 38, 16, 0.28);
  background: rgba(255, 241, 196, 0.34);
  box-shadow: inset 0 0 22px rgba(92, 53, 20, 0.1);
}

.music-card span {
  color: #8a1a16;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.music-card h2 {
  margin: 0.25rem 0 0.65rem;
  color: #2b160c;
  font-size: clamp(1.7rem, 3.3vw, 2.3rem);
  line-height: 1;
}

.music-card p {
  margin: 0;
  color: #2f1d13;
  font-size: clamp(1rem, 1.75vw, 1.16rem);
  line-height: 1.55;
}

.music-poem-text {
  margin-top: 0.65rem !important;
  font-style: italic;
}

.track-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  margin: 0 0 0.85rem;
  border: 1px solid rgba(70, 38, 16, 0.36);
  border-radius: 2px;
  padding: 0.68rem 1rem;
  color: #2f1d13;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, rgba(255, 236, 183, 0.72), rgba(201, 154, 82, 0.44));
  box-shadow:
    inset 0 0 18px rgba(92, 53, 20, 0.16),
    0 10px 22px rgba(61, 32, 11, 0.12);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.track-toggle:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255, 241, 196, 0.86), rgba(212, 161, 82, 0.54));
}

.track-toggle.is-playing {
  color: var(--white);
  border-color: rgba(138, 26, 22, 0.48);
  background: linear-gradient(135deg, var(--red-500), var(--red-700));
  box-shadow: 0 14px 30px rgba(229, 9, 47, 0.24);
}

.typewriter {
  min-height: 1em;
}

.typewriter.is-typing::after {
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.12em;
  content: "";
  background: currentColor;
  animation: cursor-blink 720ms steps(1) infinite;
  transform: translateY(0.12em);
}

.content.is-writing .love-button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.6rem);
}

.love-button {
  border: 0;
  border-radius: 999px;
  padding: 0.9rem 1.35rem;
  color: var(--white);
  font: inherit;
  font-weight: 700;
  background: linear-gradient(135deg, var(--red-500), var(--red-700));
  box-shadow: 0 16px 36px rgba(229, 9, 47, 0.38);
  cursor: pointer;
  transition: opacity 260ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.love-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(229, 9, 47, 0.46);
}

.poem-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.35rem;
}

.poem-button {
  min-width: 6.8rem;
  border: 1px solid rgba(70, 38, 16, 0.36);
  border-radius: 2px;
  padding: 0.65rem 0.9rem;
  color: #30190d;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  background: rgba(255, 236, 183, 0.48);
  box-shadow: inset 0 0 18px rgba(92, 53, 20, 0.12);
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.poem-button:hover:not(:disabled) {
  background: rgba(255, 232, 168, 0.68);
  transform: translateY(-1px);
}

.poem-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.poem-counter {
  min-width: 3.2rem;
  color: rgba(48, 25, 13, 0.72);
  font-size: 0.95rem;
  font-weight: 600;
}

.heart {
  position: fixed;
  z-index: 0;
  color: rgba(255, 210, 216, 0.32);
  font-size: 1.1rem;
  pointer-events: none;
  text-shadow: 0 0 14px rgba(255, 210, 216, 0.28);
  animation: rise 7s ease-out forwards;
}

.heart-red {
  z-index: 3;
  color: rgba(229, 9, 47, 0.92);
  text-shadow:
    0 0 12px rgba(229, 9, 47, 0.72),
    0 0 28px rgba(229, 9, 47, 0.32);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.65) rotate(0deg);
  }

  15% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(var(--drift, 2rem), -110vh, 0) scale(1.45) rotate(14deg);
  }
}

@keyframes background-pulse {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}


@keyframes photo-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes float-glow {
  50% {
    transform: translateY(2rem) scale(1.08);
    opacity: 0.75;
  }
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

@keyframes content-enter {
  from {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: auto;
    padding: 2rem 1rem 3rem;
  }

  .content {
    border-radius: 22px;
  }

  .photo-poem-gallery {
    grid-template-columns: 1fr;
  }
}