/*
    Leica TPS 3D-tracking overlay
    A yellow total station fixed on the left aims a laser at a prism
    that rides the blue Work-Experience timeline as you scroll.
*/

#tps-tracker {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.45s ease;
}

#tps-tracker.tps-active {
    opacity: 1;
}

/* --- laser beam layer (full viewport) --- */
#tps-laser-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

#tps-beam {
    stroke: #ff2d2d;
    stroke-width: 1.6;
    stroke-linecap: round;
}

#tps-beam-glow {
    stroke: #ff5b5b;
    stroke-width: 6;
    stroke-linecap: round;
    opacity: 0.35;
    filter: url(#beam-blur);
}

#tps-hit {
    fill: #fff;
    stroke: #ff2d2d;
    stroke-width: 2;
}

/* blinking red laser emitter at the telescope lens */
#tps-emitter {
    fill: #ff2d2d;
    filter: url(#beam-blur);
    animation: tps-emit 0.9s steps(1) infinite;
}

@keyframes tps-emit {
    50% { opacity: 0.15; }
}

/* --- the total station --- */
#tps-station {
    position: fixed;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    width: 110px;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
}

#tps-station-img {
    display: block;
    width: 100%;
    height: auto;
}

.tps-reading {
    display: block;
    margin-top: 6px;
    text-align: center;
    font-family: "Lato", monospace, sans-serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #ff2d2d;
    text-transform: uppercase;
}

.tps-reading::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #ff2d2d;
    vertical-align: middle;
    animation: tps-blink 1.1s steps(1) infinite;
}

@keyframes tps-blink {
    50% { opacity: 0.2; }
}

/* --- the tracked prism --- */
#tracking-prism {
    position: fixed;
    left: 0;
    top: 0;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px; /* center on its computed point */
    will-change: transform;
}

#tracking-prism-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 45, 45, 0.55));
}

#tracking-prism::after {
    /* pulsing target ring */
    content: "";
    position: absolute;
    inset: -8px;
    border: 1.5px solid rgba(92, 220, 255, 0.7);
    border-radius: 50%;
    animation: tps-ring 1.8s ease-out infinite;
}

@keyframes tps-ring {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* --- timeline marker reacts when the prism passes over it --- */
.vtimeline-icon {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.vtimeline-icon.tps-locked {
    background: #2980b9;
    transform: scale(1.18);
    box-shadow: 0 0 0 6px rgba(52, 152, 219, 0.25), 0 0 18px rgba(255, 45, 45, 0.55);
}

/* --- scroll-driven paver under the About section --- */
#paver-track {
    position: relative;
    margin-top: 40px;
    height: 96px;
    border-radius: 6px;
    /* let the machine overflow; backgrounds/paved stay within the box */
    overflow: visible;
    /* unpaved ground ahead of the machine: rough, worn, cracked asphalt */
    background-color: #5a5f68;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='96'%3E%3Crect%20width='220'%20height='96'%20fill='%235a5f68'/%3E%3Cg%20fill='%23515660'%3E%3Cpolygon%20points='10,8%2040,4%2054,22%2030,30'/%3E%3Cpolygon%20points='150,50%20190,44%20210,66%20168,74'/%3E%3Cpolygon%20points='90,58%20120,70%20100,90%2076,80'/%3E%3C/g%3E%3Cg%20stroke='%232b2f35'%20stroke-width='1.4'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M0,22%20L24,28%20L40,18%20L66,32%20L92,24%20L120,40%20L150,28%20L186,42%20L220,32'/%3E%3Cpath%20d='M30,0%20L36,20%20L26,38%20L42,56%20L32,78%20L46,96'/%3E%3Cpath%20d='M120,40%20L130,58%20L118,76%20L132,96'/%3E%3Cpath%20d='M150,28%20L168,20%20L196,30'/%3E%3Cpath%20d='M66,32%20L74,48%20L62,62'/%3E%3C/g%3E%3Cg%20stroke='%23797e86'%20stroke-width='0.6'%20fill='none'%20opacity='0.5'%3E%3Cpath%20d='M0,24%20L24,30%20L40,20%20L66,34'/%3E%3Cpath%20d='M31,1%20L37,21%20L27,39'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
}

/* fresh asphalt laid behind the machine (width set by JS) */
#paver-paved {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background:
        repeating-linear-gradient(90deg, #ffcd00 0 22px, transparent 22px 60px) center/100% 4px no-repeat,
        linear-gradient(#23272e, #181b20);
    box-shadow: inset -14px 0 18px -10px rgba(0,0,0,0.6);
}

#paver-machine {
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 132px;
    height: auto;
    transform: translateX(0);
    will-change: transform;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,0.5));
}

