/* Hero Premium｜首頁天象羅盤 */
.hero-premium{
  min-height:720px!important;
  background:
    radial-gradient(ellipse at 78% 48%,rgba(121,88,52,.13),transparent 28%),
    radial-gradient(ellipse at 57% 74%,rgba(100,69,39,.08),transparent 34%),
    linear-gradient(180deg,#060403 0%,#0a0705 58%,#050403 100%)!important;
}

.hero-premium .bg-mountain{
  background-image:url('assets/hero-premium-shanshui-v1.png')!important;
  background-position:center center!important;
  opacity:.76!important;
  filter:contrast(1.05) saturate(.78) brightness(.78)!important;
  transform:scale(1.035)!important;
  animation:heroConceptMountain 24s ease-in-out infinite alternate!important;
}

.hero-premium .bg-ink{
  opacity:.18!important;
  background:
    radial-gradient(ellipse at 70% 42%,rgba(181,139,87,.09),transparent 24%),
    radial-gradient(ellipse at 18% 30%,rgba(255,218,150,.025),transparent 25%)!important;
}

.hero-premium .bg-veil{
  background:
    linear-gradient(90deg,rgba(3,2,1,.88) 0%,rgba(3,2,1,.64) 34%,rgba(3,2,1,.1) 65%,rgba(3,2,1,.3) 100%),
    linear-gradient(180deg,rgba(3,2,1,.84) 0%,rgba(3,2,1,.2) 32%,rgba(3,2,1,.03) 66%,rgba(3,2,1,.68) 100%)!important;
}

.hero-premium::after{
  background:
    radial-gradient(ellipse at 69% 48%,transparent 0 36%,rgba(5,3,2,.09) 66%,rgba(5,3,2,.28) 100%),
    linear-gradient(90deg,rgba(3,2,1,.16),transparent 43%,rgba(3,2,1,.08) 100%)!important;
}

.hero-premium .bg-silk{
  opacity:.035!important;
  background-image:repeating-linear-gradient(102deg,rgba(216,190,140,.18) 0 1px,transparent 1px 20px)!important;
}

.hero-premium .gold-dust{
  inset:-10%!important;
  opacity:.11!important;
  animation-duration:48s!important;
}

.hero-premium .star-field{
  inset:0 0 0 24%!important;
  opacity:.5!important;
  -webkit-mask-image:radial-gradient(ellipse at 67% 43%,#000 0%,rgba(0,0,0,.75) 40%,transparent 78%)!important;
  mask-image:radial-gradient(ellipse at 67% 43%,#000 0%,rgba(0,0,0,.75) 40%,transparent 78%)!important;
}

.hero-premium .constellation-field{
  inset:3% 0 12% 30%!important;
  opacity:.15!important;
  -webkit-mask-image:radial-gradient(ellipse at 70% 38%,#000 0%,rgba(0,0,0,.6) 38%,transparent 76%)!important;
  mask-image:radial-gradient(ellipse at 70% 38%,#000 0%,rgba(0,0,0,.6) 38%,transparent 76%)!important;
}

.hero-premium .hero-content{
  display:block!important;
  height:calc(100vh - 104px)!important;
  min-height:590px!important;
  padding:0!important;
}

.hero-premium .copy{
  position:absolute!important;
  z-index:8!important;
  left:clamp(58px,8vw,146px)!important;
  top:50%!important;
  width:min(490px,38vw)!important;
  max-width:none!important;
  transform:translateY(-53%)!important;
}

.hero-premium .copy .eyebrow{
  color:rgba(185,145,110,.68)!important;
  letter-spacing:.4em!important;
  margin-bottom:26px!important;
}

.hero-premium .copy h1{
  color:#e6d5bb!important;
  font-size:clamp(30px,2.35vw,42px)!important;
  font-weight:400!important;
  line-height:1.7!important;
  letter-spacing:.12em!important;
  text-shadow:none!important;
}

.hero-premium .copy .hairline{
  width:88px!important;
  margin:28px 0 25px!important;
  background:linear-gradient(90deg,rgba(185,145,110,.78),rgba(185,145,110,.08))!important;
}

.hero-premium .copy .hairline::after{
  width:5px!important;
  height:5px!important;
  top:-2px!important;
  background:#b9916e!important;
  box-shadow:0 0 8px rgba(185,145,110,.34)!important;
}

.hero-premium .copy .lead{
  color:rgba(213,194,166,.86)!important;
  font-size:14px!important;
  line-height:2.05!important;
  letter-spacing:.13em!important;
  margin-bottom:14px!important;
}

.hero-premium .copy .desc{
  max-width:450px!important;
  color:rgba(183,168,145,.68)!important;
  font-size:12.5px!important;
  line-height:2.05!important;
  letter-spacing:.1em!important;
}

.hero-premium .copy .cta-row{
  margin-top:32px!important;
}

.hero-premium .copy .cta-row .primary{
  min-width:172px!important;
}

.hero-premium .cosmos{
  position:absolute!important;
  z-index:5!important;
  top:50%!important;
  right:1.5vw!important;
  width:min(51vw,640px)!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  opacity:.92!important;
  animation:heroConceptCompassIn 1.8s cubic-bezier(.18,.72,.16,1) .45s both!important;
}

.hero-premium .compass{
  opacity:.94!important;
  filter:drop-shadow(0 0 20px rgba(112,78,43,.1))!important;
}

.hero-premium .draw-rings circle:nth-child(odd){opacity:.38!important;}
.hero-premium .draw-rings circle:nth-child(even){opacity:.25!important;}
.hero-premium .ticks line{opacity:.16!important;}
.hero-premium .ticks .major{opacity:.36!important;}
.hero-premium .micro-ticks line{opacity:.08!important;}
.hero-premium .orbit-text text{opacity:.24!important;}
.hero-premium .bagua-marks{opacity:.48!important;}
.hero-premium .xiu-stars{opacity:.5!important;}
.hero-premium .xiu-stars .xiu-label-track{stroke:rgba(185,145,110,.28)!important;opacity:.7!important;}
.hero-premium .xiu-stars .xiu-label{fill:rgba(222,190,137,.78)!important;opacity:.78!important;}
.hero-premium .xiu-stars .xiu-node{opacity:.38!important;}
.hero-premium .cross{opacity:.3!important;}
.hero-premium .cardinal{opacity:.58!important;}
.hero-premium .palace{opacity:.5!important;}
.hero-premium .logo-core{opacity:.74!important;}
.hero-premium .logo-core image{filter:none!important;opacity:.88!important;}

.hero-premium .cosmos::after{
  content:"";
  position:absolute;
  z-index:7;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#e5c997;
  box-shadow:0 0 8px rgba(229,201,151,.62),0 0 20px rgba(185,145,110,.22);
  opacity:0;
  transform:rotate(0deg) translateX(min(24vw, 190px)) rotate(0deg);
  transform-origin:0 0;
  transition:opacity .8s ease;
}

.hero-premium .cosmos:hover::after{
  opacity:.92;
  animation:heroPremiumOrbit 18s linear infinite;
}

.hero-premium .cosmos:hover .compass{
  filter:drop-shadow(0 0 26px rgba(185,145,110,.16))!important;
}

.hero-premium .cosmos:hover .compass-rotor{
  animation-duration:118s!important;
}

.hero-premium .cosmos:hover .draw-rings circle:nth-child(odd){opacity:.52!important;}
.hero-premium .cosmos:hover .ticks .major{opacity:.48!important;}
.hero-premium .cosmos:hover .xiu-stars{opacity:.64!important;}
.hero-premium .cosmos:hover .sweep-dot{opacity:.86!important;}

.hero-premium .bottom-scroll{
  color:rgba(185,145,110,.75)!important;
}

.hero-premium .bottom-scroll i{
  background:linear-gradient(180deg,rgba(185,145,110,.76),transparent)!important;
}

.hero-premium .bottom-scroll i::after{
  background:#b9916e!important;
  box-shadow:0 0 12px rgba(185,145,110,.38)!important;
}

@keyframes heroConceptMountain{
  from{transform:scale(1.035) translate3d(0,.35%,0)}
  to{transform:scale(1.065) translate3d(-.35%,-.75%,0)}
}

@keyframes heroConceptCompassIn{
  from{opacity:0;transform:translate3d(7%,-50%,0) scale(.97)}
  to{opacity:.92;transform:translate3d(0,-50%,0) scale(1)}
}

@keyframes heroPremiumOrbit{
  to{transform:rotate(360deg) translateX(min(24vw, 190px)) rotate(-360deg)}
}

/* Compass hierarchy: cardinal principles breathe quietly, stars take turns, core remains composed. */
.hero-premium .cardinal{
  opacity:1!important;
  filter:none!important;
}
.hero-premium .cardinal text{
  fill:rgba(202,163,105,.82)!important;
  filter:none!important;
  stroke:transparent!important;
  stroke-width:0!important;
  paint-order:normal!important;
  animation:heroPremiumCardinalPulse 6.8s ease-in-out infinite!important;
}
.hero-premium .cardinal-heaven{animation-delay:-.8s!important;}
.hero-premium .cardinal-earth{animation-delay:-5.6s!important;}
.hero-premium .cardinal-time{animation-delay:-2.9s!important;}
.hero-premium .cardinal-human{animation-delay:-7.4s!important;}

.hero-premium .xiu-stars .xiu-label-track{
  opacity:.58!important;
  animation:heroPremiumTrackBreath 12s ease-in-out infinite!important;
}
.hero-premium .xiu-stars{
  opacity:.98!important;
  animation:none!important;
}
.hero-premium .xiu-stars .xiu-node{
  opacity:.16!important;
  animation:heroPremiumMansionPulse 18s linear infinite!important;
  animation-delay:var(--d)!important;
}
.hero-premium .xiu-stars .xiu-halo{
  display:block!important;
  fill:none!important;
  stroke:rgba(255,229,174,.96)!important;
  stroke-width:.72!important;
  opacity:0!important;
  filter:drop-shadow(0 0 4px rgba(250,217,151,.36));
  animation:heroPremiumMansionHalo 18s ease-out infinite!important;
  animation-delay:var(--d)!important;
}
.hero-premium .xiu-stars .xiu-label{
  opacity:.32!important;
  animation:heroPremiumMansionLabelPulse 18s linear infinite!important;
  animation-delay:var(--d)!important;
}

.hero-premium .logo-core{
  opacity:.98!important;
  animation:heroPremiumCoreBreath 7.4s ease-in-out 5.2s infinite!important;
}
.hero-premium .logo-core .core-emblem{
  opacity:1!important;
  filter:drop-shadow(0 0 9px rgba(223,186,119,.28))!important;
}
.hero-premium .logo-core circle:first-child{
  stroke:rgba(218,184,122,.78)!important;
}
.hero-premium .logo-core circle:nth-child(2){
  stroke:rgba(218,184,122,.62)!important;
  opacity:.74!important;
  transform-origin:380px 380px;
  animation:heroPremiumInnerRingBreath 6.6s ease-in-out infinite!important;
}

@keyframes heroPremiumCardinalPulse{
  0%,100%{fill:rgba(202,163,105,.74);opacity:.64;}
  50%{fill:rgba(255,235,190,1);opacity:1;}
}
@keyframes heroPremiumTrackBreath{
  0%,100%{stroke-opacity:.42;filter:drop-shadow(0 0 0 rgba(185,145,110,0));}
  50%{stroke-opacity:.82;filter:drop-shadow(0 0 4px rgba(185,145,110,.18));}
}
@keyframes heroPremiumMansionPulse{
  0%,100%{opacity:.10;filter:drop-shadow(0 0 0 rgba(231,190,110,0));}
  5.6%{opacity:1;filter:drop-shadow(0 0 13px rgba(250,217,151,.66));}
  12.4%{opacity:.56;filter:drop-shadow(0 0 4px rgba(231,190,110,.22));}
  18%{opacity:.12;filter:drop-shadow(0 0 0 rgba(231,190,110,0));}
}
@keyframes heroPremiumMansionLabelPulse{
  0%,100%{fill:rgba(190,151,98,.42);opacity:.28;filter:none;}
  5.6%{fill:rgba(255,233,183,1);opacity:1;filter:drop-shadow(0 0 7px rgba(250,217,151,.5));}
  12.4%{fill:rgba(237,201,145,.86);opacity:.82;filter:drop-shadow(0 0 2px rgba(231,190,110,.14));}
  18%{fill:rgba(190,151,98,.42);opacity:.3;filter:none;}
}
@keyframes heroPremiumMansionHalo{
  0%,100%{opacity:0;stroke-width:.4;}
  5.6%{opacity:1;stroke-width:1.05;}
  12.4%{opacity:.35;stroke-width:.7;}
  18%{opacity:0;stroke-width:.4;}
}
@keyframes heroPremiumCoreBreath{
  0%,100%{filter:drop-shadow(0 0 8px rgba(185,145,110,.15));}
  50%{filter:drop-shadow(0 0 17px rgba(225,191,129,.38));}
}
@keyframes heroPremiumInnerRingBreath{
  0%,100%{stroke-opacity:.42;transform:scale(.985);}
  50%{stroke-opacity:.92;transform:scale(1.018);}
}

@media(max-width:1050px){
  .hero-premium .copy{
    left:clamp(28px,7vw,70px)!important;
    width:min(440px,54vw)!important;
  }
  .hero-premium .cosmos{
    right:-5vw!important;
    width:min(64vw,610px)!important;
    opacity:.72!important;
  }
}

@media(max-width:620px){
  .hero-premium{
    min-height:100svh!important;
  }
  .hero-premium .hero-content{
    min-height:calc(100svh - 104px)!important;
  }
  .hero-premium .copy{
    /* Mobile has no vertical-centering offset: keep the first line below the header. */
    top:50px!important;
    left:28px!important;
    width:calc(100% - 56px)!important;
    transform:none!important;
  }
  .hero-premium .copy h1{
    font-size:30px!important;
  }
  .hero-premium .copy .desc{
    max-width:330px!important;
  }
  .hero-premium .copy .cta-row .primary{
    width:auto!important;
    min-width:172px!important;
  }
  .hero-premium .cosmos{
    top:65%!important;
    right:-33vw!important;
    width:110vw!important;
    opacity:.52!important;
  }
  .hero-premium .star-field{
    inset:26% 0 0 0!important;
    opacity:.24!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-premium .bg-mountain,
  .hero-premium .cosmos,
  .hero-premium .cosmos::after{
    animation:none!important;
  }
}

/* Core emblem: a clearer antique-gold print, without altering its existing breath cycle. */
.hero-premium .logo-core .core-emblem{
  filter:brightness(1.12) contrast(1.025)!important;
}

/* Let the shanshui texture dissolve into the Hero black, rather than exposing its upper image edge. */
.hero-premium .bg-mountain{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.16) 9%,rgba(0,0,0,.60) 23%,#000 43%,#000 100%)!important;
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.16) 9%,rgba(0,0,0,.60) 23%,#000 43%,#000 100%)!important;
}