/* Homepage — Atlas teaser (AtlasTeaser.jsx). Mirrors the atlas title card in atlas-3d.css. */
.hh-atlasx{background:#021634;color:#F7F2E9}
.hh-atlasx [lang="zh-Hant"]{font-family:"Noto Serif TC","Noto Serif SC",serif}
.hh-atlasx__stage{position:relative;display:block;min-height:min(86vh,760px);overflow:hidden;color:inherit;text-decoration:none;isolation:isolate}
.hh-atlasx__bg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 45%,#0B2C5C 0%,#06214A 38%,#021634 72%,#010F28 100%);-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.hh-atlasx__grid{position:absolute;inset:-10%;background-image:linear-gradient(rgba(230,182,85,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(230,182,85,.06) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(58deg) translateY(18%);transform-origin:50% 70%;-webkit-mask-image:radial-gradient(ellipse at 50% 60%,#000 0%,transparent 62%);mask-image:radial-gradient(ellipse at 50% 60%,#000 0%,transparent 62%)}
.hh-atlasx__glow{position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(230,182,85,.2) 0%,rgba(211,21,21,.07) 34%,transparent 64%);animation:hhAtlasxBreathe 9s ease-in-out infinite}
.hh-atlasx__ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(230,182,85,.22);transform:translate(-50%,-50%)}
.hh-atlasx__ring--1{width:min(440px,78vw);aspect-ratio:1}
.hh-atlasx__ring--2{width:min(640px,108vw);aspect-ratio:1;border-style:dashed;border-color:rgba(230,182,85,.14);animation:hhAtlasxSpin 90s linear infinite}
.hh-atlasx__ring--3{width:min(880px,140vw);aspect-ratio:1;border-color:rgba(230,182,85,.08)}
.hh-atlasx__cloud{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(226,232,242,.13),transparent);filter:blur(8px);animation:hhAtlasxDrift 26s ease-in-out infinite alternate}
.hh-atlasx__cloud--a{width:62vw;height:22vw;left:-18vw;top:56%}
.hh-atlasx__cloud--b{width:48vw;height:16vw;right:-14vw;top:18%;animation-duration:32s;animation-delay:-8s}
.hh-atlasx__cloud--c{width:40vw;height:12vw;left:34%;bottom:4%;animation-duration:38s;animation-delay:-15s;opacity:.7}
.hh-atlasx__dot{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#E6B655;box-shadow:0 0 12px 3px rgba(230,182,85,.55);animation:hhAtlasxTwinkle 3.6s ease-in-out infinite}
.hh-atlasx__dot::after{content:"";position:absolute;left:50%;top:50%;width:1px;height:46px;background:linear-gradient(rgba(230,182,85,.6),transparent);transform:translate(-50%,-100%)}
@keyframes hhAtlasxBreathe{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes hhAtlasxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes hhAtlasxDrift{from{transform:translateX(-4vw)}to{transform:translateX(6vw)}}
@keyframes hhAtlasxTwinkle{0%,100%{opacity:.45}50%{opacity:1}}
.hh-atlasx__stage:hover .hh-atlasx__ring--1{border-color:rgba(230,182,85,.4);transition:border-color .6s}
.hh-atlasx__card{position:relative;z-index:1;min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px 24px}
.hh-atlasx__eb{font:600 11px/1 var(--font-sans);letter-spacing:.42em;text-transform:uppercase;color:#E6B655}
.hh-atlasx__zh{margin:22px 0 0;font-size:clamp(96px,15vw,210px);font-weight:900;line-height:.95;letter-spacing:.14em;padding-left:.14em;background:linear-gradient(100deg,#8E0B0B 0%,#E63946 30%,#D31515 48%,#FF8A80 58%,#B51212 80%,#7A0909 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 12px 40px rgba(211,21,21,.3));animation:hhAtlasxSheen 8s ease-in-out infinite}
.hh-atlasx__en{margin-top:10px;font:italic 400 clamp(22px,2.4vw,32px)/1.2 var(--font-display);color:rgba(247,242,233,.92)}
.hh-atlasx__en em{color:#E6B655}
.hh-atlasx__rule{width:1px;height:56px;margin:30px 0 26px;background:linear-gradient(transparent,#E6B655,transparent)}
.hh-atlasx__btn{display:inline-flex;align-items:center;gap:14px;padding:17px 30px;border:1px solid #E6B655;color:#F7F2E9;font:600 11.5px/1 var(--font-sans);letter-spacing:.28em;text-transform:uppercase;background:rgba(2,16,40,.4);position:relative;overflow:hidden;transition:color .3s;z-index:0}
.hh-atlasx__btn [lang]{letter-spacing:.3em;color:#E6B655;font-weight:500;transition:color .3s}
.hh-atlasx__btn::before{content:"";position:absolute;inset:0;background:#E6B655;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:-1}
.hh-atlasx__stage:hover .hh-atlasx__btn,.hh-atlasx__stage:focus-visible .hh-atlasx__btn{color:#021D42}
.hh-atlasx__stage:hover .hh-atlasx__btn [lang],.hh-atlasx__stage:focus-visible .hh-atlasx__btn [lang]{color:#021D42}
.hh-atlasx__stage:hover .hh-atlasx__btn::before,.hh-atlasx__stage:focus-visible .hh-atlasx__btn::before{transform:none}
.hh-atlasx__hint{margin-top:22px;font:500 11px/1.5 var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(247,242,233,.62)}
.hh-atlasx__note{margin:14px 0 0;max-width:34em;font:400 11px/1.5 var(--font-sans);letter-spacing:.06em;color:rgba(247,242,233,.5)}
@keyframes hhAtlasxSheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@media (max-width:560px){.hh-atlasx__stage{min-height:620px}.hh-atlasx__zh{font-size:clamp(88px,28vw,140px)}.hh-atlasx__en{font-size:21px}.hh-atlasx__rule{height:36px;margin:20px 0 18px}.hh-atlasx__btn{padding:16px 24px}}
@media (prefers-reduced-motion:reduce){.hh-atlasx *{animation:none!important;transition:none!important}}

/* compact — the atlas panel inside the Travel Guide masthead */
.hh-atlasx--compact{background:transparent;border:1px solid rgba(230,182,85,.3);align-self:stretch;min-width:0}
.hh-atlasx--compact .hh-atlasx__stage{min-height:100%;height:100%}
.hh-atlasx--compact .hh-atlasx__bg{-webkit-mask-image:none;mask-image:none}
.hh-atlasx--compact .hh-atlasx__card{padding:44px 24px}
.hh-atlasx--compact .hh-atlasx__eb{font-size:10px;letter-spacing:.36em}
.hh-atlasx--compact .hh-atlasx__zh{font-size:clamp(72px,8vw,120px);margin-top:14px}
.hh-atlasx--compact .hh-atlasx__en{font-size:clamp(18px,1.6vw,22px)}
.hh-atlasx--compact .hh-atlasx__rule{height:32px;margin:18px 0 16px}
.hh-atlasx--compact .hh-atlasx__btn{padding:14px 22px;font-size:10.5px}
.hh-atlasx--compact .hh-atlasx__hint{margin-top:14px;font-size:9.5px}

/* ============================================================
   Homepage variant — parchment editorial + framed atlas plate
   (matches .hh-ghl / .hh-wonders: parchment, navy serif, gold hairline eyebrows)
   ============================================================ */
.hh-atlasy{background:var(--parchment);padding:24px 0 104px}
.hh-atlasy [lang="zh-Hant"]{font-family:"Noto Serif TC","Noto Serif SC",serif}
.hh-atlasy__inner{max-width:1280px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 72px;align-items:center}
.hh-atlasy__eb{display:inline-flex;align-items:center;gap:14px;font:600 11px/1 var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--brand-red)}
.hh-atlasy__eb::before{content:"";width:44px;height:1px;background:var(--brand-gold);flex:none}
.hh-atlasy__eb [lang]{font-weight:700;letter-spacing:.08em;text-transform:none;font-size:13px;color:var(--brand-navy)}
.hh-atlasy__title{margin:22px 0 0;font:500 clamp(36px,4vw,54px)/1.06 var(--font-display);letter-spacing:-.02em;color:var(--brand-navy);text-wrap:balance}
.hh-atlasy__title em{font-style:italic;color:var(--brand-red)}
.hh-atlasy__title .hh-atlasy__l2{display:block;font-style:italic;font-weight:400;color:var(--ink-soft)}
.hh-atlasy__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:36px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hh-atlasy__stats>div{display:flex;flex-direction:column-reverse;gap:8px;padding:16px 0 14px 16px;border-left:1px solid var(--rule)}
.hh-atlasy__stats>div:first-child{border-left:0;padding-left:0}
.hh-atlasy__stats dd{margin:0;font:400 40px/1 var(--font-display);color:var(--brand-navy);font-variant-numeric:oldstyle-nums}
.hh-atlasy__stats dt{font:600 9.5px/1.3 var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.hh-atlasy__stats dt [lang]{display:block;margin-top:3px;letter-spacing:.1em;font-weight:500;text-transform:none;font-size:11px}
.hh-atlasy__btn{display:inline-flex;align-items:center;gap:14px;margin-top:34px;padding:17px 28px;background:var(--brand-navy);color:var(--parchment);text-decoration:none;font:600 11px/1 var(--font-sans);letter-spacing:.24em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;transition:color .35s}
.hh-atlasy__btn::before{content:"";position:absolute;inset:0;background:var(--brand-red);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:-1}
.hh-atlasy__btn:hover::before{transform:none}
.hh-atlasy__btn [lang]{color:var(--brand-gold);letter-spacing:.3em;font-weight:500;transition:color .35s}
.hh-atlasy__btn:hover [lang]{color:#fff}
.hh-atlasy__btn i{font-style:normal;transition:transform .35s}.hh-atlasy__btn:hover i{transform:translateX(4px)}
.hh-atlasy__hint{margin:16px 0 0;font:italic 400 17px/1.4 var(--font-display);color:var(--ink-soft)}

.hh-atlasy__plate{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;isolation:isolate;text-decoration:none;color:var(--parchment);background:var(--brand-navy-deep);box-shadow:0 40px 80px -44px rgba(2,29,66,.5)}
.hh-atlasy__frame{position:absolute;inset:14px;border:1px solid rgba(247,242,233,.4);pointer-events:none;z-index:2}
.hh-atlasy__cap{position:absolute;left:34px;bottom:30px;z-index:2;display:flex;align-items:baseline;gap:10px;font:600 10px/1 var(--font-sans);letter-spacing:.26em;text-transform:uppercase}
.hh-atlasy__cap [lang]{letter-spacing:.2em;font-weight:500;color:var(--brand-gold);text-transform:none;font-size:12px}
.hh-atlasy__open{position:absolute;right:34px;bottom:26px;z-index:2;display:inline-flex;gap:10px;align-items:center;font:italic 400 18px/1 var(--font-display);color:var(--brand-gold)}
.hh-atlasy__open i{font-style:normal;transition:transform .35s}
.hh-atlasy__plate:hover .hh-atlasy__open i{transform:translateX(5px)}
.hh-atlasy__note{grid-column:2;margin:0;font:400 11.5px/1.6 var(--font-sans);color:var(--ink-mute)}
.hh-atlasy__note [lang]{margin-left:4px}
@media (max-width:980px){
  .hh-atlasy{padding:8px 0 72px}
  .hh-atlasy__inner{grid-template-columns:minmax(0,1fr);padding:0 24px;gap:32px}
  .hh-atlasy__plate{order:-1}
  .hh-atlasy__note{grid-column:1;margin-top:-12px}
}
@media (max-width:560px){
  .hh-atlasy__inner{padding:0 18px}
  .hh-atlasy__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hh-atlasy__stats>div:nth-child(3){border-left:0;padding-left:0}.hh-atlasy__stats>div:nth-child(n+3){border-top:1px solid var(--rule)}
  .hh-atlasy__cap{left:26px;bottom:24px}.hh-atlasy__open{display:none}
  .hh-atlasy__btn{width:100%;justify-content:center;box-sizing:border-box}
}
@media (prefers-reduced-motion:reduce){.hh-atlasy *{animation:none!important;transition:none!important}}

/* Travel Guide masthead — the site's own atlas panel, with a small framed atlas plate */
.hh-guide__hero-atlas-plate{position:relative;display:block;width:100%;aspect-ratio:16/8;margin-bottom:24px;overflow:hidden;isolation:isolate;border:1px solid rgba(230,182,85,.35)}
.hh-guide__hero-atlas-plate-frame{position:absolute;inset:8px;border:1px solid rgba(247,242,233,.28);z-index:2;pointer-events:none}
.hh-guide__hero-atlas-plate-tag{position:absolute;right:16px;bottom:14px;z-index:2;font:600 9px/1 var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brand-gold)}

/* luxury plate — photography-led, the atlas reduced to a single gold pin + seal */
.hh-atlasy__photo{position:absolute;inset:0;background:var(--brand-navy-deep) url(/assets/sanqing-long-scroll.jpg) center 38%/cover no-repeat;transform:scale(1.02);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.hh-atlasy__plate:hover .hh-atlasy__photo,.hh-guide__hero-atlas:hover .hh-atlasy__photo{transform:scale(1.07)}
.hh-atlasy__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,29,66,0) 45%,rgba(2,29,66,.7) 100%),linear-gradient(90deg,rgba(2,29,66,.18),rgba(2,29,66,0) 40%)}
.hh-atlasy__frame{inset:12px!important;border-color:rgba(247,242,233,.55)!important}
.hh-atlasy__pin{position:absolute;z-index:2;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:#E6B655;transform:rotate(45deg);box-shadow:0 0 0 4px rgba(230,182,85,.18)}
.hh-atlasy__pin::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:1px solid rgba(230,182,85,.8);border-radius:50%;transform:rotate(-45deg);animation:hhAtlasyPulse 3.2s ease-out infinite}
@keyframes hhAtlasyPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.hh-atlasy__seal{position:absolute;right:30px;top:28px;z-index:3;width:54px;height:54px;display:grid;place-items:center;background:#B8160F;color:#FBEFE6;border-radius:4px;box-shadow:inset 0 0 0 3px #B8160F,inset 0 0 0 4.5px rgba(251,239,230,.85),0 6px 16px rgba(0,0,0,.25);font-size:19px;font-weight:900;line-height:1.02;writing-mode:vertical-rl;letter-spacing:.02em;transform:rotate(-3deg)}
.hh-atlasy__seal--sm{right:18px;top:16px;width:40px;height:40px;font-size:14px}
.hh-atlasy__cap{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hh-atlasy__open{color:#F3DDA2!important;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hh-guide__hero-atlas-plate{aspect-ratio:16/9;border:0;box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.hh-guide__hero-atlas-plate-frame{inset:8px;border-color:rgba(247,242,233,.5)}
.hh-guide__hero-atlas-plate-tag{color:#F3DDA2;text-shadow:0 1px 10px rgba(0,0,0,.6);right:auto;left:18px;bottom:16px}
@media (prefers-reduced-motion:reduce){.hh-atlasy__pin::before{animation:none}}