/* Mundo: Elza. Duas tramas: papel (passado) e palco (presente). */
.world--el {
  --w-bg: #FFFDEC;
  --w-ink: #3F3D3A;
  --w-accent: #F38247;
  --w-accent-2: #FF9300;
  --w-display: "Avenir Next", Avenir, "Figtree", sans-serif;
  --w-body: "Avenir Next", Avenir, "Figtree", sans-serif;
  --thread: #F38247;
  --marker-bg: #FFFDEC;
}
.el-paper { background: #FFFDEC; color: #3F3D3A; --w-ink: #3F3D3A; }
.el-stage { background: #060707; color: #FFF3D6; --w-ink: #FFF3D6; }
.world--el .site-header { color: #FFF3D6; background: linear-gradient(to bottom, rgba(6,7,7,.7), transparent); }
.world--el .site-header[data-tone="paper"] { color: #3F3D3A; background: linear-gradient(to bottom, rgba(255,253,236,.9), transparent); }
.el-h2 { font-family: var(--w-display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.02; margin: 0 0 24px; letter-spacing: -.01em; }
.el-h2--paper { color: #5E5E5E; }

/* Cada bloco ocupa ao menos uma tela, com o conteúdo no meio */
.world--el .w-section { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.world--el .w-section > .w-wrap { width: 100%; }

/* O número do renascimento entra junto com o título */
.el-rebirths li:has(h3.w-reveal:not(.is-in))::before { opacity: 0; transform: translateY(28px); }
.el-rebirths li:has(h3.w-reveal.is-in)::before { transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* As fotos surgem da retícula: os pontos crescem até cobrir a imagem (initReveals com el-emerge) */
@property --dot { syntax: '<length>'; inherits: true; initial-value: 7px; }
.el-emerge { --dot: .5px; }
.el-emerge.is-in { --dot: 7px; transition: --dot 1.8s var(--ease) var(--reveal-delay, 0s); }
.el-emerge img {
  -webkit-mask-image: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + .75px)); mask-image: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + .75px));
  -webkit-mask-size: 9px 9px; mask-size: 9px 9px;
}
.el-emerge.is-done img, html.reduced-motion .el-emerge img { -webkit-mask-image: none; mask-image: none; }

/* Abertura */
.el-opening { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: end; padding: 120px var(--gutter) 12vh calc(var(--gutter) + var(--rail)); isolation: isolate; cursor: none; }
.el-opening__photo { position: absolute; inset: 0; z-index: -2; }
.el-opening__photo img { position: absolute; right: 0; top: 0; height: 100%; width: 72%; object-fit: cover; object-position: 60% 20%; filter: grayscale(1) contrast(1.15) sepia(.25);
  -webkit-mask-image: radial-gradient(circle var(--radius, 34vmax) at var(--sx, 70%) var(--sy, 35%), #000 0 30%, rgba(0,0,0,.35) 55%, transparent 80%);
  mask-image: radial-gradient(circle var(--radius, 34vmax) at var(--sx, 70%) var(--sy, 35%), #000 0 30%, rgba(0,0,0,.35) 55%, transparent 80%); }
html.reduced-motion .el-opening { cursor: auto; }
.el-voice { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; z-index: -1; pointer-events: none; }
.el-opening__text { position: relative; }
.el-logo { width: clamp(260px, 42vw, 620px); height: auto; filter: drop-shadow(0 0 40px rgba(243,130,71,.3)); }
.el-subtitle { font-size: var(--s-1); font-weight: 700; margin: 18px 0 4px; }
.el-credits { opacity: .8; margin: 0; }
.el-hint { position: absolute; right: var(--gutter); bottom: 5vh; font-size: .85rem; opacity: .6; margin: 0; }

/* Apresentação */
.el-big { font-family: var(--w-display); font-weight: 900; color: #5E5E5E; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.1; max-width: 22ch; margin: 0 0 32px; text-wrap: balance; }
.el-follow { font-size: var(--s-1); max-width: 48ch; margin: 0; }

/* Tramas */
.el-block { display: grid; min-height: 100vh; min-height: 100svh; align-items: stretch; }
@media (min-width: 980px) { .el-block { grid-template-columns: 1.25fr 1fr; } .el-block--reversed .el-block__photo { order: 2; } }
.el-block__photo { position: relative; min-height: 50vh; overflow: hidden; }
.el-block__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) sepia(.2); }
.el-stage .el-block__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent 55%, #060707); }
.el-paper .el-block__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, transparent 50%, #FFFDEC); }
@media (min-width: 980px) { .el-paper.el-block--reversed .el-block__photo::after { background: linear-gradient(to right, transparent 50%, #FFFDEC); } }
.el-halftone::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle, rgba(30,26,22,.55) 1px, transparent 1.6px) 0 0 / 5px 5px; mix-blend-mode: multiply; pointer-events: none; }
.el-block__text { padding: clamp(40px, 7vw, 110px) var(--gutter) clamp(40px, 7vw, 110px) calc(var(--gutter) + var(--rail)); align-self: center; }
@media (min-width: 980px) { .el-block__text { padding-left: clamp(24px, 4vw, 64px); } .el-block--reversed .el-block__text { padding-left: calc(var(--gutter) + var(--rail)); } }
.el-block__text p { font-size: var(--s-1); max-width: 34ch; margin: 0; }
.el-time { font-family: var(--w-display); font-weight: 900; font-size: clamp(2rem, 4vw, 3.4rem) !important; line-height: 1; margin: 0 0 18px !important; color: var(--w-accent); }
.el-time span { display: block; font-weight: 500; font-size: .42em; color: currentColor; opacity: .8; margin-top: 8px; }
.el-stage .el-time span { color: #FFF3D6; }
.el-paper .el-time span { color: #3F3D3A; }

.el-rebirths { list-style: none; margin: 0; padding: 0; counter-reset: rebirth; }
.el-rebirths li { counter-increment: rebirth; min-height: 100vh; min-height: 100svh; padding: clamp(72px, 10vw, 140px) var(--gutter) clamp(72px, 10vw, 140px) calc(var(--gutter) + var(--rail)); display: grid; gap: 14px 48px; align-items: center; align-content: center; }
@media (min-width: 980px) { .el-rebirths li { grid-template-columns: 120px minmax(0, 1fr) minmax(0, .8fr); } }
.el-rebirths li::before { content: counter(rebirth) "º"; font-family: var(--w-display); font-weight: 900; color: var(--w-accent); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; grid-row: span 2; }
.el-rebirths h3 { font-family: var(--w-display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.1; margin: 0; max-width: 22ch; }
.el-rebirths__kicker { display: block; font-weight: 500; font-size: .9rem; opacity: .7; margin-bottom: 8px; letter-spacing: .02em; }
.el-rebirths p { margin: 0; max-width: 46ch; font-size: var(--s-1); grid-column: 2; }
.el-rebirths__photo { grid-column: 3; grid-row: 1 / span 2; aspect-ratio: 4 / 3; overflow: hidden; }
.el-rebirths__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) sepia(.2); }
@media (max-width: 979px) { .el-rebirths p, .el-rebirths__photo { grid-column: auto; grid-row: auto; } }

/* A coroa */
.el-crown { position: relative; height: 260vh; }
html.reduced-motion .el-crown { height: auto; }
.el-crown__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.reduced-motion .el-crown__stage { position: relative; min-height: 100svh; }
.el-crown__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.el-crown__text { position: absolute; left: calc(var(--gutter) + var(--rail)); bottom: 10vh; max-width: 40ch; opacity: var(--phrase-opacity, 0); transition: opacity .4s; }
html.reduced-motion .el-crown__text { opacity: 1; }
.el-crown__text .el-h2 { color: var(--w-accent); }
.el-crown__text p { font-size: var(--s-1); margin: 0; }

/* Ficha */
.el-sheet-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 980px) { .el-sheet-grid { grid-template-columns: .8fr 1.2fr; } }
.el-portrait { margin: 0; }
.el-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.el-portrait figcaption { margin-top: 10px; font-weight: 700; }

.el-next__name { display: block; font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1; color: #fff; }
.el-back { margin-top: 24px; }
.el-next--jc { background: #0A0A0A; }
.el-next--jc img { object-fit: contain; filter: drop-shadow(0 0 16px #FF2BD6); padding: 4% 18% 12%; }

.el-portrait img { object-position: 82% 30%; }

@media (max-width: 760px) {
  .el-opening__photo img { width: 100%; object-position: 72% 12%; }
  .el-voice { height: 30%; }
}