/* =========================================================
   June & Aurora — 内页共用 Hero
   文件：public/css/june-aurora-inner-hero.css

   适用页面：
   - Journal
   - Art
   - About

   不适用于首页。

   HTML 模板：
   public/themes/june-aurora/templates/component_inner-hero.blade.php

   依赖：
   - june-aurora-common.css
   - june-aurora-parallax.js
   ========================================================= */

/* =========================================================
   01. 内页 Hero 默认变量
   每个页面可以通过 page class 覆盖这些变量
   ========================================================= */

.inner-hero{--inner-title-size:285px;--inner-title-top:75px;--inner-title-float-distance:12px;--inner-title-float-duration:12s;--inner-person-left:50%;--inner-person-width:435px;--inner-person-height:535px;--inner-copy-top:300px;--inner-copy-left:4%;--inner-copy-width:320px;--inner-statement-size:55px;--inner-stage-height:585px;--inner-hero-height:720px;--inner-flower-one-left:25%;--inner-flower-one-top:345px;--inner-flower-one-width:145px;--inner-flower-two-right:5%;--inner-flower-two-top:130px;--inner-flower-two-width:110px;--inner-flower-three-right:1%;--inner-flower-three-bottom:-55px;--inner-flower-three-width:245px;--inner-flower-four-left:31%;--inner-flower-four-bottom:68px;--inner-flower-four-width:70px;position:relative;min-height:var(--inner-hero-height);padding-top:38px;overflow:hidden;isolation:isolate}

/* =========================================================
   02. 顶部 Kicker 与横线
   ========================================================= */

.inner-hero-kicker{
    position:relative;
    z-index:20;
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--black);
    font-size:9px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
}
.inner-hero-line{
    width:44px;
    height:2px;
    flex:none;
    background:var(--orange);
    opacity:1;
}

/* =========================================================
   03. Hero 主舞台
   ========================================================= */

.inner-hero-stage{position:relative;min-height:var(--inner-stage-height);margin-top:14px;overflow:hidden;isolation:isolate}

/* =========================================================
   04. Issue 编号
   ========================================================= */

.inner-hero-issue{position:absolute;top:25px;left:0;z-index:20;display:flex;flex-direction:column;color:var(--black)}
.inner-hero-issue span{font-size:7px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.inner-hero-issue strong{margin-top:2px;font-family:var(--cover-display);font-size:39px;font-weight:400;line-height:.9}

/* =========================================================
   05. 巨型背景标题
   JS 控制滚动视差。
   CSS 使用 margin-top 制造缓慢漂浮，不覆盖 transform。
   ========================================================= */

.inner-hero-title{--base-x:-50%;--parallax-y:0px;position:absolute;top:var(--inner-title-top);left:50%;z-index:1;width:100%;margin:0;color:var(--black);font-family:var(--cover-display);font-size:var(--inner-title-size);font-weight:400;line-height:.74;letter-spacing:-.05em;text-align:center;text-transform:uppercase;white-space:nowrap;transform:translate3d(var(--base-x),var(--parallax-y),0);animation:inner-title-float var(--inner-title-float-duration) ease-in-out infinite;pointer-events:none;user-select:none;will-change:transform,margin-top}
@keyframes inner-title-float{0%,100%{margin-top:0}50%{margin-top:calc(var(--inner-title-float-distance) * -1)}}

/* =========================================================
   06. 左侧标题与说明文字
   ========================================================= */

.inner-hero-copy{position:absolute;top:var(--inner-copy-top);left:var(--inner-copy-left);z-index:12;width:var(--inner-copy-width)}
.inner-hero-statement{margin:0;color:var(--black);font-family:var(--serif);font-size:var(--inner-statement-size);font-weight:500;line-height:.9}
.inner-hero-statement em{display:block;color:var(--orange);font-weight:500}
.inner-hero-description{width:280px;max-width:100%;margin:34px 0 0;color:var(--muted);font-family:var(--body);font-size:10px;line-height:1.75}

/* =========================================================
   07. 中央人物与猫
   人物是前景层。
   ========================================================= */

.inner-hero-person{--base-x:-50%;--parallax-y:0px;position:absolute;left:var(--inner-person-left);bottom:0;z-index:7;width:var(--inner-person-width);height:var(--inner-person-height);transform:translate3d(var(--base-x),var(--parallax-y),0);pointer-events:none;will-change:transform}
.inner-hero-person img{width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;filter:contrast(1.02) saturate(.95)}

/* =========================================================
   08. 右下角 Volume 信息
   ========================================================= */

.inner-hero-volume{position:absolute;right:1%;bottom:35px;z-index:20;display:flex;flex-direction:column;color:var(--black);font-family:var(--cover-display);font-size:18px;font-weight:400;line-height:.94;text-align:right;text-transform:uppercase}
.inner-hero-volume span{font-size:14px}
.inner-hero-volume strong{font-weight:400}

/* =========================================================
   09. 共用漂浮花朵
   只设置宽度，不设置高度，避免图片变形。
   ========================================================= */

.inner-hero-flower{position:absolute;z-index:8;height:auto;max-width:none;object-fit:contain;pointer-events:none;user-select:none;animation:inner-flower-float 6s ease-in-out infinite;will-change:transform}
.inner-hero-flower-1{top:var(--inner-flower-one-top);left:var(--inner-flower-one-left);z-index:5;width:var(--inner-flower-one-width);animation-duration:6.4s}
.inner-hero-flower-2{top:var(--inner-flower-two-top);right:var(--inner-flower-two-right);width:var(--inner-flower-two-width);animation-delay:-1.4s;animation-duration:5.2s}
.inner-hero-flower-3{right:var(--inner-flower-three-right);bottom:var(--inner-flower-three-bottom);z-index:10;width:var(--inner-flower-three-width);opacity:.78;filter:blur(2px);animation-delay:-2.2s;animation-duration:7.2s}
.inner-hero-flower-4{left:var(--inner-flower-four-left);bottom:var(--inner-flower-four-bottom);z-index:9;width:var(--inner-flower-four-width);animation-delay:-.8s;animation-duration:4.8s}
@keyframes inner-flower-float{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,-14px,0) rotate(1.5deg)}}

