/* =========================================================
   main.css — Megha Sharma Portfolio
   All original selectors preserved for routing/JS compatibility.
   Mobile-first fixes + cross-browser hardening applied.
   ========================================================= */

/* ── RESET ── */
*, *:before, *:after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; padding: 0;
    background-color: rgb(244, 247, 249);
    font-family: "Afacad Flux", serif;
    font-style: normal;
    color: #0D0D0D;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1  { font-family: "Viaoda Libre", serif; font-size: clamp(3rem,7vw,6rem); color: #0D0D0D; font-weight: 400; }
h2  { color: #0D0D0D; font-family: "Viaoda Libre", serif; }
p   { color: #0D0D0D; font-size: 16px; }
h3  { font-family: "Afacad Flux", sans-serif; font-weight: normal; color: #2B337F; }

/* ════════════════════════════════════════════
   REVEAL SYSTEM
════════════════════════════════════════════ */
.reveal       { opacity: 0; transform: translateY(32px); }
.reveal-left  { opacity: 0; transform: translateX(-40px); }
.reveal-right { opacity: 0; transform: translateX(40px); }

/* ════════════════════════════════════════════
   HAMBURGER NAV
   FIX #15: z-index hierarchy explicitly set so
   menu always renders above page content on all
   mobile browsers including Samsung Internet.
════════════════════════════════════════════ */
.toggle {
    position: fixed; top: 0; left: 0;
    z-index: 200; /* FIX: was implicit, now explicit */
}
.toggle img {
    width: 60px; height: 60px;
    position: fixed; top: 31px; left: 37px; z-index: 200;
}
#menuToggle {
    display: block;
    position: fixed; top: 50px; left: 50px; z-index: 200;
    -webkit-user-select: none; user-select: none;
}
#menuToggle a { text-decoration: none; color: #fdfdfd; padding: .5rem; transition: color 0.3s ease; }
#menuToggle input {
    display: block; width: 40px; height: 32px;
    position: absolute; top: -7px; left: -5px;
    cursor: pointer; opacity: 0; z-index: 2;
    -webkit-touch-callout: none;
}
#menuToggle span {
    display: block; width: 33px; height: 4px; margin-bottom: 5px;
    position: relative; background: #fdfdfd; border-radius: 3px; z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}
#menuToggle span:first-child       { transform-origin: 0% 0%; }
#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }
#menuToggle input:checked ~ span {
    opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #fdfdfd;
}
#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
#menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); }
#menu {
    font-family: "Afacad Flux", serif;
    border-bottom-right-radius: 2rem;
    position: absolute; max-width: 220px; width: 100vw; max-height: 100vh;
    margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px;
    box-sizing: border-box; overflow-y: auto;
    background: #2B337F; list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    box-shadow: 0 0 15px #10112050;
    z-index: 201; /* FIX: explicitly above everything */
}
#menu li { padding: 10px 0; font-size: 22px; }
#menu li label { cursor: pointer; }
#menuToggle input:checked ~ ul { transform: none; }
.toggle a:hover { font-family: "Viaoda Libre", serif; }
nav { display: flex; z-index: 3000; justify-content: space-between; position: fixed; top: 0; right: 0; width: 30%; padding: 10px; transition: transform 0.3s ease-in-out; }
nav a { justify-content: flex-end; line-height: 3rem; border-radius: 3px; text-decoration: none; font-size: 20px; font-family: "Afacad Flux", serif; color: #4B4D96; }
nav.hidden { transform: translateY(-100%); }

/* ── MAIN ──
   overflow:hidden removed — breaks GSAP pin spacer.
   FIX #1/#5: margin-top accounts for fixed nav height. */
main { height: auto; margin-top: 0; }
main section { padding: 30px; }

/* ════════════════════════════════════════════
   HOME / HERO
   FIX #1: padding-top clears the fixed nav button
   (nav sits at top:50px, button ~60px tall = 110px)
   FIX #5: hero content starts below nav, not behind it
════════════════════════════════════════════ */
.home {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    /* Top padding clears the fixed hamburger nav on all viewports */
    padding: 110px 2rem 2rem;
    position: relative;
    overflow: hidden;
}
.hero-bg-text {
    position: absolute; right: 4vw; top: 50%; transform: translateY(-50%);
    font-family: "Viaoda Libre", serif; font-size: clamp(8rem, 18vw, 20rem);
    color: rgba(43,51,127,0.04); line-height: 1;
    -webkit-user-select: none; user-select: none; pointer-events: none;
}
.hero-content {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 1rem; z-index: 1;
}
.hero-eyebrow {
    font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: #2B337F; margin: 0;
    opacity: 0; transform: translateY(16px);
}
/* FIX #2: explicit min-height so SVG object never collapses to 0
   on Firefox / Safari iOS before the iframe loads */
.home #intro {
    width: 55rem; max-width: 90vw;
    min-height: 120px; /* prevents invisible 0-height collapse */
    opacity: 0; visibility: hidden;
    display: block; /* FIX: object tag needs block in some Firefox versions */
}
#caption { margin-top: 1.5rem; letter-spacing: 0.12em; font-size: 0.85rem; }
.hero-ctas {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    gap: 1rem;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin-top: 1rem;
    opacity: 0; transform: translateY(16px);
}
/* FIX #4: WCAG minimum 48px touch target on all interactive elements */
.btn-primary {
    background: #2B337F; color: #fff;
    padding: 0.72rem 1.8rem;
    min-height: 48px;
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    border-radius: 2rem;
    text-decoration: none; font-size: 0.85rem; letter-spacing: 0.07em; white-space: nowrap;
    -webkit-transition: transform 0.2s ease, box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none; cursor: pointer;
    font-family: "Afacad Flux", serif;
}
.btn-primary:hover  { transform: scale(1.04); box-shadow: 4px 5px #0D0D0D; }
.btn-secondary {
    border: 1px solid #0D0D0D; color: #0D0D0D;
    padding: 0.72rem 1.8rem;
    min-height: 48px;
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    border-radius: 2rem;
    text-decoration: none; font-size: 0.85rem; letter-spacing: 0.07em; white-space: nowrap;
    -webkit-transition: transform 0.2s ease, box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: transparent; cursor: pointer;
    font-family: "Afacad Flux", serif;
}
.btn-secondary:hover { transform: scale(1.04); box-shadow: 4px 5px #0D0D0D; }
.hero-scroll-hint {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 0.4rem; opacity: 0.3;
}
.hero-scroll-hint span { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: #0D0D0D; }
.scroll-line {
    width: 1px; height: 36px; background: #0D0D0D;
    -webkit-animation: scrollPulse 1.8s ease-in-out infinite;
    animation: scrollPulse 1.8s ease-in-out infinite;
}
@-webkit-keyframes scrollPulse { 0%,100% { transform:scaleY(1); opacity:1; } 50% { transform:scaleY(0.3); opacity:0.2; } }
@keyframes scrollPulse          { 0%,100% { transform:scaleY(1); opacity:1; } 50% { transform:scaleY(0.3); opacity:0.2; } }

/* ── SHARED ── */
.section-label {
    font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: #2B337F; margin-bottom: 0.4rem; opacity: 0.6;
}

/* ════════════════════════════════════════════
   PROJECTS
════════════════════════════════════════════ */
#projects {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    min-height: 100vh; padding: 2rem 0; overflow: visible;
}
.projects-header { text-align: center; -ms-flex-negative: 0; flex-shrink: 0; margin-bottom: 2rem; padding: 0 5vw; }
.project-heading {
    font-family: "Viaoda Libre", serif;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    letter-spacing: 0.08em; color: #0D0D0D; font-weight: 400;
}
.projects-scroll-outer {
    width: 100%; cursor: -webkit-grab; cursor: grab;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    -ms-flex-negative: 0; flex-shrink: 0;
}
.projects-scroll-outer:active { cursor: -webkit-grabbing; cursor: grabbing; }
.projects-track {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: horizontal; -webkit-box-direction: normal;
    -ms-flex-direction: row; flex-direction: row;
    gap: 2rem; padding: 0.5rem 8vw 1.5rem;
    width: -webkit-max-content; width: max-content;
    will-change: transform;
    -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;
}
.card {
    -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
    width: clamp(300px, 36vw, 500px);
    border-radius: 2rem; border: 0.12rem solid #0D0D0D;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    padding: 0; background: rgb(244, 247, 249);
    cursor: pointer; overflow: hidden;
    opacity: 1; transform: scale(1);
    -webkit-transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.4s ease;
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.4s ease;
}
.cards-ready .card               { opacity: 0.35; transform: scale(0.97); }
.cards-ready .card.is-active     { opacity: 1; transform: scale(1); box-shadow: 6px 8px #0D0D0D; }
.card:hover                      { box-shadow: 4px 6px #0D0D0D; }
.card-img-wrap { width: 100%; height: 210px; overflow: hidden; -ms-flex-negative: 0; flex-shrink: 0; }
.card-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    -webkit-transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.cards-ready .card.is-active:hover .card-img-wrap img { transform: scale(1.04); }
.card-body {
    padding: 1.5rem 1.7rem 1.7rem;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    gap: 0.65rem; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.card-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
.card-number { font-size: 0.63rem; letter-spacing: 0.18em; color: rgba(43,51,127,0.35); font-variant-numeric: tabular-nums; }
.card-year   { font-size: 0.63rem; letter-spacing: 0.12em; color: rgba(13,13,13,0.3); }
.tabs  { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0; }
.tabEl { background-color: #2B337F; padding: 0.25rem 0.7rem; border-radius: 2rem; color: #F0F0F0; font-size: 0.72rem; letter-spacing: 0.05em; white-space: nowrap; }
.item-heading h2 { font-family: "Afacad Flux", serif; font-size: 1.25rem; font-weight: 700; color: #0D0D0D; margin-bottom: 0.35rem; letter-spacing: 0.02em; line-height: 1.25; }
.item-heading p  { font-size: 0.92rem; color: #555; line-height: 1.65; }
.card-outcome {
    background: rgba(43,51,127,0.055); border-left: 3px solid #2B337F;
    border-radius: 0 0.5rem 0.5rem 0; padding: 0.6rem 0.85rem;
    font-size: 0.8rem; color: #2B337F; line-height: 1.55; margin-top: auto;
}
.card-outcome strong { font-weight: 700; }
/* FIX #6: card-cta gets proper touch target padding on all viewports */
.card-cta {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: #2B337F; padding: 0.6rem 0;
    min-height: 44px;
    border-bottom: 1px solid rgba(43,51,127,0.22);
    width: -webkit-fit-content; width: fit-content; cursor: pointer;
    -webkit-transition: gap 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
    transition: gap 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
    opacity: 1;
}
.cards-ready .card-cta                 { opacity: 0; }
.cards-ready .card.is-active .card-cta { opacity: 1; }
.card-cta:hover { gap: 0.7rem; border-color: #2B337F; }

.projects-footer {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 1rem; padding: 1.1rem 8vw 0; -ms-flex-negative: 0; flex-shrink: 0;
}
.progress-bar-wrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 2px; background: rgba(43,51,127,0.12); border-radius: 2px; overflow: hidden; }
.progress-bar-fill { height: 100%; width: 0%; background: #2B337F; border-radius: 2px; }
.progress-dots { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.45rem; -ms-flex-negative: 0; flex-shrink: 0; }
.progress-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(43,51,127,0.18); -webkit-transition: background 0.25s ease, transform 0.25s ease; transition: background 0.25s ease, transform 0.25s ease; }
.progress-dot.active { background: #2B337F; transform: scale(1.5); }
.projects-counter { font-size: 0.68rem; letter-spacing: 0.16em; color: rgba(43,51,127,0.4); font-variant-numeric: tabular-nums; white-space: nowrap; -ms-flex-negative: 0; flex-shrink: 0; }
@-webkit-keyframes nudgeHint { 0% { transform: translateX(0); } 35% { transform: translateX(-28px); } 65% { transform: translateX(-14px); } 100% { transform: translateX(0); } }
@keyframes nudgeHint           { 0% { transform: translateX(0); } 35% { transform: translateX(-28px); } 65% { transform: translateX(-14px); } 100% { transform: translateX(0); } }
.projects-track.hint-anim { -webkit-animation: nudgeHint 1s cubic-bezier(0.25,0.46,0.45,0.94) 0.4s both; animation: nudgeHint 1s cubic-bezier(0.25,0.46,0.45,0.94) 0.4s both; }

/* ════════════════════════════════════════════
   ABOUT
════════════════════════════════════════════ */
.about {
    font-style: normal;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    text-align: center; place-content: center; justify-content: space-evenly;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    min-height: 100vh; padding: 4rem 3vw; gap: 2vw;
}
.me     { width: 40%; text-align: left; }
.me h1  { margin-bottom: 1.2rem; }
.me p   { font-size: 1rem; margin-bottom: 0.9rem; line-height: 1.8; }
.me p b { color: #2B337F; font-weight: 700; }
.about-availability {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 0.5rem; font-size: 0.73rem; letter-spacing: 0.11em; text-transform: uppercase;
    color: #2B337F; margin-top: 1.4rem; padding: 0.48rem 1rem;
    border: 1px solid rgba(43,51,127,0.22); border-radius: 2rem;
}
.avail-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #4CAF50; -ms-flex-negative: 0; flex-shrink: 0;
    -webkit-animation: blink 1.8s ease-in-out infinite; animation: blink 1.8s ease-in-out infinite;
}
@-webkit-keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes blink           { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }
.skill1 { display: grid; }
.skill2 { display: grid; place-items: end; }
.tilt1  { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
.tilt2  { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
.skill3 { display: grid; }
.skill4 { display: grid; }

/* ════════════════════════════════════════════
   RESUME STRIP
   FIX #8: download button uses flex so it
   centres vertically on Safari as well.
════════════════════════════════════════════ */
.resume-strip {
    background: #2B337F; padding: 3rem 8vw;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    gap: 2rem; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.resume-strip p        { color: rgba(255,255,255,0.85); font-size: 1rem; max-width: 420px; line-height: 1.65; }
.resume-strip p strong { color: #fff; }
.download {
    background-color: #fff; color: #2B337F;
    padding: 0.75rem 2rem;
    min-height: 48px; /* FIX #8: touch target */
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    border-radius: 2rem; text-decoration: none;
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.07em;
    white-space: nowrap; -ms-flex-negative: 0; flex-shrink: 0;
    -webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none; cursor: pointer; font-family: "Afacad Flux", serif;
}
.download:hover  { box-shadow: 4px 6px rgba(0,0,0,0.25); transform: scale(1.025); }
.download:active { transform: scale(0.96); }

/* ════════════════════════════════════════════
   CONTACT
   FIX #9: overflow-wrap replaces word-break for
   Safari iOS compatibility.
════════════════════════════════════════════ */
.contact { margin-top: 6rem; margin-bottom: 5rem; display: grid; place-items: center; height: auto; text-align: center; gap: 1rem; }
.contact-sub { font-size: 0.92rem; color: #666; max-width: 400px; line-height: 1.7; margin-bottom: 1rem; }
.c-head h1 { margin: 0; font-size: clamp(3rem, 8vw, 8rem); line-height: 1; }
.connect   { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1rem; gap: 1rem; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#linked, #mail {
    border: solid 0.12rem #0D0D0D; border-radius: 2rem;
    padding: 0.6rem 1rem; min-height: 48px; /* FIX: touch target */
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 0.4rem; background: #fff;
    -webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#linked:hover, #mail:hover { box-shadow: 4px 4px #212121; transform: scale(1.01); }
#linked a, #mail a {
    text-decoration: none; color: #0D0D0D; font-size: 0.9rem;
    overflow-wrap: anywhere; /* FIX #9: safe email wrap on all browsers */
}
.footer-img { width: 1.4rem; height: 1.4rem; object-fit: contain; }

/* ── FOOTER ── */
footer { text-align: center; padding: 1.2rem 0; border-top: 1px solid rgba(13,13,13,0.07); font-size: 0.78rem; color: rgba(13,13,13,0.35); letter-spacing: 0.07em; }

/* ════════════════════════════════════════════
   LEGACY — kept for case-study child pages
════════════════════════════════════════════ */
.hideAll      { height: auto; color: #232323; background-color: #dad4c6; }
.backBtn      { display: none; }
.sub-content1 { width: 500px; }
.restOverview { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.restOverview img { width: 500px; }
#scroll       { text-align: center; }
#pieces a     { text-decoration: none; }
#pieces       { grid-gap: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; height: auto; }
.card h2      { color: #2B337F; font-family: "Afacad Flux", serif; font-weight: 600; }

/* ════════════════════════════════════════════
   REDUCED MOTION
   FIX #10: users with vestibular disorders or
   reduced-motion preference get no transforms.
   Elements remain visible — animations simply
   don't play.
════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right {
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-eyebrow, .hero-ctas {
        opacity: 1 !important;
        transform: none !important;
    }
    .scroll-line { -webkit-animation: none; animation: none; }
    .avail-dot   { -webkit-animation: none; animation: none; }
    .card        { -webkit-transition: none; transition: none; }
    .projects-track { will-change: auto; }
}

/* ════════════════════════════════════════════
   TABLET  ≤ 900px
════════════════════════════════════════════ */
@media only screen and (max-width: 900px) {
    .hero-bg-text { display: none; }

    /* Hero — FIX #1: push content below hamburger nav
       nav is fixed at top:50px, icon is 60px tall → 110px clear zone
       add safe-area-inset for notched devices (iPhone X+) */
    .home {
        padding-top: 110px;
        padding-top: calc(110px + env(safe-area-inset-top, 0px));
        padding-left: 5vw; padding-right: 5vw; padding-bottom: 2rem;
        justify-content: center;
        min-height: 100vh;
    }
    /* FIX #11: 100svh fallback for older browsers */
    @supports (min-height: 100svh) {
        .home { min-height: 100svh; }
    }
    .home #intro { width: 80vw; max-width: 480px; }

    /* Projects */
    #projects { min-height: auto; height: auto !important; padding: 3rem 0 2.5rem; }
    .projects-scroll-outer { overflow: visible !important; cursor: default; }
    .projects-track {
        -webkit-box-orient: vertical; -webkit-box-direction: normal;
        -ms-flex-direction: column; flex-direction: column;
        width: 100% !important; transform: none !important;
        padding: 1rem 6vw; gap: 1.5rem;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    }
    /* FIX #12: replace min() with max-width for older browsers */
    .card {
        width: 88vw !important; max-width: 520px !important;
        opacity: 1 !important; transform: scale(1) !important;
    }
    .card .card-cta { opacity: 1 !important; }
    .projects-footer { display: none; }

    /* About */
    .about {
        -webkit-box-orient: vertical; -webkit-box-direction: normal;
        -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        min-height: auto; padding: 4rem 6vw; gap: 2rem;
    }
    .skill1, .skill2 { display: none; }
    .me { width: 100%; max-width: 560px; }

    /* Contact */
    .c-head h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
    .connect { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
    #linked, #mail { width: 100%; max-width: 380px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}

/* ════════════════════════════════════════════
   MOBILE  ≤ 600px
════════════════════════════════════════════ */
@media only screen and (max-width: 600px) {
    body { width: 100vw; }
    main section { padding: 16px; }
    p { font-size: 15px; }
    h2 { font-size: 15px; }
    section h2 { text-align: center; }
    h3 { font-size: 14px; }

    /* Nav — smaller hamburger bars on mobile */
    .toggle img { width: 48px; height: 48px; top: 24px; left: 24px; }
    #menuToggle { top: 40px; left: 24px; }
    #menuToggle span { width: 22px; height: 3px; margin-bottom: 4px; }

    /* Hero — FIX #1: ensure content never hides behind nav
       hamburger is at top:40px (adjusted above), icon 48px tall
       → 88px + 12px breathing room = 100px */
    .home {
        padding-top: 100px;
        padding-top: calc(100px + env(safe-area-inset-top, 0px));
        padding-left: 5vw; padding-right: 5vw; padding-bottom: 3rem;
        min-height: 100vh;
        justify-content: center;
    }
    @supports (min-height: 100svh) {
        .home { min-height: 100svh; }
    }
    /* FIX #2: constrain SVG so it doesn't overflow on narrow phones */
    .home #intro { width: 85vw; max-width: 320px; min-height: 100px; }

    /* FIX #3: hide "SCROLL TO KNOW MORE" caption — redundant on mobile */
    #caption { display: none; }

    .hero-eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; }
    .hero-scroll-hint { display: none; }
    /* FIX #4: full-width buttons with proper touch target */
    .hero-ctas { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; gap: 0.75rem; }
    .btn-primary, .btn-secondary { width: 90%; max-width: 300px; }

    /* Projects */
    #projects { padding: 2rem 0 1.5rem; }
    .projects-header { padding: 0 5vw; }
    .projects-track { padding: 0.5rem 5vw; gap: 1rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
    .card { width: 90vw !important; border-radius: 1.5rem; }
    .card-img-wrap { height: 160px; }
    .card-body { padding: 1rem 1.2rem 1.3rem; gap: 0.5rem; }
    .item-heading h2 { font-size: 1.25rem; }
    .item-heading p  { font-size: 0.9rem; }
    .card-outcome { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
    .tabs { gap: 0.25rem; }
    .tabEl { font-size: 0.65rem; padding: 0.2rem 0.55rem; }

    /* About — FIX #7: padding ensures badge doesn't clip the border-radius */
    .about {
        padding: 0; width: 100vw;
        -webkit-box-orient: vertical; -webkit-box-direction: normal;
        -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        background-color: #4B4D96; border-radius: 2rem;
        padding-bottom: 2.5rem; gap: 1.5rem; /* extra bottom padding for badge */
    }
    .skill1, .skill2 { display: none; }
    .about img { max-width: 100%; }
    .me { width: 100%; padding: 2rem 5vw 1rem; text-align: left; }
    .me h1 { font-size: clamp(2.4rem, 9vw, 3.5rem); color: #fff; }
    .me p, .section-label { color: #fff; }
    .about-availability {
        color: #fff; border-color: rgba(255,255,255,0.3);
        font-size: 0.65rem;
        /* FIX #7: prevent overflow clipping on narrow screens */
        max-width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap;
        margin-bottom: 0.5rem;
    }

    /* Resume strip */
    .resume-strip { padding: 2.5rem 5vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; gap: 1.5rem; }
    .resume-strip p { font-size: 0.95rem; max-width: 100%; }
    /* FIX #8: full-width button, flex centres text on Safari */
    .download { width: 90%; max-width: 280px; text-align: center; }

    /* Contact — FIX #9: overflow-wrap instead of word-break */
    .contact { margin-top: 2.5rem; padding: 2rem 5vw; }
    .c-head h1 { font-size: clamp(2.4rem, 10vw, 3.5rem); text-align: center; }
    .contact-sub { font-size: 0.88rem; }
    .connect { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; gap: 0.75rem; }
    #linked, #mail { width: 90vw; max-width: 320px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    /* overflow-wrap: anywhere is used above globally; word-break removed */

    /* Legacy */
    #pieces { grid-gap: 45px; grid-template-columns: 1fr; margin-left: 5%; margin-right: 10%; }
    .icons { display: grid; width: 11rem; grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════
   TINY  ≤ 380px  (iPhone SE, small Androids)
════════════════════════════════════════════ */
@media only screen and (max-width: 380px) {
    .home { padding-top: 90px; }
    .home #intro { width: 88vw; max-width: 280px; }
    .btn-primary, .btn-secondary { width: 100%; max-width: 100%; }
    .card { width: 92vw !important; }
    .card-body { padding: 0.9rem 1rem 1.1rem; }
    .item-heading h2 { font-size: 1.1rem; }
    .me h1 { font-size: 2.2rem; }
    .c-head h1 { font-size: 2.2rem; }
    #linked, #mail { width: 92vw; }
    .about-availability { font-size: 0.6rem; }
}