:root {
  --navy: #173f70;
  --navy-soft: #526c87;
  --amber: #a86818;
  --amber-light: #efc76e;
  --ivory: #fffaf0;
  --cream: #f8eedf;
  --card: rgba(255, 250, 240, .82);
  --shadow-soft: 0 13px 34px rgba(112, 79, 40, .10);
  --ease: cubic-bezier(.22, .78, .22, 1);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: #eee3d2;
}

body {
  font-family: "Inter", Arial, sans-serif;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; }

.app {
  position: relative;
  isolation: isolate;
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 0 55px rgba(60, 47, 34, .14);
}

.background,
.background > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.background {
  z-index: -1;
  overflow: hidden;
}

.background__photo {
  background: center / cover no-repeat url("assets/fundo-palavra.png");
  transform: scale(1.015);
  transition: transform 9s ease, filter .8s ease;
}

.background__tone {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(248,235,214,.03) 55%, rgba(202,148,66,.05)),
    radial-gradient(circle at 82% 18%, rgba(255,232,172,.10), transparent 46%);
}

.background__light {
  inset: -18% -33% auto auto;
  width: 100%;
  height: 85%;
  background: radial-gradient(ellipse, rgba(255,247,217,.24), rgba(232,175,73,.07) 44%, transparent 72%);
  filter: blur(36px);
  animation: ambientLight 14s ease-in-out infinite alternate;
}

.background__grain {
  opacity: .12;
  background-image:
    repeating-linear-gradient(4deg, rgba(94,74,48,.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(92deg, rgba(255,255,255,.06) 0 1px, transparent 1px 6px);
  mix-blend-mode: multiply;
}

.app[data-screen="intentions"] .background__photo { transform: scale(1.03) translateY(-.5%); }
.app[data-screen="prepare"] .background__photo { filter: saturate(.96) brightness(.99); transform: scale(1.025); }
.app[data-screen="word"] .background__photo { transform: scale(1.02) translateY(-.4%); }

.screen {
  position: absolute;
  inset: 0;
  min-height: 100svh;
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px);
  transition: opacity .86s var(--ease), transform .86s var(--ease), visibility .86s;
}

.screen--active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.screen--scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(23,63,112,.32) transparent;
}

.screen--scroll::-webkit-scrollbar { width: 5px; }
.screen--scroll::-webkit-scrollbar-track { background: transparent; }
.screen--scroll::-webkit-scrollbar-thumb { background: rgba(23,63,112,.28); border-radius: 99px; }

.splash__title,
.display-title,
.section-title,
.word-title,
.preparation-soft,
.preparation-main,
blockquote,
.lead,
.reflection {
  font-family: "Cormorant Garamond", Georgia, serif;
}

.top-identity {
  position: absolute;
  z-index: 5;
  top: max(62px, calc(env(safe-area-inset-top) + 34px));
  left: 50%;
  transform: translateX(-50%);
}

.star {
  position: relative;
  width: 54px;
  height: 54px;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.96))
    drop-shadow(0 0 12px rgba(226,165,55,.62))
    drop-shadow(0 0 24px rgba(226,165,55,.28));
  animation: starBreath 6.8s ease-in-out infinite;
}

.star::before {
  content: "";
  position: absolute;
  inset: -23px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,212,.66), rgba(235,178,72,.16) 40%, transparent 70%);
  filter: blur(8px);
  z-index: -1;
}

.star::after {
  content: "";
  position: absolute;
  inset: -31px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255,238,188,.24) 49%, rgba(255,255,255,.56) 50%, rgba(255,238,188,.24) 51%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255,238,188,.20) 49%, rgba(255,255,255,.52) 50%, rgba(255,238,188,.20) 51%, transparent 53%);
  opacity: .48;
  animation: starRays 8s ease-in-out infinite;
  z-index: -2;
}

.star img {
  width: 100%;
  height: 100%;
  display: block;
}

.star--large { width: 78px; height: 78px; }
.star--breathing { animation: prepareStar 8.6s ease-in-out infinite; }
.star--revealed { filter: drop-shadow(0 0 18px rgba(220,153,38,.68)); }

/* SPLASH */
.splash {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px 24px;
}

.splash .star,
.splash__title,
.splash__signature {
  opacity: 0;
  animation: splashIn 1s var(--ease) forwards;
}