@media (max-width: 768px) {
    #paver-track { height: 72px; margin-top: 28px; }
    #paver-machine { width: 96px; bottom: 4px; }
}

/* --- University Education: circuit backdrop, robots, draw-on formulas --- */
.uni-edu { position: relative; overflow: hidden; }

/* keep the real content above the backdrop */
.uni-edu > .heading,
.uni-edu > .education-block { position: relative; z-index: 1; }

#uni-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#uni-circuit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#uni-traces path {
    vector-effect: non-scaling-stroke;
    opacity: 0.45;
    /* stroke-dasharray / dashoffset set per-path in JS for the draw-on */
}

#uni-nodes circle {
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#uni-nodes circle.on {
    opacity: 1;
    animation: tps-blink 1.4s steps(1) infinite;
}

/* top-down line-follower robots (positioned along their trace in JS) */
.uni-bot {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: auto;
    will-change: transform;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
}
.uni-bot .uni-eye { animation: tps-blink 1.6s steps(1) infinite; }
.uni-bot .uni-sensor { animation: tps-blink 0.7s steps(1) infinite; }

/* draw-on formulas */
.uni-formula {
    position: absolute;
    font-family: "Lato", "Cambria Math", serif;
    font-size: 1.7rem;
    font-weight: 700;
    font-style: italic;
    color: #eaf4fb;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(74, 168, 224, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
    /* revealed left-to-right via clip-path inset set in JS */
    clip-path: inset(0 100% 0 0);
}
.uni-formula sup { font-size: 0.7em; }
.uni-fx-left  { left: 2.5%; }
.uni-fx-right { right: 2.5%; text-align: right; }

/* caret / chalk tip at the writing front */
.uni-formula span { position: relative; }
.uni-formula.writing span::after {
    content: "";
    position: absolute;
    right: -3px; top: 0; bottom: 0;
    width: 2px;
    background: #ffcd00;
    box-shadow: 0 0 6px #ffcd00;
}

@media (max-width: 1000px) {
    .uni-formula { font-size: 1.25rem; }
    .uni-bot { width: 30px; }
}
@media (max-width: 820px) {
    .uni-formula { display: none; }       /* no gutter room beside the cards */
}
@media (max-width: 700px) {
    .uni-bot { display: none; }
}

/* --- Courses & Certifications: study props (books, glasses, pencils) --- */
.courses-fx-host { position: relative; overflow: hidden; }
.courses-fx-host > .heading,
.courses-fx-host > .education-block { position: relative; z-index: 1; }

#courses-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.study-item {
    position: absolute;
    opacity: 0.9;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    will-change: transform;
    /* transform (scroll parallax + rotation) is set in JS */
}

.study-books   { width: 120px; left: 2.5%;  top: 16%; }
.study-glasses { width: 116px; right: 2.8%; top: 22%; }
.study-pencil  { width: 22px; }
.study-pencil-1 { left: 4%;   bottom: 14%; transform: rotate(18deg); }
.study-pencil-2 { right: 4.5%; bottom: 18%; transform: rotate(-24deg); }

@media (max-width: 1000px) {
    .study-books   { width: 86px; }
    .study-glasses { width: 84px; }
}
@media (max-width: 760px) {
    .study-item { display: none; }
}

/* --- gentle scroll-reveal for the refresh --- */
.tps-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.tps-reveal.tps-in {
    opacity: 1;
    transform: none;
}

/* --- mobile: simplified, static station, no heavy tracking --- */
@media (max-width: 900px) {
    #tps-station {
        left: 8px;
        width: 66px;
    }
    .tps-reading { font-size: 7px; letter-spacing: 1px; }
    #tracking-prism { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}

@media (prefers-reduced-motion: reduce) {
    #tracking-prism::after,
    #tps-emitter,
    .tps-reading::before,
    .study-item,
    .uni-bot .uni-eye,
    .uni-bot .uni-sensor {
        animation: none;
    }
    .tps-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}