/* ==================================================================
   V7 PORTFOLIO CSS — Motion & Interaction Overhaul
   Dark default, custom cursor, tilt cards, spotlights, marquee.
   ================================================================== */

:root, [data-theme="dark"] {
    --bg:       #0a0a0a;
    --bg-alt:   #111110;
    --surface:  #1a1918;
    --ink:      #edebe8;
    --ink-2:    #8a8884;
    --ink-3:    #555350;
    --rule:     #1f1e1d;
    --accent:   #e8451c;
    --accent-dim: rgba(232,69,28,.08);
    --amber:    #f59e0b;
    --emerald:  #10b981;
    --green:    #22c55e;

    --sans:     'Syne', system-ui, sans-serif;
    --body:     'Inter', system-ui, sans-serif;
    --mono:     'JetBrains Mono', monospace;

    --t-xs:     .75rem;
    --t-sm:     .875rem;
    --t-base:   1rem;
    --t-lg:     1.4rem;
    --t-xl:     1.96rem;
    --t-2xl:    2.75rem;
    --t-3xl:    3.85rem;
    --t-hero:   clamp(3.5rem, 8.5vw, 7.5rem);

    --radius:   6px;
    --ease:     cubic-bezier(.16,1,.3,1);
}

[data-theme="light"] {
    --bg:       #f8f7f4;
    --bg-alt:   #f0eeea;
    --surface:  #e8e6e2;
    --ink:      #1a1918;
    --ink-2:    #6b6965;
    --ink-3:    #9e9a96;
    --rule:     #d5d2cd;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
    font-family:var(--body);background:var(--bg);color:var(--ink);
    line-height:1.6;overflow-x:hidden;
    transition:background .4s, color .4s;
}
/* Hide scrollbar for lenis */
html.lenis, html.lenis body {height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
.lenis.lenis-stopped {overflow: hidden;}
.lenis.lenis-smooth iframe {pointer-events: none;}

a{color:inherit;text-decoration:none}
button{background:none;border:none;color:inherit;font:inherit;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

.wrap{max-width:1120px;margin:0 auto;padding:0 2rem}

/* ==================================================================
   CUSTOM CURSOR
   ================================================================== */
.cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
}
.cursor-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink);
    transition: width .2s, height .2s, opacity .2s;
}
.cursor-ring {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--ink-3);
    transition: width .2s, height .2s, border-color .2s;
}
body:hover .cursor-dot, body:hover .cursor-ring { opacity: 1; }
@media(max-width: 768px) {
    .cursor-dot, .cursor-ring { display: none !important; }
}

/* Cursor active states */
body.cursor-active .cursor-dot {
    width: 50px; height: 50px;
    background: var(--ink);
    opacity: 0.1;
    mix-blend-mode: difference;
}
body.cursor-active .cursor-ring { opacity: 0; }

/* ==================================================================
   NAV
   ================================================================== */
.nav{
    position:fixed;top:0;width:100%;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:1rem 2rem;
    background:rgba(10,10,10,.7);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--rule);
    transition:background .4s, border-color .4s, transform .3s;
}
[data-theme="light"] .nav{background:rgba(248,247,244,.8)}
.nav.hidden { transform: translateY(-100%); }

.nav-logo{
    font-family:var(--sans);font-weight:800;font-size:.9rem;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border:1.5px solid var(--ink);transition:border-color .2s, color .2s;
}
.nav-logo:hover{border-color:var(--accent);color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:2rem}
.nav-links{display:none;gap:1.5rem}
@media(min-width:900px){.nav-links{display:flex}}
.nav-links a{
    font-size:var(--t-sm);color:var(--ink-2);position:relative;
    transition:color .2s;padding-bottom:2px;
}
.nav-links a::after{
    content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
    background:var(--accent);transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}

.theme-toggle{
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:background .2s;
}
.theme-toggle:hover{background:var(--accent-dim)}
.theme-icon{width:16px;height:16px}
[data-theme="dark"] .moon{display:none}
[data-theme="light"] .sun{display:none}

