/* =========================================================
   MOTION.CSS  (load AFTER style.css)
   Only animation lives here. Layout and sizes live in style.css.
   1. Scrollbar
   2. Section start animations
   3. Section end animations (values are set by index.js)
   4. Projects cards -> tags
   5. Contact gate entrance
   6. Contact panel zoom-in from the button
   7. Low-power / reduced motion
   ========================================================= */

:root {
    --ease: cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   1. CUSTOM SCROLLBAR (white, rounded, no border)
   ========================================================= */

html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-track {
    background: #000;
}

html::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover {
    background: #d0cdcd;
}

/* Firefox */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #fff #000;
    }
}


/* =========================================================
   2. SECTION START (no headings, only text, buttons and cards)
   index.js adds .rv (hidden) and .on (play) automatically
   ========================================================= */

.rv:not(.on) {
    opacity: 0;
}

.rv.on {
    animation: var(--fx) 0.8s var(--ease) calc(var(--d, 0) * 80ms) backwards;
}

.rv-up   { --fx: rvUp; }
.rv-drop { --fx: rvDrop; }
.rv-pop  { --fx: rvPop; }
.rv-rise { --fx: rvRise; }

@keyframes rvUp   { from { opacity: 0; transform: translateY(32px); } }
@keyframes rvDrop { from { opacity: 0; transform: translateY(-40px); } }
@keyframes rvPop  { from { opacity: 0; transform: translateY(22px) scale(0.85); } }
@keyframes rvRise { from { opacity: 0; transform: translateY(10%); } }


/* =========================================================
   3. SECTION END
   index.js moves these while you scroll out of the section
   ========================================================= */

.contentAbout  { transform-origin: 50% 100%; }
.contentStacks { transform-origin: 50% 0; }


/* =========================================================
   4. PROJECTS: cards -> tags (index.js moves them with the scroll)
   ========================================================= */

.projectsList > .projectCard {
    margin-bottom: var(--gap, 50px);     /* space between stacked cards */
    will-change: transform, opacity;
}

/* index.js sets the tag's transform + opacity inline,
   so the hover lift uses the separate "translate" property */
.tagCard {
    transition: translate 0.3s ease;
}

.projectsList.gridOn .tagCard:hover {
    translate: 0 -8px;
}


/* =========================================================
   5. CONTACT GATE ENTRANCE
   index.js adds .inView when the gate is mostly on screen.
   Order: dot grid -> name -> line + button -> icons one by one
   ========================================================= */

#contactGate::before {
    opacity: 0;
    transition: opacity 1.4s ease 0.2s;
}

#contactGate.inView::before {
    opacity: 1;
}

#contactGate:not(.inView) :is(.gateGhost, .gateAction, .gateSocials a) {
    opacity: 0;
}

#contactGate.inView .gateGhost {
    animation: gateName 1.2s var(--ease) 0.1s backwards;
}

#contactGate.inView .gateAction {
    animation: gateRise 0.9s var(--ease) 0.55s backwards;
}

#contactGate.inView .gateSocials a {
    animation: gatePop 0.7s var(--ease) calc(0.9s + var(--n, 0) * 90ms) backwards;
}

.gateSocials a:nth-child(2) { --n: 1; }
.gateSocials a:nth-child(3) { --n: 2; }
.gateSocials a:nth-child(4) { --n: 3; }
.gateSocials a:nth-child(5) { --n: 4; }
.gateSocials a:nth-child(6) { --n: 5; }

@keyframes gateName { from { opacity: 0; transform: translateY(60px); filter: blur(14px); } }
@keyframes gateRise { from { opacity: 0; transform: translateY(32px); } }
@keyframes gatePop  { from { opacity: 0; transform: translateY(24px) scale(0.6); } }


/* =========================================================
   6. CONTACT PANEL: zooms in from the gate button
   (index.js sets --ox / --oy to the button centre)
   ========================================================= */

.contact {
    clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
    transform-origin: var(--ox, 50%) var(--oy, 50%);
    transform: scale(0.6);
    transition:
        clip-path 0.8s var(--ease),
        transform 0.8s var(--ease),
        opacity 0.3s ease 0.5s,
        visibility 0s linear 0.8s;
}

.contact.open {
    clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 50%));
    transform: none;
    transition:
        clip-path 0.8s var(--ease),
        transform 0.8s var(--ease),
        opacity 0.2s ease,
        visibility 0s;
}


/* =========================================================
   7. LOW-POWER MODE (added by index.js on slow machines
      or when the system "reduce motion" setting is on)
   ========================================================= */

.lite .rv:not(.on) { opacity: 1; }
.lite .rv.on       { animation: none; }

.lite #contactGate::before { opacity: 1; transition: none; }
.lite #contactGate:not(.inView) :is(.gateGhost, .gateAction, .gateSocials a) { opacity: 1; }
.lite #contactGate.inView :is(.gateGhost, .gateAction, .gateSocials a) { animation: none; }