/* Frame 03 — original interactive number composition, on the SAME
 * full-bleed mountain film, fixed header/footer and continuous grid.
 * Approved Frame 01 and Frame 02 source code/media are unchanged.
 */
.chapter-three{
 position:absolute;inset:0;z-index:19;overflow:hidden;
 display:flex;flex-direction:column;justify-content:center;align-items:stretch;
 opacity:0;visibility:hidden;pointer-events:none;color:#fff;
}
.chapter-three.is-visible{visibility:visible}
.chapter-three::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,rgba(18,12,27,.47),rgba(23,10,34,.18) 31%,rgba(19,9,28,.15) 72%,rgba(15,8,25,.53));
}
.chapter-three-kicker{
 position:absolute;z-index:2;left:50%;top:14%;transform:translateX(-50%);
 display:flex;align-items:center;justify-content:center;gap:18px;
 text-align:center;white-space:nowrap;color:#f5e9fc;
 font:750 10px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.23em;
 opacity:0;transition:opacity .65s ease,transform .7s ease;
}
.chapter-three.is-visible .chapter-three-kicker{opacity:.9;transform:translateX(-50%) translateY(-3px)}
.kicker-line{width:30px;height:1px;background:#d8b4fc}
.third-composition{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,36vw) minmax(0,1fr);
 align-items:center;gap:1vw;width:100%;padding:0 4.0%;position:relative;
 min-height:400px;z-index:2;isolation:isolate;pointer-events:none;
}
.side-statement{
 font-size:clamp(32px,3.8vw,69px);font-weight:390;line-height:1.06;
 letter-spacing:-.06em;text-shadow:0 5px 26px rgba(13,5,20,.28);
 white-space:nowrap;position:relative;z-index:5;pointer-events:none;
}
.side-left{text-align:right}
.side-right{text-align:left}
.side-statement span{
 display:block;opacity:0;filter:blur(7px);
 transform:translateY(30px);transition:opacity .7s ease,filter .8s ease,transform .95s cubic-bezier(.17,.72,.17,1);
}
.chapter-three.is-visible .side-statement span{opacity:1;filter:blur(0);transform:translateY(0)}
.chapter-three.is-visible .side-statement span:nth-child(1){transition-delay:.16s}
.chapter-three.is-visible .side-statement span:nth-child(2){transition-delay:.29s}
.twenty-hotspot{
 position:relative;z-index:5;justify-self:center;
 background:none;border:0;border-radius:20px;
 width:min(100%,640px);aspect-ratio:600 / 390;
 padding:0;margin:0;cursor:crosshair;
 display:block;pointer-events:auto;isolation:isolate;
 touch-action:manipulation;
}
.twenty-hotspot:focus-visible{outline:2px solid #d9bcff;outline-offset:8px}
#twenty-svg{position:relative;z-index:2;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 15px 28px rgba(18,7,34,.34));pointer-events:none}
.twenty-piece{
 opacity:0;transform:translate(var(--offset-x,0px),var(--offset-y,0px)) rotate(var(--angle,0deg));
 transform-box:fill-box;transform-origin:center;
 transition:transform 570ms cubic-bezier(.14,.76,.16,1.21),opacity .4s ease;
 will-change:transform;
}
/* The number stays fully assembled and stationary on scene entry.
   Only direct pointer interaction with the number changes shard offsets. */
.chapter-three.is-visible .twenty-piece{
 opacity:1;
 animation:none;
}
.twenty-glow{
 position:absolute;inset:12%;z-index:-1;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle at 50% 48%,rgba(241,190,255,.14),transparent 70%);
 filter:blur(16px);opacity:.55;transform:scale(.88);
 transition:transform .4s ease,opacity .4s ease;
}
.twenty-hotspot[data-reacting="true"] .twenty-glow{transform:scale(1.2);opacity:1}
.chapter-three-bottom{
 position:absolute;bottom:13%;left:50%;transform:translate(-50%,18px);
 opacity:0;white-space:nowrap;font:760 11px/1.45 ui-monospace,Consolas,monospace;
 letter-spacing:.21em;color:#dfe6f5;text-align:center;
 transition:transform .75s ease .42s,opacity .75s ease .42s;
}
.chapter-three-bottom span{color:#edbaff;margin:0 12px}
.chapter-three.is-visible .chapter-three-bottom{opacity:.93;transform:translate(-50%,0)}
/* Frame 02 leaves gently. The backdrop/video stays exactly where it is. */
.chapter-two{transition:opacity .44s linear,visibility 0s .15s}
.chapter-two.is-visible{transition:opacity .44s linear,visibility 0s}
body.frame-three-active .portal-shade{
 background:linear-gradient(0deg,rgba(8,10,29,.36),rgba(17,6,28,.12) 50%,rgba(7,6,23,.23));
}
body.frame-three-active .wheel-hint{opacity:0!important}
body.frame-three-active .portal-navigation{z-index:30}
body.frame-three-active .gridlines{opacity:.72}
/* Keep minimalist chrome and the full-length grid from Frame 02. */
@media(max-width:1120px){
 .third-composition{grid-template-columns:minmax(0,1fr) minmax(260px,42vw) minmax(0,1fr);gap:0;padding:0 3%}
 .side-statement{font-size:clamp(28px,3.55vw,49px)}
}
@media(max-width:760px){
 .chapter-three-kicker{top:12%;font-size:9px;letter-spacing:.1em}
 .third-composition{
   display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
   align-items:center;justify-items:center;row-gap:0;
   min-height:0;width:100%;padding:0 6%;
 }
 .twenty-hotspot{grid-column:1 / 3;grid-row:1;width:min(80vw,440px);aspect-ratio:600 / 390}
 .side-statement{
   grid-row:2;white-space:normal;text-align:center;
   font-size:clamp(27px,4.7vw,42px);line-height:1.02;justify-self:stretch;
 }
 .side-left{grid-column:1}.side-right{grid-column:2}
 .chapter-three-bottom{bottom:13%;font-size:9px;letter-spacing:.08em}
 .chapter-three-bottom span{margin:0 6px}
}
@media(max-width:470px){
 .chapter-three-kicker{top:12%;font-size:8px;letter-spacing:.05em;gap:10px}
 .kicker-line{width:16px}
 .third-composition{padding:0 5%;row-gap:7px;margin-top:-3%}
 .twenty-hotspot{width:min(89vw,370px)}
 .side-statement{font-size:clamp(24px,6.5vw,34px)}
 .chapter-three-bottom{bottom:14%;font-size:8px;white-space:normal;width:86%;letter-spacing:.06em}
 .chapter-three-bottom span{margin:0 3px}
}
@media(max-height:680px){
 .chapter-three-kicker{top:10%}
 .chapter-three-bottom{bottom:12%}
 .third-composition{transform:scale(.82)}
}
@media(prefers-reduced-motion:reduce){
 .chapter-three,.chapter-three *{animation:none!important;transition:none!important}
 .chapter-three.is-visible .twenty-piece{opacity:1;transform:none!important}
 .chapter-three.is-visible .side-statement span{opacity:1;filter:none;transform:none}
}

/* Keep the original fixed footer unobstructed at every breakpoint.
   Extra lower text is intentionally omitted: the footer already lists skills. */
.portal-navigation{bottom:calc(var(--footer-h) + 25px)!important;right:3.4%}
@media(max-width:760px){
  .portal-navigation{bottom:calc(var(--footer-h) + 19px)!important;right:5%}
}

/* Frame 03: disable page-wide mouse traces and parallax visually.
   The only pointer-responsive artwork is the fixed '20'. */
body.frame-three-active #pointer-pattern{opacity:0!important}
body.frame-three-active .twenty-hotspot{transform:none!important}
body.frame-three-active #twenty-svg{transform:none!important}