/* =========================================================
   10. Hero 分类导航
   ========================================================= */

.inner-hero-nav{position:relative;z-index:20;min-height:68px;padding:16px 22px;display:flex;align-items:center;justify-content:center;gap:11px;background:rgba(255,253,248,.78);border:1px solid var(--line);border-radius:var(--radius-large);}
.inner-hero-nav a{padding:8px 15px;color:var(--black);background:transparent;border:1px solid var(--black);border-radius:999px;font-size:8px;font-weight:700;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;transition:color .2s ease,background-color .2s ease,transform .2s ease}
.inner-hero-nav a:hover,.inner-hero-nav a:focus{color:var(--paper);background:var(--black);transform:translateY(-2px)}

/* =========================================================
   11. 滚动视差兼容
   JS 动态修改 --parallax-y。
   ========================================================= */

[data-parallax-back],[data-parallax-front]{will-change:transform}
[data-parallax-back]{transition:transform .08s linear}
[data-parallax-front]{transition:transform .06s linear}

/* =========================================================
   12. Journal 页面差异
   ========================================================= */

.inner-hero-journal{--inner-title-size:265px;--inner-title-top:205px;--inner-title-float-distance:11px;--inner-title-float-duration:13s;--inner-person-left:50%;--inner-person-width:435px;--inner-person-height:535px;--inner-copy-top:236px;--inner-copy-left:3.5%;--inner-copy-width:320px;--inner-statement-size:55px;--inner-stage-height:585px;--inner-hero-height:720px}
.inner-hero-journal .inner-hero-description{width:275px;margin-top:37px;font-size:11px;line-height:1.78}

/* =========================================================
   13. Art 页面差异
   ART 字更宽更大。
   ========================================================= */

.inner-hero-art{--inner-title-size:350px;--inner-title-top:185px;--inner-title-float-distance:14px;--inner-title-float-duration:11s;--inner-person-left:50%;--inner-person-width:435px;--inner-person-height:535px;--inner-copy-top:236px;--inner-copy-left:3.5%;--inner-copy-width:320px;--inner-statement-size:55px;--inner-stage-height:585px;--inner-hero-height:720px}
.inner-hero-art .inner-hero-description{width:275px;margin-top:37px;font-size:11px;line-height:1.78}

/* =========================================================
   14. About 页面差异
   人物稍宽，位置稍偏右。
   ========================================================= */

