/* 鮮一官網動效：樣式部分
 * 動畫本身由 xianyi-motion.js（Motion 14.9.0）執行，這裡只放：
 *   1. 品牌色與動態參數（給 CSS 過渡用；JS 端在 xianyi-motion.js 的 TOKENS）
 *   2. 等待播放時的初始狀態（只在 <html class="xy-js"> 時生效，JS 沒載入時內容照常顯示）
 *   3. 不需要 JS 的靜態結構（標題逐行的外框、圖片框、頁首兩種 logo 的疊放）
 */

:root {
  --xy-green: #499801;
  --xy-orange: #ed731c;
  --xy-ease-out: cubic-bezier(.22, 1, .36, 1);
  --xy-dur: 380ms;
}

/* ---------- logo ---------- */
.xy-logo { display: block; width: 100%; height: auto; overflow: visible; }

/* 變形支點（以部件自身外框計算）。Motion 只會補 transform-box，原點要在這裡指定 */
.xy-logo :is(.xy-swirl, .xy-curl-sway, .xy-tops, .xy-wipe, .xy-rule, .xy-glyph, .xy-letter) { transform-box: fill-box; transform-origin: 50% 50%; }
.xy-logo .xy-curl-sway { transform-origin: 81% 99%; }  /* 捲葉的葉基 */
.xy-logo .xy-tops { transform-origin: 5% 90%; }        /* 紅蘿蔔葉的葉柄 */
.xy-logo :is(.xy-wipe, .xy-rule) { transform-origin: 0% 50%; }  /* 由左往右展開 */

/* 等待播放：先隱藏整個 logo，JS 設好起始畫面後才顯示，避免先閃一下完整 logo */
.xy-js .xy-logo[data-motion]:not(.is-ready) { visibility: hidden; }

/* ---------- 捲動進場 ---------- */
.xy-js [data-reveal]:not(.is-in) { opacity: 0; }

/* 標題逐行：每行包 <span class="xy-line"><span>…</span></span> */
.xy-line { display: block; overflow: clip; padding-block: .08em; margin-block: -.08em; }
.xy-line > span { display: block; }
.xy-js [data-lines]:not(.is-in) .xy-line > span { transform: translateY(110%); }

/* 圖片框 */
.xy-photo { position: relative; overflow: hidden; isolation: isolate; }
.xy-photo > :is(img, .xy-photo-fill) { display: block; width: 100%; height: 100%; object-fit: cover; }
.xy-js .xy-photo[data-reveal]:not(.is-in) { opacity: 1; }
.xy-js .xy-photo[data-reveal]:not(.is-in) > * { clip-path: inset(100% 0 0 0); }

/* 按鈕底色填滿用的底層 */
.xy-btn { position: relative; isolation: isolate; overflow: hidden; }
.xy-btn .xy-btn-fill {
  position: absolute; inset: 0; z-index: -1; background: var(--xy-btn-fill, var(--xy-orange));
  clip-path: circle(0px at 50% 50%);
}
.xy-btn:focus-visible { outline: 3px solid var(--xy-orange); outline-offset: 3px; }
/* Motion 沒有接手滑過效果時（減少動態、沒有 JS、Motion 載入失敗），底色由 CSS 直接填滿 */
@media (hover: hover) {
  :root:not(.xy-hover-motion) .xy-btn:hover .xy-btn-fill { clip-path: none; }
}

/* 頁首：完整 logo 與圖形疊放，JS 依捲動切換 */
.xy-header .xy-brand { position: relative; display: block; }
.xy-header .xy-brand-mark { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; }


/* 減少動態效果：即使 JS 晚到也不先藏內容 */
@media (prefers-reduced-motion: reduce) {
  .xy-js .xy-logo[data-motion]:not(.is-ready) { visibility: visible; }
  /* 用 !important 蓋過任何殘留的 inline 樣式（例如動畫中途切換設定） */
  .xy-js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .xy-js [data-lines]:not(.is-in) .xy-line > span { transform: none; }
  .xy-js .xy-photo[data-reveal]:not(.is-in) > * { clip-path: none; }
}

/* 原圖的 SVG transform 留在外層；動畫部件以自身外框為支點。 */
.xy-illus :is([data-anim], [data-part="screen"], [data-part="screen-check"] circle, [data-part="screen-rows"] > *, [data-part="screen-leaf"]) { transform-box: fill-box; transform-origin: center; }
.xy-illus [data-part="screen-rows"] > * { transform-origin: left center; }
.xy-illus [data-anim="sprout-1"] { transform-origin: center bottom; }

/* 作物圖示以土面為旋轉支點 */
.crop-grid img, .visit-icon img, .crop-tile img, .variety-icon { transform-origin: center bottom; }
@media (prefers-reduced-motion: reduce) {
  .xy-plant svg[data-stage="3"] { opacity: 1 !important; transform: none !important; }
  .xy-plant svg:not([data-stage="3"]) { opacity: 0 !important; }
  .xy-plant, .xy-plant-motion, .xy-plant-pull, .crop-grid img, .visit-icon img, .crop-tile img, .variety-icon { transform: none !important; }
  .crop-grid img, .visit-icon img, .crop-tile img, .variety-icon { opacity: 1 !important; }
}

/* 首次繪製與 WAAPI 的第 0 格一致；無 JS 與減少動態顯示最終格。 */
@media (prefers-reduced-motion: no-preference) {
  .xy-js .xy-illus[data-illus="sprout"]:not(.is-played) :is([data-part="sprout-1"], [data-part="sprout-2"]) { opacity: 0; }
  .xy-js .xy-field:not(.is-played) svg[data-stage="1"] { opacity: 1; }
  .xy-js .xy-field:not(.is-played) svg[data-stage="3"] { opacity: 0; }
}