/* ===========================================================
   CreatorOS 開場動畫 — 樣式
   來源幾何完全取自 logo/LOGO/source/mark.svg，六段順序固定為
   實踐 R → 思考 I → 創造 A → 助人 S → 影響 E → 組織 C。
   三個方案：torque 鎖緊 / boot 開機 / split 分型
   =========================================================== */

/* ── 舞台：組合標誌本體，所有尺寸由 --cos-size 推導 ───────── */
.cos-stage{
  --cos-size: 34px;
  --sp: 1;                       /* 速度倍率，數字越大越慢 */
  --cos-neutral: #F2F2F5;        /* 尚未上色時的中性色（分型方案用） */
  font-size: var(--cos-size);
  font-family: "Avenir Next","Helvetica Neue",Arial,sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

.cos-mark{
  width: 2.5em;
  height: 2.5em;                 /* viewBox 是 0 0 100 100，不可裁切：見 cos-intro.js 的說明，
                                    裁掉 min-y 會讓所有 transform-origin 的百分比整組偏移 */
  margin: -.14275em 0;           /* 六邊形上下各空 5.71 單位（2.5em 的 5.71%），
                                    用負邊界收掉，版面等同於過去的 2.2145em 高 */
  display: block;
  overflow: visible;
}
.cos-mark .s{
  transform-box: view-box;
  /* transform-origin 各段以行內 style 指定為自己的形心（百分比） */
}
.cos-rot{
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.s1{ fill:#F65422 }   /* 實踐者 R */
.s2{ fill:#45D3D3 }   /* 思考者 I */
.s3{ fill:#FCA71D }   /* 創造者 A */
.s4{ fill:#448CD4 }   /* 助人者 S */
.s5{ fill:#45D351 }   /* 影響者 E */
.s6{ fill:#D34564 }   /* 組織者 C */

/* 輔助圖形：外框線（開機描邊 / 鎖緊震波 / 分型實心） */
.cos-ring{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-dasharray: 266;         /* 六邊形周長 6 × 44.29 ≈ 265.7 */
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: 0;
}
.cos-solid{
  fill: var(--cos-neutral);
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: 0;
}

/* ── 字標 ─────────────────────────────────────────────── */
.cos-word{
  display: flex;
  align-items: center;
  margin-top: .62em;
  font-weight: 600;
}
.cos-word-a{ letter-spacing: -.0227em }    /* 母檔是 font-size 44 配 letter-spacing -1 */

/* OS 藥丸的每個數字都對過品牌母檔（og-dark.svg 與 og-1200x630-dark.png），
   底下的 em 都是相對藥丸自己的字級。母檔量到的基準：
     藥丸 76×44、圓角 10、OS 字級 34 → 高 44/34、寬高比 76/44、圓角 10/44
     藥丸內墨跡 105×59，上留白 21、下留白 22 → 上下相等，墨高佔藥丸高 0.578
     Creator 墨跡右緣到藥丸左緣 = 1.028 × OS 字級
   上下留白要相等，不能只靠 padding 對稱——文字在行框裡本來就偏上，
   所以是固定高度＋算好的 padding-top 把墨跡壓到正中間。 */
.cos-word-b{
  box-sizing: border-box;
  display: inline-block;
  margin-left: 1.049em;                    /* 已補掉 Creator 尾端負字距造成的墨跡外溢 */
  background: currentColor;
  border-radius: .294em;
  font-size: .7727em;
  width: 2.237em;
  height: 1.295em;
  padding-top: .1904em;
  text-align: center;
  line-height: 1;
}
.cos-word-b span{ color: #0E1116 }         /* 反白字，跟著底色反轉 */
.cos-sub{
  margin-top: .58em;
  font-family: "PingFang TC","Noto Sans TC",sans-serif;
  font-size: .42em;
  letter-spacing: .26em;
  text-indent: .26em;                       /* 補回尾字多出的字距 */
  opacity: .62;
}

/* 淺色底時把字標反過來 */
.cos-stage.on-light{ color:#0E1116; --cos-neutral:#0E1116 }
.cos-stage.on-light .cos-word-b span{ color:#fff }

/* ===========================================================
   動畫：只有掛上 .play 才跑，backwards 讓延遲期間停在起始格。
   沒有 JS 或動畫沒被觸發時，標誌就是靜態的正常樣子。
   =========================================================== */

/* ── 方案 A：torque 鎖緊 ──────────────────────────────────
   六個零件從各自方向飛入 → 整組轉正並回彈（扳手鎖緊一格）→ 震波 */
.cos-stage.play[data-v="torque"] .s{
  animation: cosFlyIn calc(.55s * var(--sp)) cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc((var(--i) * .06s) * var(--sp));
}
.cos-stage.play[data-v="torque"] .cos-rot{
  animation: cosTorque calc(.62s * var(--sp)) cubic-bezier(.34,1.5,.64,1) backwards;
  animation-delay: calc(.80s * var(--sp));
}
.cos-stage.play[data-v="torque"] .cos-ring{
  animation: cosShock calc(.55s * var(--sp)) ease-out both;
  animation-delay: calc(1.28s * var(--sp));
}
@keyframes cosFlyIn{
  from{ opacity:0; transform: translate(calc(var(--dx) * 72px), calc(var(--dy) * 72px)) scale(.5) }
  to  { opacity:1; transform: translate(0,0) scale(1) }
}
@keyframes cosTorque{
  from{ transform: rotate(-34deg) }
  to  { transform: rotate(0deg) }
}
@keyframes cosShock{
  0%  { opacity:0;   transform: scale(1) }
  22% { opacity:.55 }
  100%{ opacity:0;   transform: scale(1.62) }
}

/* ── 方案 B：boot 開機 ────────────────────────────────────
   外框像載入環描一圈，描到哪一面就點亮哪一型（R→I→A→S→E→C） */
.cos-stage.play[data-v="boot"] .cos-ring{
  animation: cosTrace calc(1.0s * var(--sp)) cubic-bezier(.35,0,.25,1) both;
}
.cos-stage.play[data-v="boot"] .s{
  animation: cosLight calc(.34s * var(--sp)) ease-out backwards;
  animation-delay: calc((.06s + var(--i) * .155s) * var(--sp));
}
.cos-stage.play[data-v="boot"] .cos-rot{
  animation: cosSettle calc(.42s * var(--sp)) cubic-bezier(.34,1.45,.64,1) backwards;
  animation-delay: calc(1.06s * var(--sp));
}
@keyframes cosTrace{
  0%  { opacity:.85; stroke-dashoffset: 266 }
  72% { opacity:.85 }
  100%{ opacity:0;   stroke-dashoffset: 0 }
}
@keyframes cosLight{
  from{ opacity:0; transform: scale(.72); filter: brightness(2.6) }
  to  { opacity:1; transform: scale(1);   filter: brightness(1) }
}
@keyframes cosSettle{
  from{ transform: scale(.94) }
  to  { transform: scale(1) }
}

/* ── 方案 C：split 分型 ───────────────────────────────────
   一塊實心六邊形 → 裂成六片推開（螺帽孔出現）→ 各自上色 → 收合鎖上 */
.cos-stage.play[data-v="split"] .cos-solid{
  animation: cosSeed calc(.78s * var(--sp)) cubic-bezier(.16,1,.3,1) both;
}
.cos-stage.play[data-v="split"] .s{
  animation:
    cosBurst calc(.95s * var(--sp)) backwards,
    cosPaint calc(.30s * var(--sp)) ease-out backwards;
  animation-delay:
    calc(.60s * var(--sp)),
    calc((.95s + var(--i) * .05s) * var(--sp));
}
@keyframes cosSeed{
  0%  { opacity:0; transform: rotate(-18deg) scale(.5) }
  55% { opacity:1; transform: rotate(0deg) scale(1); animation-timing-function: linear }
  78% { opacity:1 }
  100%{ opacity:0; transform: rotate(0deg) scale(1) }
}
@keyframes cosBurst{
  0%  { opacity:0; transform: translate(0,0); animation-timing-function: ease-out }
  10% { opacity:1; transform: translate(0,0); animation-timing-function: cubic-bezier(.2,.7,.3,1) }
  40% { transform: translate(calc(var(--dx) * 12px), calc(var(--dy) * 12px));
        animation-timing-function: cubic-bezier(.34,1.4,.64,1) }
  100%{ transform: translate(0,0) }
}
@keyframes cosPaint{
  from{ fill: var(--cos-neutral) }
  to  { fill: currentColor }
}
/* cosPaint 的終點用各段自己的顏色 */
.cos-stage[data-v="split"] .s1{ color:#F65422 }
.cos-stage[data-v="split"] .s2{ color:#45D3D3 }
.cos-stage[data-v="split"] .s3{ color:#FCA71D }
.cos-stage[data-v="split"] .s4{ color:#448CD4 }
.cos-stage[data-v="split"] .s5{ color:#45D351 }
.cos-stage[data-v="split"] .s6{ color:#D34564 }

/* ── 字標進場（三個方案共用，只差延遲）─────────────────── */
.cos-stage.play .cos-word{
  animation: cosWipe calc(.52s * var(--sp)) cubic-bezier(.22,1,.3,1) backwards;
  animation-delay: calc(var(--word) * var(--sp));
}
.cos-stage.play .cos-sub{
  animation: cosSubIn calc(.6s * var(--sp)) cubic-bezier(.22,1,.3,1) backwards;
  animation-delay: calc((var(--word) + .16s) * var(--sp));
}
.cos-stage.play[data-v="torque"]{ --word: 1.34s }
.cos-stage.play[data-v="boot"]  { --word: 1.30s }
.cos-stage.play[data-v="split"] { --word: 1.46s }

@keyframes cosWipe{
  0%  { opacity:0; clip-path: inset(0 100% 0 0); transform: translateX(-.14em) }
  25% { opacity:1 }
  100%{ opacity:1; clip-path: inset(0 -12% 0 0); transform: translateX(0) }
}
@keyframes cosSubIn{
  from{ opacity:0; letter-spacing:.14em; transform: translateY(.28em) }
  to  { opacity:.62; letter-spacing:.26em; transform: translateY(0) }
}

/* ===========================================================
   全螢幕覆蓋層（由 cos-intro.js 注入）
   =========================================================== */
.cos-intro{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0E1116;
  cursor: pointer;
  transition: opacity .42s ease, visibility .42s;
}
.cos-intro .cos-stage{ --cos-size: clamp(30px, 8.5vw, 56px) }
.cos-intro.out{ opacity:0; visibility:hidden }
.cos-intro.out .cos-stage{
  transform: translateY(-.32em) scale(.94);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.cos-skip{
  position: absolute;
  right: 18px; bottom: 16px;
  font: 400 12px/1 "PingFang TC","Noto Sans TC",sans-serif;
  letter-spacing: .12em;
  color: rgba(255,255,255,.34);
}
html.cos-locked, html.cos-locked body{ overflow: hidden }

/* 頁面內容在動畫結束後浮上來 */
html.cos-revealing body > *:not(.cos-intro){
  animation: cosPageIn .55s cubic-bezier(.22,1,.3,1) both;
}
@keyframes cosPageIn{
  from{ opacity:0; transform: translateY(14px) }
  to  { opacity:1; transform: none }
}

/* 使用者關掉動畫效果時，一切從簡 */
@media (prefers-reduced-motion: reduce){
  .cos-stage.play *{ animation: none !important }
  .cos-stage.play .cos-ring, .cos-stage.play .cos-solid{ opacity:0 !important }
  html.cos-revealing body > *:not(.cos-intro){ animation: none !important }
}