.splash__title {
  margin: 17px 0 0;
  font-size: clamp(58px, 16vw, 78px);
  font-weight: 600;
  letter-spacing: -.02em;
  animation-delay: .22s;
}

.splash__signature {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
  margin: 0 auto;
  display: grid;
  gap: 6px;
  font-size: clamp(15px, 3.8vw, 17px);
  line-height: 1.42;
  color: rgba(23,63,112,.82);
  text-align: center;
  animation-delay: .48s;
}

.splash__signature strong { font-weight: 600; }
.splash__signature span { font-size: .9em; color: rgba(23,63,112,.69); }

/* ENTRADA */
.screen--entry { overflow: hidden; }

.entry {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding:
    max(160px, calc(env(safe-area-inset-top) + 132px))
    28px
    max(42px, calc(env(safe-area-inset-bottom) + 28px));
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.entry__copy {
  width: min(100%, 410px);
  align-self: center;
  transform: translateY(-1.5vh);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--amber);
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.45;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
}

.display-title {
  margin: 0;
  font-size: clamp(72px, 19vw, 94px);
  line-height: .92;
  font-weight: 600;
  letter-spacing: -.025em;
  text-align: center;
}

.lead {
  width: min(100%, 360px);
  margin: 30px auto 0;
  font-size: clamp(26px, 6.8vw, 33px);
  line-height: 1.24;
  color: var(--navy);
  text-align: center;
}

.primary-button,
.soft-button,
.intention-card,
.back-button,
.text-button {
  -webkit-tap-highlight-color: transparent;
}

.primary-button {
  position: relative;
  border: 1px solid rgba(255,246,219,.84);
  min-height: 49px;
  width: 100%;
  border-radius: 999px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--navy);
  background: linear-gradient(145deg, rgba(252,226,179,.88), rgba(237,188,99,.80));
  box-shadow:
    0 5px 16px rgba(164,103,22,.085),
    inset 0 1px rgba(255,255,255,.74);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .19s ease, box-shadow .19s ease, filter .19s ease;
}

.primary-button:active {
  transform: scale(.978);
  box-shadow: 0 3px 11px rgba(164,103,22,.09), inset 0 1px rgba(255,255,255,.68);
}

@media (hover: hover) {
  .primary-button:hover {
    filter: brightness(1.015);
    box-shadow: 0 8px 20px rgba(164,103,22,.12), inset 0 1px rgba(255,255,255,.76);
  }
}

.entry-button {
  width: min(72%, 294px);
  min-height: 51px;
  margin-bottom: 2px;
  font-size: 17px;
  font-weight: 600;
  animation: buttonGlow 5.8s ease-in-out infinite;
}

/* INTENÇÕES */
.intentions {
  min-height: 100svh;
  padding: 154px 24px 42px;
  text-align: center;
}

.section-title {
  margin: 0 auto;
  max-width: 455px;
  font-size: clamp(39px, 10vw, 48px);
  line-height: 1.03;
  font-weight: 600;
  text-align: center;
}

.support {
  margin: 18px auto 28px;
  max-width: 340px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy-soft);
  text-align: center;
}

.intentions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.intention-card {
  border: 1px solid rgba(190,133,54,.14);
  min-height: 126px;
  border-radius: 21px;
  padding: 17px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, rgba(255,252,246,.86), rgba(248,238,222,.70));
  box-shadow: 0 8px 22px rgba(110,78,42,.06), inset 0 1px rgba(255,255,255,.78);
  backdrop-filter: blur(7px);
  color: var(--navy);
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
  .intention-card:hover {
    transform: translateY(-2px);
    border-color: rgba(196,130,38,.26);
    box-shadow: 0 12px 27px rgba(110,78,42,.085), inset 0 1px rgba(255,255,255,.84);
  }
}

.intention-card:active { transform: scale(.982); }

.intention-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
}

.intention-icon svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: none;
  stroke: #b87616;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(223,163,62,.12));
}

.intention-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.04;
}

.intention-hint {
  margin-top: 7px;
  max-width: 135px;
  color: var(--navy-soft);
  font-size: 11px;
  line-height: 1.3;
}

