/* Tëimur · RPG: inserção orgânica.
   Os heróis saem da névoa sobre as escolhas, cada classe recortada no material do seu lugar,
   a costa desfeita em espuma com um pergaminho rasgado e as campanhas sobre o próprio clima. */

/* Heróis: a névoa se abre e as figuras descem sobre os três blocos */
.rpg-heroes{overflow-x:clip}
.rpg-heroes-art{position:relative;z-index:0;margin:40px -9% 0!important}
.rpg-heroes-art img{-webkit-mask-image:none!important;mask-image:none!important;opacity:0;transform:translateY(26px);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
.rpg-heroes-art.is-in img{opacity:1;transform:none}
.rpg-choices{position:relative;z-index:1;margin-top:-70px!important}
.rpg-choice{background:linear-gradient(160deg,rgba(251,246,234,.94),rgba(255,253,248,.97) 60%)!important;backdrop-filter:blur(2px)}

/* Classes: cada cena com um recorte e um material diferente */
.rpg-classes{padding:40px 6% 90px;overflow-x:clip}
.rpg-classes-head{text-align:center;max-width:680px;margin:0 auto 40px}
.rpg-classes-head p{margin:18px auto 0}
.rpg-class-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;row-gap:0;column-gap:0;max-width:1380px;margin:0 auto}
.rpg-class{position:relative;margin:-1% -2%;cursor:default;opacity:0;transform:translateY(30px);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.rpg-class.is-in{opacity:1;transform:none}
.rpg-class img{display:block;width:100%;height:auto;transform:scale(1.12);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
.rpg-class figcaption{position:absolute;left:50%;bottom:-4%;translate:-50% 0;z-index:2;padding:12px 34px 10px;background:radial-gradient(ellipse closest-side,rgba(255,253,248,.97) 62%,rgba(255,253,248,.75) 80%,rgba(255,253,248,0));font:clamp(22px,2.1vw,30px)/1 Story,serif;color:#a07a2c;letter-spacing:.6px;white-space:nowrap;
  text-shadow:0 1px 0 #fffdf8,0 0 12px #fffdf8,0 0 22px #fffdf8;opacity:1;transform:none;transition:opacity .6s,transform .6s;pointer-events:none}
.rpg-class figcaption::after{content:'';display:block;height:1px;margin:8px auto 0;width:0;background:#b8954a;transition:width .7s .1s}
.rpg-class:hover img,.rpg-class:focus-within img{transform:scale(1.17) rotate(-.6deg);filter:brightness(1.06) saturate(1.08)}
.rpg-class:hover figcaption,.rpg-class:focus-within figcaption{opacity:1;transform:none}
.rpg-class:hover figcaption::after{width:70%}
.rpg-class figcaption::after{margin-top:6px}
.rpg-class:nth-child(1){z-index:29}.rpg-class:nth-child(2){z-index:28}.rpg-class:nth-child(3){z-index:27}.rpg-class:nth-child(4){z-index:26}.rpg-class:nth-child(5){z-index:25}.rpg-class:nth-child(6){z-index:24}.rpg-class:nth-child(7){z-index:23}.rpg-class:nth-child(8){z-index:22}.rpg-class:nth-child(9){z-index:21}.rpg-class:nth-child(10){z-index:20}.rpg-class:nth-child(11){z-index:19}
.rpg-class:hover{z-index:40}
.c-guerreiro{grid-column:1/6}.c-ladino{grid-column:6/9;translate:0 30px}.c-duelista{grid-column:9/13;translate:0 -20px}
.c-herbalista{grid-column:1/4;translate:0 -10px}.c-lutador{grid-column:4/10;translate:0 20px}.c-emissario{grid-column:10/13;translate:0 -30px}
.c-guardiao{grid-column:1/5;translate:0 10px}.c-artifice{grid-column:5/8;translate:0 -20px}.c-cacador{grid-column:8/13;translate:0 20px}
.c-trovador{grid-column:3/8;translate:0 -10px}.c-sacerdote{grid-column:8/11;translate:0 -30px}

/* A costa: espuma embaixo, céu em névoa, o texto num pergaminho rasgado */
.rpg-world{overflow-x:clip}
.rpg-world>img{max-height:none!important;object-fit:fill!important;width:calc(100% + 8vw)!important;margin-left:-4vw}
.rpg-world-copy{background:url(assets/rpg/organico/pergaminho.webp) center/100% 100% no-repeat!important;box-shadow:none!important;border:0!important;
  padding:62px 68px 70px!important;margin:-210px 7% 0!important;max-width:660px!important;filter:drop-shadow(0 22px 26px rgba(19,49,58,.22));transform:rotate(-1deg)}

/* Campanhas: a capa sobre o clima da própria aventura (aurora, mar, brasas) */
.rpg-cover{isolation:isolate}
.rpg-cover::after{display:none!important}
.rpg-campaign-copy{position:relative;z-index:2}
.rpg-cover>img:not(.rpg-env){position:relative;z-index:1}
.rpg-fx{position:absolute;inset:-22% -62%;z-index:0;pointer-events:none;overflow:visible}
.rpg-fx i{position:absolute;display:block;opacity:0}
.rpg-fx i:nth-child(1){left:10%}.rpg-fx i:nth-child(2){left:22%;animation-delay:1.2s}.rpg-fx i:nth-child(3){left:34%;animation-delay:2.5s}
.rpg-fx i:nth-child(4){left:64%;animation-delay:.6s}.rpg-fx i:nth-child(5){left:76%;animation-delay:1.9s}.rpg-fx i:nth-child(6){left:88%;animation-delay:3.1s}
.rpg-fx i:nth-child(7){left:46%;animation-delay:3.8s}.rpg-fx i:nth-child(8){left:56%;animation-delay:4.6s}
.rpg-fx-aurora::before{content:'';position:absolute;left:14%;right:14%;top:8%;height:34%;border-radius:50%;filter:blur(26px);opacity:.55;
  background:linear-gradient(100deg,transparent 5%,rgba(90,230,180,.75) 25%,rgba(120,170,255,.6) 50%,rgba(200,120,255,.5) 72%,transparent 92%);animation:rfx-aurora 9s ease-in-out infinite alternate}
.rpg-fx-aurora i{top:0;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:rfx-snow 10s linear infinite}
.rpg-fx-sea i{bottom:8%;width:9px;height:9px;border-radius:50%;border:1px solid rgba(225,245,255,.9);background:rgba(200,240,255,.18);animation:rfx-bubble 7s ease-in infinite}
.rpg-fx-aurora::after{content:'';position:absolute;inset:0 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(130,165,235,.45),rgba(130,165,235,.22) 55%,transparent);filter:blur(22px)}
.rpg-fx-sea::before{content:'';position:absolute;inset:0 4%;border-radius:46% 54% 50% 50%/60% 52% 48% 40%;filter:blur(24px);background:radial-gradient(closest-side,rgba(50,165,190,.55),rgba(50,165,190,.3) 55%,rgba(60,170,190,0));animation:rfx-foam 7s ease-in-out infinite}
.rpg-fx-sea::after{content:'';position:absolute;left:14%;right:14%;bottom:2%;height:14%;border-radius:50%;filter:blur(14px);background:radial-gradient(closest-side,rgba(240,252,255,.8),transparent);animation:rfx-foam 5s ease-in-out infinite reverse}
.rpg-fx-embers::before{content:'';position:absolute;inset:0 5%;border-radius:52% 48% 44% 56%/50% 60% 40% 50%;filter:blur(26px);background:radial-gradient(closest-side,rgba(230,90,30,.5),rgba(230,90,30,.26) 55%,rgba(230,90,30,0));animation:rfx-foam 4.5s ease-in-out infinite}
.rpg-fx-embers i{bottom:10%;width:4px;height:4px;border-radius:50%;background:#ffcf7a;box-shadow:0 0 9px 2px rgba(255,120,30,.85);animation:rfx-ember 5.5s ease-in infinite}
@keyframes rfx-aurora{0%{transform:translateX(-6%) skewX(-8deg);opacity:.35}100%{transform:translateX(6%) skewX(8deg);opacity:.7}}
@keyframes rfx-snow{0%{opacity:0;transform:translate(0,0)}10%{opacity:.9}100%{opacity:0;transform:translate(-40px,620px)}}
@keyframes rfx-bubble{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}100%{opacity:0;transform:translate(12px,-300px)}}
@keyframes rfx-foam{0%,100%{opacity:.75;transform:scaleX(.94)}50%{opacity:1;transform:scaleX(1.05)}}
@keyframes rfx-ember{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(22px,-420px)}}

@media(prefers-reduced-motion:reduce){.rpg-fx i,.rpg-fx::before,.rpg-fx::after{animation:none!important}.rpg-class,.rpg-heroes-art img{opacity:1;transform:none;transition:none}}
@media(max-width:900px){
  .rpg-heroes-art{margin:30px -12% 0!important}
  .rpg-choices{margin-top:-30px!important}
  .rpg-class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rpg-class-grid{display:flex!important;flex-direction:column;margin:0 -2vw}
  .rpg-class{translate:0 0!important;margin:-10% 0 0;width:82%;align-self:flex-start}
  .rpg-class:first-child{margin-top:0}
  .rpg-class:nth-child(even){align-self:flex-end}
  .c-ladino,.c-herbalista,.c-emissario,.c-artifice,.c-sacerdote{width:60%}
  .rpg-class img{transform:scale(1.04)}
  .rpg-class figcaption{opacity:1;transform:none;font-size:20px;bottom:0}
  .rpg-world-copy{margin:-70px 3% 0!important;padding:46px 34px 52px!important}
}

/* Logo da mesa: primeiro o traço de gravura se desenha, depois a cor se espalha como tinta a partir do centro.
   Ao passar o mouse, o desenho recomeça. Um reflexo discreto atravessa o dourado de tempos em tempos. */
.rpg-sigil::before{opacity:.35!important}
.rpg-sigil-burst{display:none!important}
.rpg-sigil>img,.rpg-sigil-sheen{grid-area:1/1}
.rpg-sigil-sketch{position:relative;width:min(640px,100%);height:auto;opacity:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg,#000 42%,transparent 58%);mask-image:linear-gradient(100deg,#000 42%,transparent 58%);
  -webkit-mask-size:320% 100%;mask-size:320% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.rpg-sigil .rpg-sigil-logo{opacity:0;filter:drop-shadow(0 14px 22px rgba(19,49,58,.28));-webkit-mask-image:none!important;mask-image:none!important;clip-path:polygon(50.5% 50.0%,50.4% 50.2%,50.5% 50.4%,50.4% 50.4%,50.4% 50.7%,50.3% 50.7%,50.2% 50.7%,50.2% 50.9%,50.1% 50.8%,50.0% 51.0%,49.9% 50.8%,49.9% 50.8%,49.8% 50.8%,49.6% 50.8%,49.7% 50.6%,49.6% 50.5%,49.5% 50.4%,49.4% 50.2%,49.5% 50.0%,49.5% 49.8%,49.5% 49.6%,49.6% 49.6%,49.6% 49.3%,49.7% 49.3%,49.8% 49.2%,49.8% 49.2%,49.9% 49.1%,50.0% 48.9%,50.1% 49.1%,50.2% 49.0%,50.3% 49.1%,50.3% 49.3%,50.4% 49.3%,50.4% 49.6%,50.4% 49.7%,50.4% 49.8%)}
.rpg-sigil.is-cast .rpg-sigil-sketch{animation:sg-draw 1.8s cubic-bezier(.45,.1,.3,1) forwards,sg-settle 1.2s ease 2.6s forwards}
.rpg-sigil.is-cast .rpg-sigil-logo{animation:sg-ink 2.6s cubic-bezier(.55,.05,.45,.95) 1.1s forwards!important}
.rpg-sigil-sheen{position:relative;width:min(640px,100%);aspect-ratio:2/1;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,244,214,.55) 48%,rgba(255,244,214,0) 58%) no-repeat;background-size:260% 100%;background-position:120% 0;mix-blend-mode:soft-light;
  -webkit-mask-image:url(assets/rpg/logo-explore-teimur.webp);mask-image:url(assets/rpg/logo-explore-teimur.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.rpg-sigil.is-cast .rpg-sigil-sheen{animation:sg-sheen 9s ease-in-out 3.8s infinite}
.rpg-sigil-sparks i{width:3px!important;height:3px!important;background:#e9cf96!important;box-shadow:0 0 5px 1px rgba(214,178,110,.6)!important}
.rpg-sigil.is-cast .rpg-sigil-sparks i{animation:sg-dust 7s ease-in-out 2.4s infinite!important}
@keyframes sg-draw{0%{opacity:1;-webkit-mask-position:100% 0;mask-position:100% 0}100%{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes sg-settle{from{opacity:1;transform:none}to{opacity:.32;transform:translate(7px,6px)}}
@keyframes sg-ink{0%{opacity:1;clip-path:polygon(50.5% 50.0%,50.4% 50.2%,50.5% 50.4%,50.4% 50.4%,50.4% 50.7%,50.3% 50.7%,50.2% 50.7%,50.2% 50.9%,50.1% 50.8%,50.0% 51.0%,49.9% 50.8%,49.9% 50.8%,49.8% 50.8%,49.6% 50.8%,49.7% 50.6%,49.6% 50.5%,49.5% 50.4%,49.4% 50.2%,49.5% 50.0%,49.5% 49.8%,49.5% 49.6%,49.6% 49.6%,49.6% 49.3%,49.7% 49.3%,49.8% 49.2%,49.8% 49.2%,49.9% 49.1%,50.0% 48.9%,50.1% 49.1%,50.2% 49.0%,50.3% 49.1%,50.3% 49.3%,50.4% 49.3%,50.4% 49.6%,50.4% 49.7%,50.4% 49.8%)}45%{opacity:1;clip-path:polygon(78.3% 50.0%,76.2% 59.3%,79.6% 71.5%,72.4% 75.9%,73.2% 89.0%,68.5% 94.0%,62.9% 94.6%,60.3% 106.5%,54.4% 100.3%,50.0% 108.7%,45.5% 101.0%,41.1% 99.0%,35.4% 100.7%,28.7% 100.8%,29.8% 83.9%,26.3% 77.3%,20.7% 71.4%,16.2% 61.9%,19.3% 50.0%,21.4% 39.9%,17.5% 26.4%,27.8% 24.4%,24.4% 7.0%,32.0% 7.1%,36.7% 4.0%,41.0% 0.5%,45.1% -5.5%,50.0% -16.1%,54.7% -3.1%,60.5% -7.9%,65.7% -4.3%,68.5% 5.9%,73.3% 10.8%,72.3% 24.2%,74.2% 32.4%,76.8% 40.6%)}99%{opacity:1;clip-path:polygon(139.6% 50.0%,133.1% 79.3%,143.6% 118.1%,121.0% 132.0%,123.6% 173.5%,108.4% 189.3%,90.8% 191.3%,82.6% 229.0%,64.1% 209.4%,50.0% 236.0%,35.8% 211.4%,21.8% 205.2%,3.6% 210.6%,-17.5% 210.8%,-14.0% 157.4%,-25.0% 136.6%,-42.9% 117.6%,-57.0% 87.7%,-47.3% 50.0%,-40.5% 18.1%,-52.9% -24.9%,-20.3% -31.2%,-31.1% -86.1%,-7.0% -85.7%,7.9% -95.8%,21.5% -106.7%,34.5% -125.6%,50.0% -159.2%,64.8% -118.0%,83.3% -133.2%,99.6% -121.9%,108.6% -89.6%,123.9% -74.0%,120.8% -31.7%,126.7% -5.8%,134.8% 20.1%)}100%{opacity:1;clip-path:none}}
@keyframes sg-sheen{0%,70%{opacity:0;background-position:120% 0}75%{opacity:1}100%{opacity:0;background-position:-20% 0}}
@keyframes sg-dust{0%,100%{opacity:0;transform:translate(0,0)}30%{opacity:.7}70%{opacity:.4;transform:translate(10px,-34px)}}
@media(prefers-reduced-motion:reduce){.rpg-sigil .rpg-sigil-logo{opacity:1;clip-path:none;animation:none!important}.rpg-sigil-sketch,.rpg-sigil-sheen{display:none}}

/* Livro Base: mesma vitrine das campanhas, com a luz roxa do dragão em volta da capa */
.rpg-base .rpg-cover{max-width:400px}
.rpg-base .rpg-cover::before{content:'';position:absolute;inset:-14% -40%;z-index:0;border-radius:50%;filter:blur(28px);pointer-events:none;
  background:radial-gradient(closest-side,rgba(130,80,200,.42),rgba(130,80,200,.2) 55%,transparent);animation:rfx-foam 6s ease-in-out infinite}