/* Supplied Moody Gardens pyramid composition; original pixels surround native HTML copy. */
body.attractions-page .atx #moody-gardens.mg-reference{--mg-rail:170px;position:relative;isolation:isolate;overflow:hidden;padding:150px var(--mg-rail) calc(75 * var(--u));background:var(--paper);color:var(--navy)}
/* Full-section palm background, with a soft transition into adjacent sections. */
.mg-reference::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:url('../img/moody-pyramids-reference/section-background-light-foliage.png') center/cover no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 90px,#000 calc(100% - 90px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
/* Keep the leaf shadow on the outer section corner, away from the content. */
.mg-reference::after{content:"";position:absolute;z-index:0;top:0;right:-48px;width:230px;height:145px;pointer-events:none;background:url('../img/moody-pyramids-reference/section-background-1672.png') right top/1400px auto no-repeat;opacity:.25;filter:blur(3px);mask-image:radial-gradient(ellipse at top right,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at top right,#000 30%,transparent 75%)}
.mg-reference .mg__design{position:relative;z-index:1;isolation:isolate;container-type:inline-size;aspect-ratio:1598/941;overflow:hidden}
/* Crop the outer margins so the aquarium frame and right arch sit on the hero rails. */
.mg-reference .mg__reference-art{position:absolute;left:-3.817272%;top:0;width:104.630788%;height:100%;pointer-events:none;mask-image:url('../img/moody-pyramids-reference/design-blend-edge-leaves.svg');-webkit-mask-image:url('../img/moody-pyramids-reference/design-blend-edge-leaves.svg');mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.mg-reference .mg__original,.mg-reference .mg__text-fix{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;display:block;pointer-events:none;user-select:none}
.mg-reference .mg__text-fix{mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.mg-reference .mg__text-fix--title{mask-image:url('../img/moody-pyramids-reference/text-blend-title.svg');-webkit-mask-image:url('../img/moody-pyramids-reference/text-blend-title.svg')}
.mg-reference .mg__text-fix--button{display:none}
.mg-reference .mg__text-fix--cards{mask-image:url('../img/moody-pyramids-reference/text-blend-cards.svg');-webkit-mask-image:url('../img/moody-pyramids-reference/text-blend-cards.svg')}
.mg-reference .mg__copy{position:absolute;z-index:2;left:0;top:6%;transform:translateX(2px);width:calc((100% - 74 * var(--u)) / 2.3);container-type:inline-size;user-select:text}
/* The same font pair, scale, tracking, leading and colors as Bishop’s Palace. */
.mg-reference .mg__title{margin:0;font:400 calc(156 * var(--u))/.94 var(--hp-display);font-size:24cqw;letter-spacing:-.01em;color:var(--navy)}
.mg-reference .mg__title em{display:block;margin:calc(5 * var(--u)) 0 0 10%;font:400 1.08em/.76 var(--hp-accent);font-style:normal;letter-spacing:0;color:var(--sand);white-space:nowrap}
.mg-reference .mg__button{position:absolute;z-index:3;left:3.754693%;top:38.257173%;width:17.897372%;height:6.907545%;display:flex;align-items:center;justify-content:center;gap:calc(18 * 100cqw / 1598);border:1px solid #083f43;border-radius:2px;box-shadow:inset 0 0 0 1px #ffffff88;background:linear-gradient(145deg,#225e57,#003a3f);color:#fff;font:500 max(11px,calc(20 * 100cqw / 1598))/1 var(--hp-text);letter-spacing:.045em;text-transform:uppercase;text-decoration:none;white-space:nowrap;user-select:text}
.mg-reference .mg__button span{font-size:1.5em;line-height:1}
.mg-reference .mg__button:hover{background:#0e4b50}
.mg-reference .mg__button:focus-visible{outline:3px solid var(--sand);outline-offset:5px}
.mg-reference .mg__cards{position:absolute;left:42.365457%;top:67.800213%;right:2.565707%;height:23.379384%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8%;padding:0;margin:0;list-style:none;user-select:text}
.mg-reference .mg__feature{position:relative;min-width:0;text-align:center}
.mg-reference .mg__feature h3{position:absolute;top:72%;left:0;width:100%;margin:0;font:500 max(13px,calc(25 * 100cqw / 1598))/1.2 "Gate Newsreader",Georgia,serif;letter-spacing:-.025em;color:#073b57;white-space:nowrap}
.mg-reference .mg__feature-icon{--mg-icon-size:clamp(42px,calc(108 * 100cqw / 1598),108px);position:absolute;top:10%;left:50%;transform:translateX(-50%);display:block;width:var(--mg-icon-size);height:var(--mg-icon-size);border-radius:50%;background-image:url('../img/moody-pyramids-reference/original-1672.png');background-size:calc(1672 * var(--mg-icon-size) / 108) calc(941 * var(--mg-icon-size) / 108);background-position:calc(-1 * var(--mg-icon-x) * var(--mg-icon-size) / 108) calc(-660 * var(--mg-icon-size) / 108)}
.mg-reference .mg__feature--aquarium{--mg-icon-x:824}
.mg-reference .mg__feature--rainforest{--mg-icon-x:1123}
.mg-reference .mg__feature--discovery{--mg-icon-x:1422}
.mg-reference .mg__mobile-main{display:none}
/* The original six-image animation, rendered as a seamless inline video. */
.mg-reference .mg__slideshow{position:absolute;z-index:2;left:0;top:53.135%;width:40.05%;aspect-ratio:640/370;border:max(3px,calc(7 * 100cqw / 1598)) solid #fffdf5;border-radius:max(12px,calc(28 * 100cqw / 1598));overflow:hidden;box-shadow:0 12px 30px #46361f20;background:#073b57}
.mg-reference .mg__video{display:block;width:100%;height:100%;object-fit:cover;background:#073b57}
.mg-reference .mg__video-frame.is-enhanced{background:#073b57 url('../img/moody-original-slideshow/moody-01.png') center/cover no-repeat}
.mg-reference .mg__video-frame.is-enhanced .mg__video{opacity:0;transition:opacity .8s ease}
.mg-reference .mg__video-frame[data-ready="true"] .mg__video{opacity:1}
@media(min-width:901px) and (max-width:1100px){body.attractions-page .atx #moody-gardens.mg-reference{--mg-rail:clamp(80px,8.947vw,170px)}}
@media(max-width:900px){body.attractions-page .atx #moody-gardens.mg-reference{--mg-rail:24px}}
@media(max-width:999px){
 body.attractions-page .atx #moody-gardens.mg-reference{padding:150px var(--mg-rail) 40px}
 .mg-reference .mg__design{display:flex;flex-direction:column;gap:28px;aspect-ratio:auto;overflow:visible}
 .mg-reference .mg__reference-art,.mg-reference .mg__original,.mg-reference .mg__text-fix{display:none}
 .mg-reference::before{background-size:auto 100%;opacity:.6}
 .mg-reference .mg__copy{position:relative;left:auto;top:auto;transform:none;width:100%}
 .mg-reference .mg__title{margin-top:24px;font-size:clamp(58px,24cqw,96px)}
 .mg-reference .mg__title em{margin-top:4px}
 .mg-reference .mg__button{position:relative;left:auto;top:auto;width:max-content;max-width:100%;height:auto;min-height:54px;padding:15px 24px;gap:18px;font-size:14px;border:1px solid #bfaa7a;border-radius:3px;background:linear-gradient(145deg,#225e57,#003a3f);box-shadow:0 8px 20px #46361f1c}
 .mg-reference .mg__button:hover{background:#0e4b50}
 .mg-reference .mg__mobile-main{position:relative;display:block;width:100%;aspect-ratio:958/580;overflow:hidden;border:1px solid #c5a678;border-radius:50% 50% 12px 12px}
 .mg-reference .mg__mobile-main img{position:absolute;width:174.530271%;height:auto;max-width:none;left:-73.277662%;top:-6.034483%}
 .mg-reference .mg__slideshow{position:relative;left:auto;top:auto;width:68%;aspect-ratio:640/370;border-width:4px;border-radius:16px;margin-top:-8%;z-index:2}
 .mg-reference .mg__cards{position:relative;left:auto;right:auto;top:auto;height:auto;gap:14px;width:100%}
 .mg-reference .mg__feature{padding:24px 10px 30px;border:0;background:transparent;box-shadow:none}
 .mg-reference .mg__feature h3{position:static;font-size:clamp(17px,2.3vw,23px);margin-top:23px;white-space:normal}
 .mg-reference .mg__feature::after{content:"";display:block;width:36px;height:2px;margin:18px auto 0;background:#b68a38}
 .mg-reference .mg__feature-icon{--mg-icon-size:64px;position:static;transform:none;margin:0 auto}
}
@media(max-width:600px){
 .mg-reference::after{right:-28px;width:140px;height:100px;background-size:900px auto;opacity:.18}
 .mg-reference .mg__cards{grid-template-columns:1fr}
 .mg-reference .mg__feature{padding:24px}
 .mg-reference .mg__feature h3{font-size:23px}
 .mg-reference .mg__slideshow{width:88%}
}

@media(prefers-reduced-motion:reduce){.mg-reference .mg__video-frame.is-enhanced .mg__video{transition:none}}