/* ==========================================================================
   BLISS FLOW — ZEUS GROUP 內部營運系統
   Ethereal Glass 美學 + 5 種動效:
   ① Hover-triggered interaction   ② Scroll-driven vortex transit
   ③ Immersive float               ④ Scroll-driven helix flow
   ⑤ Cursor-driven luminous flow
   GPU-safe: 只動 transform / opacity。尊重 prefers-reduced-motion。
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600&family=Instrument+Serif:ital@0;1&family=Noto+Sans+JP:wght@300;400;500&family=Noto+Serif+JP:wght@400;500&display=swap');

:root{
  --bf-ink:#04050880;
  --bf-void:#04050a;
  --bf-paper:#f5f2ea;
  --bf-mute:rgba(245,242,234,.62);
  --bf-faint:rgba(245,242,234,.38);
  --bf-accent:#5FB3C4;
  --bf-violet:#7C5CFF;
  --bf-gold:#E8C88A;
  --bf-hair:rgba(245,242,234,.13);
  --bf-hair-2:rgba(245,242,234,.07);
  --bf-ease:cubic-bezier(.32,.72,0,1);
  --bf-ease-soft:cubic-bezier(.22,.61,.36,1);
  --bf-sans:'Sora',
            system-ui,-apple-system,'Segoe UI','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --bf-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
}

/* ---------- 根容器（取代舊 login-container） ---------- */
#loginPage.bf-root{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 95% at 8% -12%, #101a2b 0%, rgba(6,8,14,.9) 45%, var(--bf-void) 72%),
    var(--bf-void);
  color:var(--bf-paper);
  font-family:var(--bf-sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 底部與頂部的空間感 */
.bf-scroll{
  position:relative; z-index:3;
  flex:1; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.bf-scroll::-webkit-scrollbar{ width:9px }
.bf-scroll::-webkit-scrollbar-track{ background:#06070c }
.bf-scroll::-webkit-scrollbar-thumb{ background:rgba(245,242,234,.14); border-radius:9px }

/* ---------- 大氣層:光暈球 / 網格 / 顆粒 / 光斑 ---------- */
.bf-grain{
  position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bf-spotlight{
  position:fixed; z-index:2; pointer-events:none;
  width:64vmax; height:64vmax; left:0; top:0; opacity:.6;
  background:radial-gradient(circle closest-side, rgba(95,179,196,.16), rgba(124,92,255,.07) 45%, transparent 72%);
  transform:translate3d(calc(var(--bf-mx,50vw) - 32vmax), calc(var(--bf-my,40vh) - 32vmax), 0);
  transition:opacity .8s var(--bf-ease);
}
.bf-cursor-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:8; pointer-events:none; display:block }

.bf-atmos{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden }
.bf-orb{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
  will-change:transform;
}
.bf-orb--1{ width:46vmax; height:46vmax; left:-14vmax; top:-16vmax;
  background:radial-gradient(circle closest-side, rgba(95,179,196,.5), transparent 70%) }
.bf-orb--2{ width:38vmax; height:38vmax; right:-12vmax; top:8vmax;
  background:radial-gradient(circle closest-side, rgba(124,92,255,.42), transparent 70%) }
.bf-orb--3{ width:30vmax; height:30vmax; left:38vmax; bottom:-14vmax;
  background:radial-gradient(circle closest-side, rgba(232,200,138,.24), transparent 70%) }
.bf-grid{
  position:absolute; inset:-2px; opacity:.5;
  background-image:linear-gradient(var(--bf-hair-2) 1px, transparent 1px),
                   linear-gradient(90deg, var(--bf-hair-2) 1px, transparent 1px);
  background-size:86px 86px;
  mask-image:radial-gradient(115% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(115% 80% at 50% 0%, #000 20%, transparent 78%);
}

/* ---------- 打字 / 眉標 ---------- */
.bf-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.42rem .95rem; border-radius:999px;
  border:1px solid var(--bf-hair); background:rgba(245,242,234,.045);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--bf-mute);
  backdrop-filter:blur(14px);
}
.bf-dot{
  width:6px; height:6px; border-radius:50%; background:var(--bf-accent);
  box-shadow:0 0 0 0 rgba(95,179,196,.6); animation:bf-pulse 2.6s var(--bf-ease) infinite;
}
@keyframes bf-pulse{
  0%{ box-shadow:0 0 0 0 rgba(95,179,196,.55) }
  70%{ box-shadow:0 0 0 12px rgba(95,179,196,0) }
  100%{ box-shadow:0 0 0 0 rgba(95,179,196,0) }
}

/* ---------- HERO ---------- */
.bf-hero{
  position:relative; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center; justify-content:safe center;
  padding:clamp(3.2rem,9vh,5.5rem) clamp(1.25rem,5vw,6rem) clamp(3.2rem,8vh,4.5rem);
}
.bf-vortex-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.85; display:block }
.bf-hero__in{ position:relative; z-index:4; width:100%; max-width:1240px; margin:0 auto }

.bf-title{
  font-family:var(--bf-serif); font-weight:400;
  color:var(--bf-paper);
  font-size:clamp(2.9rem,8.6vw,8.2rem); line-height:.92; letter-spacing:-.02em;
  margin:.9rem 0 0;
}
.bf-title em{ font-style:italic; color:var(--bf-accent); }
.bf-sub{
  margin-top:1.1rem; max-width:44ch;
  font-size:clamp(.95rem,1.5vw,1.12rem); line-height:1.85; color:var(--bf-mute); font-weight:300;
}
.bf-sub__main{ display:block }
.bf-sub__tag{ display:block; font-family:var(--bf-serif); font-style:italic; color:var(--bf-faint) }

.bf-hero__grid{
  margin-top:clamp(1.6rem,3vw,2.8rem);
  display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:clamp(1.5rem,3vw,3.25rem);
  align-items:start;
}

/* ---------- Double-Bezel 卡片 ---------- */
.bf-shell{
  padding:.72rem; border-radius:2rem;
  background:linear-gradient(180deg, rgba(245,242,234,.075), rgba(245,242,234,.02));
  border:1px solid var(--bf-hair);
  box-shadow:0 40px 90px -60px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(22px);
}
.bf-core{
  border-radius:calc(2rem - .36rem);
  background:linear-gradient(180deg, rgba(8,10,16,.94), rgba(6,7,12,.98));
  border:1px solid var(--bf-hair-2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.07);
  padding:1.6rem 1.5rem 1.4rem;
}
.bf-login__h{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bf-faint); margin-bottom:1.25rem;
}
.bf-form{ display:flex; flex-direction:column; gap:.85rem }
.bf-field{ display:block }
.bf-field span{
  display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bf-faint); margin-bottom:.4rem;
}
.bf-field input{
  width:100%; padding:.85rem 1rem; border-radius:.85rem;
  background:rgba(245,242,234,.04); border:1px solid var(--bf-hair);
  color:var(--bf-paper); font-family:var(--bf-sans); font-size:.92rem; font-weight:300;
  transition:border-color .5s var(--bf-ease), background .5s var(--bf-ease), box-shadow .5s var(--bf-ease);
}
.bf-field input::placeholder{ color:rgba(245,242,234,.28) }
.bf-field input:focus{
  outline:none; border-color:rgba(95,179,196,.6);
  background:rgba(95,179,196,.06);
  box-shadow:0 0 0 4px rgba(95,179,196,.09), inset 0 1px 0 rgba(255,255,255,.06);
}

