/* Personal footer lives in the CV island; preserve Framer's source snapshot. */
body:has(#main main.framer-1yym52n > #hero):has(#portfolio-footer) #main .framer-1aj1d6y-container{display:none!important}
/* The replaced template page still reserves a fixed SSR height after its sections
 * are hidden. Remove that obsolete home layout from flow as well. The DOM
 * remains available for Framer routing and the independent home detector. */
body:has(#main main.framer-1yym52n > #hero):has(#portfolio-footer) #main .framer-951uk[data-framer-root]{display:none!important}
body:has(#main main.framer-1yym52n > #hero):has(#portfolio-footer) #main > .framer-1du1Z[data-layout-template]{min-height:0!important}

#portfolio-content .portfolio-footer{--cv-bg:#ff3d3d;--cv-text:#170c0d;--cv-muted:#3d0f13;--cv-line:#170c0d40;--cv-accent:#170c0d;--footer-marquee-gap:clamp(40px,4.2vw,80px);--footer-tape-fill:#17140d;--footer-tape-ink:#ff3d3d;position:relative;overflow:clip;clip-path:inset(0);scroll-margin-top:112px;background:var(--cv-bg);color:var(--cv-text)}
#portfolio-content .footer-reveal-surface{position:relative;padding-block:70px 24px;transform:translate3d(0,var(--footer-reveal-y,0px),0)}
#portfolio-content .portfolio-footer[data-footer-focus] .footer-reveal-surface{transform:none}
#portfolio-content .footer-intro,#portfolio-content .footer-content{width:calc(100% - 2 * clamp(24px,6vw,120px))}
#portfolio-content .footer-intro{padding-bottom:34px;text-align:center}
#portfolio-content .footer-intro>p{color:var(--cv-muted);font-family:var(--portfolio-font-heading);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.14em}
/* One inverse caution tape echoes About without competing with the red footer.
 * Overscan covers the angled edges; the stage keeps its vertical envelope in flow. */
#portfolio-content .footer-marquee-stage{position:relative;padding-block:max(32px,2.4vw);isolation:isolate}
#portfolio-content .footer-marquee{position:relative;width:calc(100% + 96px);margin-inline:-48px;overflow:hidden;overflow:clip;padding-block:32px;background:var(--footer-tape-fill);color:var(--footer-tape-ink);transform-origin:center;transform:rotate(-1.6deg);will-change:transform;animation:footer-tape-sway 7.5s ease-in-out infinite alternate;animation-play-state:paused}
#portfolio-content .footer-marquee::before,#portfolio-content .footer-marquee::after{position:absolute;z-index:2;inset-inline:-24px;height:8px;will-change:transform;backface-visibility:hidden;background:linear-gradient(135deg,var(--footer-tape-fill) -.75%,var(--footer-tape-ink) .75%,var(--footer-tape-ink) 24.25%,var(--footer-tape-fill) 25.75%,var(--footer-tape-fill) 49.25%,var(--footer-tape-ink) 50.75%,var(--footer-tape-ink) 74.25%,var(--footer-tape-fill) 75.75%,var(--footer-tape-fill) 99.25%,var(--footer-tape-ink) 100.75%) 0 0/24px 24px;content:"";pointer-events:none;animation:footer-tape-stripe 1.4s linear infinite;animation-play-state:paused}
#portfolio-content .footer-marquee::before{top:0}
#portfolio-content .footer-marquee::after{bottom:0}
#portfolio-content .footer-marquee-track{display:flex;width:max-content;will-change:transform;animation:footer-name-scroll 120s linear infinite;animation-play-state:paused}
#portfolio-content .footer-marquee-group{display:flex;align-items:center;flex:0 0 auto;gap:var(--footer-marquee-gap);padding-right:var(--footer-marquee-gap)}
#portfolio-content .footer-marquee-label{display:block;flex:none;margin:0;color:var(--footer-tape-ink);font-family:var(--portfolio-font-heading);font-size:clamp(40px,5.6vw,88px);font-weight:700;line-height:1.2;letter-spacing:.025em;text-wrap:nowrap;white-space:nowrap}
#portfolio-content .footer-marquee-separator{display:block;flex:none;align-self:center;width:clamp(10px,1vw,16px);height:clamp(10px,1vw,16px);border-radius:50%;background:var(--footer-tape-ink)}
/* Pause all three moving layers together when off screen or toggled. */
#portfolio-content .portfolio-footer[data-footer-visible="true"]:not([data-footer-marquee-paused]) :is(.footer-marquee,.footer-marquee-track),
#portfolio-content .portfolio-footer[data-footer-visible="true"]:not([data-footer-marquee-paused]) .footer-marquee::before,
#portfolio-content .portfolio-footer[data-footer-visible="true"]:not([data-footer-marquee-paused]) .footer-marquee::after{animation-play-state:running}
@media(hover:hover) and (pointer:fine){
 #portfolio-content .footer-marquee:hover,#portfolio-content .footer-marquee:hover .footer-marquee-track,
 #portfolio-content .footer-marquee:hover::before,#portfolio-content .footer-marquee:hover::after{animation-play-state:paused!important}
}
#portfolio-content .footer-contact{padding-block:34px 46px;text-align:center}
#portfolio-content .footer-email-row{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%}
#portfolio-content .footer-copy{display:block;min-width:0;padding:9px 3px;border:0;background:transparent;color:var(--cv-text);font-family:var(--portfolio-font-heading);font-size:clamp(17px,1.8vw,23px);font-weight:500;line-height:1.5;letter-spacing:-.025em;cursor:pointer;transition:color .2s ease}
#portfolio-content [data-magnetic-content]{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:0;max-width:100%;transform:translate3d(var(--footer-magnetic-x,0px),var(--footer-magnetic-y,0px),0);transition:transform .3s cubic-bezier(.2,.7,.2,1);pointer-events:none}
#portfolio-content .footer-copy .footer-link-label{min-width:0;overflow-wrap:anywhere}
#portfolio-content .footer-copy-symbol{display:grid;place-items:center;flex:none;width:19px;height:19px}
#portfolio-content .footer-copy-symbol>svg{display:block;grid-area:1/1;width:19px;height:19px;transition:opacity .18s ease,transform .25s ease}
#portfolio-content .footer-copy-symbol>.footer-check-icon{opacity:0;transform:scale(.7)}
#portfolio-content .portfolio-footer[data-copy-state="copied"] .footer-copy-icon{opacity:0;transform:scale(.7)}
#portfolio-content .portfolio-footer[data-copy-state="copied"] .footer-check-icon{opacity:1;transform:scale(1);color:var(--cv-accent)}
#portfolio-content .footer-mail-link{display:grid;place-items:center;flex:none;width:44px;height:44px;color:var(--cv-muted);transition:color .2s ease}
#portfolio-content .footer-mail-link>svg{width:20px;height:20px}
#portfolio-content .footer-copy-hint{margin-top:2px;color:var(--cv-muted);font-size:11px;line-height:18px}
#portfolio-content .footer-copy-status{min-height:18px;margin-top:2px;color:var(--cv-accent);font-size:11px;line-height:18px}
#portfolio-content .footer-link-label{position:relative}
#portfolio-content .footer-link-label::after{position:absolute;right:0;bottom:-4px;left:0;height:1px;background:var(--cv-accent);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.25,1);content:""}
#portfolio-content :is(.footer-copy,.footer-mail-link,.footer-to-top,.footer-marquee-toggle):is(:hover,:focus-visible){color:var(--cv-accent)}
#portfolio-content :is(.footer-copy,.footer-to-top):is(:hover,:focus-visible) .footer-link-label::after{transform:scaleX(1)}
#portfolio-content .footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding-top:20px;border-top:1px solid var(--cv-line);font-family:var(--portfolio-font-heading);font-size:12px;line-height:1.5}
#portfolio-content .footer-copyright{color:var(--cv-muted)}
#portfolio-content .footer-socials{display:flex;align-items:center;justify-content:center;gap:14px}
#portfolio-content .footer-socials>a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--cv-text);transition:color .2s ease,background .2s ease}
#portfolio-content .footer-socials>a:is(:hover,:focus-visible){background:var(--cv-line);color:var(--cv-accent)}
#portfolio-content .footer-socials svg{display:block;flex:none;width:24px;height:24px}
#portfolio-content .footer-marquee-toggle{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;touch-action:manipulation}
/* Keep the viewport control outside the footer's clipped, transformed surface. */
#portfolio-content .footer-to-top{position:fixed;z-index:40;right:calc(44px + env(safe-area-inset-right,0px));bottom:calc(44px + env(safe-area-inset-bottom,0px));display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--cv-accent);border-radius:50%;background:var(--cv-quiet);color:var(--cv-accent);box-shadow:0 6px 20px #0003;transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
#portfolio-content .footer-to-top[hidden]{display:none!important}
#portfolio-content .footer-to-top:is(:hover,:focus-visible){background:var(--cv-accent);color:#fff;box-shadow:0 8px 24px #0004;transform:translateY(-2px)}
#portfolio-content .footer-to-top:focus-visible{outline:2px solid var(--cv-accent);outline-offset:5px}
#portfolio-content .footer-to-top:active{transform:scale(.96)}
#portfolio-content .footer-to-top>svg{display:block;width:22px;height:22px;transition:transform .25s cubic-bezier(.2,.7,.25,1)}
#portfolio-content .footer-to-top:is(:hover,:focus-visible)>svg{transform:translateY(-3px)}
#portfolio-content .portfolio-footer :is(a,button):focus-visible{outline:2px solid var(--cv-accent);outline-offset:4px;border-radius:4px}
#portfolio-content .portfolio-footer .footer-marquee-toggle:focus-visible{outline-color:var(--footer-tape-ink);outline-offset:-10px;border-radius:0}
@keyframes footer-name-scroll{to{transform:translate3d(-50%,0,0)}}
@keyframes footer-tape-sway{from{transform:translate3d(-8px,-4px,0) rotate(-1.4deg)}to{transform:translate3d(8px,4px,0) rotate(-1.8deg)}}
/* Reuse a single texture tile, avoiding a background repaint on every frame. */
@keyframes footer-tape-stripe{from{transform:translate3d(0,0,0)}to{transform:translate3d(-24px,0,0)}}
@media(max-width:809.98px){
 #portfolio-content .portfolio-footer{scroll-margin-top:96px}
 #portfolio-content .footer-reveal-surface{padding-block:44px 20px}
 #portfolio-content .footer-intro{padding-bottom:26px}
 #portfolio-content .footer-marquee-stage{padding-block:28px}
 #portfolio-content .footer-marquee{padding-block:24px}
 #portfolio-content .footer-marquee-label{font-size:clamp(38px,6vw,48px)}
 #portfolio-content .footer-contact{padding-block:28px 30px}
 #portfolio-content .footer-bottom{grid-template-columns:1fr auto;gap:14px 20px;padding-top:16px}
 #portfolio-content .footer-socials{grid-column:1/-1;grid-row:1;gap:22px}
 #portfolio-content .footer-copyright{grid-column:1;grid-row:2;font-size:10px}
 #portfolio-content .footer-to-top{right:calc(32px + env(safe-area-inset-right,0px));bottom:calc(32px + env(safe-area-inset-bottom,0px));width:44px;height:44px}
 #portfolio-content .footer-copyright{display:flex;align-items:center;min-height:44px}
}
@media(max-width:359.98px){
 #portfolio-content .footer-copy{font-size:15px}
 #portfolio-content .footer-copy [data-magnetic-content]{gap:7px}
 #portfolio-content .footer-email-row{gap:0}
 #portfolio-content .footer-mail-link{width:36px}
 #portfolio-content .footer-bottom{gap:12px}
 #portfolio-content .footer-copyright{max-width:120px}
}
@media(prefers-reduced-motion:reduce){
 #portfolio-content .portfolio-footer *,#portfolio-content .portfolio-footer *::before,#portfolio-content .portfolio-footer *::after{animation:none!important;transition:none!important}
 #portfolio-content :is(.footer-reveal-surface,[data-magnetic-content]){transform:none!important}
 #portfolio-content .footer-marquee-stage{padding-block:20px}
 #portfolio-content .footer-marquee{width:100%;margin-inline:0;padding:28px 24px;transform:none!important;will-change:auto}
 #portfolio-content .footer-marquee::before,#portfolio-content .footer-marquee::after{transform:none!important;will-change:auto}
 #portfolio-content .footer-marquee-track,#portfolio-content .footer-marquee-group{display:block;width:100%;padding:0;transform:none!important;will-change:auto}
 #portfolio-content .footer-marquee-label{font-size:clamp(32px,5.6vw,88px);line-height:1.2;white-space:normal;text-wrap:balance;text-align:center;overflow-wrap:normal}
 #portfolio-content .footer-marquee [aria-hidden="true"]{display:none}
 #portfolio-content .footer-marquee-toggle{display:none}
 #portfolio-content .footer-to-top{transition:none}
 #portfolio-content .footer-to-top:is(:hover,:focus-visible,:active),#portfolio-content .footer-to-top:is(:hover,:focus-visible)>svg{transform:none}
 #portfolio-content .footer-to-top>svg{transition:none}
}