/* Normal document flow: generous spacing, no full-screen sections or snap. */
.presentation-screen{scroll-margin-top:0}
.automation-screen,.flowtone-screen{padding:42px 0}
.automation-screen .project-pair,.flowtone-screen .flowtone-project{margin-top:0}
.contact-screen{display:flow-root}
.screen-nav{display:none;position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:15;flex-direction:column;align-items:center;gap:4px}
.presentation-mode .screen-nav{display:flex}
.screen-nav button{display:grid;place-items:center;width:30px;height:30px;background:none;border:0;border-radius:50%;padding:0;cursor:pointer}
.screen-dot{width:7px;height:7px;border:1px solid var(--muted);border-radius:50%;background:var(--bg)}
.screen-nav button[aria-current] .screen-dot{background:var(--accent);border-color:var(--accent)}
.screen-nav button:hover .screen-dot{border-color:var(--accent)}
.screen-counter{font-size:8px;line-height:1.7;color:var(--muted);margin-top:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.voidex-cover .v-star{font-size:104px;left:16px;bottom:128px}
.voidex-cover .cover-footer{justify-content:flex-end}
@media(min-width:900px){
 .presentation-screen{padding:60px 0;box-sizing:border-box}
 .intro-screen{padding:0}
 .intro-screen .hero{padding:35px 0}
 .work-section.presentation-screen{padding:60px 0}
 .automation-screen .section-heading{margin-bottom:30px}
 .about-section.presentation-screen{display:grid;align-content:center;align-items:center;margin-top:0;padding:65px 0}
 .experience-section.presentation-screen{padding:60px 0}
 .contact-screen{padding:45px 0}
 .contact-screen .contact-section{width:100%;margin:0}
 .presentation-mode{scroll-behavior:auto}
}
@media(min-width:900px) and (max-height:760px){
 .presentation-screen:not(.intro-screen){padding-top:40px;padding-bottom:40px}
 .intro-screen .hero{padding-top:25px;padding-bottom:25px}
 .intro-screen .hero-visual{min-height:430px}
 .intro-screen .hero h1{font-size:clamp(53px,5.2vw,72px)}
}
@media(max-width:1100px){.voidex-cover .v-star{font-size:92px;left:12px;bottom:124px}}
@media(max-width:899px){
 .screen-nav{display:none!important}
 .intro-screen{padding:0}
 .automation-screen,.flowtone-screen{padding:35px 0}
 .voidex-cover .v-star{font-size:80px;left:12px;bottom:110px}
 .voidex-cover .v-glyph{left:24px}
}
@media(max-width:440px){.voidex-cover .v-star{font-size:70px;left:4px;bottom:106px}}
@media(prefers-reduced-motion:reduce){.screen-nav{display:none!important}.presentation-screen{scroll-snap-align:none}}
@media print{.screen-nav{display:none!important}.presentation-screen{min-height:0!important;padding:20px 0!important;break-inside:avoid}.intro-screen .hero{padding:0}}

/* Hero mechanism — same eight-ray motif as the project illustrations. */
.intro-screen .hero-visual.mechanism {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; min-height:440px;
  min-width:0; padding:0; margin:0; background:transparent; color:var(--accent);
}
.mechanism-stage {
  position:relative; width:min(100%, 440px); aspect-ratio:1; pointer-events:none;
}
.mechanism-orbit {
  position:absolute; border:1px solid var(--line); border-radius:50%;
  width:82%; height:82%; top:9%; left:9%;
}
.mechanism-orbit--b {width:58%; height:58%; top:21%; left:21%; border-style:dashed; opacity:.65}
.mechanism-star {position:absolute; display:block; overflow:visible; transform-origin:center}
.mechanism-star--main {width:76%; height:76%; top:14%; left:2%; color:var(--accent)}
.mechanism-star--mid {width:36%; height:36%; top:6%; left:62%; color:var(--muted)}
.mechanism-star--small {width:21%; height:21%; top:67%; left:68%; color:var(--accent)}
.mechanism-star--mid path {stroke-width:2.2}
.mechanism-dot {position:absolute; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.mechanism-dot--a {top:12%; left:30%}
.mechanism-dot--b {top:85%; left:31%}
.mechanism-label {position:absolute; color:var(--muted); font-size:10px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase}
.mechanism-label--data {top:1%; left:12%}
.mechanism-label--code {top:47%; right:0}
.mechanism-label--solution {bottom:0; left:44%}
.mechanism.motion-active .mechanism-star--main {animation:mechanism-turn 48s linear infinite}
.mechanism.motion-active .mechanism-star--mid {animation:mechanism-turn 36s linear infinite reverse}
.mechanism.motion-active .mechanism-star--small {animation:mechanism-turn 28s linear infinite}
@keyframes mechanism-turn {to{transform:rotate(360deg)}}
@media(max-width:900px) {
  .intro-screen .hero-visual.mechanism {min-height:340px}
  .mechanism-stage {width:min(100%, 360px)}
}
@media(max-width:560px) {
  .intro-screen .hero-visual.mechanism {min-height:0; padding-block:24px}
  .mechanism-stage {width:min(100%, 330px)}
  .mechanism-label {font-size:9px}
}
@media(prefers-reduced-motion:reduce) {
  .mechanism .mechanism-star {animation:none!important; transform:none!important}
}
@media print {.mechanism{display:none!important}}