.bf-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:.75rem;
  width:100%; margin-top:.35rem; padding:.8rem .5rem .8rem 1.1rem;
  border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(100deg, var(--bf-accent), #7fd0dd 45%, var(--bf-violet));
  color:#04121a; font-family:var(--bf-sans); font-weight:500; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase;
  transition:transform .7s var(--bf-ease), box-shadow .7s var(--bf-ease), filter .5s var(--bf-ease);
}
.bf-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 46px -22px rgba(95,179,196,.75); filter:saturate(1.1) }
.bf-btn:active{ transform:scale(.985) }
.bf-btn__ico{
  display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  background:rgba(4,18,26,.16); font-size:.85rem;
  transition:transform .7s var(--bf-ease), background .5s var(--bf-ease);
}
.bf-btn:hover .bf-btn__ico{ transform:translate(3px,-3px) scale(1.06); background:rgba(4,18,26,.28) }

.bf-err{
  margin-top:.7rem; font-size:.78rem; color:#ff9d9d; text-align:center;
  padding:.5rem; border-radius:.7rem; background:rgba(255,90,90,.08); border:1px solid rgba(255,90,90,.22);
}
.bf-login__foot{
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--bf-hair-2);
  font-size:.68rem; color:var(--bf-faint); letter-spacing:.04em; line-height:1.7;
}

