/* ═══════════════════════════════════════════════════════════════
   LUIS AVILA — link na bio
   Renascença + grega antiga + vidro moderno
   ═══════════════════════════════════════════════════════════════ */

@property --sweep { syntax:'<percentage>'; initial-value:-45%; inherits:false; }

:root{
  /* pedra e sombra */
  --void:      #070503;
  --bg:        #0e0b08;
  --stone:     #1a120a;

  /* ouro e fogo */
  --gold:      #c8a44a;
  --gold-hi:   #f0dca6;
  --gold-txt:  #dcbe6e;   /* ouro legivel em texto pequeno sobre escuro */
  --gold-dim:  rgba(200,164,74,.42);
  --terra:     #cf4e28;   /* so em preenchimento, nunca em texto pequeno */
  --terra-txt: #ec7a52;   /* terracota clareado para texto sobre escuro */
  --terra-btn: #c9451f;   /* terracota escurecido para branco por cima passar */

  /* mármore */
  --marble:    #f5f0e8;
  --ash:       #c6bcab;
  --ash-dim:   #9d9486;

  /* vidro */
  --glass-blur: 18px;

  /* medida */
  --col:       min(480px, 100% - 36px);
  --ease:      cubic-bezier(.22,1,.36,1);

  --f-roman:   'Cinzel', Georgia, serif;
  --f-serif:   'Playfair Display', Georgia, serif;
  --f-cond:    'Oswald', Impact, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100svh;
  background:var(--void);
  color:var(--marble);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  animation:wake .7s ease-out both;
}
@keyframes wake{ from{ opacity:0 } to{ opacity:1 } }

a{ color:inherit; text-decoration:none; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:5px; border-radius:6px; }

/* ───────────────────────────────────────────────────────────────
   VÉU — afresco, poeira de estrelas, grão
   ─────────────────────────────────────────────────────────────── */

