/* Explore world — rainforest museum gallery. Scoped to #species. */
#species{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#052a20 url('assets/species-rainforest-background.png') center/cover no-repeat;
  color:#f5f1e7;
  padding-top:105px!important;
  padding-bottom:92px!important;
}
#species:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(1,24,18,.34),rgba(4,39,29,.08) 48%,rgba(2,28,21,.24)),linear-gradient(0deg,rgba(1,19,14,.48),transparent 43%);pointer-events:none}
#species:after{display:none}
#species .section-head{align-items:flex-end;margin-bottom:58px}
#species .section-label{display:block;width:max-content;color:#d9ad5d;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.28em}
#species .section-label span{color:inherit;font-size:13px;margin-right:20px}
#species .section-label:after{content:"";display:block;width:38px;height:1px;margin-top:22px;background:#d9ad5d;box-shadow:16px 0 0 rgba(217,173,93,.22)}
#species .section-head h2{margin-top:34px;color:#f5f1e7;font-size:clamp(50px,4vw,66px);line-height:1.16;letter-spacing:.012em;text-shadow:0 2px 22px rgba(0,0,0,.2)}
#species .section-head h2 em{color:#d9ad5d}
#species .section-aside{display:grid;grid-template-columns:minmax(300px,390px) auto;align-items:end;gap:18px;max-width:none;padding-bottom:0}
#species .section-aside p{margin:0;color:rgba(248,245,234,.86);font-size:16px;line-height:1.82;letter-spacing:.035em}
#species .section-more{display:flex;align-items:center;justify-content:space-between;min-width:160px;height:48px;padding:0 20px;border:1px solid rgba(217,173,93,.46);border-radius:3px!important;color:#f2e9d4;font-size:13px!important;letter-spacing:.07em;background:rgba(4,35,26,.28);backdrop-filter:blur(5px);transition:border-color .35s ease,background .35s ease,transform .35s ease}
#species .section-more:hover{transform:translateY(-2px);border-color:rgba(217,173,93,.75);background:rgba(16,67,49,.56)}
#species .section-more span{color:#d9ad5d;font-size:18px}
#species .species-grid{gap:18px;align-items:stretch}
#species .animal-card{display:block;height:520px;padding:0;border-radius:15px;border:1px solid rgba(201,155,74,.5);background:linear-gradient(145deg,rgba(13,61,44,.87),rgba(3,38,28,.82));box-shadow:0 18px 45px rgba(0,15,10,.16),inset 0 0 0 1px rgba(255,255,255,.012);backdrop-filter:blur(6px);isolation:isolate;font-family:"Microsoft YaHei","微软雅黑",sans-serif}
#species .animal-card:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 25%,rgba(220,178,97,.07),transparent 32%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 230' fill='none' stroke='%23c99b4a' stroke-opacity='.24' stroke-width='1'%3E%3Cpath d='M214 228C170 176 144 120 130 45M133 55c19-27 43-45 74-55M140 82c-28-17-56-25-86-22M151 117c24-28 44-43 64-47M161 149c-31-16-62-21-93-15M178 192c14-18 27-29 39-34'/%3E%3Cpath d='M133 55c7-28 25-47 54-57 0 26-18 46-54 57ZM140 82c-28 2-53-6-76-23 29-9 54-2 76 23ZM151 117c4-25 21-42 51-51-2 25-19 42-51 51ZM161 149c-30 4-57-1-81-16 29-12 56-7 81 16ZM178 192c2-21 14-36 36-46 1 22-11 37-36 46Z'/%3E%3C/svg%3E") right bottom/150px 160px no-repeat}
#species .animal-card:nth-child(2):before{background-position:center,right -12px bottom -8px}#species .animal-card:nth-child(3):before{background-position:center,right 8px bottom -18px}#species .animal-card:nth-child(4):before{transform:none;background-position:center,right -5px bottom -10px}
#species .animal-card:after{content:"";display:block;position:absolute;left:40px;right:40px;top:160px;height:1px;background:rgba(201,155,74,.32)}
#species .animal-card:hover{transform:translateY(-4px);border-color:rgba(220,178,97,.38);box-shadow:0 25px 62px rgba(0,14,10,.27)}
#species .animal-art{box-sizing:border-box;height:160px;display:grid;place-items:center;padding:36px 36px 18px;color:inherit;text-shadow:none}
#species .animal-art img{display:block;width:92px;height:92px;object-fit:contain;opacity:.98;filter:none;transition:transform .33s cubic-bezier(.2,.7,.2,1),opacity .33s ease}
#species .animal-card:nth-child(2) .animal-art img{width:92px;height:92px}
#species .animal-card:nth-child(2) .animal-art .reptile-symbol{width:98px;height:98px;opacity:1;filter:none}
#species .animal-card:nth-child(4) .animal-art .insect-symbol{width:88px;height:88px;opacity:1;filter:none}
#species .animal-card:hover .animal-art img{transform:scale(1.06) translateY(-3px);opacity:1}
#species .animal-info{box-sizing:border-box;position:relative;padding:45px 40px 25px;text-align:left;font-family:"Microsoft YaHei","微软雅黑",sans-serif}
#species .animal-info .animal-index{display:none}
#species .animal-info h3 .warp-text-run,
#species .animal-info p .warp-text-run,
#species .animal-info a .warp-text-run{font-size:inherit;line-height:inherit;letter-spacing:inherit;opacity:1}
#species .animal-info h3,
#species .animal-card:nth-child(3) .animal-info h3{display:block;min-height:52px;margin:0 0 14px;color:#f4f0e7;font-family:"Microsoft YaHei","微软雅黑",sans-serif;font-size:40px;font-weight:500;line-height:1.3;letter-spacing:0;white-space:nowrap;transition:color .33s ease}
#species .animal-info p{min-height:72px;margin:0;color:rgba(241,238,230,.82);font-family:"Microsoft YaHei","微软雅黑",sans-serif;font-size:20px;font-weight:400;line-height:1.8;letter-spacing:0;opacity:1}
#species .animal-info a{position:static;display:flex;width:100%;align-items:baseline;gap:18px;margin:35px 0 0;padding-top:18px;border-top:1px solid rgba(201,155,74,.2);color:#d7a84e;font-family:"Microsoft YaHei","微软雅黑",sans-serif;font-size:27px;font-weight:500;line-height:1.3;letter-spacing:.02em;text-decoration:none;transition:color .33s ease}
#species .animal-info a span{font-size:1em;line-height:1;transition:transform .33s ease}
#species .animal-info a:hover{color:#e0b664}
#species .animal-info a:hover span{transform:translateX(4px)}
#species .animal-card:hover .animal-info h3{color:#fffaf0}