.intention-card[data-intention="Senhor, fala comigo"] .intention-name {
  font-size: 21px;
  line-height: 1.02;
}

/* PREPARAÇÃO */
.back-button {
  position: absolute;
  z-index: 8;
  top: max(25px, env(safe-area-inset-top));
  left: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,250,239,.72);
  box-shadow: 0 8px 20px rgba(105,75,41,.075);
  color: var(--navy);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.prepare {
  min-height: 100svh;
  padding: 176px 28px max(42px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.prepare__eyebrow {
  opacity: 0;
  transform: translateY(8px);
  animation: prepareHeadingIn 1.05s var(--ease) .45s forwards;
}

.preparation-stage {
  position: relative;
  min-height: 440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0 38px;
}

.preparation-soft,
.preparation-main {
  margin: 0 auto;
  max-width: 440px;
  text-align: center;
  opacity: 0;
  transform: translateY(15px);
  filter: blur(4px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}

.preparation-soft {
  min-height: 36px;
  font-size: clamp(23px, 5.9vw, 30px);
  line-height: 1.15;
  color: rgba(23,63,112,.64);
}

.preparation-main {
  min-height: 112px;
  margin-top: 18px;
  font-size: clamp(38px, 9.4vw, 48px);
  line-height: 1.04;
  font-weight: 600;
  color: var(--navy);
}

.preparation-soft.is-visible,
.preparation-main.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.preparation-soft.is-leaving,
.preparation-main.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(3px);
}

.preparation-progress {
  display: flex;
  gap: 7px;
  margin-top: 30px;
}

.preparation-progress span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(168,104,24,.30);
  box-shadow: 0 0 8px rgba(220,156,48,.08);
  animation: progressBreath 2.4s ease-in-out infinite;
}

.preparation-progress span:nth-child(2) { animation-delay: .28s; }
.preparation-progress span:nth-child(3) { animation-delay: .56s; }

.preparation-glow {
  position: absolute;
  left: 50%;
  bottom: 84px;
  width: 164px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: radial-gradient(ellipse, rgba(255,246,207,.88), rgba(228,172,65,.22) 40%, transparent 72%);
  filter: blur(6px);
  opacity: .48;
  animation: glowBreath 5s ease-in-out infinite;
}

.text-button {
  border: 0;
  background: transparent;
  padding: 14px;
  color: var(--navy-soft);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(201,138,34,.28);
  text-underline-offset: 5px;
}

.text-button--skip {
  margin-top: auto;
  text-decoration: none;
  color: rgba(82,108,135,.72);
}

/* PALAVRA */
.word {
  min-height: 100svh;
  padding: 150px 22px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.intention-pill {
  border: 1px solid rgba(201,138,34,.43);
  border-radius: 999px;
  padding: 6px 15px;
  background: rgba(255,250,240,.64);
  color: #8a5713;
  font-size: 11px;
}

.word-title {
  margin: 12px 0 20px;
  font-size: 34px;
  line-height: 1;
}

.verse-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 300px;
  border: 1px solid rgba(188,131,55,.12);
  border-radius: 27px;
  padding: 38px 24px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(150deg, rgba(255,252,246,.90), rgba(248,237,220,.81));
  box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.78);
  backdrop-filter: blur(11px);
  text-align: center;
}

.verse-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 7%, rgba(255,225,163,.24), transparent 37%),
    repeating-linear-gradient(4deg, rgba(99,74,45,.023) 0 1px, transparent 1px 5px);
  pointer-events: none;
}

.verse-card > * {
  position: relative;
  z-index: 1;
}

.quote-mark {
  color: var(--amber);
  font-family: Georgia, serif;
  font-size: 62px;
  line-height: .65;
  text-shadow: 0 0 12px rgba(224,164,59,.16);
}

