/* ================================================================
   TAROT INTERATIVO v3 — CSS Premium
   Estética: Claro · Elegante · Azul Índigo & Dourado
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=IM+Fell+English:ital@0;1&family=Lato:wght@300;400&display=swap');

:root {
  --ti-bg:          #ffffff;
  --ti-bg2:         #f8f6ff;
  --ti-bg3:         #f0edf8;
  --ti-card-bg:     #2e2b6e;
  --ti-gold:        #c9922a;
  --ti-gold2:       #e8b84b;
  --ti-gold3:       #f5d080;
  --ti-indigo:      #2e2b6e;
  --ti-indigo2:     #3d3a8c;
  --ti-indigo3:     #5550bb;
  --ti-red:         #d43f3f;
  --ti-text:        #1a1830;
  --ti-muted:       #6b6890;
  --ti-border:      rgba(46,43,110,.12);
  --ti-border2:     rgba(201,146,42,.25);
  --ti-shadow:      rgba(46,43,110,.10);
  --ti-r:           14px;
  --ti-r-card:      10px;
}

/* ── Wrapper ─────────────────────────────────────────── */
.ti-wrap {
  font-family: 'Lato', sans-serif;
  background: var(--ti-bg);
  color: var(--ti-text);
  border-radius: 20px;
  padding: 48px 28px 56px;
  margin: 28px auto;
  max-width: 1040px;
  border: 1px solid var(--ti-border);
  box-shadow:
    0 2px 0 0 var(--ti-border2),
    0 8px 40px var(--ti-shadow);
  position: relative;
  overflow: hidden;
}

/* Linha superior dourada */
.ti-wrap::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ti-gold), var(--ti-gold3), var(--ti-gold), transparent);
}

/* ── Partículas (estrelas sutis) ─────────────────────── */
.ti-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.ti-particles span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ti-gold2);
  opacity: 0;
  animation: particle-float 10s ease-in-out infinite;
}
.ti-particles span:nth-child(1)  { left:8%;  top:15%; animation-delay:0s;   animation-duration:9s; }
.ti-particles span:nth-child(2)  { left:22%; top:55%; animation-delay:1.8s; animation-duration:11s; }
.ti-particles span:nth-child(3)  { left:48%; top:8%;  animation-delay:3.2s; animation-duration:8s; }
.ti-particles span:nth-child(4)  { left:72%; top:35%; animation-delay:4.5s; animation-duration:10s; }
.ti-particles span:nth-child(5)  { left:88%; top:70%; animation-delay:2.1s; animation-duration:12s; }
.ti-particles span:nth-child(6)  { left:38%; top:82%; animation-delay:0.9s; animation-duration:9.5s; }
.ti-particles span:nth-child(7)  { left:62%; top:50%; animation-delay:5.4s; animation-duration:7.5s; }
.ti-particles span:nth-child(8)  { left:12%; top:88%; animation-delay:3.7s; animation-duration:13s; }
.ti-particles span:nth-child(9)  { left:92%; top:18%; animation-delay:6.2s; animation-duration:10s; }
.ti-particles span:nth-child(10) { left:33%; top:30%; animation-delay:2.6s; animation-duration:8.5s; }
@keyframes particle-float {
  0%,100% { opacity:0; transform:translateY(0); }
  15%     { opacity:.4; }
  50%     { opacity:.15; transform:translateY(-35px); }
  85%     { opacity:0; }
}

/* ── Ornamento & Cabeçalho ───────────────────────────── */
.ti-main, .ti-result { position:relative; z-index:1; }

.ti-ornament {
  font-family: 'Playfair Display', serif;
  color: var(--ti-gold);
  letter-spacing: 10px;
  font-size: .85rem;
  opacity: .75;
  margin-bottom: 14px;
  text-align: center;
}

.ti-header { text-align:center; margin-bottom:32px; }

.ti-titulo {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 900;
  color: var(--ti-indigo);
  margin: 0 0 12px;
  letter-spacing: .3px;
  line-height: 1.2;
}

.ti-instrucao {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ti-muted);
  margin: 0;
}
.ti-instrucao strong {
  color: var(--ti-indigo3);
  font-style: normal;
  font-weight: 700;
}

/* ── Progresso ───────────────────────────────────────── */
.ti-progress-area {
  max-width: 480px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ti-progress-track {
  flex: 1;
  height: 6px;
  background: var(--ti-bg3);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--ti-border);
}
.ti-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ti-indigo3), var(--ti-gold2));
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.ti-progress-label {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  color: var(--ti-indigo);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
  font-weight: 700;
}

