/* =====================================================================
   ABERTURA "PORTAS DO CÉU" (v2) · ver js/intro.js
   Quase tudo é posicionado e animado pelo JS (linha do tempo única),
   aqui ficam só a base visual, a tipografia e os botões.
   ===================================================================== */

html.intro-active,
html.intro-active body { overflow: hidden !important; overscroll-behavior: none; }

.ix {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: #0d1a2a;
  color: #FFFDF8;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  contain: strict;
  font-family: 'Montserrat', system-ui, sans-serif;
}
.ix *, .ix *::before, .ix *::after { box-sizing: border-box; }
.ix.ix-out { transition: opacity var(--ix-out, 1s) ease; opacity: 0; pointer-events: none; }
/* até a cena estar montada, nenhum texto aparece (evita o "piscar" de textos soltos) */
.ix:not(.ix-ready) .ix-head,
.ix:not(.ix-ready) .ix-inv,
.ix:not(.ix-ready) .ix-btn { visibility: hidden; }

/* carregando: aro dourado fino girando (roda no compositor, mesmo com a página ocupada) */
.ix-load {
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 1px solid rgba(232, 213, 176, .18);
  border-top-color: rgba(232, 213, 176, .85);
  animation: ixSpin 1.1s linear infinite;
  transition: opacity .5s ease;
}
@keyframes ixSpin { to { transform: rotate(360deg); } }
.ix-ready .ix-load { opacity: 0; }

.ix-cam { position: absolute; inset: 0; opacity: 0; }
.ix-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- fundo: céu do hero + Matterhorn ---------- */
.ix-sky {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(201,169,110,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(196,131,122,0.12) 0%, transparent 60%),
    linear-gradient(165deg, #0d1a2a 0%, #1a2f4a 30%, #1E2D40 60%, #12202f 100%);
}
.ix-dusk {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 42% at 50% 64%, rgba(246,196,168,.42) 0%, rgba(196,131,122,.16) 42%, transparent 72%),
    linear-gradient(180deg, transparent 30%, rgba(132,120,160,.26) 66%, transparent 100%);
}
.ix-stars, .ix-flowers, .ix-cloth, .ix-fx {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.ix-mtn {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 55%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  mix-blend-mode: multiply;
}
.ix-mist {
  position: absolute;
  left: -10%; right: -10%;
  height: 26%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(214,206,226,.42), rgba(214,206,226,0) 70%);
  filter: blur(6px);
}
.ix-ter svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

/* ---------- luz atrás das portas ---------- */
.ix-bloom { opacity: 0; }
.ix-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,226,.9) 0%, rgba(255,226,170,.42) 18%, rgba(236,190,140,.12) 42%, rgba(236,190,140,0) 64%);
}
.ix-rays {
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,240,205,.13) 0deg 2.6deg, rgba(255,240,205,0) 2.6deg 9deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.65) 30%, transparent 68%);
          mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.65) 30%, transparent 68%);
}

/* ---------- portas ---------- */
.ix-doors { transform-style: flat; }
.ix-portal { position: absolute; }
.ix-leaf {
  position: absolute;
  top: 0;
  height: 100%;
  backface-visibility: visible;
  will-change: transform;
}
.ix-leaf svg, .ix-floor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ix-seam {
  position: absolute;
  width: 4px;
  margin-left: -2px;
  opacity: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,240,200,0) 0%, rgba(255,244,214,.95) 18%, #fff8e6 50%, rgba(255,244,214,.95) 82%, rgba(255,240,200,0) 100%);
  box-shadow: 0 0 10px 3px rgba(255,226,160,.75), 0 0 34px 10px rgba(255,214,140,.38);
}
.ix-floor { position: absolute; }