.nav-burger{display:flex;flex-direction:column;gap:5px;padding:4px;z-index:101}
@media(min-width:900px){.nav-burger{display:none}}
.nav-burger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:all .25s var(--ease);transform-origin:center}
.nav-burger.open span:first-child{transform:rotate(45deg) translate(2.3px,2.3px)}
.nav-burger.open span:last-child{transform:rotate(-45deg) translate(2.3px,-2.3px)}

.mob{
    position:fixed;inset:0;z-index:99;
    background:var(--bg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.mob.show{opacity:1;visibility:visible}
.mob a{font-family:var(--sans);font-size:var(--t-2xl);font-weight:700;color:var(--ink-2);transition:color .2s}
.mob a:hover{color:var(--accent)}

/* ==================================================================
   HERO
   ================================================================== */
.hero{
    min-height:100vh;min-height:100dvh;
    display:grid;grid-template-columns:1fr;align-items:center;
    padding:8rem 2rem 3rem;position:relative;
    overflow: hidden; /* For canvas */
}
@media(min-width:768px){.hero{grid-template-columns:1fr 1fr;gap:3rem;padding:0 4rem}}

#particleCanvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; opacity: 0.5;
}

.hero-left{position:relative; z-index: 1;}
.hero-name{
    font-family:var(--sans);font-weight:800;font-size:var(--t-hero);
    letter-spacing:-.05em;line-height:.9;display:flex;flex-direction:column;
}

.mask{overflow:hidden;display:block}
.mask-inner{
    display:block;transform:translateY(110%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 0.1s);
}
.mask-inner.vis{
    transform: translateY(0);
}

.hero-line{
    position:absolute;right:-1.5rem;top:0;
    width:1px;height:0;background:var(--accent);
}
@media(max-width:767px){.hero-line{display:none}}

.hero-right{display:flex;flex-direction:column;gap:1.5rem;padding-top:2rem; z-index: 1;}
@media(min-width:768px){.hero-right{padding-top:0;padding-left:2rem}}
.hero-p{
    font-family:var(--mono); font-size:var(--t-sm); /* Monospace for decode effect */
    color:var(--ink-2);line-height:1.75;max-width:440px;
    /* GSAP will animate opacity */
    opacity: 0;
}
.hero-meta{
    display:flex;align-items:center;gap:1.5rem;
    font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.04em;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.hero-meta.vis{opacity:1; transform:translateY(0);}

.hero-avail{display:flex;align-items:center;gap:.4rem; padding: .25rem .5rem; border: 1px solid var(--rule); border-radius: 20px;}
.avail-dot{
    width:7px;height:7px;border-radius:50%;background:var(--green);
    animation:availPulse 2s ease-in-out infinite;
}
@keyframes availPulse{
    0%,100%{transform:scale(1);opacity:.6}
    50%{transform:scale(1.2);opacity:1}
}

.hero-scroll{
    position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
    font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;
    opacity: 0; z-index: 1;
    transition: opacity 0.6s var(--ease);
}
.hero-scroll.vis{opacity:1;}
.hero-scroll-bar{width:1px;height:40px;background:linear-gradient(to bottom, var(--ink-3), transparent);animation:scrollPulse 2.5s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(1);opacity:.7}50%{transform:scaleY(.5);opacity:.15}}

/* ==================================================================
   STATS
   ================================================================== */
.stats-sect{padding:4rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
@media(min-width:768px){.stats-row{grid-template-columns:repeat(4,1fr)}}
.stat-card{display:flex;flex-direction:column; opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.stat-card.vis{opacity:1; transform:translateY(0);}
.stat-num{
    font-family:var(--sans);font-size:clamp(2.5rem,5.5vw,4rem);font-weight:800;
    letter-spacing:-.04em;line-height:1;
    color:transparent;-webkit-text-stroke:1.5px var(--ink);
    transition:color .6s var(--ease),-webkit-text-stroke-color .6s var(--ease);
}
.stat-card.counted .stat-num{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.stat-label{font-size:var(--t-xs);color:var(--ink-3);margin-top:.3rem}

/* ==================================================================
   SECTIONS
   ================================================================== */
.sect{padding:6rem 0}
.sect--alt{background:var(--bg-alt)}
.sect-h{
    font-family:var(--sans);font-size:var(--t-2xl);font-weight:700;
    letter-spacing:-.03em;margin-bottom:3rem;
    opacity: 0; transform: translateY(40px);
}

/* ==================================================================
   EXPERIENCE CARDS (Tilt + Spotlight)
   ================================================================== */
.exp-list{display:flex;flex-direction:column}
.exp-card{
    display:grid;grid-template-columns:1fr;gap:.5rem;
    padding:1.75rem 1rem; margin: 0 -1rem; /* Adjust padding for hover glow */
    border-bottom:1px solid var(--rule);
    position:relative;
    transform-style: preserve-3d;
    opacity: 0; transform: translateY(50px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay:calc(var(--child-i, 0) * .1s);
}
.exp-card.vis{opacity:1; transform:translateY(0);}
.exp-card:first-child{border-top:1px solid var(--rule)}
@media(min-width:768px){.exp-card{grid-template-columns:180px 1fr;gap:2rem;}}

/* 3D Spotlight elements */
.exp-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(600px circle at var(--x, -100%) var(--y, -100%), rgba(255,255,255,0.06), transparent 40%);
    opacity: 0; transition: opacity .3s; pointer-events: none; z-index: -1;
    border-radius: var(--radius);
}
.exp-card:hover::before { opacity: 1; }

.exp-accent{
    position:absolute;left:0;top:0;bottom:0;width:0;
    background:var(--accent);transition:width .3s var(--ease);
}
.exp-card:hover .exp-accent{width:3px}

.exp-left, .exp-right { transform: translateZ(20px); } /* 3D pop */

.exp-date{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.04em;padding-top:.2rem}
.exp-role{font-family:var(--sans);font-size:var(--t-lg);font-weight:700;letter-spacing:-.015em;transition:color .2s}
.exp-card:hover .exp-role{color:var(--accent)}
.exp-org{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:.4rem;display:block}
.exp-desc{font-size:var(--t-sm);color:var(--ink-2);line-height:1.75;max-width:620px}

/* ==================================================================
   PROJECT CARDS (Tilt + Spotlight)
   ================================================================== */
.proj-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.proj-grid{grid-template-columns:1fr 1fr}}

.proj-card{
    padding:2rem;border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);
    position:relative;
    transform-style: preserve-3d;
    background:var(--bg);
    opacity: 0; transform: translateY(50px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay:calc(var(--child-i, 0) * .1s);
}
.proj-card.vis{opacity:1; transform:translateY(0);}
[data-theme="light"] .proj-card { border-color: rgba(0,0,0,0.1); }

.proj-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(600px circle at var(--x, -100%) var(--y, -100%), rgba(255,255,255,0.06), transparent 40%);
    opacity: 0; transition: opacity .3s; pointer-events: none; z-index: -1;
    border-radius: inherit;
}
.proj-card:hover { border-color: rgba(255,255,255,0.15); box-shadow:0 20px 40px rgba(0,0,0,.25); }
.proj-card:hover::before { opacity: 1; }

.proj-card-accent{
    position:absolute;left:0;top:0;bottom:0;width:0;
    transition:width .3s var(--ease);
}
.proj-card--amber .proj-card-accent{background:var(--amber)}
.proj-card--emerald .proj-card-accent{background:var(--emerald)}
.proj-card:hover .proj-card-accent{width:4px}

.proj-card > * { transform: translateZ(30px); }

.proj-card-icon{
    width:48px;height:48px;border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--sans);font-weight:700;font-size:var(--t-lg);
    margin-bottom:1.25rem;color:#fff;
}
.proj-card--amber .proj-card-icon{background:linear-gradient(135deg,#f59e0b,#d97706)}
.proj-card--emerald .proj-card-icon{background:linear-gradient(135deg,#10b981,#059669)}

.proj-card-name{font-family:var(--sans);font-size:var(--t-xl);font-weight:700;letter-spacing:-.02em;margin-bottom:.25rem}
.proj-card-role{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.04em;display:block;margin-bottom:.75rem}
.proj-card-desc{font-size:var(--t-sm);color:var(--ink-2);line-height:1.75;margin-bottom:1.25rem}
.proj-card-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.proj-card-tags span{
    font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;
    padding:.25rem .55rem;border:1px solid var(--rule);color:var(--ink-3);
    border-radius:3px;transition:border-color .2s, color .2s;
}
.proj-card--amber:hover .proj-card-tags span{border-color:var(--amber);color:var(--amber)}
.proj-card--emerald:hover .proj-card-tags span{border-color:var(--emerald);color:var(--emerald)}

/* ==================================================================
   EDUCATION TIMELINE
   ================================================================== */
.edu-timeline{position:relative;padding-left:2rem}
.edu-line{
    position:absolute;left:7px;top:0;width:2px;height:0;
    background:var(--accent);
}
.edu-entry{
    position:relative;padding-bottom:2.5rem;padding-left:1.5rem;
    opacity: 0; transform: translateX(-30px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay:calc(var(--child-i, 0) * .1s);
}
.edu-entry.vis{opacity:1; transform:translateX(0);}
.edu-entry:last-child{padding-bottom:0}
.edu-dot{
    position:absolute;left:-2rem;top:.3rem;
    width:16px;height:16px;border-radius:50%;
    border:2px solid var(--accent);background:var(--bg);
    transform:scale(0); z-index:1;
}
.edu-school{font-family:var(--sans);font-size:var(--t-lg);font-weight:700;letter-spacing:-.01em}
.edu-period{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.04em;display:block;margin:.3rem 0}
.edu-detail{font-size:var(--t-sm);color:var(--ink-2);line-height:1.75}

/* ==================================================================
   ABOUT & MARQUEE
   ================================================================== */
.about-split{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.about-split{grid-template-columns:1fr 1fr;gap:3rem}}
.about-left { min-width: 0; opacity: 0; transform: translateY(30px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.about-right { min-width: 0; opacity: 0; transform: translateY(30px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.about-left.vis, .about-right.vis { opacity: 1; transform: translateY(0); }
.about-big{
    font-family:var(--sans);font-size:var(--t-xl);font-weight:700;
    letter-spacing:-.02em;line-height:1.3;position:sticky;top:6rem;
}
.about-body{font-size:var(--t-sm);color:var(--ink-2);line-height:1.8}

.skills-section{margin-top:2rem; overflow: hidden;}
.skills-label{font-family:var(--sans);font-size:var(--t-sm);font-weight:600;margin-bottom:.75rem}

.marquee-wrap {
    position: relative; overflow: hidden; white-space: nowrap;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    margin-bottom: 1rem;
    padding: 4px 0;
}
.marquee-track {
    display: inline-flex; width: fit-content;
}
.marquee-set {
    display: inline-flex; gap: .4rem; padding-right: .4rem;
}
.skill-tag{
    font-size:.7rem;letter-spacing:.04em;
    padding:.3rem .6rem;border:1px solid var(--rule);color:var(--ink-2);
    border-radius:3px; transition:background .2s, color .2s, transform .15s;
    cursor:default; display: inline-block;
}
.skill-tag:hover{background:var(--accent-dim);color:var(--ink);transform:scale(1.05)}
.skills-exploring{font-size:var(--t-xs);color:var(--ink-3);font-style:italic;line-height:1.6}

/* ==================================================================
   ACHIEVEMENTS TIMELINE
   ================================================================== */
.ach-timeline{position:relative;padding:0 0 2rem}
.ach-line{
    position:absolute;left:50%;top:0;width:2px;height:0;
    background:rgba(245, 158, 11, 0.3); /* amber-500/30 */
    transform:translateX(-50%);
}

.ach-node{
    position:relative; width:50%; padding:1.5rem 0; margin-bottom:.5rem;
}
.ach-node--left{padding-right:2.5rem;text-align:right}
.ach-node--right{padding-left:2.5rem;margin-left:50%}

.ach-dot{
    position:absolute;top:1.7rem;
    width:12px;height:12px;border-radius:50%;
    background:var(--amber);border:2px solid var(--bg);
    transform:scale(0); z-index:1;
}
.ach-node--left .ach-dot{right:-7px}
.ach-node--right .ach-dot{left:-7px}

.ach-content{ opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease); }
.ach-node--left .ach-content{transform:translateX(-30px)}
.ach-node--right .ach-content{transform:translateX(30px)}
.ach-node.vis .ach-content{opacity:1; transform:translateX(0);}

.ach-year{font-size:var(--t-xs);color:var(--amber);letter-spacing:.08em;font-weight:600;display:block;margin-bottom:.2rem}
.ach-content strong{font-family:var(--sans);font-size:var(--t-sm);font-weight:600;display:block;margin-bottom:.15rem}
.ach-content p{font-size:var(--t-xs);color:var(--ink-2);line-height:1.6}

@media(max-width:768px){
    .ach-line{left:7px;transform:none}
    .ach-node,.ach-node--left,.ach-node--right{
        width:100%;margin-left:0;padding-left:2.5rem;padding-right:0;text-align:left;
    }
    .ach-node--left .ach-dot,.ach-node--right .ach-dot{left:-7px;right:auto}
    .ach-node--left .ach-content{transform:translateX(-30px)}
}

/* ==================================================================
   CERTIFICATIONS
   ================================================================== */
.cert-card{
    display:flex;align-items:center;gap:1.25rem;
    padding:1.5rem;border:1px solid var(--rule);border-radius:var(--radius);
    max-width:420px; transition:border-color .2s;
    opacity: 0; transform: translateY(30px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.cert-card.vis{opacity:1; transform:translateY(0);}
.cert-card:hover{border-color:var(--accent)}
.cert-badge{
    width:48px;height:48px;border-radius:var(--radius);
    background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--sans);font-weight:800;font-size:var(--t-sm);
    flex-shrink:0;
}
.cert-info strong{font-family:var(--sans);font-size:var(--t-base);font-weight:600;display:block}
.cert-info span{font-size:var(--t-xs);color:var(--ink-2)}

/* ==================================================================
   CONTACT & MAGNETIC LINKS
   ================================================================== */
.contact-h{
    font-family:var(--sans);font-size:clamp(3rem,8vw,6rem);
    font-weight:800;letter-spacing:-.05em;line-height:.9;
    text-align:center;margin-bottom:3rem;
    opacity: 0; transform: translateY(30px);
}
.contact-dot{color:var(--accent)}
.contact-grid{max-width:520px;margin:0 auto}
.contact-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:1.2rem 0;border-bottom:1px solid var(--rule);
    opacity: 0; transform: translateY(20px);
    transition:opacity .6s var(--ease), transform .6s var(--ease), padding .2s var(--ease);
    transition-delay:calc(var(--child-i, 0) * .1s);
    display: inline-flex; width: 100%;
}
.contact-item.vis{opacity:1; transform:translateY(0);}
.contact-item:first-child{border-top:1px solid var(--rule)}
.contact-label{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;min-width:56px; pointer-events: none;}
.contact-val{font-size:var(--t-sm);color:var(--ink-2); transition: color .2s; pointer-events: none;}
.contact-item:hover .contact-val{color:var(--accent)}

/* ==================================================================
   FOOTER
   ================================================================== */
.footer{border-top:1px solid var(--rule);padding:2.5rem 0}
.footer-inner{
    display:flex;flex-direction:column;gap:1.25rem;
    font-size:var(--t-sm);color:var(--ink-3);
}
@media(min-width:768px){.footer-inner{flex-direction:row;align-items:center;justify-content:space-between}}
.footer-left{display:flex;flex-direction:column;gap:.2rem}
.footer-name{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:var(--t-sm)}
.footer-loc{font-size:var(--t-xs)}
.footer-links{display:flex;flex-wrap:wrap;gap:1.5rem}
.footer-links a{
    font-size:var(--t-xs);color:var(--ink-3);position:relative;transition:color .2s;
    display: inline-block; padding: 0.5rem; margin: -0.5rem; /* For magnetic area */
}
.footer-links a::after{
    content:'';position:absolute;bottom:4px;left:0;width:100%;height:1px;
    background:#fff; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.footer-links a:hover{color:#fff}
.footer-links a:hover::after{transform: scaleX(1)}
.footer-copy{font-size:var(--t-xs);color:var(--ink-3)}

/* Active link press */
a:active, button:active{transform:scale(.97)}