/* ---------- ③ Immersive float:浮空玻璃磚 ---------- */
.bf-float{
  position:relative; display:grid; gap:1.05rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  align-content:start;
}
.bf-tile{
  position:relative; padding:1.15rem 1.15rem 1.25rem; border-radius:1.5rem;
  background:linear-gradient(180deg, rgba(245,242,234,.06), rgba(245,242,234,.015));
  border:1px solid var(--bf-hair);
  backdrop-filter:blur(16px);
  box-shadow:0 30px 70px -52px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
  transform:translate3d(0,var(--bf-fy,0px),0);
  will-change:transform;
  transition:border-color .6s var(--bf-ease), background .6s var(--bf-ease), box-shadow .8s var(--bf-ease);
  overflow:hidden;
}
.bf-tile::after{
  content:''; position:absolute; inset:-40% 40% 55% -40%;
  background:radial-gradient(circle closest-side, rgba(95,179,196,.5), transparent 70%);
  opacity:0; transition:opacity .8s var(--bf-ease); pointer-events:none;
}
/* ① Hover-triggered interaction */
.bf-tile:hover{
  border-color:rgba(95,179,196,.42);
  background:linear-gradient(180deg, rgba(95,179,196,.1), rgba(245,242,234,.02));
  box-shadow:0 44px 90px -48px rgba(95,179,196,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.bf-tile:hover::after{ opacity:.5 }
.bf-tile:hover .bf-tile__n{ color:var(--bf-accent); transform:translateX(2px) }
.bf-tile:hover .bf-tile__ico{ transform:translateY(-3px) rotate(-4deg); border-color:rgba(95,179,196,.5) }
.bf-tile__n{
  font-family:var(--bf-serif); font-size:.78rem; letter-spacing:.2em; color:var(--bf-faint);
  transition:color .6s var(--bf-ease), transform .6s var(--bf-ease);
}
.bf-tile__ico{
  display:grid; place-items:center; width:2.4rem; height:2.4rem; margin:.7rem 0 .85rem;
  border-radius:.9rem; border:1px solid var(--bf-hair); background:rgba(245,242,234,.04);
  transition:transform .8s var(--bf-ease), border-color .6s var(--bf-ease);
}
.bf-tile__ico svg{ width:1.25rem; height:1.25rem; stroke:var(--bf-accent); fill:none; stroke-width:1.05 }
.bf-tile__t{ font-size:1.02rem; font-weight:400; letter-spacing:.01em; color:var(--bf-paper) }
.bf-tile__d{ margin-top:.45rem; font-size:.76rem; line-height:1.75; color:var(--bf-mute); font-weight:300 }

.bf-scrollhint{
  position:absolute; left:clamp(1.25rem,5vw,6rem); bottom:2rem; z-index:5;
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--bf-faint);
  text-decoration:none;
}
.bf-scrollhint .bf-line{
  display:block; width:60px; height:1px; background:linear-gradient(90deg,var(--bf-accent),transparent);
  animation:bf-slide 2.6s var(--bf-ease) infinite;
}
@keyframes bf-slide{ 0%,100%{ transform:scaleX(.35); transform-origin:left } 50%{ transform:scaleX(1) } }

/* ---------- 區段通用 ---------- */
.bf-sec{
  position:relative; padding:clamp(5rem,12vh,9rem) clamp(1.25rem,5vw,6rem);
  border-top:1px solid var(--bf-hair-2);
}
.bf-sec__in{ position:relative; z-index:4; max-width:1240px; margin:0 auto }
.bf-h2{
  font-family:var(--bf-serif); font-weight:400;
  color:var(--bf-paper);
  font-size:clamp(2rem,5vw,3.9rem); line-height:1.06; letter-spacing:-.01em; margin:.85rem 0 0;
}
.bf-h2 em{ font-style:italic; color:var(--bf-accent) }
.bf-p{ margin-top:1rem; max-width:56ch; font-size:clamp(.86rem,1.15vw,.98rem); line-height:1.95; color:var(--bf-mute); font-weight:300 }
.bf-p + .bf-p{ margin-top:.7rem }

/* ---------- ② Scroll-driven vortex transit ---------- */
.bf-sec--vortex{ overflow:hidden }
#bfVortexStage{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; display:block }
.bf-vortex-hud{
  position:absolute; right:clamp(1.25rem,5vw,6rem); bottom:clamp(1.5rem,4vw,3rem); z-index:4;
  display:flex; gap:1.4rem; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bf-faint);
}
.bf-vortex-hud b{ display:block; font-family:var(--bf-serif); font-size:1.5rem; letter-spacing:0; color:var(--bf-paper); font-weight:400 }

