/* The capability chapter follows one continuous ridge, with real brand marks. */
#intro .my-build-skills{background:#f4f3ef}
#intro .my-ridge-landscape{position:absolute;inset:0;background:url('/intro-assets/06-ridgeline-v1.png') center/cover no-repeat;z-index:-2}
#intro .my-build-skills .my-build-heading{left:5%;top:22%;bottom:auto;width:43%;padding:0}
#intro .my-build-skills .my-build-heading::before{display:none}
#intro .my-build-skills .my-build-heading h2{font-size:clamp(44px,5.3vw,84px);line-height:1.28;max-width:650px;margin:22px 0;text-wrap:initial;font-weight:400;color:#202923;text-shadow:none}
#intro .my-build-skills .my-build-heading p{font:18px/1.8 Georgia,'SimSun',serif;max-width:570px}
#intro .my-build-skills .my-build-source{font-size:12px;color:#93815f;margin-top:18px}
#intro .my-build-skills .my-skill-space{inset:0;perspective:none;transform-style:flat}
#intro .my-build-skills .my-build-mark{width:100px;min-height:85px;gap:5px;padding:8px;z-index:3;transform-style:flat}
#intro .my-build-skills .my-build-mark img{width:42px;height:42px;filter:grayscale(1);opacity:.86}
#intro .my-build-skills .my-build-mark b{font:12px/1.4 Consolas,sans-serif;color:#30302b;text-shadow:0 1px 8px #f4f3ef}
#intro .my-build-skills .my-build-mark::after{content:'';position:absolute;width:1px;height:48px;top:100%;background:linear-gradient(#bba47c,#bba47c88);pointer-events:none}
#intro .my-build-skills .my-build-mark::before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;top:calc(100% + 46px);background:#a58c63;pointer-events:none}
#intro .my-build-skills .my-build-tooltip{top:auto;bottom:100%;background:#f4f3eff5;border-left:1px solid #bca278;box-shadow:none;color:#555044;font-size:11px;text-align:left;padding:10px 12px}
#intro .my-build-skills .my-skill-stream,#intro .my-build-skills .my-skill-destination{display:none}
#intro .my-build-skills .my-skill-caption{left:5%;bottom:9%;max-width:27%;font-size:10px;color:#a58c65}
#intro .my-build-skills .my-skill-caption strong{font:16px/1.6 Georgia,'SimSun',serif;color:#84765d;display:inline;margin-left:12px}
#intro .my-build-skills .my-skill-caption p{display:none}
#intro .my-ridge-summit{position:absolute;left:85%;top:12%;width:140px;transform:translateX(-50%);text-align:center;color:#867353;font:12px/1.7 Georgia,'SimSun',serif}
#intro .my-ridge-summit img{width:94px;height:88px;object-fit:cover;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse,#000 24%,transparent 69%)}
#intro .my-ridge-summit>span{display:block;border-left:1px solid #bca57e;padding-left:12px;position:absolute;left:90%;top:34%;width:100px;text-align:left}
#intro .my-ridge-note{position:absolute;font:11px/2.1 Georgia,'Songti SC','SimSun',serif;color:#988b74;letter-spacing:.12em;white-space:pre-line;z-index:3;pointer-events:none}
#intro .my-ridge-note-left{left:5%;bottom:17%;padding-left:18px;border-left:1px solid #b89c6f;max-width:25%}
#intro .my-ridge-note-right{right:5%;bottom:10%;padding-right:18px;border-right:1px solid #b89c6f;text-align:right}
#intro .my-ridge-note-rule{display:block;height:12px}
#intro .my-ridge-mist{position:absolute;inset:30% -5% -12%;z-index:-1;background:#f4f3ef;opacity:.72;mask-image:url('/intro-assets/cloud-mask-v1.png');mask-mode:luminance;mask-repeat:no-repeat;mask-size:100% 100%;pointer-events:none}
/* Independent cloud texture protects the text without flattening the vista. */
#intro .my-final-clouds{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none}
#intro .my-final-clouds i{position:absolute;inset:12% -7% -12%;background:#f4f3ef;mask-image:url('/intro-assets/cloud-mask-v1.png');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat;opacity:.97;animation:my-mist-drift 32s ease-in-out infinite alternate}
#intro .my-final-clouds i+ i{inset:30% 18% -23% -28%;opacity:.75;transform:scaleX(-1);animation-direction:alternate-reverse;animation-duration:39s}
/* Feather the texture's bright side edges before the layer ends inside the
   viewport; the image itself has nonzero luminance along those edges. */