.inner-hero-about{--inner-title-size:325px;--inner-title-top:175px;--inner-title-float-distance:12px;--inner-title-float-duration:12.5s;--inner-person-left:53%;--inner-person-width:550px;--inner-person-height:575px;--inner-copy-top:255px;--inner-copy-left:3.5%;--inner-copy-width:350px;--inner-statement-size:56px;--inner-stage-height:615px;--inner-hero-height:750px;--inner-flower-one-left:25%;--inner-flower-one-top:355px;--inner-flower-one-width:165px;--inner-flower-two-top:130px;--inner-flower-two-width:115px;--inner-flower-three-width:270px;--inner-flower-four-left:32%;--inner-flower-four-bottom:75px;--inner-flower-four-width:78px}
.inner-hero-about .inner-hero-description{width:300px;margin-top:38px;font-size:11px}

/* =========================================================
   15. 普通桌面：1101px 至 1499px
   缩短所有内页 Hero，并将 Issue 与左侧文案适度下移
   ========================================================= */
@media(min-width:1101px) and (max-width:1499px){
.inner-hero{--inner-title-size:clamp(185px,20vw,300px);--inner-title-top:120px;--inner-person-left:50%;--inner-person-width:390px;--inner-person-height:470px;--inner-copy-top:315px;--inner-copy-left:4%;--inner-copy-width:300px;--inner-statement-size:51px;--inner-stage-height:515px;--inner-hero-height:650px;--inner-flower-one-left:22%;--inner-flower-one-top:315px;--inner-flower-one-width:126px;--inner-flower-two-right:4%;--inner-flower-two-top:105px;--inner-flower-two-width:96px;--inner-flower-three-right:0;--inner-flower-three-bottom:-42px;--inner-flower-three-width:210px;--inner-flower-four-left:29%;--inner-flower-four-bottom:54px;--inner-flower-four-width:62px;padding-top:28px}
.inner-hero-stage{margin-top:10px}
.inner-hero-issue{top:58px}
.inner-hero-description{width:255px;margin-top:26px;font-size:10px}
.inner-hero-nav{min-height:62px;padding:13px 20px}
.inner-hero-journal{--inner-title-size:clamp(185px,20vw,290px);--inner-title-top:120px;--inner-person-width:390px;--inner-person-height:470px;--inner-copy-top:315px}
.inner-hero-art{--inner-title-size:clamp(225px,23vw,315px);--inner-title-top:115px;--inner-person-width:390px;--inner-person-height:470px;--inner-copy-top:315px}
.inner-hero-about{--inner-title-size:clamp(195px,21vw,285px);--inner-title-top:120px;--inner-person-left:54%;--inner-person-width:455px;--inner-person-height:480px;--inner-copy-top:305px;--inner-copy-width:320px;--inner-statement-size:50px}
}
/* =========================================================
   16. 平板：761px 至 1100px
   保留完整信息，但降低标题和人物尺寸
   ========================================================= */
@media(min-width:761px) and (max-width:1100px){
.inner-hero{--inner-title-size:clamp(145px,23vw,240px);--inner-title-top:70px;--inner-person-left:54%;--inner-person-width:350px;--inner-person-height:440px;--inner-copy-top:285px;--inner-copy-left:3%;--inner-copy-width:265px;--inner-statement-size:44px;--inner-stage-height:535px;--inner-hero-height:665px;--inner-flower-one-left:15%;--inner-flower-one-top:325px;--inner-flower-one-width:112px;--inner-flower-two-right:0;--inner-flower-two-top:105px;--inner-flower-two-width:86px;--inner-flower-three-right:-35px;--inner-flower-three-bottom:-40px;--inner-flower-three-width:200px;--inner-flower-four-left:24%;--inner-flower-four-bottom:55px;--inner-flower-four-width:58px;padding-top:26px}
.inner-hero-stage{margin-top:9px}
.inner-hero-issue{top:48px}
.inner-hero-description{width:235px;margin-top:24px;font-size:9px}
.inner-hero-volume{right:0;bottom:26px;font-size:16px}
.inner-hero-nav{min-height:60px;padding:12px 16px}
.inner-hero-journal{--inner-title-size:clamp(145px,23vw,235px);--inner-title-top:72px;--inner-copy-top:285px}
.inner-hero-art{--inner-title-size:clamp(180px,29vw,275px);--inner-title-top:65px;--inner-copy-top:285px}
.inner-hero-about{--inner-title-size:clamp(155px,25vw,240px);--inner-title-top:72px;--inner-person-left:57%;--inner-person-width:410px;--inner-person-height:455px;--inner-copy-top:275px;--inner-copy-width:275px;--inner-statement-size:43px}
}
/* =========================================================
   17. 手机：431px 至 760px
   隐藏最小辅助信息，保留标题、人物、主文案与导航
   ========================================================= */