/* ---------- arco de flores ---------- */
.ix-strand {
  position: absolute;
  transform-origin: 50% 0;
  animation: ixSway var(--d, 5s) ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes ixSway {
  from { transform: rotate(var(--a1, -1.4deg)); }
  to { transform: rotate(var(--a2, 1.4deg)); }
}

/* ---------- textos ---------- */
.ix-head, .ix-inv {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  pointer-events: none;
}
.ix-medal {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #2C4060 0%, #1E2D40 46%, #0F1B2B 100%);
  box-shadow:
    0 0 0 1.5px #E8D5B0,
    0 0 0 4px rgba(15,27,43,.85),
    0 0 0 5.5px #C9A96E,
    0 6px 18px rgba(4,8,20,.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ix-medal .ix-mono { width: 74%; height: 74%; display: block; }
.ix-inv-mono img.ix-mono { position: relative; inset: auto; width: 50%; height: 50%; margin-top: -4%; }
.ix-medal span, .ix-inv-i {
  font-family: 'Great Vibes', 'Pinyon Script', cursive;
  line-height: 1;
  background: linear-gradient(135deg, #F4E6C6 0%, #E8D5B0 30%, #C9A96E 62%, #9B7A3F 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.ix-names {
  /* dourado como os nomes do site; a sombra vem do filter porque text-shadow
     cobriria o degradê recortado no texto */
  margin: -.1em 0 0;
  padding: .12em 0 .14em;
  font-family: 'Great Vibes', 'Pinyon Script', cursive;
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFF4D8 0%, #F0DCAE 32%, #D6B676 64%, #B08C4E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 5px rgba(5,10,24,.85)) drop-shadow(0 0 1.5px rgba(5,10,24,.7));
}

.ix-inv { display: flex; flex-direction: column; align-items: center; }
.ix-inv > * { will-change: transform, opacity, filter; }
.ix-inv-mono { position: relative; display: flex; align-items: center; justify-content: center; }
.ix-inv-mono img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ix-inv-names {
  margin: 0;
  font-family: 'Great Vibes', 'Pinyon Script', cursive;
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
  background: linear-gradient(135deg, #FFF6E0 0%, #E8D5B0 35%, #C9A96E 70%, #B08C4E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(4,9,22,.6));
  padding: .08em .2em .12em;
}
.ix-inv-phrase {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.55;
  color: #F3ECE0;
  text-shadow: 0 1px 10px rgba(4,9,22,.85);
}
.ix-inv-date {
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}
.ix-inv-date .m, .ix-inv-date .y {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: .3em;
  color: #E8D5B0;
  padding: .55em 0;
  border-top: 1px solid rgba(232,213,176,.55);
  border-bottom: 1px solid rgba(232,213,176,.55);
  text-align: center;
}
.ix-inv-date .dd {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1;
  color: #FFFDF8;
  border-left: 1px solid rgba(232,213,176,.6);
  border-right: 1px solid rgba(232,213,176,.6);
  text-shadow: 0 2px 14px rgba(4,9,22,.7);
}
.ix-inv-wd {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: .42em;
  color: rgba(243,236,224,.88);
}
.ix-inv-verse {
  margin: 0;
  padding: 0 16px;
  max-width: 34em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: #F6EEDD;
  text-shadow: 0 1px 10px rgba(4,9,22,.9), 0 0 2px rgba(4,9,22,.6);
  text-wrap: balance;
}
.ix-inv-verse p { margin: 0; }
.ix-inv-verse cite {
  display: block;
  margin-top: .45em;
  font-style: normal;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: .62em;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #E8D5B0;
}
@media (max-width: 520px) { .ix-inv-verse br { display: none; } }

/* ---------- botões ---------- */
.ix-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  height: 40px;
  min-width: 40px;
  padding: 0 14px;
  border: 1px solid rgba(232,213,176,.42);
  border-radius: 999px;
  background: rgba(13,26,42,.36);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #F3E7CC;
  font: 600 11px/1 'Montserrat', sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .6s ease, background-color .25s ease, border-color .25s ease;
}
.ix-btn.on { opacity: 1; }
.ix-btn:hover { background: rgba(13,26,42,.6); border-color: rgba(232,213,176,.8); }
.ix-btn:focus-visible { outline: 2px solid #E8D5B0; outline-offset: 3px; }
.ix-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* o canto superior esquerdo é do botão da música (fica por cima da abertura) */
.ix-skip { right: calc(env(safe-area-inset-right, 0px) + 14px); padding-right: 12px; }

/* convite fechado: "Toque para abrir o convite" */
.ix-open {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 24px 13px 20px;
  border: 1px solid rgba(232,213,176,.62);
  border-radius: 999px;
  background: rgba(13,26,42,.58);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -12px rgba(4,8,20,.75), 0 0 0 5px rgba(232,213,176,.08);
  color: #F8F0DE;
  font: italic 500 clamp(17px, 1.3vw + 10px, 22px)/1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .03em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .8s ease, transform .8s ease, visibility 0s linear .8s;
  -webkit-tap-highlight-color: transparent;
}
.ix-open.on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .8s ease, transform .8s ease, visibility 0s;
}
.ix-open.ix-gone { opacity: 0; transform: translate(-50%, -6px); transition-duration: .35s; }
.ix-open:hover { background: rgba(13,26,42,.72); border-color: rgba(232,213,176,.9); }
.ix-open:focus-visible { outline: 2px solid #E8D5B0; outline-offset: 4px; }
.ix-open-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E8D5B0;
  box-shadow: 0 0 8px rgba(232,213,176,.8);
}
.ix-open-dot::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(232,213,176,.85);
  animation: ixTap 2s ease-out infinite;
}
@keyframes ixTap {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(3.4); opacity: 0; }
}