/* ==========================================================================
   OUJO motion & interaction layer — merged from design-canvas V2
   Progressive enhancement on top of site.css. Everything here degrades to
   the static site when JS / animation is unavailable.
   ========================================================================== */

body{font-family:Inter,"Noto Sans TC","Helvetica Neue","PingFang TC",sans-serif}
.wordmark{font-family:Archivo,"Arial Black",sans-serif;font-stretch:125%;font-variation-settings:"wdth" 125}

/* ---------- Loader: OU → JO, once per session ---------- */
html.oj-loading body::before,
html.oj-loading body::after{content:"";position:fixed;inset:0;z-index:10000;pointer-events:none;background:#F2F0EA center/72px 72px no-repeat;animation:oj-ld-out 520ms cubic-bezier(.7,0,.2,1) 1050ms forwards}
html.oj-loading body::before{background-image:url(ou-black.svg)}
html.oj-loading body::after{background-image:url(jo-black.svg);animation:oj-ld-jo 1000ms steps(1,end) both,oj-ld-out 520ms cubic-bezier(.7,0,.2,1) 1050ms forwards}
@keyframes oj-ld-jo{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
@keyframes oj-ld-out{to{transform:translateY(-100%);visibility:hidden}}

/* ---------- Hero headline: mask reveal (the one orchestrated moment) ---------- */
.hero h1{font-size:clamp(48px,6.4vw,100px);line-height:1.1}
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>span{display:block;animation:oj-rise 700ms cubic-bezier(.16,.84,.24,1) 80ms both}
.mask.m2>span{animation-delay:170ms}
html.oj-loading .mask>span{animation-delay:1150ms}
html.oj-loading .mask.m2>span{animation-delay:1240ms}
@keyframes oj-rise{from{transform:translateY(105%)}to{transform:none}}

/* ---------- Growth Index ---------- */
.stage{position:relative;transition:color 300ms,border-color 300ms}
.stage strong{font-family:Archivo,Inter,sans-serif;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;letter-spacing:-.01em}
.stage .prog{position:absolute;left:0;right:0;top:-3px;height:3px;background:#111;transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero-index.run .stage.active .prog{animation:oj-fill 2400ms linear forwards}
@keyframes oj-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stage-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-top:1px solid var(--line)}
.stage-foot .stage-detail{flex:1}
.frags{position:relative;flex:0 0 196px;height:84px;margin-top:13px}
.frag{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity 400ms,transform 400ms cubic-bezier(.16,.84,.24,1)}
.frag.on{opacity:1;transform:none}
.stage-note{font-size:12px;color:var(--muted);padding-top:14px}
.f-brand{display:flex;gap:6px;height:100%}
.f-brand i{flex:1;background:#111}.f-brand i+i{background:var(--paper);border:1px solid #b5b4ad}.f-brand b{width:20px;background:var(--lime)}
.f-brand em{width:66px;display:flex;align-items:flex-end;font:800 40px/0.9 Archivo,Inter,sans-serif;font-stretch:125%;font-style:normal}
.f-traffic{height:100%;display:flex;flex-direction:column;justify-content:center;gap:9px}
.f-traffic .q{height:28px;border:1px solid #111;border-radius:14px;display:flex;align-items:center;gap:8px;padding:0 12px}
.f-traffic .q i{height:5px;width:60%;background:#8a8983}
.f-traffic .r1{height:6px;width:72%;background:#111;box-shadow:0 4px 0 var(--lime)}
.f-traffic .r2{height:5px;width:92%;background:#b5b4ad}.f-traffic .r3{height:5px;width:56%;background:#b5b4ad}
.f-product{height:100%;border:1px solid #111;display:flex;flex-direction:column}
.f-product .bar{height:14px;border-bottom:1px solid #111}
.f-product .body{flex:1;display:grid;grid-template-columns:2fr 1fr;gap:6px;padding:6px}
.f-product .body i{background:#111}.f-product .body span{display:flex;flex-direction:column;gap:6px}
.f-product .body span i{flex:1;background:#d9d9d4}.f-product .body span b{height:14px;background:var(--lime)}

/* ---------- Case covers: ear peek + VIEW ---------- */
.case .peek{top:-16px;opacity:0;transform:translateY(10px);transition:opacity 250ms,transform 400ms cubic-bezier(.16,.84,.24,1)}
.case:hover .peek,.case:focus-visible .peek{opacity:1;transform:none}

/* ---------- Nav underline ---------- */
.header nav a{position:relative;padding:8px 0}
.header nav a:hover{text-decoration:none}
.header nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 300ms cubic-bezier(.16,.84,.24,1)}
.header nav a:hover::after,.header nav a[aria-current="page"]::after{transform:scaleX(1)}
.button{transition:background 250ms,color 250ms,border-color 250ms}

/* ---------- Custom cursor (fine pointers only) ---------- */
.cursor{position:fixed;left:0;top:0;z-index:9000;pointer-events:none;transform:translate3d(-200px,-200px,0)}
.cursor>span{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--lime);border:1px solid #111;display:flex;align-items:center;justify-content:center;font:700 0/1 Inter,sans-serif;letter-spacing:.12em;color:#111;transition:width 250ms,height 250ms,left 250ms,top 250ms,font-size 150ms,opacity 200ms}
.cursor.link>span{width:26px;height:26px;left:-13px;top:-13px}
.cursor.view>span{width:92px;height:92px;left:-46px;top:-46px;font-size:13px}
.cursor.hide>span{opacity:0}
html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:none}

/* ---------- OUJO LAB ---------- */
.lab-tags{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 0;padding:0;list-style:none}
.lab-tags li{border:1px solid var(--line);padding:6px 10px;font-size:12px}
.lab-right{display:flex;flex-direction:column;gap:14px}
.lab-screen{position:relative;height:236px;background:#111;color:var(--paper);padding:20px 24px;display:flex;flex-direction:column}
.lab-screen .top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;color:#a3a39c}
.lab-screen .st{display:flex;align-items:center;gap:8px}
.lab-screen .st i{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:oj-blink 1600ms ease-in-out infinite}
.lab-screen img{width:60px;height:60px;margin-top:18px}
.lab-screen .t{margin-top:auto;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.lab-screen .swap{animation:oj-swap 400ms cubic-bezier(.16,.84,.24,1)}
@keyframes oj-swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes oj-blink{0%,100%{opacity:1}50%{opacity:.25}}
.lab a.exp{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:12px;padding:16px 12px;border-bottom:1px solid var(--line);transition:background 200ms,color 200ms}
.lab a.exp.on{background:#111;color:var(--paper)}
.lab a.exp.on .mono{color:var(--lime)}

/* ---------- Contact brand pattern ---------- */
.pattern-band{height:80px;margin-bottom:32px;background:url(brand-pattern-dark.svg) repeat-x left center/120px 120px;opacity:.9}

/* ---------- Case study: current chapter ---------- */
.story aside a{transition:color 200ms}
.story aside a[aria-current="true"]{font-weight:700}
.story aside a[aria-current="true"]::before{content:"";display:inline-block;width:18px;height:9px;margin-right:8px;background:url(ears.svg) no-repeat center/contain}

/* ---------- Mobile menu + sticky CTA ---------- */
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0}
.menu-btn span{width:22px;height:2px;background:#111}
.menu{position:fixed;inset:0;z-index:9500;background:#111;color:var(--paper);padding:0 22px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;animation:oj-swap 300ms ease both}
.menu[hidden]{display:none}
.menu-top{height:76px;display:flex;align-items:center;justify-content:space-between}
.menu-top .brand{font-size:26px;gap:8px}
.menu-close{width:44px;height:44px;border:0;background:none;color:var(--paper);font-size:30px;line-height:1}
.menu-links{margin-top:40px;display:flex;flex-direction:column;border-top:1px solid #444}
.menu-links a{padding:18px 0;border-bottom:1px solid #444;font-size:38px;font-weight:800;letter-spacing:-.02em}
.menu-sym{display:flex;gap:14px;margin-top:36px}
.menu-sym img{width:48px;height:48px}
.menu-cta{margin-top:auto;width:100%}
.mbar{display:none}

@media(max-width:600px){
  .hero h1{font-size:50px}
  .stage-foot{flex-direction:column;gap:0}
  .frags{flex:none;width:160px;height:64px;margin:4px 0 0}
  .f-brand em{font-size:30px;width:50px}
  html.js .header nav{display:none}
  html.js .menu-btn{display:flex}
  html.js .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:8000;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#111;border-top:1px solid #333;transition:transform 300ms cubic-bezier(.16,.84,.24,1)}
  html.js .mbar.away{transform:translateY(110%)}
  .mbar a{flex:1;height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid #666;color:var(--paper)}
  .mbar a.lime{background:var(--lime);border-color:var(--lime);color:#111;font-weight:700}
  html.js body{padding-bottom:70px}
  .lab-screen{height:200px}
  .pattern-band{height:60px}
}

@media(prefers-reduced-motion:reduce){
  html.oj-loading body::before,html.oj-loading body::after{display:none}
  .mask>span{animation:none}
}
html.has-cursor textarea,html.has-cursor input{cursor:text}
html.has-cursor .menu,html.has-cursor .menu *{cursor:auto}

/* ---------- Contact: brief form ---------- */
.contact-mail{display:inline-flex;flex-direction:column;gap:8px;margin-top:28px;font-size:clamp(20px,2vw,28px);font-weight:600;color:var(--paper);border-bottom:1px solid #666;padding-bottom:8px;transition:color 250ms,border-color 250ms}
.contact-mail .eyebrow{font-size:11px;font-weight:400;color:#a3a39c}
.contact-mail:hover{color:var(--lime);border-color:var(--lime)}
.brief-form{display:flex;flex-direction:column;gap:18px}
.brief-form label{font-size:13px}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bf-row label{display:flex;flex-direction:column;gap:8px}
.brief-form input[type=text],.brief-form input:not([type]){height:46px;background:transparent;border:1px solid #666;color:var(--paper);padding:0 14px;font-size:15px}
.brief-form input::placeholder,.brief-form textarea::placeholder{color:#8a8983}
.bf-types{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bf-types legend{font-size:13px;margin-bottom:10px;padding:0}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid #666;font-size:13px;transition:background 200ms,color 200ms,border-color 200ms}
.chip:hover span{border-color:var(--paper)}
.chip input:checked+span{background:var(--lime);border-color:var(--lime);color:#111}
.chip input:focus-visible+span{outline:3px solid var(--lime);outline-offset:3px}
.bf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:-8px}
.linkbtn{background:none;border:0;color:var(--lime);font-size:13px;text-decoration:underline;text-underline-offset:4px;min-height:36px;padding:0}
.contact textarea{height:190px}
.bf-actions{display:flex;gap:10px;flex-wrap:wrap}
.bf-actions .button{margin-top:0}
.button.ghost{color:var(--paper);border-color:#666}
.button.ghost:hover{background:var(--paper);color:#111;border-color:var(--paper)}
.status{margin-top:-6px;font-size:13px;color:var(--lime)}
.bf-note{font-size:12px!important;color:#8a8983!important}
.bf-note a,.footer a[href^="mailto"]{text-decoration:underline;text-underline-offset:4px}
html.has-cursor .chip{cursor:none}
@media(max-width:600px){.bf-row{grid-template-columns:1fr}.bf-actions .button{flex:1}}

/* Responsive fix (verified in Phase 1 QA): contact grid columns and form fields shrink to their track
   instead of overflowing it at 601–850px. Column ratios, spacing and type unchanged. */
.contact-top>*{min-width:0}
.bf-row>label{min-width:0}
.brief-form input:not([type]){width:100%;min-width:0}
.brief-form textarea{max-width:100%}