blockquote {
  margin: 18px 0 24px;
  font-size: clamp(33px, 8.5vw, 43px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -.012em;
  text-align: center;
}

.verse-reference {
  margin: 0;
  color: var(--navy-soft);
  font-size: 13px;
}

.verse-card.is-short {
  min-height: 340px;
  padding-left: 28px;
  padding-right: 28px;
}

.verse-card.is-short blockquote {
  font-size: clamp(42px, 10.4vw, 54px);
  line-height: 1.12;
}

.verse-card.is-medium blockquote {
  font-size: clamp(36px, 9.2vw, 47px);
  line-height: 1.16;
}

.verse-card.is-long blockquote {
  font-size: clamp(29px, 7.4vw, 38px);
  line-height: 1.20;
}

.verse-card.is-extra-long {
  min-height: 360px;
  padding: 32px 20px 30px;
}

.verse-card.is-extra-long blockquote {
  font-size: clamp(26px, 6.6vw, 34px);
  line-height: 1.22;
}

.reflection {
  margin: 28px 0 15px;
  font-size: 23px;
}

.word-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.soft-button {
  border: 1px solid rgba(179,124,54,.11);
  min-height: 47px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(255,250,241,.59);
  box-shadow: 0 3px 11px rgba(110,76,39,.035), inset 0 1px rgba(255,255,255,.66);
  color: var(--navy);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.soft-button:active {
  transform: scale(.976);
  background: rgba(255,250,241,.72);
}

.heart { font-size: 20px; }
#like-button[aria-pressed="true"] .heart { color: var(--amber); }

.another-button {
  width: min(100%, 360px);
  font-weight: 600;
}

.toast {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px));
  width: max-content;
  max-width: calc(100% - 36px);
  transform: translate(-50%, 18px);
  opacity: 0;
  border-radius: 13px;
  padding: 11px 16px;
  background: rgba(34,56,79,.92);
  color: #fffaf0;
  font-size: 12px;
  text-align: center;
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes ambientLight {
  from { transform: translate3d(-2%, 1%, 0) scale(.98); opacity: .72; }
  to { transform: translate3d(3%, -2%, 0) scale(1.05); opacity: 1; }
}

@keyframes starBreath {
  0%, 100% { transform: scale(.965); opacity: .90; }
  50% { transform: scale(1.045); opacity: 1; }
}

@keyframes prepareStar {
  0%, 100% { transform: scale(.90); opacity: .78; }
  40% { transform: scale(1.12); opacity: 1; }
}

@keyframes starRays {
  0%, 100% { opacity: .30; transform: scale(.94) rotate(0); }
  50% { opacity: .64; transform: scale(1.08) rotate(2deg); }
}

@keyframes splashIn {
  to { opacity: 1; transform: none; }
}

@keyframes buttonGlow {
  0%, 100% { box-shadow: 0 5px 16px rgba(164,103,22,.085), inset 0 1px rgba(255,255,255,.74); }
  50% { box-shadow: 0 7px 21px rgba(164,103,22,.12), inset 0 1px rgba(255,255,255,.78); }
}

@keyframes prepareHeadingIn {
  to { opacity: 1; transform: none; }
}

@keyframes progressBreath {
  0%, 100% { opacity: .35; transform: scale(.88); }
  50% { opacity: .92; transform: scale(1.08); }
}

@keyframes glowBreath {
  0%, 100% { opacity: .28; transform: translateX(-50%) scaleX(.82); }
  50% { opacity: .62; transform: translateX(-50%) scaleX(1.04); }
}

@media (max-height: 760px) {
  .top-identity { top: max(44px, calc(env(safe-area-inset-top) + 18px)); }
  .entry { padding-top: max(132px, calc(env(safe-area-inset-top) + 110px)); padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); }
  .entry__copy { transform: translateY(-1vh); }
  .display-title { font-size: clamp(64px, 17vw, 80px); }
  .lead { margin-top: 23px; font-size: clamp(23px, 6.1vw, 28px); }
  .intentions { padding-top: 132px; }
  .intention-card { min-height: 112px; }
  .prepare { padding-top: 148px; }
  .preparation-stage { min-height: 350px; }
  .preparation-main { min-height: 92px; font-size: clamp(34px, 8.6vw, 43px); }
  .preparation-glow { bottom: 58px; }
  .word { padding-top: 132px; }
  .verse-card { min-height: 260px; }
  .verse-card.is-short { min-height: 290px; }
  .verse-card.is-extra-long { min-height: 320px; }
}

@media (min-width: 521px) {
  body { padding: 16px 0; }
  .app { min-height: calc(100svh - 32px); border-radius: 28px; }
  .screen,
  .splash,
  .entry,
  .intentions,
  .prepare,
  .word { min-height: calc(100svh - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}