/* ============================================================
   Aurelia Botanical Spa · 登录页样式
   ------------------------------------------------------------
   1) 背景 / 左侧品牌叙事 / 返回首页：沿用本站 hero 风格
   2) 登录组件：1:1 复刻 W3Layouts「Smooth Sliding Forms」模板
      （半透明黑底大盒 + 双信息面板 + 白卡滑动 + 浮动标签下划线输入）
      全部尺寸以 em 表达，通过 --u 等比缩放适配列宽（容器查询）
   ============================================================ */
:root {
  --ink: #102721;
  --forest: #0d2f27;
  --forest-2: #17443a;
  --cream: #f7f3ea;
  --paper: #fffdf8;
  --gold: #d6ad78;
  --gold-2: #efcf9f;
  --gold-dark: #9a7347;
  --muted: #65736e;
  --error: #d0705f;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --ease: cubic-bezier(.22,.8,.3,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--cream); background: var(--forest); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* ---------------- 背景氛围层（对齐 hero） ---------------- */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* 背景图已按需求移除：登录页背景透明，嵌入首页 iframe 时直接透出父页内容。
   如需恢复背景图，取消下方注释即可。 */
.scene__bg { display: none; }
/* .scene__bg {
  width: 100%;
  height: 100%;
  background: url('img/login.webp');
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: cover;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
} */




/* 金色描边光圈：hero__orb 同款 */
.scene__orb { position: absolute; border-radius: 50%; border: 1px solid rgba(239,207,159,.17); animation: orb-drift 10s ease-in-out infinite alternate; }
.scene__orb--one { width: 400px; height: 400px; right: -150px; top: -180px; }
.scene__orb--two { width: 260px; height: 260px; left: -100px; bottom: -130px; animation-delay: -5s; }
@keyframes orb-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(26px,30px,0); } }
/* 金线小花瓣：hero__petal 同款 */
.scene__petal { position: absolute; width: 14px; height: 22px; border: 1px solid rgba(239,207,159,.36); border-radius: 80% 20% 75% 25%; animation: drift 8s linear infinite; }
.scene__petal--a { left: 55%; top: 18%; }
.scene__petal--b { left: 42%; top: 66%; animation-delay: -4s; }
.scene__petal--c { right: 12%; top: 72%; animation-delay: -2.4s; }
@keyframes drift { 0% { transform: translate3d(0,0,0) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate3d(120px,-180px,0) rotate(300deg); opacity: 0; } }
/* ============================================================
   纸飞机花影（半透明 screen 混合，随背景轻微漂浮）
   ------------------------------------------------------------
   坐标说明：left / top 是相对整个视口（页面）的百分比
     - left: X 轴（水平）位置，0% = 页面最左，100% = 页面最右
     - top:  Y 轴（垂直）位置，0% = 页面最顶，100% = 页面最底
   其他参数：
     - --reveal-delay: 页面载入后延迟多久淡入（秒）
     - --dur:          漂浮一个来回的时长（秒），数值越小飞得越快
     - animation-delay: 负值 = 动画提前播到中途，让几架飞机
                        起步相位错开，不会同步飞
   层次：fixed + z-index:40 = 页面最顶层（内容 z1、返回按钮 z20
   之上，仅低于成功过渡层 z50）；pointer-events:none 不挡点击
   ============================================================ */