/* Magic Card-inspired cursor-following museum-gold border. */
#species .animal-card .species-magic-border{
  position:absolute;
  z-index:8;
  inset:-1px;
  padding:1.5px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(190px circle at var(--magic-x,50%) var(--magic-y,50%),rgba(242,200,112,.98) 0,rgba(201,155,74,.66) 23%,rgba(201,155,74,.18) 48%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 7px rgba(201,155,74,.2));
  transition:opacity .42s ease;
}
#species .animal-card.magic-card-active .species-magic-border{opacity:1}
#species .animal-card.magic-card-active{border-color:rgba(201,155,74,.24);box-shadow:0 24px 58px rgba(0,14,10,.28),inset 0 0 34px rgba(214,171,85,.035)}
@media(hover:none),(prefers-reduced-motion:reduce){#species .animal-card .species-magic-border{display:none}}
@media(max-width:1100px){#species .section-head{display:block}#species .section-aside{margin-top:32px;justify-content:space-between}#species .species-grid{grid-template-columns:repeat(2,1fr)}#species .animal-card{height:520px}}
@media(max-width:560px){#species{padding-top:78px!important;padding-bottom:68px!important}#species .section-label,#species .section-label span{font-size:11px}#species .section-head h2{font-size:40px;margin-top:30px}#species .section-aside{display:block}#species .section-more{margin-top:20px}#species .species-grid{grid-template-columns:1fr}#species .animal-card{height:520px;border-radius:20px}#species .animal-info h3,#species .animal-card:nth-child(3) .animal-info h3{font-size:30px}#species .animal-info p{font-size:18px}#species .animal-info a{font-size:26px}}