/* ── Botões ──────────────────────────────────────────── */
.ti-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.ti-btn {
  font-family: 'Playfair Display', serif;
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 50px;
  cursor: pointer;
  transition: all .22s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  font-weight: 700;
  outline: none;
}
.ti-btn svg { width:15px; height:15px; flex-shrink:0; }

.ti-btn--shuffle {
  background: var(--ti-bg3);
  color: var(--ti-indigo2);
  border-color: var(--ti-border);
}
.ti-btn--shuffle:hover {
  background: var(--ti-indigo);
  color: #fff;
  border-color: var(--ti-indigo);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(46,43,110,.25);
}

.ti-btn--reset {
  background: transparent;
  color: var(--ti-muted);
  border-color: var(--ti-border);
}
.ti-btn--reset:hover {
  background: var(--ti-bg3);
  color: var(--ti-text);
  transform: translateY(-2px);
}

.ti-btn--consult {
  background: linear-gradient(135deg, var(--ti-indigo) 0%, var(--ti-indigo3) 100%);
  color: var(--ti-gold3);
  border-color: var(--ti-gold2);
  font-size: 1rem;
  padding: 16px 44px;
  letter-spacing: 2px;
  box-shadow: 0 6px 28px rgba(46,43,110,.30);
  position: relative;
  z-index: 1;
}
.ti-btn--consult:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 40px rgba(46,43,110,.42);
  filter: brightness(1.08);
}

.ti-btn--new {
  background: var(--ti-bg3);
  color: var(--ti-muted);
  border-color: var(--ti-border);
  padding: 12px 28px;
}
.ti-btn--new:hover {
  background: var(--ti-indigo);
  color: #fff;
  border-color: var(--ti-indigo);
  transform: translateY(-1px);
}

.ti-btn-crystal {
  font-size: 1.3rem;
  animation: crystal-pulse 3s ease-in-out infinite;
}
@keyframes crystal-pulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.15); }
}

/* ── CTA wrap ────────────────────────────────────────── */
.ti-cta-wrap {
  text-align: center;
  margin: 36px 0 0;
  position: relative;
  animation: fade-up .6s ease;
}
.ti-cta-glow {
  position: absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:320px; height:80px;
  background: radial-gradient(ellipse, rgba(46,43,110,.15), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}

/* ── GRADE DE CARTAS ─────────────────────────────────── */
.ti-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

/* ── CARTA — Flip 3D ─────────────────────────────────── */
.ti-card {
  aspect-ratio: 2 / 3.3;
  cursor: pointer;
  perspective: 900px;
  transition: transform .2s ease;
  outline: none;
}
.ti-card:focus-visible .ti-card__inner {
  outline: 2px solid var(--ti-gold2);
}
.ti-card:hover:not(.is-selected) {
  transform: translateY(-6px) scale(1.04);
}
.ti-card__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
  border-radius: var(--ti-r-card);
  box-shadow: 0 3px 12px rgba(46,43,110,.14);
}
.ti-card:hover:not(.is-selected) .ti-card__inner {
  box-shadow: 0 10px 30px rgba(46,43,110,.22), 0 0 0 2px var(--ti-gold2);
}
.ti-card.is-selected .ti-card__inner {
  transform: rotateY(180deg);
}
.ti-card.is-selected {
  cursor: default;
  transform: none !important;
}
.ti-card.is-selected:hover .ti-card__inner {
  box-shadow: 0 4px 16px rgba(46,43,110,.18), 0 0 0 2px var(--ti-indigo3);
}

.ti-card__back,
.ti-card__front {
  position: absolute;
  inset: 0;
  border-radius: var(--ti-r-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* ── VERSO com SVG do olho místico ──────────────────── */
.ti-card__back {
  background: #2e2b6e;
  border: none;
  padding: 0;
}

.ti-card__back-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: var(--ti-r-card);
}

.ti-card__back-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── FRENTE ──────────────────────────────────────────── */
.ti-card__front {
  transform: rotateY(180deg);
  background: #fff;
  border: 2px solid var(--ti-indigo3);
  display: flex;
  flex-direction: column;
}
.ti-card__img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  object-position: top;
  display: block;
}
.ti-card__label {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(46,43,110,.92) 50%);
  padding: 22px 6px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: absolute;
  bottom:0; left:0; right:0;
}
.ti-card__num {
  font-family: 'Playfair Display', serif;
  font-size: .62rem;
  color: var(--ti-gold3);
  opacity: .9;
  letter-spacing: 1px;
}
.ti-card__name {
  font-family: 'Playfair Display', serif;
  font-size: .58rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.2;
}
.ti-card.is-selected .ti-card__front {
  border-color: var(--ti-gold);
}