.petal { position: fixed; z-index: 40; pointer-events: none; width: clamp(90px,9vw,170px); opacity: 0; transition: opacity 1.15s ease var(--reveal-delay,0s), translate 1.4s cubic-bezier(.22,.9,.3,1) var(--reveal-delay,0s); will-change: transform, translate, opacity; } /* 外层与首页 .hero-flower 一样：transform 只交给鼠标视差，translate 只负责入场/离场 */
.petal span, .petal img { display: block; width: 100%; }
.petal span { animation: petal-float var(--dur,12s) var(--float-delay,0s) ease-in-out infinite alternate; }
.petal img { mix-blend-mode: screen; -webkit-mask-image: radial-gradient(circle, #000 48%, rgba(0,0,0,.96) 62%, transparent 76%); mask-image: radial-gradient(circle, #000 48%, rgba(0,0,0,.96) 62%, transparent 76%); }
body.is-ready .petal { opacity: .92; } /* 页面就绪后淡入至 92% 不透明度 */
.petal--1 { left: 44%; top: 20%; --reveal-delay: .35s; --dur: 11s; } /* 1 号机：页面中部偏左（X 44%）、上三分之一处（Y 20%） */
.petal--2 { left: 16%; top: 58%; --reveal-delay: .45s; --dur: 13s; --float-delay: -3s; } /* 2 号机：页面左下方（X 16%、Y 58%），提前 3s 起跳 */
.petal--3 { left: 72%; top: 62%; --reveal-delay: .55s; --dur: 10s; --float-delay: -6s; } /* 3 号机：页面右下方（X 72%、Y 62%），提前 6s 起跳 */
.petal--4 { left: 84%; top: 12%; --reveal-delay: .65s; --dur: 14s; --float-delay: -2s; } /* 4 号机：页面右上角（X 84%、Y 12%），提前 2s 起跳 */
/* 漂浮轨迹：往右 34px、往上 44px 来回摆动；轻转已被注释停用，去掉注释即可恢复 */
@keyframes petal-float { from { transform: translate3d(0,0,0) /* rotate(0deg) */; } to { transform: translate3d(34px,-44px,0) /* rotate(10deg) */; } }
/* ---------------- 页面布局 ---------------- */
.auth { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: stretch; gap: clamp(28px,4vw,64px); max-width: 1360px; margin: 0 auto; padding: clamp(90px,12vh,130px) clamp(24px,4vw,56px) clamp(40px,7vh,80px); }
.auth__brand { display: flex; flex-direction: column; justify-content: center; will-change: transform; } /* 左右两列各自垂直居中；transform 由与首页同款的鼠标视差控制 */
.auth__panel { display: flex; flex-direction: column; justify-content: center; align-items: center; container-type: inline-size; } /* 供滑动组件按列宽等比缩放 */
/* ---------------- 左侧品牌叙事 ---------------- */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); animation: rise .9s .1s var(--ease) both; } /* 入场淡入：动画时长 0.9s · 延迟 0.1s */
.brand__crest { width: 46px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(214,173,120,.7); border-radius: 50% 50% 45% 55%; 
  color: var(--gold-2); 
  font: italic 26px/1 var(--serif); }
.brand b { display: block; 
  color: #000;
  font-family: var(--serif); font-size: 20px; letter-spacing: .18em; }
.brand small { display: block; 
  color:#000;
  margin-top: 2px; font-size: 9px; letter-spacing: .32em; opacity: .68; }