/* ---------- ④ Scroll-driven helix flow ---------- */
.bf-sec--helix{ overflow:hidden }
.bf-helix{
  position:relative; height:clamp(360px,58vh,540px); margin-top:clamp(2.5rem,5vw,4rem);
  perspective:1400px; perspective-origin:50% 45%;
}
.bf-helix__ring{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(-8deg) rotateY(var(--bf-ry,0deg));
}
.bf-hcard{
  position:absolute; left:50%; top:50%; width:230px; margin:-70px 0 0 -115px;
  padding:1rem 1.05rem 1.15rem; border-radius:1.35rem;
  background:linear-gradient(180deg, rgba(245,242,234,.075), rgba(6,8,14,.72));
  border:1px solid var(--bf-hair);
  box-shadow:0 30px 70px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
  transform:rotateY(var(--bf-a)) translateZ(var(--bf-r,360px));
  transition:border-color .5s var(--bf-ease), background .5s var(--bf-ease);
  will-change:transform;
}
.bf-hcard:hover{ border-color:rgba(95,179,196,.5); background:linear-gradient(180deg, rgba(95,179,196,.14), rgba(6,8,14,.8)) }
.bf-hcard__s{ font-family:var(--bf-serif); font-size:.7rem; letter-spacing:.22em; color:var(--bf-accent) }
.bf-hcard__t{ margin-top:.4rem; font-size:.95rem; line-height:1.4; color:var(--bf-paper) }
.bf-hcard__d{ margin-top:.4rem; font-size:.72rem; line-height:1.7; color:var(--bf-mute); font-weight:300 }

/* ---------- ⑤ Cursor-driven luminous flow ---------- */
.bf-lumen{
  position:relative; z-index:4; margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.6rem,3vw,2.6rem); border-radius:1.75rem;
  border:1px solid var(--bf-hair); background:rgba(245,242,234,.03);
  backdrop-filter:blur(16px);
}
.bf-lumen__row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem }
.bf-chip{
  padding:.5rem .9rem; border-radius:999px; border:1px solid var(--bf-hair);
  background:rgba(245,242,234,.03); font-size:.69rem; letter-spacing:.08em; color:var(--bf-mute);
  transition:transform .6s var(--bf-ease), border-color .5s var(--bf-ease), color .5s var(--bf-ease);
}
.bf-chip:hover{ transform:translateY(-3px); border-color:rgba(232,200,138,.5); color:var(--bf-gold) }

/* ---------- 尾 ---------- */
.bf-foot{
  padding:3rem clamp(1.25rem,5vw,6rem) 4rem; border-top:1px solid var(--bf-hair-2);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
  font-size:.68rem; letter-spacing:.08em; color:var(--bf-faint);
}
.bf-foot a{ color:var(--bf-mute); text-decoration:none; border-bottom:1px solid var(--bf-hair); padding-bottom:2px }
.bf-foot a:hover{ color:var(--bf-accent); border-color:var(--bf-accent) }

