
:root{--blue:#1511ff;--red:#ff1216}*{box-sizing:border-box}
html{scroll-behavior:auto}body{margin:0;min-height:100vh;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}body.light,body.portal{background:#fff;color:#050505}body.dark{background:#000;color:#fff}
a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #f2ff00;outline-offset:3px}
.page{width:min(100%,1440px);margin:0 auto;position:relative}
.artframe{position:relative;width:100%;isolation:isolate;overflow:visible;line-height:0}
.artframe>svg{width:100%;height:auto;display:block;user-select:none;pointer-events:none}
.artframe .hit{position:absolute;display:block;z-index:6;cursor:pointer;text-decoration:none;background:transparent;border-radius:8px}
.artframe .hit:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
body.light .artframe .hit:focus-visible{outline-color:var(--blue)}
.artframe .hit .sronly,.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.artframe .hit.card-hit{transform-origin:center center;transition:transform 250ms ease-out;z-index:8;overflow:visible}
.artframe .hit.card-hit:hover{transform:scale(1.025);z-index:12}
.card-pop{width:100%;height:100%;position:absolute;inset:0;display:block;pointer-events:none;overflow:hidden;border-radius:7px;line-height:0;opacity:0;transition:opacity 90ms}
.card-pop.filled{opacity:1}.card-pop svg{display:block;width:100%;height:100%}
.artframe .hit.nav-hit{border-radius:0}.artframe .hit.nav-hit::after{content:'↗';font-size:0;pointer-events:none}
.nav-arrow{position:absolute;display:block;right:12px;top:50%;font-size:0;transition:transform 210ms ease-out}
.nav-hit:hover .nav-arrow{transform:translate(5px,-3px)}
.nav-hit.back:hover .nav-arrow{transform:translateX(-5px)}
.artframe .video-slot{position:absolute;z-index:11;overflow:hidden;background:#101010;line-height:normal}
.artframe .video-slot video{display:block;width:100%;height:100%;object-fit:contain;background:#111}
.artframe .video-slot.retail{left:48.68055556%;top:10.18292683%;width:48.05555556%;height:30.91463415%;border-radius:2.9%}
.artframe .video-slot.football{left:47.75%;top:0%;width:51.15%;height:54.25%;border-radius:0}
.artframe .video-fallback{position:absolute;inset:0;width:100%;height:100%;background:rgba(0,0,0,.25);border:0;color:#fff;display:grid;place-items:center;cursor:pointer}
.artframe .video-fallback[hidden]{display:none}.video-fallback span{background:#000b;border:1px solid #fff9;padding:15px 19px;border-radius:50%;font-size:20px}
.utility{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;gap:7px;align-items:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.utility.visible{opacity:1;transform:none;pointer-events:auto}.utility a,.utility button{font:700 11px Arial,sans-serif;letter-spacing:.02em;cursor:pointer;border:1px solid #7778;border-radius:999px;padding:12px 14px;text-decoration:none;backdrop-filter:blur(12px)}
body.light .utility a,body.light .utility button{color:#111;background:#fffffff0}body.dark .utility a,body.dark .utility button{color:#fff;background:#191919ec}
.mobile-project-nav{display:none} .reality-card{transform-origin:center;transition:transform .25s ease-out;}.reality-card:hover{transform:scale(1.02);z-index:14}
.portal-cover{position:fixed;z-index:1000;inset:0;pointer-events:none;clip-path:circle(0% at 25% 75%);display:none;background:#fff}
.portal-cover.active{display:grid;place-items:center}.portal-cover img{width:100%;height:100%;object-fit:contain;object-position:top center}
.fade-cover{position:absolute;z-index:5;pointer-events:none;background:#000;opacity:0;transition:opacity .6s ease-out}body.animations-ready .fade-cover:not(.shown){opacity:1}.fade-cover.shown{opacity:0}
.footer-line{max-width:1440px;margin:0 auto;padding:10px 24px 25px;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:15px}
.footer-line a{text-decoration:none;opacity:.8}.footer-line a:hover{text-decoration:underline}
.ab-visual-footer{position:absolute;left:0;top:96.236357%;width:100%;height:3.763643%;z-index:7;pointer-events:none;font:400 clamp(10px,.95vw,18px)/1 Arial,sans-serif;color:#111}.ab-visual-footer:before{content:"";position:absolute;left:5.8%;right:6.2%;top:58%;height:1px;background:#26262666}.ab-visual-footer .vf{position:absolute;top:18%;display:flex;align-items:center;gap:.45em;white-space:nowrap}.ab-visual-footer .vf svg{width:14px;height:14px;display:block}.ab-visual-footer .vf.left{left:5.8%}.ab-visual-footer .vf.center{left:39.5%}.ab-visual-footer .vf.right{right:6.2%}.ab-visual-footer .vf.right svg{transform:rotate(180deg)}

@media(max-width:740px){.mobile-project-nav{display:block;padding:18px 18px 25px;border-bottom:1px solid #9993}.mobile-project-nav summary{font-weight:700;font-size:15px;cursor:pointer}.mobile-project-nav a{display:block;padding:10px 0;border-bottom:1px solid #9992;text-decoration:none;font-size:13px}.utility{bottom:12px;right:9px;gap:4px}.utility a,.utility button{font-size:10px;padding:10px}.artframe .hit.card-hit:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.artframe .hit.card-hit:hover,.reality-card:hover{transform:none}.fade-cover{opacity:0}}

.reality-snapshot{position:absolute;inset:0;display:none;overflow:hidden;border-radius:22px;pointer-events:none;line-height:0}.reality-card:hover .reality-snapshot{display:block}@media(hover:none){.reality-card:hover .reality-snapshot{display:none}}

/* UTOMARRY portal v2 — faithful original Figma hover variants */
.portal-stage{position:relative;overflow:hidden;}
.portal-stage>.portal-scene{position:absolute;display:block;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;}
.portal-stage>.portal-base{z-index:0;opacity:1;}
.portal-stage>.portal-light,.portal-stage>.portal-dark{z-index:1;opacity:0;transition:opacity 260ms cubic-bezier(.22,.61,.36,1);}
.portal-stage[data-hover="light"]>.portal-light{opacity:1;}
.portal-stage[data-hover="dark"]>.portal-dark{opacity:1;}
.portal-stage>.reality-choice{z-index:4;outline-offset:-5px;}
/* Old hover crop / zoom is intentionally removed: the exported Figma art
   already contains its exact expanded LIGHT and DARK states. */
.portal .reality-choice{transform:none!important;transition:none!important;}
.portal-exit{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:0;background:#fff;transition:opacity 430ms ease-in-out;}
.portal-exit.dark{background:#000;}
.portal-exit.active{opacity:1;}
.artframe>.contact-hit{z-index:15;border-radius:0;}
.artframe>.contact-hit:hover{background:transparent;}
@media(prefers-reduced-motion:reduce){.portal-stage>.portal-light,.portal-stage>.portal-dark,.portal-exit{transition:none!important;}}
/* Clickable card areas follow the asymmetric expansion drawn in each hover SVG. */
.portal-stage[data-hover="light"]>.reality-choice[data-universe="light"]{left:2.777778%!important;width:57.15%!important;}
.portal-stage[data-hover="light"]>.reality-choice[data-universe="dark"]{left:60.10%!important;width:37.15%!important;}
.portal-stage[data-hover="dark"]>.reality-choice[data-universe="light"]{left:2.777778%!important;width:34.20%!important;}
.portal-stage[data-hover="dark"]>.reality-choice[data-universe="dark"]{left:37.2%!important;width:60.05%!important;}

/* UTOMARRY FINAL: keep original vector navigation, remove assistant duplicates */
.footer-line,.utility,.mobile-project-nav,.ab-visual-footer{display:none!important}

.artframe .card-pop{background:var(--card-bg,transparent)}