.auth__copy { margin-top: clamp(36px,8vh,88px); animation: rise .9s .22s var(--ease) both; } /* 入场淡入：动画时长 0.9s · 延迟 0.22s */
.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--gold-2); font-size: 12px; letter-spacing: .28em; font-weight: 600; }
.eyebrow span { width: 44px; height: 1px; background: currentColor; flex: none; }
.auth__copy h1 { margin-top: 20px; font: 400 clamp(38px,3.8vw,56px)/1.1 var(--serif); letter-spacing: -.04em; }
.auth__copy h1 em { color: var(--gold-2); font-weight: 400; }
.auth__lead { max-width: 42ch; margin-top: 24px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.9; animation: rise .9s .36s var(--ease) both; } /* 入场淡入：动画时长 0.9s · 延迟 0.36s */
.auth__points { list-style: none; margin-top: clamp(24px,5vh,44px); display: grid; gap: 10px; animation: rise .9s .46s var(--ease) both; } /* 入场淡入：动画时长 0.9s · 延迟 0.46s */
.auth__points li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.8); font-size: 13.5px; letter-spacing: .08em; }
.auth__points li i { font-style: normal; color: var(--gold-2); font-size: 12px; }
.auth__footnote { margin-top: clamp(26px,6vh,52px); /* color: rgba(255, 255, 255, .45); */ color: rgb(0, 0, 0); font: italic 11px var(--serif); letter-spacing: .34em; animation: rise .9s .56s var(--ease) both; } /* 入场淡入：动画时长 0.9s · 延迟 0.56s */
@keyframes rise { from { opacity: 0; transform: translate3d(0,28px,0); } to { opacity: 1; transform: none; } }
/* 返回首页：固定右上角玻璃胶囊 */
.back-home { position: fixed; top: 28px; right: 32px; z-index: 20; padding: 10px 20px; border: 1px solid rgba(247,243,234,.22); border-radius: 999px; background: rgba(13,47,39,.35); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); font-size: 12.5px; letter-spacing: .12em; color: rgba(247,243,234,.75); text-decoration: none; transition: color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.back-home:hover { color: var(--gold-2); border-color: rgba(214,173,120,.7); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(6,26,21,.4); }
/* ============================================================
   Smooth Sliding Forms 组件（1:1 复刻模板）
   基准字号 16px，全部尺寸换算为 em；--u 控制整体等比缩放
   ============================================================ */