/* ---------- 進場動畫（IntersectionObserver 加 .in） ---------- */
.bf-reveal{ opacity:0; transform:translateY(38px) scale(.985); filter:blur(6px);
  transition:opacity 1s var(--bf-ease), transform 1.1s var(--bf-ease), filter 1s var(--bf-ease) }
.bf-reveal.in{ opacity:1; transform:none; filter:blur(0) }
.bf-d1{ transition-delay:.08s } .bf-d2{ transition-delay:.16s } .bf-d3{ transition-delay:.24s }

/* ---------- 響應式 ---------- */
/* 矮視窗（例如 1366x768 同事機）不要切頂 */
@media (max-height:840px) and (min-width:901px){
  .bf-hero{ padding-top:2.4rem; padding-bottom:2.4rem }
  .bf-title{ font-size:clamp(2.3rem,6.4vw,4.4rem) }
  .bf-sub{ font-size:.9rem; line-height:1.7; margin-top:.8rem }
  .bf-hero__grid{ margin-top:1.3rem }
  .bf-login__h{ margin-bottom:.9rem }
  .bf-core{ padding:1.25rem 1.25rem 1.1rem }
  .bf-tile{ padding:.95rem 1rem; border-radius:1.2rem }
  .bf-tile__d{ display:none }
  .bf-tile__ico{ margin:.5rem 0 .6rem; width:2rem; height:2rem }
  .bf-scrollhint{ display:none }
}

@media (max-width:900px){
  .bf-hero__grid{ grid-template-columns:1fr }
  .bf-title{ font-size:clamp(3rem,16vw,5rem) }
  .bf-scrollhint{ position:static; margin-top:2.4rem }
  .bf-hcard{ width:190px; margin:-64px 0 0 -95px }
  .bf-vortex-hud{ position:static; margin-top:2rem; flex-wrap:wrap }
}

/* ================= 語言切換（中 / EN / 日） ================= */
.bf-switch{
  position:fixed; top:clamp(.9rem,2.6vh,1.5rem); right:clamp(1rem,5vw,6rem); z-index:12;
  display:inline-flex; gap:.15rem; padding:.22rem; border-radius:999px;
  border:1px solid var(--bf-hair); background:rgba(10,12,18,.62);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 40px -30px rgba(0,0,0,.9);
}
.bf-switch button{
  appearance:none; border:none; background:transparent; cursor:pointer;
  min-width:2.6rem; padding:.42rem .55rem; border-radius:999px;
  font-family:var(--bf-sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bf-faint);
  transition:color .45s var(--bf-ease), background .45s var(--bf-ease), box-shadow .45s var(--bf-ease);
}
.bf-switch button:hover{ color:var(--bf-paper) }
.bf-switch button.is-on{
  color:#04121a; background:linear-gradient(100deg,var(--bf-accent),#7fd0dd 55%,var(--bf-violet));
  box-shadow:0 10px 24px -14px rgba(95,179,196,.9);
}

/* 內文小題（光流卡） */
.bf-h2--sm{ font-size:clamp(1.25rem,2.3vw,1.8rem); margin:0 }

/* 日文排版：字族與行距 */
html.bf-lang-ja .bf-root{
  --bf-sans:'Sora','Noto Sans JP',system-ui,'Yu Gothic','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
  --bf-serif:'Instrument Serif','Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif;
}
html.bf-lang-ja .bf-title em,
html.bf-lang-ja .bf-h2 em{ font-family:'Instrument Serif',serif }
html.bf-lang-ja .bf-p,
html.bf-lang-ja .bf-tile__d,
html.bf-lang-ja .bf-hcard__d{ line-height:2.05; letter-spacing:.01em }
html.bf-lang-ja .bf-eyebrow,
html.bf-lang-ja .bf-login__h,
html.bf-lang-ja .bf-field span{ letter-spacing:.18em }

@media (max-width:900px){
  .bf-hero{ padding-top:5.4rem }
  .bf-switch{ right:1rem }
}

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion:reduce){
  .bf-cursor-canvas,.bf-vortex-canvas{ display:none }
  .bf-reveal{ opacity:1; transform:none; filter:none }
  .bf-orb,.bf-tile,.bf-hcard,.bf-helix__ring{ transition:none; animation:none }
  .bf-scroll{ scroll-behavior:auto }
}