/* ── Loading ─────────────────────────────────────────── */
.ti-loading {
  text-align:center;
  padding:80px 20px;
}
.ti-loading__inner { display:inline-block; }
.ti-loading__orb {
  width: 70px; height: 70px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--ti-indigo3), var(--ti-indigo));
  box-shadow: 0 0 0 8px rgba(46,43,110,.08), 0 0 40px rgba(46,43,110,.25);
  animation: orb-pulse 2s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%,100% { transform:scale(1); box-shadow:0 0 0 8px rgba(46,43,110,.08), 0 0 40px rgba(46,43,110,.25); }
  50%     { transform:scale(1.1); box-shadow:0 0 0 16px rgba(46,43,110,.04), 0 0 70px rgba(46,43,110,.40); }
}
.ti-loading p {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: var(--ti-muted);
  font-size: 1.1rem;
}

/* ── Resultado ───────────────────────────────────────── */
.ti-result { animation: fade-up .7s ease; }
.ti-result__header {
  text-align: center;
  margin-bottom: 40px;
}
.ti-result__header h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  color: var(--ti-indigo);
  margin: 10px 0 8px;
  font-weight: 900;
}
.ti-result__header p {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: var(--ti-muted);
  font-size: .95rem;
  margin: 0;
}

.ti-result__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.ti-result-item {
  background: #fff;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-r);
  overflow: hidden;
  animation: fade-up .5s ease both;
  box-shadow: 0 4px 16px var(--ti-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.ti-result-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(46,43,110,.15);
}

.ti-result-item__thumb {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: var(--ti-bg3);
}
.ti-result-item__thumb img {
  width:100%; height:100%;
  object-fit:cover; object-position:top;
  display:block;
}
.ti-result-item__thumb-overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(46,43,110,.7) 100%);
}
.ti-result-item__pos {
  position:absolute; top:10px; left:10px;
  width:30px; height:30px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--ti-indigo), var(--ti-indigo3));
  border:1px solid var(--ti-gold2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:.75rem;
  color:var(--ti-gold3);
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}

.ti-result-item__body {
  padding:18px 20px 20px;
  flex:1;
}
.ti-result-item__emoji {
  font-size:1.6rem;
  margin-bottom:8px;
  display:block;
}
.ti-result-item__titulo {
  font-family:'Playfair Display',serif;
  font-size:.95rem;
  color:var(--ti-indigo);
  font-weight:700;
  margin-bottom:8px;
}
.ti-result-item__texto {
  font-size:.88rem;
  color:var(--ti-muted);
  line-height:1.7;
  margin:0;
}

.ti-result__footer {
  text-align:center;
  padding-top:24px;
  border-top:1px solid var(--ti-border);
}

/* Divisor decorativo */
.ti-divider {
  display:flex;
  align-items:center;
  gap:16px;
  max-width:400px;
  margin:0 auto 36px;
}
.ti-divider::before,
.ti-divider::after {
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--ti-border2));
}
.ti-divider::after {
  background:linear-gradient(90deg, var(--ti-border2), transparent);
}
.ti-divider span {
  font-family:'Playfair Display',serif;
  font-size:.8rem;
  color:var(--ti-gold);
  letter-spacing:3px;
  text-transform:uppercase;
}

/* ── Animações ───────────────────────────────────────── */
@keyframes fade-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes shuffle-anim {
  0%   { transform:translateX(0) rotate(0deg) scale(1); }
  25%  { transform:translateX(-10px) rotate(-4deg) scale(.96); }
  50%  { transform:translateX(10px)  rotate(4deg)  scale(.96); }
  75%  { transform:translateX(-5px)  rotate(-2deg) scale(.98); }
  100% { transform:translateX(0) rotate(0deg) scale(1); }
}
.ti-card.is-shuffling .ti-card__inner {
  animation: shuffle-anim .45s ease;
}

/* ── Responsivo ──────────────────────────────────────── */
@media (max-width:600px) {
  .ti-wrap {
    padding:28px 14px 40px;
    border-radius:14px;
    margin:0;
  }
  .ti-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap:10px;
  }
  .ti-result__cards { grid-template-columns:1fr; }
  .ti-btn--consult  { font-size:.9rem; padding:14px 28px; }
  .ti-result-item__thumb { height:140px; }
}