.slide-forms { --u: .9; font-size: calc(16px * var(--u)); font-family: 'Cormorant Unicase', Georgia, 'Times New Roman', serif; width: 49.25em; position: relative; color: #fff; animation: rise .9s .25s var(--ease) both; } /* 入场淡入：动画时长 0.9s · 延迟 0.25s；--u：无容器查询环境时的兜底缩放；宽 394 × 2 = 788px */
.slide-forms .main-agileinfo { position: relative; background-color: rgba(0,0,0,.59); transition: all .5s; }
.slide-forms .agileui-forms { position: relative; }
/* ---- 白色滑动卡片 ---- */
.slide-forms .container-form { overflow: hidden; position: absolute; left: 4.375em; top: -2.8125em; width: 25.375em; height: 28.75em; background-color: #fff; box-shadow: 0 0 15px 0 rgba(0,0,0,.2); transition: all .5s; z-index: 2; } /* 70px / -45px 相对黑底盒上下对称 / 406px / 460px（加高 30px，注册表单不贴顶） */
.slide-forms.is-register .container-form { left: 19.375em; } /* 310px */
.slide-forms .form-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 1; transition: all .5s; }
.slide-forms .form-item--register { left: -100%; opacity: 0; }
.slide-forms.is-register .form-item--register { left: 0; opacity: 1; }
.slide-forms.is-register .form-item--login { left: -100%; opacity: 0; }
/* ---- 表格居中骨架（模板原样） ---- */
.slide-forms .w3table { display: table; width: 100%; height: 100%; }
.slide-forms .w3table-cell { display: table-cell; vertical-align: middle; transition: all .5s; color: #fff; }
.slide-forms .w3table-cell form { padding: 1.5em; }
.slide-forms .form-item--register .w3table-cell { padding-top: 2.5em; } /* 注册表单整体下移 40px（垂直居中基础上再往下） */
.slide-forms .w3table-tophead h2, .slide-forms .form-item h3 { font-size: 1.875em; text-align: center; text-transform: uppercase; font-weight: 500; color: #000; } /* 30px */
/* ---- 浮动标签 + 动画下划线输入框 ---- */
.slide-forms .fields-grid { margin-bottom: 1.25em; }
.slide-forms .styled-input { width: 100%; position: relative; margin: 0 0 1.5em; }
.slide-forms .agile-styled-input-top { margin-top: 0; }
.slide-forms .styled-input input { font-size: 1em; font-family: inherit; color: #000; padding: .5em 1em; border: 0; width: 85%; border-bottom: 1px solid #212121; background: none; -webkit-appearance: none; outline: none; }
.slide-forms .styled-input label { color: #8c8c8c; padding: .5em .9em; position: absolute; top: 0; left: 0; transition: all .3s; pointer-events: none; font-weight: 400; font-size: .8em; display: block; line-height: 1em; }
.slide-forms .styled-input input:focus ~ label, .slide-forms .styled-input input:valid ~ label { font-size: .9em; color: #333; top: -1.3em; transition: all .125s; }
.slide-forms .styled-input span { display: block; width: 0; height: 2px; background: #333; position: absolute; bottom: 0; left: 0; transition: all .125s; }
.slide-forms .styled-input input:focus ~ span { width: 100%; transition: all .075s; }
/* 错误态（本站校验扩展）：红字 + 红线 + 抖动 */
.slide-forms .styled-input .field-msg { position: absolute; top: -1.5em; right: 1em; font-style: normal; font-size: .68em; letter-spacing: .05em; color: var(--error); opacity: 0; transition: opacity .3s; pointer-events: none; }
.slide-forms .styled-input.is-error label { color: var(--error); }
.slide-forms .styled-input.is-error span { background: var(--error); width: 100%; }
.slide-forms .styled-input.is-error input { border-bottom-color: var(--error); }
.slide-forms .styled-input.is-error .field-msg { opacity: 1; }
.slide-forms .styled-input.shake { animation: shake .4s var(--ease); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }
/* ---- 链接 / 提交按钮 ---- */
.slide-forms a { color: #000; font-weight: bold; letter-spacing: 1px; font-size: 1em; text-decoration: none; }
.slide-forms .forgot-link { margin-left: .625em; }
.slide-forms a:hover { text-decoration: underline; }
.slide-forms .submit-btn { position: relative; outline: none; color: #fff; float: right; margin-right: 1.875em; padding: .375em .625em; font-size: .875em; letter-spacing: 2px; text-transform: uppercase; -webkit-appearance: none; background: #1a2537; border: 1px solid #1a2537; cursor: pointer; transition: .5s all; font-family: inherit; } /* 右距 30px / 内距 6px 10px / 字号 14px */
.slide-forms .submit-btn:hover { background: cadetblue; border: 1px solid cadetblue; }
.slide-forms .submit-btn__spinner { position: absolute; inset: 0; display: none; place-items: center; }
.slide-forms .submit-btn.is-loading { pointer-events: none; opacity: .85; }
.slide-forms .submit-btn.is-loading .submit-btn__label { opacity: 0; }
.slide-forms .submit-btn.is-loading .submit-btn__spinner { display: grid; }
.slide-forms .submit-btn__spinner::before { content: ''; width: 1em; height: 1em; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 提交结果提示（本站扩展） */
.slide-forms .form-toast { clear: both; margin: .6em .5em 0; font-size: .75em; text-align: center; letter-spacing: .05em; min-height: 1.4em; color: var(--error); opacity: 0; transition: opacity .35s; }
.slide-forms .form-toast.is-show { opacity: 1; }
.slide-forms .form-toast.is-ok { color: var(--gold-dark); }
/* ---- 注册条款 ---- */
.slide-forms .terms { display: block; font-size: .875em; color: #000; font-weight: bold; letter-spacing: 1px; margin: .2em .8em .8em 0; cursor: pointer; } /* 14px */
.slide-forms .terms input { cursor: pointer; margin-right: .4em; vertical-align: middle; }
.slide-forms .terms a { font-size: 1em; }
/* ---- 第三方登录 ---- */
.slide-forms .social-grids { margin-top: 3.125em; overflow: hidden; }
.slide-forms .social-text { float: left; width: 50%; }
.slide-forms .social-text p { color: #000; margin: .6em 0 0 1em; font-size: 1em; font-weight: bold; letter-spacing: 1px; }
.slide-forms .social-icons { float: left; width: 50%; list-style: none; }
.slide-forms .social-icons li { display: inline-block; margin: 0 .5em 0 0; }
.slide-forms .social-icons a { display: grid; place-items: center; height: 2.1875em; width: 2.1875em; border: solid 2px #1a2537; border-radius: 30px; color: #1a2537; transition: .5s all; } /* 35px 圆钮 */
.slide-forms .social-icons li:nth-child(1) a:hover { border-color: #3b5998; background: #3b5998; color: #fff; }
.slide-forms .social-icons li:nth-child(2) a:hover { border-color: #55acee; background: #55acee; color: #fff; }
.slide-forms .social-icons li:nth-child(3) a:hover { border-color: #f26522; background: #f26522; color: #fff; }
.slide-forms .clear { clear: both; }
/* ---- 底部双信息面板 ---- */
.slide-forms .container-info { display: flex; }
.slide-forms .info-w3lsitem { flex: none; width: 24.625em; height: 23.125em; text-align: center; color: #fff; transition: all .3s; } /* 394px × 370px */
.slide-forms .info-w3lsitem p { font-size: 1.25em; margin: 1.25em; } /* 20px */
.slide-forms .info-w3lsitem:first-child .w3table-cell { padding-right: 5.4375em; } /* 87px */
.slide-forms .info-w3lsitem:nth-child(2) .w3table-cell { padding-left: 2.1875em; padding-right: 0; } /* 35px */
.slide-forms .info-btn { cursor: pointer; text-align: center; margin: 0 auto; width: 35%; color: #fff; background-color: transparent; border: 1px solid #fff; padding: .5em .75em; text-transform: uppercase; font-size: .9em; font-family: inherit; transition: all .5s; user-select: none; }
.slide-forms .info-btn:hover { opacity: .7; }
.slide-forms .info-btn:focus-visible { outline: 1px dashed rgba(255,255,255,.8); }
/* ---- 按容器宽度等比缩放（保持模板比例） ---- */
@container (min-width: 440px) { .slide-forms { --u: .55; } }
@container (min-width: 480px) { .slide-forms { --u: .6; } }
@container (min-width: 560px) { .slide-forms { --u: .7; } }
@container (min-width: 640px) { .slide-forms { --u: .8; } }
@container (min-width: 720px) { .slide-forms { --u: .9; } }
@container (min-width: 800px) { .slide-forms { --u: 1; } }
/* 超窄列：信息面板纵排 + 白卡入流（等价模板 ≤480px 的堆叠方案） */
@container (max-width: 439px) {
  .slide-forms { --u: .95; width: 100%; }
  .slide-forms .container-info { flex-direction: column; }
  .slide-forms .info-w3lsitem { width: 100%; height: auto; padding: .4em 0; }
  .slide-forms .info-w3lsitem:first-child .w3table-cell, .slide-forms .info-w3lsitem:nth-child(2) .w3table-cell { padding: 0; }
  .slide-forms .info-w3lsitem p { margin: .5em; }
  .slide-forms .info-btn { width: 60%; }
  .slide-forms .container-form { position: relative; left: 0; top: 0; width: 100%; height: 30.75em; margin-top: .625em; }
  .slide-forms.is-register .container-form { left: 0; }
}
/* ---------------- 登录成功整页过渡 ---------------- */
.page-success { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(6,26,21,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.page-success.is-show { opacity: 1; pointer-events: auto; }
.page-success__card { text-align: center; transform: scale(.94); transition: transform .5s var(--ease); }
.page-success.is-show .page-success__card { transform: scale(1); }
/* 呼吸印章：preloader 同款 */
.page-success__mark { width: 72px; height: 72px; margin: 0 auto 18px; display: grid; place-items: center; border: 1px solid rgba(239,207,159,.5); border-radius: 50% 50% 48% 52%; color: var(--gold-2); font: italic 34px/1 var(--serif); animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.page-success__card h3 { font: 400 21px var(--serif); letter-spacing: .08em; color: var(--cream); }
.page-success__card p { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.7); }
/* ---------------- 响应式 ---------------- */
@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; gap: 44px; align-content: center; padding: 110px 22px 56px; }
  .auth__brand { text-align: center; }
  .brand { justify-content: center; }
  .auth__copy { margin-top: 24px; }
  .eyebrow { justify-content: center; }
  .auth__lead { margin-inline: auto; }
  .auth__points { justify-content: center; }
  .auth__footnote { display: none; }
  .petal--2, .petal--3 { display: none; } /* 平板竖屏两架低位飞机挡内容，隐藏 2 号（左下）和 3 号（右下） */
}
@media (max-width: 420px) {
  .back-home { top: 20px; right: 18px; padding: 8px 16px; }
}
/* 尊重减弱动效偏好（对齐首页处理） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 嵌入 index 页 iframe 层时：隐藏「返回首页」按钮
   （返回动作由父页关闭浮层完成，避免在 iframe 内嵌套加载 index） */
body.is-embedded .back-home { display: none; }

/* 嵌入时背景完全透明：透出父页（首页）内容，背景图与底色均不绘制。
   直接单独打开 login.php 时仍保留 var(--forest) 深绿底色，保证浅色文字可读 */
body.is-embedded { background: transparent; }

/* 
   iframe 在首页打开时即预加载，入场动画早已在后台播完；
   因此父页每次打开浮层前先发 open 消息，本页用 is-anim-reset 挂起 1 帧，
   移除后各控件从头按各自「时长 / 延迟」（见上方注释）依次淡入。 */
body.is-anim-reset .brand,
body.is-anim-reset .auth__copy,
body.is-anim-reset .auth__lead,
body.is-anim-reset .auth__points,
body.is-anim-reset .auth__footnote,
body.is-anim-reset .slide-forms { animation: none; opacity: 0; } /* 重置到第 0 帧 */
/* ============================================================
   纸飞机 & 小船三段位移（对齐首页 .air / .boat，同样用 translate 属性——
   .petal 的 petal-float 漂浮动画占着 transform，写 transform 会被动画盖掉，
   这正是之前试验不生效的原因；translate 与 transform 各自独立、自动叠加）
   ------------------------------------------------------------
   ① 单独打开 login.php（body.is-ready）：飞机从屏幕左下角外沿 45° 右上
      飞抵各自坐标（translate 与 opacity 共用 --reveal-delay，边淡入边飞），
      小船原地淡入（与首页小船载入表现一致）
   ② 浮层打开（is-layer-open，经 is-anim-reset 挂起一帧重置后）：
      飞机重新从左下角飞入、小船从左侧滑入就位
   ③ 浮层关闭（is-layer-open 移除）：飞机左上 45° 飞出（0.8s，与首页离场
      同款）、小船向左滑出（0.8s，与首页 .boat 离场同款）
   ============================================================ */
.petal { translate: -110vw 110vw; } /* 基态：停在屏幕左下角外（两分量等长 = 严格 45°），与首页 .air 一致 */
body.is-ready .petal { translate: 0 0; }

/* 嵌入模式：浮层未打开时飞机停在左上角外（离场位）。
   不再用 opacity 藏飞机——translate 已把它们放到屏外；
   若这里写 opacity:0，离场过渡只覆盖 translate，飞机会瞬间隐身、飞不出来 */
body.is-embedded:not(.is-layer-open) .petal {
  translate: 110vw -110vw;
  transition: translate .8s ease;
}
/* 浮层打开的瞬间（is-anim-reset 挂起帧）：飞机拽回左下角屏外，
   强制回流后放开，即可重新从左下角飞入。
   选择器带 .is-embedded 且写在离场规则之后——同特异性下靠源顺序压过它 */
body.is-embedded.is-anim-reset .petal {
  translate: -110vw 110vw;
  opacity: 0;
  transition: none;
}

/* 小船：首页 hero 叶层同款图（foliage-layer.png）复制过来，位置也对齐首页左下角。
   注意：本页 .scene 是整屏高（首页 hero 是 100vh-100px 且有视差位移），
   沿用首页的 bottom:-20% 会把这张 3:1 扁长图整个压到视口外（曾因此「小船消失」），
   改为 bottom:-4% 露出约七成图高，视觉与首页左下角小船一致 */
.scene__boat {
  position: absolute;
  left: 3%;
  bottom: -4%;
  width: clamp(310px, 35vw, 560px);
  opacity: 0;
  translate: 0 0;
  transition: opacity 1.3s ease, translate .8s ease;
  animation: botanical-float 9s 2.8s ease-in-out infinite alternate;
}
body.is-ready .scene__boat { opacity: 1; translate: 0 0; }
/* 嵌入模式：浮层关闭 → 向左滑出（与首页 .boat 离场同款） */
body.is-embedded:not(.is-layer-open) .scene__boat {
  translate: -120vw 0;
  transition: translate .8s ease;
}
/* 浮层打开：先回到左侧屏外，回流后从左滑入就位 */
body.is-embedded.is-anim-reset .scene__boat {
  opacity: 0;
  translate: -120vw 0;
  transition: none;
}
/* 轻微漂浮（首页 .hero-layer--foliage span 的 botanicalFloatB 同款轨迹） */
@keyframes botanical-float {
  from { transform: translate3d(-8px, 10px, 0) rotate(-2deg); }
  to   { transform: translate3d(18px, -13px, 0) rotate(2.5deg); }
}
/* 窄屏：对齐首页 .hero-layer--foliage 的窄屏规则 */
@media (max-width: 960px) {
  .scene__boat { width: 340px; left: -48%; bottom: -4%; }
}

/* 输入框文字显示不全：
   1) .slide-forms 用的 Cormorant Unicase 会把小写字母渲染成小号大写（gjpqy → GJPQY），
      没有下伸部，看起来像被裁掉了 —— 输入框改用系统衬线字体，正常显示大小写
   2) 行高给足，避免 g/j/p/q/y 的下伸部贴着边框
   3) 纵向内边距相应收一点，整体高度基本不变（32.4px → 34px） */
.slide-forms .styled-input input {
  font-family: Georgia, 'Times New Roman', 'Songti SC', SimSun, serif;
  line-height: 1.5;
  padding: .4em 1em;
}

/* 纸飞机左右镜像：只翻转图片本身，不影响外层视差（.petal）和浮动动画（.petal span） */
.petal img { transform: scaleX(-1); }

/* Chrome 自动填充：浏览器会盖一层浅蓝底（rgb(232,240,254)），
   这里用「和卡片同色（#fff）的超大内阴影」把它盖掉。
   注意：内阴影颜色必须是**不透明**的，transparent 盖不住任何东西。 */
.slide-forms .styled-input input:-webkit-autofill,
.slide-forms .styled-input input:-webkit-autofill:hover,
.slide-forms .styled-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  caret-color: #000;
  transition: background-color 9999s ease-out;
}

/* 自动填充时标签也要上浮：直接盯 :autofill 状态，比 :valid / :placeholder-shown 都可靠 */
.slide-forms .styled-input input:-webkit-autofill ~ label {
  font-size: .9em;
  color: #333;
  top: -1.3em;
  transition: all .125s;
}

/* 有内容就把标签上浮。
   自动填充时 :valid 不一定及时生效，:placeholder-shown 更可靠（配合 input 上的 placeholder=" "）。 */
.slide-forms .styled-input input:not(:placeholder-shown) ~ label {
  font-size: .9em;
  color: #333;
  top: -1.3em;
  transition: all .125s;
}