#intro .my-final-clouds i{mask-image:url('/intro-assets/cloud-mask-v1.png'),linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-mode:luminance,alpha;mask-composite:intersect}
#intro .my-final-note{position:absolute;right:5%;bottom:9%;z-index:5;border-right:1px solid #b89c6f;padding:3px 24px 3px 30px;margin:0;font:11px/2.25 Georgia,'Songti SC','SimSun',serif;color:#8e8b81;white-space:pre-line;text-align:right;letter-spacing:.26em;opacity:0;pointer-events:none}
#intro .my-final-note::after{content:'';position:absolute;right:-1px;top:0;width:2px;height:20px;background:linear-gradient(#af8c54,transparent)}
#intro .my-ridge-note-right{font-size:11px;line-height:2.2;letter-spacing:.18em;padding-right:24px}
#intro .my-ridge-note-right::before{content:'';position:absolute;inset:-25px -20px;z-index:-1;background:#f4f3ef;mask-image:url('/intro-assets/cloud-mask-v1.png');mask-mode:luminance;mask-size:100% 100%;opacity:.9}
#intro .my-final-note::before{content:'';position:absolute;inset:-24px -30px;z-index:-1;background:radial-gradient(ellipse,#f4f3eff5 25%,#f4f3efcc 48%,transparent 74%);filter:blur(9px)}
#intro[data-stage='7'] .my-caption h1>span{display:inline-block;white-space:nowrap}
#intro[data-stage='7'] .my-caption{left:5%;right:25%;bottom:11%;padding:8px 0 8px 22px;border-left:1px solid #b89c6f}
#intro[data-stage='7'] .my-caption small{font-size:11px;letter-spacing:.15em;color:#a48c64}
#intro[data-stage='7'] .my-caption h1{font-size:clamp(28px,3vw,48px);line-height:1.4;max-width:860px;color:#2f332e;font-weight:400;text-shadow:0 1px 10px #f4f3ef}
#intro[data-stage='7'] .my-caption p{color:#777267;font:15px/1.8 Georgia,'SimSun',serif}
#intro[data-stage='7'] .my-caption::before{left:-6vw;right:-10%;bottom:-12%;height:125%;background:radial-gradient(ellipse at 35% 65%,#f4f3efed 15%,#f4f3efb8 48%,transparent 76%);filter:blur(20px)}
#intro .my-exits a{border-color:#bca57e;color:#514c41;background:#f4f3ef99}
#intro .my-replay{right:84px}
@keyframes my-mist-drift{from{translate:-1% 1%}to{translate:1% -1%}}
@media(max-width:1100px) and (min-width:701px){
  #intro .my-build-skills .my-build-heading h2{font-size:52px}
  #intro .my-build-skills .my-build-heading p{font-size:15px}
  #intro .my-ridge-summit{top:15%;width:100px}
  #intro .my-ridge-summit>span{width:80px;font-size:10px}
}
@media(max-width:700px){
  #intro .my-build-skills .my-build-heading{left:22px;right:22px;top:16%;bottom:auto;width:auto}
  #intro .my-build-skills .my-build-heading h2{font-size:36px;line-height:1.2;margin:12px 0;white-space:pre-line;max-width:310px}
  #intro .my-build-skills .my-build-heading p{font-size:13px;max-width:320px}
  #intro .my-build-skills .my-build-source{font-size:11px;margin-top:8px}
  #intro .my-ridge-landscape{inset:33% -24% 3% -60%;background-position:65% center;mask-image:linear-gradient(transparent,#000 15%)}
  #intro .my-build-skills .my-skill-space{inset:40% 0 13% -19%}
  #intro .my-build-skills .my-build-mark{width:60px;min-height:60px;gap:3px;padding:5px}
  #intro .my-build-skills .my-build-mark img{width:29px;height:29px}
  #intro .my-build-skills .my-build-mark b{font-size:9px}
  #intro .my-build-skills .my-build-mark::after{height:24px}
  #intro .my-build-skills .my-build-mark::before{top:calc(100% + 22px)}
  #intro .my-build-skills .my-build-tooltip{width:125px;font-size:10px;bottom:110%;left:25%}
  #intro .my-ridge-summit{left:88%;top:3%;width:70px}
  #intro .my-ridge-summit img{width:57px;height:57px}
  #intro .my-ridge-summit>span{display:none}
  #intro .my-build-skills .my-skill-caption{left:24%;bottom:9%;max-width:65%;font-size:9px}
  #intro .my-build-skills .my-skill-caption strong{font-size:12px;margin-left:8px}
  #intro .my-ridge-note-left{left:22px;bottom:9%;max-width:60%;font-size:9px;padding-left:12px}
  #intro .my-ridge-note-left>span:first-child,#intro .my-ridge-note-rule{display:none}
  #intro .my-ridge-note-right{right:22px;bottom:9%;font-size:9px;max-width:40%;padding-right:10px}
  #intro .my-ridge-mist{inset:45% -10% -5%;opacity:.65}
  #intro[data-stage='7'] .my-caption{left:22px;right:22px;bottom:14%;padding-left:14px}
  #intro[data-stage='7'] .my-caption h1,#intro[data-stage='7'][data-language='en'] .my-caption h1{font-size:27px;line-height:1.35;max-width:100%}
  #intro[data-stage='7'] .my-caption p{font-size:12px}
  #intro .my-final-note{bottom:8.5%;right:22px;font-size:9px;padding:3px 10px;line-height:1.6}
  #intro .my-final-clouds i{inset:10% -45% -8%}
  #intro .my-final-clouds i+i{inset:25% -5% -20% -50%}
  #intro .my-replay{right:82px;bottom:3%}
}
@media(prefers-reduced-motion:reduce){#intro .my-final-clouds i{animation:none}}