.veil{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.veil__fresco{
  position:absolute; inset:-6%;
  background:url('../img/arte/fundo-teto-tiepolo.webp') center/cover no-repeat;
  filter:saturate(1.16) contrast(1.06) brightness(1.05);
  animation:breathe 52s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes breathe{
  from{ transform:scale(1)    translate3d(0,0,0); }
  to  { transform:scale(1.14) translate3d(-1.5%,-2%,0); }
}

.veil__wash{
  position:absolute; inset:0;
  background:
    radial-gradient(56% 32% at 50% 15%, rgba(6,3,0,.70), transparent 72%),
    radial-gradient(96% 58% at 50% 0%, rgba(200,164,74,.22), transparent 64%),
    radial-gradient(70% 50% at 50% 100%, rgba(207,78,40,.14), transparent 66%),
    rgba(8,4,1,.72);
}

.veil__stars{ position:absolute; inset:0; width:100%; height:100%; opacity:.85; }

.veil__vignette{
  position:absolute; inset:0;
  box-shadow:inset 0 0 190px 60px rgba(4,2,0,.92);
}

.veil__grain{
  position:absolute; inset:-40%;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:dust 5s steps(5) infinite;
}
@keyframes dust{
  0%,100%{ transform:translate(0,0) }
  25%{ transform:translate(-2%,2%) }
  50%{ transform:translate(2%,-2%) }
  75%{ transform:translate(-1%,-2%) }
}

/* ───────────────────────────────────────────────────────────────
   PÁGINA
   ─────────────────────────────────────────────────────────────── */

.page{
  position:relative; z-index:1;
  width:var(--col);
  margin-inline:auto;
  padding-block:38px 64px;
}

/* ───────────────────────────────────────────────────────────────
   SELO / PERFIL
   ─────────────────────────────────────────────────────────────── */

.crest{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:12px;
}

.sigil{
  position:relative;
  width:236px; aspect-ratio:1;
  display:grid; place-items:center;
  margin-bottom:2px;
}

.sigil__orbit{
  position:absolute; inset:0;
  width:100%; height:100%;
  fill:none;
  overflow:visible;
}
.sigil__orbit--out{ animation:turn 78s linear infinite; }
.sigil__orbit--in { animation:turn 54s linear infinite reverse; }
@keyframes turn{ to{ transform:rotate(360deg) } }

.ring{ stroke:var(--gold); }
.ring--ticks{
  stroke-width:1;
  stroke-dasharray:1 7.6;
  opacity:.55;
}
.ring--hair{ stroke-width:.7; opacity:.26; }
.ring--glyphs path{
  stroke:var(--gold); stroke-width:1.2; stroke-linecap:round; opacity:.6;
}

.sigil__ring{
  position:relative;
  width:158px; aspect-ratio:1;
  border-radius:50%;
  padding:5px;
  border:1.5px solid var(--gold);
  box-shadow:0 0 58px rgba(200,164,74,.30), inset 0 0 22px rgba(200,164,74,.14);
}
.sigil__ring::after{
  content:''; position:absolute; inset:-11px;
  border-radius:50%;
  border:1px solid rgba(200,164,74,.16);
}

.sigil__inner{
  width:100%; height:100%;
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 35% 40%, #3a2515, #140b04);
  display:grid; place-items:center;
}
.sigil__inner img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 16%;
}

.crest__name{
  font-family:var(--f-roman);
  font-size:clamp(26px,7.2vw,32px);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.15;
  background:linear-gradient(178deg, var(--marble) 12%, var(--gold-hi) 58%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 34px rgba(200,164,74,.18);
}

.crest__bio{
  max-width:300px;
  font-size:13.5px; line-height:1.65;
  color:#d5ccbc;
  text-shadow:0 1px 14px rgba(6,3,0,.95);
}
.crest__bio em{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:14.5px;
  color:var(--terra-txt);
}

.crest__socials{ display:flex; gap:10px; }

.glyph{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1.4px solid var(--gold-dim);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--gold);
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.glyph svg{ width:18px; height:18px; }
@media (hover:hover){
  .glyph:hover{
    background:var(--gold); color:var(--bg);
    border-color:var(--gold);
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(200,164,74,.32);
  }
}

/* ── grega / meandro ─────────────────────────────────────────── */

.meander{ width:100%; margin:10px 0 18px; }
.meander svg{ display:block; width:100%; height:18px; overflow:visible; }
.meander path{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.62;
}
.meander__lozenge{ stroke-width:1.1; opacity:.85; }

/* traçado desenhando na entrada */
.meander.is-in path{
  stroke-dasharray:var(--len,240);
  stroke-dashoffset:var(--len,240);
  animation:draw 1.5s var(--ease) .15s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }

/* ───────────────────────────────────────────────────────────────
   BILHETES — arte renascentista + painel de vidro
   ─────────────────────────────────────────────────────────────── */

.deck{ display:flex; flex-direction:column; gap:13px; }

.ticket{
  position:relative;
  display:block;
  height:192px;
  isolation:isolate;
  cursor:pointer;
  backface-visibility:hidden;
  /* clip-path do bilhete (entalhes laterais) vem do JS */
  border-radius:12px;
  transition:transform .42s var(--ease), filter .42s var(--ease);
}

/* A arte ocupa SÓ a faixa que fica à vista.
   Recortar dentro da área visível é o que libera o enquadramento nos dois eixos:
   com a arte no card inteiro, o painel cobria 57% e o eixo horizontal travava. */
.ticket__art{
  position:absolute;
  top:0; bottom:0; left:0;
  width:var(--art-faixa, 45%);
  overflow:hidden;
  background-image:var(--art);
  background-size:var(--art-size, cover);
  background-position:var(--art-pos, center);
  background-repeat:no-repeat;
  transform:scale(1.03);
  transition:transform 1.1s var(--ease);
  /* sem filtro: a pintura aparece como ela é */
}
.rev .ticket__art{ left:auto; right:0; }

/* leve sombra nas bordas da faixa de arte, para ela não parecer colada */
.ticket__scrim{
  position:absolute;
  top:0; bottom:0; left:0;
  width:var(--art-faixa, 45%);
  background:linear-gradient(90deg, rgba(6,3,0,.30) 0%, transparent 20%, transparent 62%, rgba(8,4,1,.42) 100%);
}
.rev .ticket__scrim{
  left:auto; right:0;
  background:linear-gradient(270deg, rgba(6,3,0,.30) 0%, transparent 20%, transparent 62%, rgba(8,4,1,.42) 100%);
}

/* painel de vidro sobre a pintura */
.ticket__pane{
  position:absolute;
  top:0; bottom:0; right:0;
  width:57%;
  padding:15px 16px 13px;
  display:flex; flex-direction:column;
  overflow:hidden;

  /* base escura garantida: o texto nao pode depender da pintura que estiver atras */
  background:linear-gradient(155deg, rgba(30,20,9,.80), rgba(14,9,4,.88) 55%, rgba(8,4,1,.92));
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  border-left:1px solid rgba(200,164,74,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  color:var(--marble);
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.rev .ticket__pane{
  right:auto; left:0;
  border-left:0;
  border-right:1px solid rgba(200,164,74,.24);
}

.ticket__count{
  position:absolute; top:11px; right:12px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:8px; letter-spacing:.14em;
  color:var(--gold-txt); opacity:.85;
}
.ticket__count s{ display:block; width:1px; height:12px; background:currentColor; }
.ticket__count i{ font-style:normal; }

.ticket__laurel{
  align-self:flex-start;
  margin-bottom:6px;
  padding:3px 9px;
  border:1px solid rgba(200,164,74,.5);
  border-radius:2px;
  background:rgba(200,164,74,.10);
  font-family:var(--f-roman);
  font-size:8px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-hi);
}

.ticket__name{
  font-family:var(--f-cond);
  font-weight:700;
  font-size:23px;
  line-height:1;
  letter-spacing:.045em;
}
.ticket__name b{ color:var(--terra-txt); }

.ticket__kicker{
  margin:5px 0 8px;
  font-family:var(--f-roman);
  font-size:9px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-txt);
}

.ticket__desc{
  font-size:11.5px; line-height:1.55;
  color:#e9e1d2;
}
.ticket__desc em{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:12.5px;
  color:var(--terra-txt);
}

.ticket__orbit{
  position:absolute; right:-28px; bottom:-26px;
  width:120px; height:84px;
  pointer-events:none; opacity:.13;
}
.ticket__orbit ellipse{ fill:none; stroke:#fff; stroke-width:1; }

/* varredura dourada */
.ticket__sheen{
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(104deg,
    transparent var(--sweep),
    rgba(240,220,166,.16) calc(var(--sweep) + 9%),
    transparent calc(var(--sweep) + 22%));
}

/* borda dourada desenhada (SVG injetado pelo JS) */
.ticket__edge{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:5;
  overflow:visible;
}
.ticket__edge path{
  fill:none;
  stroke:var(--gold);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-opacity:0;
  filter:drop-shadow(0 0 6px rgba(200,164,74,.9)) drop-shadow(0 0 13px rgba(200,164,74,.45));
}

/* destaque */
.ticket.is-flag{ height:216px; }
.ticket.is-flag .ticket__pane{
  background:linear-gradient(155deg, rgba(44,29,12,.82), rgba(20,12,5,.90) 52%, rgba(10,5,1,.94));
  border-left-color:rgba(200,164,74,.5);
}
.ticket.is-flag .ticket__name{ font-size:26px; }

/* interação */
@media (hover:hover){
  .ticket:hover{ transform:translateY(-7px) scale(1.012); }
  .ticket:hover .ticket__art{ transform:scale(1.08); }
  .ticket:hover .ticket__pane{ background:linear-gradient(155deg, rgba(255,255,255,.16), rgba(24,15,6,.30) 52%, rgba(10,6,2,.40)); }
  .ticket:hover .ticket__sheen{ animation:sweep 1.15s var(--ease); }
}
.ticket:active{ transform:translateY(-3px) scale(.995); }
@keyframes sweep{ from{ --sweep:-45% } to{ --sweep:125% } }

/* ───────────────────────────────────────────────────────────────
   RODAPÉ
   ─────────────────────────────────────────────────────────────── */

.colophon{ margin-top:40px; text-align:center; }

.colophon__rule{
  height:1px; margin-bottom:18px;
  background:linear-gradient(90deg, transparent, var(--gold-dim) 28%, var(--gold-dim) 72%, transparent);
}
/* frase que gira */
.creed{
  position:relative;
  list-style:none;
  min-height:3.2em;
  display:grid;
  place-items:center;
  margin-bottom:16px;
}
.creed__line{
  grid-area:1/1;
  max-width:300px;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(15px,4.2vw,17px);
  line-height:1.45;
  letter-spacing:.01em;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 28px rgba(200,164,74,.20);

  opacity:0;
  transform:translateY(8px);
  filter:blur(4px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  pointer-events:none;
}
.creed__line.is-on{
  opacity:1; transform:none; filter:none;
}

.colophon__note{
  max-width:320px; margin-inline:auto;
  font-size:10.5px; line-height:1.7;
  color:#9d9486;
}

/* ───────────────────────────────────────────────────────────────
   ENTRADA + TRANSIÇÃO DE SAÍDA
   ─────────────────────────────────────────────────────────────── */

.rise{ opacity:0; transform:translateY(20px); }
.rise.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s);
}

#gate{
  position:fixed; inset:0; z-index:998;
  background:var(--bg);
  opacity:0; pointer-events:none;
  transition:opacity .5s ease;
}
#gate.is-open{ opacity:1; }

@keyframes depart{
  0%  { transform:scale(1);    opacity:1 }
  30% { transform:scale(1.07); opacity:.95 }
  100%{ transform:scale(3.2);  opacity:0 }
}
.ticket.is-leaving{
  animation:depart .55s cubic-bezier(.4,0,1,1) forwards !important;
  z-index:999;
}

/* ───────────────────────────────────────────────────────────────
   TELAS MAIORES — coluna respira, sem virar grade
   ─────────────────────────────────────────────────────────────── */

@media (min-width:768px){
  :root{ --col:min(540px, 100% - 64px); }
  .page{ padding-block:56px 80px; }
  .ticket{ height:196px; }
  .ticket.is-flag{ height:224px; }
  .ticket__name{ font-size:25px; }
  .ticket__desc{ font-size:12px; }
}

/* ───────────────────────────────────────────────────────────────
   MOVIMENTO REDUZIDO
   ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1; transform:none; }
  .veil__grain,.veil__stars{ display:none; }
  .meander.is-in path{ stroke-dashoffset:0; animation:none; }
}