/* DAP STUDIO / SCROLL CINEMA v1.0 ---------------------------------------------
   Per-section choreography. CSS is opt-in: nothing is hidden until the companion
   JavaScript has installed an IntersectionObserver. No backend changes required.
   Respect reduced-motion and preserve interactive controls / CMS-generated order.
   ------------------------------------------------------------------------- */
.cinema-scroll-track{position:fixed;inset:0 0 auto;z-index:99;height:3px;pointer-events:none;background:rgba(65,92,181,.16)}
.cinema-scroll-track>span{height:100%;width:100%;display:block;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#23d6a2,var(--b),var(--a),#cf7eff);box-shadow:0 0 14px color-mix(in srgb,var(--a) 58%,transparent);will-change:transform}
/* Section arrival: seven distinct directions / treatments */
.cinema-ready .sec>.wrap{opacity:0;transition:opacity .85s cubic-bezier(.18,.72,.19,1),transform 1.05s cubic-bezier(.18,.8,.15,1),clip-path 1.08s cubic-bezier(.18,.72,.19,1),filter .95s ease;will-change:opacity,transform}
.cinema-ready .sec:not(.cinema-active)>.wrap{pointer-events:none}
.cinema-ready .sec.cinema-active>.wrap{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0);pointer-events:auto}
.cinema-ready #about:not(.cinema-active)>.wrap{transform:perspective(1200px) translate3d(-74px,26px,0) rotateY(-6deg);filter:blur(4px)}
.cinema-ready #skills:not(.cinema-active)>.wrap{transform:perspective(1100px) translate3d(0,88px,0) rotateX(10deg) scale(.94);filter:brightness(.5)}
.cinema-ready #portfolio:not(.cinema-active)>.wrap{transform:translate3d(0,12px,0) scale(.99);clip-path:inset(0 0 93% 0 round 22px)}
.cinema-ready #experience:not(.cinema-active)>.wrap{transform:translate3d(-105px,0,0) skewY(1.6deg);filter:blur(5px)}
.cinema-ready #education:not(.cinema-active)>.wrap{transform:translate3d(105px,0,0) skewY(-1.6deg);filter:blur(5px)}
.cinema-ready #testimonials:not(.cinema-active)>.wrap{transform:perspective(1300px) translate3d(0,100px,0) scale(.83) rotateX(-5deg);filter:brightness(.4)}
.cinema-ready #contact:not(.cinema-active)>.wrap{transform:scale(1.12) translate3d(0,32px,0);filter:blur(12px)}
.cinema-ready .sec:not(.cinema-active):not(#about):not(#skills):not(#portfolio):not(#experience):not(#education):not(#testimonials):not(#contact)>.wrap{transform:translate3d(0,70px,0)}
/* Transition-specific visual accents, animated only when the section enters */
.cinema-ready .sec::before{content:"";position:absolute;top:0;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,var(--a),var(--b),transparent);opacity:.6;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.22,.8,.19,1);pointer-events:none}
.cinema-ready .sec.cinema-active::before{transform:scaleX(1)}
.cinema-ready #education::before{transform-origin:right center}
.cinema-ready #portfolio::before{background:linear-gradient(90deg,transparent,#36cfef,var(--a),transparent)}
.cinema-ready #experience::before{background:linear-gradient(90deg,transparent,#14d5a0,transparent)}
.cinema-ready #contact::before{background:linear-gradient(90deg,transparent,#e0c5ff,var(--a),transparent)}
.cinema-ready .sec.cinema-active .xl-title span{animation:cinemaTitleShine 1.3s cubic-bezier(.16,.8,.28,1) both}
@keyframes cinemaTitleShine{0%{filter:brightness(2);text-shadow:0 0 45px color-mix(in srgb,var(--a) 75%,transparent)}100%{filter:brightness(1);text-shadow:none}}
.cinema-ready #portfolio.cinema-active .nas{animation:cinemaHudPulse .95s .3s both}
@keyframes cinemaHudPulse{0%{filter:brightness(.6)}45%{filter:brightness(1.25)}100%{filter:none}}
.cinema-ready #contact.cinema-active .contact-form{animation:cinemaContactGlow 1.2s .25s both}
@keyframes cinemaContactGlow{0%{box-shadow:0 0 55px -12px color-mix(in srgb,var(--b) 75%,transparent)}100%{box-shadow:var(--sh) var(--sh) 0 var(--a)}}
/* Skill rack power-on sequence. Keep buttons usable after automatic boot. */
.rack-boot-status{display:flex;align-items:center;gap:9px;min-height:35px;margin:0 14px 14px;padding:7px 12px;border:1px dashed #303e65;border-radius:10px;background:#060d1c;color:#7582a6;font:700 9.5px/1.4 var(--fm);letter-spacing:.095em}
.rack-boot-light{height:8px;width:8px;flex:none;border-radius:50%;background:#394560;box-shadow:0 0 0 2px #172136;transition:background .35s,box-shadow .35s}
.rack-boot-label{flex:1;min-width:0}.rack-boot-count{white-space:nowrap;color:#a1aac7}
.rack-boot-status.is-booting{color:#76c3fa;border-color:#315582}
.rack-boot-status.is-booting .rack-boot-light{background:#f9c74c;box-shadow:0 0 12px #f9c74c;animation:cinemaBootBlink .5s steps(2) infinite}
.rack-boot-status.is-online{color:#5fedc5;border-color:#1d835e;background:#071a17}
.rack-boot-status.is-online .rack-boot-light{background:#23e4a1;box-shadow:0 0 12px #23e4a1}
@keyframes cinemaBootBlink{50%{opacity:.25}}
#skills .unit{transition:transform .3s var(--ease),box-shadow .3s,opacity .38s,filter .38s,background .38s}
#skills .unit.is-off{opacity:.45;filter:grayscale(.8)}
#skills .unit.is-off .u-load i::after{width:0!important;transition:none}
#skills .unit.is-off .u-ico{filter:grayscale(1);color:#53617e}
#skills .unit.is-off .u-switch{border-color:#2a355a;background:#141b33}
#skills .unit.is-off .u-switch i{transform:translateX(0);color:#64748b;background:#e2e8f0}
#skills .unit.is-booting{animation:cinemaUnitPower .56s cubic-bezier(.19,.75,.2,1) both}
@keyframes cinemaUnitPower{0%{transform:translateX(-16px) scale(.982);filter:brightness(1.9);box-shadow:inset 4px 0 0 var(--c),0 0 0 1px var(--c)}45%{filter:brightness(1.45);box-shadow:inset 4px 0 0 var(--c),0 0 32px -3px var(--c)}100%{transform:none;filter:none;box-shadow:inset 4px 0 0 var(--c),0 0 0 transparent}}
#skills.cinema-active .rack{transition:box-shadow 1s ease}
#skills.cinema-active .rack-plate{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--a) 35%,transparent))}
/* Coordinated timeline expansion, quote cascading and project indicator */
.cinema-ready #experience.cinema-active .chron-item,.cinema-ready #education.cinema-active .chron-item{animation:cinemaChronicle .78s cubic-bezier(.2,.85,.2,1) both;animation-delay:var(--cinema-stagger,0ms)}
@keyframes cinemaChronicle{from{opacity:.2;transform:translateX(-24px)}to{opacity:1;transform:none}}
.cinema-ready #education.cinema-active .chron-item{animation-name:cinemaChronicleRight}
@keyframes cinemaChronicleRight{from{opacity:.2;transform:translateX(24px)}to{opacity:1;transform:none}}
.cinema-ready #testimonials.cinema-active .quote{animation:cinemaQuote .78s cubic-bezier(.18,.8,.2,1) both;animation-delay:var(--cinema-stagger,0ms)}
@keyframes cinemaQuote{0%{opacity:0;transform:translateY(42px) scale(.92)}70%{transform:translateY(-5px) scale(1.01)}100%{opacity:1;transform:none}}
/* keep interactivity predictable: no global scroll hijacking or pinned sections */
@media (max-width:760px){
  .cinema-ready #about:not(.cinema-active)>.wrap,.cinema-ready #experience:not(.cinema-active)>.wrap{transform:translate3d(-30px,22px,0)}
  .cinema-ready #education:not(.cinema-active)>.wrap{transform:translate3d(30px,22px,0)}
  .cinema-ready #skills:not(.cinema-active)>.wrap{transform:translate3d(0,44px,0) scale(.96)}
  .cinema-ready #testimonials:not(.cinema-active)>.wrap{transform:translate3d(0,48px,0) scale(.95)}
  .cinema-ready #contact:not(.cinema-active)>.wrap{transform:translateY(26px) scale(1.03);filter:blur(4px)}
  .rack-boot-status{margin:0 0 14px;letter-spacing:0;font-size:9px}
  .cinema-ready .sec>.wrap{transition-duration:.75s}
}
@media(prefers-reduced-motion:reduce){
  .cinema-ready .sec>.wrap,.cinema-ready .sec:not(.cinema-active)>.wrap{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;pointer-events:auto!important}
  .cinema-ready .sec .xl-title span,.cinema-ready .sec .chron-item,.cinema-ready .sec .quote,.cinema-ready .sec .contact-form,.unit.is-booting{animation:none!important}
  .cinema-scroll-track>span{box-shadow:none}
}
/* In a no-JavaScript session, content remains readable. */
.no-js #skills .unit.is-off{opacity:1;filter:none}