/* A parchment atlas with three leather-bound entries. */
#universo {
  position:relative; isolation:isolate; overflow:clip;
  padding-block:96px 104px;
  border-block:1px solid #ba9159;
  background:
    radial-gradient(ellipse at 1% 12%,#7f491e40,transparent 38%),
    radial-gradient(ellipse at 98% 95%,#7f491e45,transparent 38%),
    url('./assets/parchment-grain.svg') repeat,
    linear-gradient(106deg,#c7a66d 0%,#e6cd96 12%,#f0deaf 47%,#e8d19c 80%,#c6a56c);
  box-shadow:inset 0 10px 22px #55381940,inset 0 -10px 22px #55381945;
}
#universo::before {
  content:''; position:absolute; inset:16px 20px; z-index:-1; pointer-events:none;
  border-block:1px solid #865b374a;
  background:
    linear-gradient(90deg,#76502c4d,transparent 25%,transparent 75%,#76502c4d) 0 5px/100% 1px no-repeat,
    linear-gradient(90deg,#76502c4d,transparent 25%,transparent 75%,#76502c4d) 0 calc(100% - 5px)/100% 1px no-repeat;
}
#universo::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 42% 20%,#ffefce55,transparent 65%);
  animation:atlas-candlelight 12s ease-in-out infinite alternate;
}
#universo .atlas-pages { position:relative; }
#universo .atlas-seal {
  position:absolute; right:12px; top:18px; width:150px; height:150px;
  display:grid; place-items:center; color:#77512b35;
  border:4px double #77512b28; border-radius:50%; transform:rotate(-12deg);
  font:500 86px/1 Cinzel,Georgia,serif; pointer-events:none;
  box-shadow:0 0 0 9px #77512b08,inset 0 0 0 7px #77512b09;
}
#universo .section-heading { position:relative; max-width:800px; margin-bottom:40px; }
#universo .section-heading .eyebrow { color:#775028; font-size:10px; letter-spacing:.19em; }
#universo #intro-title {
  color:#382919; font:500 clamp(29px,3.1vw,44px)/1.3 Cinzel,Georgia,serif;
  letter-spacing:-.035em; text-wrap:balance; margin-bottom:20px;
}
#universo #intro-title em { color:#846038; background:none; -webkit-text-fill-color:currentColor; }
#universo .section-heading p:not(.eyebrow) { color:#665138; max-width:690px; font-size:15px; line-height:1.9; }
#universo .section-heading::after { content:''; display:block; width:78px; height:1px; background:#946d3f80; margin-top:26px; }
#universo .feature-grid { gap:22px; }
#universo .feature {
  --relic-light:#d7b774;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:27px 26px 28px;
  text-align:center;
  border:1px solid #a8874e70;
  border-radius:4px 18px 4px 18px;
  background:
    radial-gradient(ellipse at 12% 0,#bb965526,transparent 58%),
    url('./assets/parchment-grain.svg') repeat,
    linear-gradient(135deg,#30261c,#211b15 58%,#181612);
  box-shadow:inset 0 1px 0 #eed8ab33,inset 0 0 0 4px #bd965b09,0 10px 26px #0003;
  transition:opacity .6s,border-color .35s,box-shadow .35s,transform .35s;
}
#universo .feature::before {
  content:'';
  position:absolute;
  inset:8px;
  z-index:-1;
  border:1px solid #b8915230;
  border-radius:1px 9px 1px 9px;
  background:
    linear-gradient(#c6a166,#c6a166) left top/18px 1px no-repeat,
    linear-gradient(#c6a166,#c6a166) left top/1px 18px no-repeat,
    linear-gradient(#a7864e,#a7864e) right bottom/18px 1px no-repeat,
    linear-gradient(#a7864e,#a7864e) right bottom/1px 18px no-repeat;
  pointer-events:none;
}
#universo .feature::after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(110deg,transparent 35%,#ffdc9e0c 48%,#ffdc9e15 50%,transparent 65%);
  transform:translateX(-150%);
  animation:relic-paper-sheen 14s ease-in-out infinite;
  pointer-events:none;
}
#universo .feature:nth-child(2) { --relic-light:#dfad70; }
#universo .feature:nth-child(3) { --relic-light:#a2c49a; }
#universo .feature:nth-child(2)::after { animation-delay:1.4s; }
#universo .feature:nth-child(3)::after { animation-delay:2.8s; }
#universo .feature-icon {
  position:relative;
  left:auto;
  top:auto;
  display:grid;
  place-items:center;
  isolation:isolate;
  width:94px;
  height:94px;
  margin:0 auto 22px;
  padding:0;
  border:1px solid #cba46869;
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#e7c38916,#1b140e55 75%);
  box-shadow:inset 0 0 0 5px #1d160e48,0 0 0 5px #d8ad6410,0 6px 16px #120c0633;
}
#universo .feature-icon::before {
  content:'';
  position:absolute;
  inset:5px;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse,var(--relic-light),transparent 68%);
  opacity:.13;
  filter:blur(8px);
  animation:relic-warmth 7s ease-in-out infinite;
}
#universo .feature-icon::after { content:''; position:absolute; width:5px; height:5px; left:calc(50% - 2.5px); bottom:-3px; transform:rotate(45deg); background:#d9b879; box-shadow:0 0 8px #d9b8794d; }
#universo .feature-icon img { display:block; width:80px; height:80px; max-width:none; filter:drop-shadow(0 5px 5px #0005); animation:atlas-relic-float 6s ease-in-out infinite; }
#universo .feature:nth-child(2) .feature-icon img { animation-delay:-2s; }
#universo .feature:nth-child(3) .feature-icon img { animation-delay:-4s; }
#universo .feature-no {
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:20px;
  right:20px;
  width:25px;
  min-height:28px;
  border-bottom:1px solid #c5a16b58;
  color:#b79c6c;
  font:500 14px/1.4 Cinzel,Georgia,serif;
  letter-spacing:.02em;
}
#universo .feature h3 {
  display:block;
  min-height:0;
  padding:0;
  margin:0 auto 12px;
  color:#f3e3c5;
  font:500 clamp(18px,1.58vw,21px)/1.4 Cinzel,Georgia,serif;
  letter-spacing:-.015em;
  text-wrap:balance;
}
#universo .feature p { max-width:340px; margin:0 auto; color:#c8bba4; font-size:14px; line-height:1.85; text-wrap:pretty; }
#universo .rail-caption,#universo .rail-caption strong { color:#644725; }
#universo .rail-progress span { background:#74502830; }
#universo .rail-progress span.active { background:linear-gradient(90deg,#755029,#ad7c36); }
#universo .rail-button { border-color:#8c652c65; background:linear-gradient(140deg,#f8e7c266,#ae864329); color:#5e3e1e; }
#universo :focus-visible { outline:2px solid #644523; outline-offset:4px; }
@keyframes atlas-candlelight { from { opacity:.35; } to { opacity:.8; } }
@keyframes atlas-relic-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-5px) rotate(1deg); } }
@keyframes relic-paper-sheen { 0%,72% { transform:translateX(-150%); } 90%,100% { transform:translateX(150%); } }
@keyframes relic-warmth { 0%,100% { opacity:.1; } 50% { opacity:.22; } }
@media (hover:hover) and (pointer:fine) {
  #universo .feature:hover { border-color:#dbb8789e; box-shadow:inset 0 1px 0 #eed8ab55,inset 0 0 0 4px #bd965b0d,0 13px 30px #0004; transform:translateY(-3px); }
}
@media (min-width:701px) and (max-width:1000px) {
  #universo .feature-grid { gap:16px; }
  #universo .feature { padding:22px 22px 25px; }
  #universo .feature h3 { font-size:18px; }
  #universo .feature p { font-size:13px; }
  #universo .feature-no { right:18px; }
}
@media (max-width:700px) {
  #universo { padding-block:62px 58px; }
  #universo::before { inset:12px 12px; }
  #universo .atlas-seal { top:-26px; right:-4px; width:76px; height:76px; font-size:44px; opacity:.45; }
  #universo .section-heading { margin-bottom:28px; }
  #universo .section-heading .eyebrow { max-width:230px; font-size:9px; }
  #universo #intro-title { font-size:clamp(26px,7.2vw,36px); line-height:1.32; }
  #universo .section-heading p:not(.eyebrow) { font-size:14px; }
  #universo .feature-grid { gap:13px; }
  #universo .feature-grid>.feature { padding:21px 22px 23px; min-height:0; border-radius:3px 13px 3px 13px; }
  #universo .feature-icon { width:82px; height:82px; margin:0 auto 18px; }
  #universo .feature-icon img { width:70px; height:70px; }
  #universo .feature-no { top:17px; right:18px; font-size:13px; }
  #universo .feature h3 { margin-bottom:11px; font-size:19px; line-height:1.4; }
  #universo .feature p { font-size:13px; line-height:1.8; }
}
@media (max-width:359px) {
  #universo .feature-grid>.feature { padding:18px 20px 22px; }
  #universo .feature-icon { width:76px; height:76px; }
  #universo .feature-icon img { width:64px; height:64px; }
  #universo .feature h3 { font-size:17px; }
  #universo .feature p { font-size:12px; }
}
.is-paused #universo::after,.is-paused #universo .feature-icon img,.is-paused #universo .feature,.is-paused #universo .feature::after,.is-paused #universo .feature-icon::before { animation:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce) {
  html:not(.motion-enabled) #universo::after,html:not(.motion-enabled) #universo .feature-icon img,html:not(.motion-enabled) #universo .feature,html:not(.motion-enabled) #universo .feature::after,html:not(.motion-enabled) #universo .feature-icon::before { animation:none!important; transition:none!important; }
}