@media(min-width:431px) and (max-width:760px){
.inner-hero{--inner-title-size:clamp(100px,34vw,150px);--inner-title-top:34px;--inner-title-float-distance:7px;--inner-title-float-duration:13s;--inner-person-left:50%;--inner-person-width:112%;--inner-person-height:440px;--inner-copy-top:165px;--inner-copy-left:18px;--inner-copy-width:230px;--inner-statement-size:38px;--inner-stage-height:625px;--inner-hero-height:auto;--inner-flower-one-left:-28px;--inner-flower-one-top:380px;--inner-flower-one-width:102px;--inner-flower-three-right:-50px;--inner-flower-three-bottom:-32px;--inner-flower-three-width:160px;padding-top:24px}
.inner-hero-stage{margin-top:7px}
.inner-hero-kicker{display:none}
.inner-hero-issue{display:none}
.inner-hero-volume{display:none}
.inner-hero-description{display:none}
.inner-hero-flower-2{display:none}
.inner-hero-flower-4{display:none}
.inner-hero-flower-3{filter:blur(1.5px)}
.inner-hero-nav{min-height:58px;padding:12px 9px;gap:7px;flex-wrap:wrap}
.inner-hero-nav a{padding:7px 11px;font-size:7px}
.inner-hero-journal{--inner-title-size:clamp(100px,34vw,150px);--inner-title-top:34px;--inner-copy-top:165px}
.inner-hero-art{--inner-title-size:clamp(145px,47vw,205px);--inner-title-top:30px;--inner-copy-top:165px}
.inner-hero-about{--inner-title-size:clamp(105px,35vw,155px);--inner-title-top:36px;--inner-person-left:52%;--inner-person-width:118%;--inner-person-height:445px;--inner-copy-top:165px;--inner-copy-width:235px;--inner-statement-size:37px}
}
/* =========================================================
   18. 小屏手机：430px 以下
   进一步压缩 Hero，并减少视觉装饰
   ========================================================= */
@media(max-width:430px){
.inner-hero{--inner-title-size:108px;--inner-title-top:30px;--inner-title-float-distance:6px;--inner-title-float-duration:13s;--inner-person-left:50%;--inner-person-width:122%;--inner-person-height:410px;--inner-copy-top:145px;--inner-copy-left:14px;--inner-copy-width:205px;--inner-statement-size:34px;--inner-stage-height:575px;--inner-hero-height:auto;--inner-flower-one-left:-35px;--inner-flower-one-top:345px;--inner-flower-one-width:90px;--inner-flower-three-right:-58px;--inner-flower-three-bottom:-30px;--inner-flower-three-width:145px;padding-top:22px}
.inner-hero-stage{margin-top:6px}
.inner-hero-kicker{display:none}
.inner-hero-issue{display:none}
.inner-hero-volume{display:none}
.inner-hero-description{display:none}
.inner-hero-flower-2{display:none}
.inner-hero-flower-4{display:none}
.inner-hero-flower-3{filter:blur(1.5px)}
.inner-hero-nav{min-height:54px;padding:10px 7px;gap:6px;flex-wrap:wrap}
.inner-hero-nav a{padding:6px 9px;font-size:6.5px}
.inner-hero-journal{--inner-title-size:108px;--inner-title-top:30px;--inner-copy-top:145px}
.inner-hero-art{--inner-title-size:150px;--inner-title-top:27px;--inner-copy-top:145px}
.inner-hero-about{--inner-title-size:112px;--inner-title-top:32px;--inner-person-left:52%;--inner-person-width:128%;--inner-person-height:415px;--inner-copy-top:145px;--inner-copy-width:205px;--inner-statement-size:33px}
}
/* =========================================================
   19. 减少动态效果
   尊重系统的减少动画设置
   ========================================================= */
@media(prefers-reduced-motion:reduce){
.inner-hero-title{animation:none!important;margin-top:0!important}
.inner-hero-flower{animation:none!important}
.inner-hero-title,.inner-hero-person,[data-parallax-back],[data-parallax-front]{--parallax-y:0px!important;transition:none!important}
.inner-hero-nav a{transition:none!important}
.inner-hero-nav a:hover,.inner-hero-nav a:focus{transform:none!important}
}