:root{--blue:#148cf0;--sky:#78d9ff;--deep-blue:#043986;--gold:#ffd343;--pink:#ff647e;--purple:#2d1054;--mid-purple:#4b2484;--paper:#f7f4ee;--ink:#0e1a32;--sans:Arial,Helvetica,sans-serif;--display:Impact,'Arial Narrow','Liberation Sans Narrow',sans-serif} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}body.intro-active{overflow:hidden}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ff9e21;outline-offset:4px}button:disabled{cursor:default;opacity:.4}[hidden]{display:none!important}.skip-link{position:fixed;top:-80px;left:10px;padding:14px 20px;background:#fff;color:#080808;z-index:10000}.skip-link:focus{top:12px}.preview-ribbon{position:fixed;bottom:14px;left:14px;z-index:18;color:white;background:#13294fbf;backdrop-filter:blur(14px);border:1px solid #ffffff40;border-radius:3px;padding:7px 9px;font:700 9px var(--sans);letter-spacing:.13em;pointer-events:none}.preview-ribbon span{color:var(--gold)} /* The opening owns all pointer input while it is present. This prevents the fixed site chrome underneath from covering its Skip control on mobile. */ body.intro-active .site-header,body.intro-active #main,body.intro-active .footer,body.intro-active #heroAlbumPortal{pointer-events:none} /* INTRO — the official video and its fallback preserve a functional transition. */ .intro{position:fixed;inset:0;z-index:110;background:#07162e;color:white;overflow:hidden;isolation:isolate;transition:opacity 1.2s cubic-bezier(.18,.65,.25,1),transform 1.2s cubic-bezier(.18,.65,.25,1),filter 1.2s}.intro.leaving{opacity:0;filter:blur(17px);transform:scale(1.06);pointer-events:none}.intro-photo{position:absolute;inset:-5%;z-index:0;background:linear-gradient(90deg,#00173399,#0d0c2c33,#071b38aa),url('../assets/intro-chorus-poster.webp') center 42%/cover;transform:scale(1.08);animation:introZoom 9s ease-out both}.intro-media{position:absolute;inset:-7%;pointer-events:none;z-index:1;opacity:0;transition:opacity .45s;transform:scale(1.12);filter:saturate(1.17) contrast(1.1)}.intro-media.is-playing{opacity:.9}.intro-media iframe,.intro-media video{width:100%;height:100%;border:0;object-fit:cover;pointer-events:none}.intro-noise{position:absolute;inset:0;opacity:.35;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,#fff1 6px,transparent 7px),radial-gradient(ellipse at 70% 30%,transparent 12%,#08112b99 86%)}.intro-vignette{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,#030818a8,transparent 34%,transparent 55%,#030818cf),linear-gradient(90deg,#020a1cd9,transparent 90%)}.intro-top{position:absolute;z-index:4;top:40px;left:5.3vw;right:5.3vw;display:flex;align-items:center;justify-content:space-between}.intro-tag{font-weight:900;letter-spacing:.14em;font-size:11px}.intro-tag span{color:var(--gold);padding:0 8px}.button-ghost{border:1px solid #ffffff85;background:#11192750;color:white;border-radius:99px;padding:12px 20px;font-size:11px;font-weight:900;letter-spacing:.06em}.button-ghost:hover{background:white;color:#07162e}.intro-content{position:absolute;z-index:4;bottom:13%;left:7%;max-width:860px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.25em}.eyebrow.light{color:#f4dfbb}.intro-title{font:900 clamp(90px,16vw,260px)/.72 var(--display);letter-spacing:-.05em;margin:25px 0 22px;text-transform:uppercase;text-shadow:4px 5px 0 #16438a,0 0 30px #0c88e980}.intro-title em{font-style:normal;color:var(--gold)}.intro-crown{position:absolute;top:12%;left:65%;font:90px Arial;color:var(--gold);text-shadow:0 3px 24px #ffb629}.intro-subtitle{font-size:17px;font-weight:900;letter-spacing:.11em}.intro-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:32px}.button-white,.button-outline-white{font-weight:900;font-size:11px;letter-spacing:.08em;border-radius:99px;padding:18px 22px;display:inline-flex;align-items:center;gap:16px;transition:transform .3s,background .3s;border:1px solid white}.button-white{background:white;color:#111b30}.button-outline-white{background:#0003;color:white}.button-white:hover,.button-outline-white:hover{transform:translateY(-3px)}.button-outline-white:hover{background:#fff3}.intro-bottom{position:absolute;z-index:4;bottom:32px;left:5.3vw;right:5.3vw;display:flex;justify-content:space-between;font-weight:900;font-size:10px;letter-spacing:.2em}.intro-count{color:var(--gold)}.intro-progress{position:absolute;z-index:4;bottom:0;height:5px;width:100%;background:#fff4}.intro-progress>div{height:100%;background:var(--gold);width:0;transition:width .1s linear} /* GLOBAL NAV */ .site-header{position:fixed;z-index:45;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(24px,4.8vw,88px);height:78px;color:#102040;transition:background .35s,box-shadow .35s,transform .35s}.site-header.is-scrolled{background:#fcfbf0ec;box-shadow:0 1px 16px #1b37601c;backdrop-filter:blur(17px)}.brand{display:flex;flex-direction:column;position:relative;font:900 23px/.72 var(--display);letter-spacing:-.075em;transform:skew(-8deg) rotate(-3deg);width:108px;text-shadow:.5px .5px #181b28}.brand-big{font-size:19px}.brand-mondo{font-size:34px}.brand-dot{color:var(--gold)}.brand-crown{position:absolute;font:28px Arial;top:-7px;right:-6px;color:#f6b700;transform:rotate(15deg)}.desktop-nav{display:flex;gap:clamp(16px,3vw,42px);align-items:center;padding-left:32px}.desktop-nav a,.header-stream{font-size:11px;letter-spacing:.1em;font-weight:900;position:relative;white-space:nowrap}.desktop-nav a:after{content:"";position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--blue);transition:width .2s}.desktop-nav a:hover:after,.desktop-nav a:focus:after{width:100%}.header-actions{display:flex;gap:16px;align-items:center}.header-stream{border:1.5px solid #0e2342;background:#0e2342;color:#fff;border-radius:99px;padding:13px 18px;display:inline-flex;align-items:center;gap:9px}.header-stream:hover{background:var(--blue);border-color:var(--blue)}.status-dot,.live-dot{display:inline-block;width:8px;height:8px;background:#ffdd54;border-radius:100%;box-shadow:0 0 0 4px #ffda4820}.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;border:0;background:transparent;width:39px;height:37px}.menu-toggle span{width:100%;height:3px;background:#0f274e;transform:skewX(-17deg)}.mobile-menu{position:absolute;top:78px;left:0;right:0;background:#fffdf5;padding:30px;box-shadow:0 20px 30px #0002;display:flex;flex-direction:column;gap:18px}.mobile-menu a{font:900 28px var(--display);letter-spacing:.03em} /* HERO — layered depth, pointer-responsive on desktop */ .hero{height:100svh;min-height:685px;max-height:1160px;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#ecf7fd 0%,#b6dcf5 36%,#6fbbf1 61%,#164b95 88%,#112f65 100%)}.hero:before{content:"";z-index:4;pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(#ffffff42 .7px,transparent .7px);background-size:7px 7px;mix-blend-mode:soft-light;opacity:.36}.hero-sky{position:absolute;inset:-2%;background:radial-gradient(ellipse at 13% 21%,#fff9e0ef 0,transparent 35%),radial-gradient(ellipse at 74% 11%,#ffffffd8 0,transparent 36%),radial-gradient(ellipse at 52% 12%,#a5daef 0,transparent 38%),linear-gradient(135deg,#dce9ed 5%,#65c6ff 57%,#2057a4 100%);z-index:-4;transform:translate3d(calc(var(--px,0)*-4px),calc(var(--py,0)*-3px),0)}.sky-halo{position:absolute;inset:-5%;z-index:-3;pointer-events:none;background:radial-gradient(330px 280px at calc(50% + var(--mouse-x,0px)) calc(45% + var(--mouse-y,0px)),#ffe7a27e,transparent 75%);opacity:.8}.skyline{position:absolute;bottom:-1px;left:-3%;width:106%;height:76%;z-index:-2;background:url('../assets/skyline.svg') center bottom/cover no-repeat;opacity:.84;transform:translate3d(calc(var(--px,0)*-5px),0,0)}.hero:after{content:"";position:absolute;inset:auto 0 0;height:35%;pointer-events:none;background:linear-gradient(180deg,transparent,#081d48b5);z-index:1}.hero-word{position:absolute;top:22%;font:900 clamp(130px,16vw,310px)/.85 var(--display);letter-spacing:-.07em;z-index:-1;filter:drop-shadow(0 5px #0d3a82b9);white-space:nowrap;user-select:none;pointer-events:none;transform-origin:center center}.hero-word-big{left:1.7%;color:#18a9ff;-webkit-text-stroke:2px #1375bd;transform:skew(-9deg) rotate(-4deg) translate3d(calc(var(--px,0)*12px),calc(var(--py,0)*10px),0);text-shadow:4px 8px 0 #043f9d}.hero-word-mondo{right:.4%;top:24%;color:#ffd43e;-webkit-text-stroke:2px #ffbd2d;transform:skew(-9deg) rotate(-4deg) translate3d(calc(var(--px,0)*-11px),calc(var(--py,0)*6px),0);text-shadow:4px 8px 0 #ba7b11}.hero-crown{position:absolute;right:14%;top:15%;width:110px;z-index:0;transform:rotate(-13deg) translate3d(calc(var(--px,0)*-16px),0,0);filter:drop-shadow(0 7px 0 #bc791e)}.hero-crown img{width:100%;filter:invert(79%) sepia(83%) saturate(684%) hue-rotate(352deg) brightness(108%)}.hero-spray{position:absolute;color:#fff8bb;font:70px Arial;z-index:0;text-shadow:0 3px #f4ba53}.spray-one{top:25%;left:42%;transform:rotate(-20deg)}.spray-two{top:42%;right:9%;font-size:40px}.hero-portrait-wrap{position:absolute;z-index:1;height:108%;width:auto;left:50%;bottom:-22%;transform:translate3d(calc(-50% + var(--px,0)*15px),calc(var(--py,0)*9px),0) scale(1);transform-origin:bottom center;filter:drop-shadow(0 23px 20px #04143555);transition:filter .2s;pointer-events:none;will-change:transform}.hero-portrait-wrap picture{height:100%;display:block}.hero-portrait{height:100%;width:auto;max-width:none;display:block;object-fit:contain;object-position:bottom}.hero.reveal .hero-portrait-wrap{animation:portraitReveal 1.4s cubic-bezier(.16,.73,.13,1) both}.hero.reveal .hero-word{animation:wordPop 1.25s cubic-bezier(.18,.82,.22,1) both}.hero-copy{position:absolute;z-index:5;left:5.8%;bottom:21%;width:390px;max-width:32%;color:white;text-shadow:0 2px 14px #052a63b0}.mini-rule{font-size:10px;font-weight:900;letter-spacing:.15em;display:flex;gap:13px;align-items:center;margin-bottom:18px}.hero-copy h2{font:900 clamp(29px,2.7vw,54px)/1.01 var(--display);letter-spacing:-.014em;margin:0 0 17px;transform:skew(-3deg)}.hero-copy h2 em{font-style:normal;color:var(--gold)}.hero-copy p{font-size:11px;letter-spacing:.12em;font-weight:800;margin:0 0 24px}.hero-copy strong{color:var(--gold)}.hero-buttons{display:flex;gap:10px;flex-wrap:wrap}.button-primary,.button-secondary{border-radius:50px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:900;font-size:12px;box-shadow:0 4px 20px #00194a54;white-space:nowrap;transition:transform .23s,background .23s;padding:14px 21px;min-height:47px}.button-primary{color:#0b2045;background:var(--gold);border:2px solid var(--gold)}.button-secondary{background:#0d285f6d;border:2px solid white;color:white;backdrop-filter:blur(7px)}.button-primary:hover,.button-secondary:hover{transform:translateY(-4px) scale(1.025)}.play-triangle,.play-ring{font-size:10px;display:inline-flex;align-items:center;justify-content:center;border-radius:100%;width:22px;height:22px;background:#071f44;color:var(--gold);text-shadow:none}.play-ring{background:white;color:#173f7d}.hero-album{position:absolute;right:5.5%;bottom:24%;z-index:5;width:170px;transform:rotate(5deg);padding:10px 11px 12px;background:#0c2a589e;border:1px solid #ffe7a5a0;box-shadow:0 0 17px #fecb5e8c,0 14px 25px #06214899;color:white;backdrop-filter:blur(5px)}.album-topline,.hero-album-bottom{display:flex;justify-content:space-between;font-weight:900;font-size:9px;letter-spacing:.07em}.album-topline{padding-bottom:7px;color:#ffe389}.hero-album-art{width:100%;aspect-ratio:1;position:relative;overflow:hidden;background:linear-gradient(145deg,#10316d,#1d4487 40%,#ecc041);outline:1px solid #ffd977}.hero-album-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.album-art-fallback{font:900 33px/.79 var(--display);letter-spacing:-.02em;color:#fff;transform:skew(-8deg) rotate(-5deg);padding:14px 10px;text-shadow:2px 3px #003868}.album-art-fallback b{color:var(--gold)}.album-art-fallback small{display:block;font:900 10px Arial;letter-spacing:.25em;margin-top:11px;transform:skew(8deg)}.hero-album-bottom{display:block;padding-top:9px}.hero-album-bottom strong{font-size:12px;display:block}.hero-album-bottom span{font-size:9px;display:block;letter-spacing:.12em;color:#fff6c7;margin-top:4px}.scroll-cue{position:absolute;z-index:6;bottom:55px;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:8px;color:white;text-shadow:0 2px 5px #0017}.scroll-mouse{width:20px;height:31px;border:2px solid white;border-radius:15px;display:flex;justify-content:center;padding-top:6px}.scroll-mouse span{width:3px;height:7px;border-radius:3px;background:white;animation:scrollDot 2s infinite}.scroll-cue small{font-weight:900;letter-spacing:.13em;font-size:9px}.down-arrow{font-size:22px;line-height:1}.bottom-tagline{position:absolute;z-index:3;bottom:12px;left:0;right:0;text-align:center;color:#cbeeff88;font-weight:900;letter-spacing:.28em;font-size:8px}.bottom-tagline span{color:#ffc649} /* PINNED ALBUM CARDS */ .tracks-section{height:305vh;position:relative;background:#200d49;color:#fff;isolation:isolate}.tracks-sticky{position:sticky;top:0;height:100svh;min-height:660px;overflow:hidden;background:radial-gradient(ellipse at 20% 40%,#5429a7 0,transparent 53%),radial-gradient(ellipse at 80% 65%,#5d167a 0,transparent 51%),linear-gradient(110deg,#220b48,#190837 65%,#261045)}.tracks-sticky:before{content:"";position:absolute;inset:0;opacity:.27;pointer-events:none;background:radial-gradient(#af74df .9px,transparent .9px);background-size:8px 8px}.tracks-sticky:after{content:"";position:absolute;inset:auto 0 0;height:18px;background:var(--paper);clip-path:polygon(0 35%,3% 54%,8% 19%,13% 60%,20% 32%,27% 62%,31% 25%,36% 53%,43% 26%,49% 57%,53% 36%,57% 65%,63% 25%,70% 60%,74% 30%,80% 57%,85% 24%,90% 60%,95% 31%,100% 49%,100% 100%,0 100%);z-index:6}.tracks-mist{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 65%,#8e3fc24a,transparent 75%);pointer-events:none}.tracks-outline{position:absolute;top:11%;left:-2%;right:-2%;font:900 clamp(90px,17vw,290px)/.9 var(--display);letter-spacing:-.06em;text-align:center;color:#ae66ff19;white-space:nowrap}.tracks-heading{position:absolute;top:13%;left:6%;right:6%;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:20px;pointer-events:none}.tracks-heading .eyebrow{color:#e2acff;font-size:10px}.tracks-heading h2{margin:8px 0 0;font:900 clamp(48px,5vw,88px)/.86 var(--display);letter-spacing:-.02em;transform:skew(-5deg);text-shadow:4px 4px #4f0d8b}.tracks-heading h2 em{font-style:normal;color:var(--gold)}.tracks-heading p{font-weight:900;line-height:1.8;font-size:10px;letter-spacing:.12em;max-width:235px;text-align:right;color:#e6dbf6}.tracks-heading p strong{color:var(--gold)}.track-deck{position:absolute;top:45%;left:0;display:flex;gap:24px;width:max-content;padding-left:9vw;will-change:transform;z-index:4}.song-card{--tilt:0deg;--rise:0px;flex:none;width:230px;height:328px;transform:translateY(var(--rise)) rotate(var(--tilt));transition:filter .2s;transform-origin:center center}.song-card button{display:block;position:relative;width:100%;height:100%;padding:0;border:1.5px solid #ffda5f;border-radius:12px;background:#13113b;box-shadow:0 0 0 3px #ffdc6545,0 0 25px #ffaa4e6b,0 18px 30px #0008;overflow:hidden;color:white;text-align:left;transform:perspective(600px) rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg));transition:transform .24s ease,box-shadow .24s;will-change:transform}.song-card button:hover,.song-card button:focus-visible{box-shadow:0 0 0 3px #ffdc65c2,0 0 35px #ffbd59dc,0 25px 50px #0009;transform:perspective(600px) rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg)) scale(1.045)}.song-card.active button{outline:3px solid #b9ffea;outline-offset:4px;box-shadow:0 0 25px #a0ffe5a8,0 14px 35px #0009}.card-art{height:247px;position:relative;background:linear-gradient(140deg,var(--a,#168aff),var(--b,#704ce4));overflow:hidden;isolation:isolate}.card-art:before{content:"";position:absolute;inset:-35%;z-index:-1;background:repeating-linear-gradient(38deg,transparent 0 12px,#ffffff14 13px 16px,transparent 17px 30px);transform:rotate(-12deg)}.card-art:after{content:"";position:absolute;width:190px;height:190px;background:#ffe86b66;border-radius:100%;left:30%;top:-10%;filter:blur(36px);z-index:-1}.card-figure{position:absolute;height:119%;width:auto;max-width:none;bottom:-38%;left:22%;filter:drop-shadow(0 9px 13px #0006)}.song-card:nth-child(even) .card-figure{left:-18%;height:125%;transform:scaleX(-1)}.song-card:nth-child(3n) .card-figure{left:35%;transform:rotate(8deg)}.card-art-text{position:absolute;z-index:1;bottom:19px;left:13px;right:8px;font:900 clamp(25px,2.4vw,47px)/.9 var(--display);letter-spacing:-.02em;text-shadow:3px 4px #0005;transform:skew(-7deg) rotate(-6deg);white-space:pre-line}.card-art-crown{position:absolute;top:11px;right:12px;font-size:39px;color:#fff0a2;line-height:1;transform:rotate(20deg)}.card-noise{position:absolute;inset:0;pointer-events:none;background:radial-gradient(#fff5 .7px,transparent .7px);background-size:7px 7px;opacity:.28}.card-bottom{height:80px;position:relative;background:#0b0d35;padding:13px 14px 12px}.card-bottom small{display:block;color:#b7a6d8;font-weight:900;font-size:10px;letter-spacing:.17em}.card-bottom strong{display:block;margin-top:6px;font:900 18px/.97 var(--display);letter-spacing:.01em;text-transform:uppercase;max-width:168px}.card-play{position:absolute;right:12px;bottom:16px;width:34px;height:34px;border:1.5px solid #fff;border-radius:100%;display:flex;align-items:center;justify-content:center;background:#fff2;font-size:12px}.card-details{position:absolute;top:12px;left:13px;font-size:10px;letter-spacing:.15em;font-weight:900;color:#fffcd6}.track-progress{position:absolute;bottom:6%;left:6%;z-index:5;display:flex;align-items:center;gap:25px}.progress-label{display:flex;align-items:center;gap:13px;font-weight:900;font-size:10px;letter-spacing:.12em}.progress-track{width:210px;height:2px;background:#ffffff4c}.progress-track span{display:block;height:100%;background:var(--gold);width:8%;transition:width .1s}.track-progress p{font-size:9px;letter-spacing:.17em;color:#cfb8ef}.deck-actions{position:absolute;z-index:5;right:6%;bottom:6%;display:flex;gap:10px}.round-arrow{background:transparent;border:1px solid #ddd0fb;border-radius:50%;width:45px;height:45px;color:white;font-size:18px;transition:background .2s,transform .2s}.round-arrow:hover{background:#fff2;transform:scale(1.07)}.track-scroll-instruction{position:absolute;top:43%;right:5%;font-size:10px;font-weight:900;letter-spacing:.1em;writing-mode:vertical-rl;color:#eed9ffab}.track-scroll-instruction span{font-size:18px;margin-top:8px;color:var(--gold)} /* VIDEO & ABOUT */ .videos-section{position:relative;padding:clamp(80px,9vw,150px) 7vw clamp(80px,10vw,145px);background:#f5f1e9;overflow:hidden}.video-heading{position:relative;display:flex;align-items:end;justify-content:space-between;margin-bottom:40px}.video-heading .eyebrow{position:absolute;top:-29px;color:#3275c3}.video-heading h2{font:900 clamp(70px,9vw,164px)/.8 var(--display);letter-spacing:-.05em;margin:0;transform:skew(-5deg)}.video-heading h2 em{font-style:normal;color:var(--blue)}.video-heading p{font-size:11px;line-height:1.8;letter-spacing:.12em;font-weight:900;max-width:180px;text-align:right}.video-card{position:relative;display:block;overflow:hidden;width:100%;height:min(56vw,650px);min-height:360px;border:0;text-align:left;color:#fff;padding:0;background:#163874;box-shadow:0 19px 0 #fccd3b;isolation:isolate}.video-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 33%;transition:transform .8s;filter:saturate(1.05)}.video-card:hover>img{transform:scale(1.05)}.video-card-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#063b85df 0%,#09366f9a 36%,#05275b15 100%),linear-gradient(0deg,#092953cf 0,transparent 45%)}.video-big-title{position:absolute;z-index:2;top:17%;left:6%;font:900 clamp(75px,11.6vw,187px)/.84 var(--display);letter-spacing:-.04em;color:white;text-shadow:5px 6px #086dc5;transform:skew(-5deg)}.title-asterisk{color:var(--gold);font:70px Arial;vertical-align:top}.big-play{position:absolute;z-index:3;left:52%;top:54%;transform:translate(-50%,-50%);border-radius:100%;background:var(--gold);color:#073c71;font-size:29px;width:100px;height:100px;display:flex;justify-content:center;align-items:center;box-shadow:0 0 0 12px #ffe16c65,0 0 45px #e6e9ff80;transition:transform .3s}.video-card:hover .big-play{transform:translate(-50%,-50%) scale(1.12)}.video-kicker{position:absolute;z-index:3;bottom:22px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:11px;font-weight:900;letter-spacing:.12em}.video-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:30px;font-size:11px;font-weight:900;letter-spacing:.1em}.video-bottom a{border-bottom:2px solid #073c71;padding:8px 0;color:#0643a0}.about-section{padding:90px 7vw 115px;background:linear-gradient(138deg,#fee49c 0%,#ffcf68 50%,#ffb957 100%);position:relative;overflow:hidden}.about-section:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff5 1px,transparent 1px);background-size:12px 12px;pointer-events:none}.about-kicker{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #23112c;padding-bottom:18px;font-size:11px;font-weight:900;letter-spacing:.13em;position:relative;z-index:1}.about-layout{display:grid;grid-template-columns:1fr 1fr;min-height:540px;gap:5%;align-items:center;position:relative;z-index:1}.about-main h2{font:900 clamp(76px,9vw,155px)/.8 var(--display);letter-spacing:-.05em;margin:45px 0 26px;transform:skew(-5deg)}.about-main h2 em{font-style:normal;color:#1764c9}.about-main p{max-width:430px;line-height:1.65;font-size:18px;font-weight:600}.about-links{display:flex;gap:17px;flex-wrap:wrap;margin-top:35px}.about-links a{font-weight:900;font-size:11px;border-bottom:2px solid #10182b;padding-bottom:9px}.about-photo-frame{margin-left:auto;position:relative;width:min(100%,460px);height:510px;background:linear-gradient(155deg,#449efa,#0744ae);border:12px solid #fff8f1;box-shadow:20px 20px 0 #ff8d55;overflow:hidden;transform:rotate(4deg)}.about-photo-frame>img{position:absolute;z-index:2;height:124%;width:auto;max-width:none;bottom:-50%;left:50%;transform:translateX(-50%)}.about-squiggle{position:absolute;inset:25px;font:900 112px/.75 var(--display);transform:rotate(-9deg);letter-spacing:-.06em;color:#fff8e3;text-shadow:4px 4px #0a63be}.about-squiggle span{font:75px Arial;color:#ffdb50} .footer{padding:60px 7vw 36px;min-height:220px;background:#142a66;color:white;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:22px}.footer-brand{font:900 47px var(--display);letter-spacing:-.03em}.footer-brand span{color:var(--gold)}.footer>span,.footer>a:not(.footer-brand){font-weight:900;font-size:11px;letter-spacing:.13em;margin-top:23px}.footer>a:not(.footer-brand){text-align:right}.footer-credit{grid-column:1/-1;border-top:1px solid #ffffff43;padding-top:24px;font-size:12px;letter-spacing:.04em;color:#b9d0ff} /* audio player */ .player{position:fixed;z-index:75;left:50%;bottom:17px;transform:translateX(-50%);width:min(880px,calc(100% - 28px));min-height:93px;display:flex;align-items:center;gap:18px;padding:13px 18px;background:#081b46f3;backdrop-filter:blur(25px);color:white;border:1px solid #ffe2856e;border-radius:16px;box-shadow:0 10px 55px #0009}.player-art{flex:none;width:65px;height:65px;background:linear-gradient(135deg,#078ffa,#9c5fea,#ffcf36);display:grid;place-items:center;border-radius:8px;font:900 30px var(--display);transform:skew(-3deg);text-shadow:2px 3px #0d2075}.player-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.player-label{font-size:8px;letter-spacing:.14em;color:#ffe0a5;font-weight:900}.player-meta>strong{font:900 22px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-timeline{display:flex;align-items:center;gap:10px;font-size:9px;color:#ced7f1}.player-timeline input{flex:1;min-width:60px;accent-color:#ffcd47;cursor:pointer;height:5px}.player-status{font-size:9px;color:#f7c9bc}.player-status:empty{display:none}.player-buttons{display:flex;gap:9px;align-items:center}.player-buttons button{border:0;background:transparent;color:white;font-size:17px}.player-buttons .player-main-button{background:var(--gold);color:#072256;border-radius:100%;height:42px;width:42px;font-size:16px;display:grid;place-items:center}.player-apple{border-radius:100px;background:#ffffff1f;border:1px solid #fff6;color:white;padding:12px;font-size:9px;font-weight:900;letter-spacing:.06em;white-space:nowrap}.player-buttons .player-close{font-size:17px}.toast{position:fixed;bottom:120px;left:50%;transform:translateX(-50%) translateY(30px);background:#112b5e;color:white;border:1px solid #aaccff;padding:12px 16px;border-radius:99px;font-size:12px;box-shadow:0 10px 35px #0006;z-index:90;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:calc(100vw - 30px);text-align:center}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)} .video-dialog{padding:0;width:min(980px,92vw);max-width:unset;background:#0b1640;border:1px solid #a2d5ff;color:white;box-shadow:0 24px 70px #000a}.video-dialog::backdrop{background:#03081cea;backdrop-filter:blur(10px)}.modal-top{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;font-size:11px;letter-spacing:.08em}.modal-top button{border:0;background:var(--gold);border-radius:99px;font-weight:900;padding:10px 16px}.video-dialog-inner{aspect-ratio:16/9;background:#082650}.video-dialog-inner iframe{width:100%;height:100%;border:0}.video-dialog>a{display:block;text-align:center;padding:17px;font-size:11px;font-weight:900;color:#b9e1ff;letter-spacing:.1em} /* BREAKPOINTS */ @media (min-width:1580px){.hero-copy{bottom:24%;max-width:29%}.hero-album{bottom:27%}.hero-portrait-wrap{bottom:-26%;height:115%}.hero-word{top:23%}.track-deck{top:43%}} @media (max-width:1100px){.hero-word{font-size:16vw}.hero-copy{max-width:37%;left:4%}.hero-copy h2{font-size:35px}.hero-album{right:4%;width:145px}.hero-portrait-wrap{height:96%;bottom:-18%}.desktop-nav{gap:19px}.header-stream{font-size:10px;padding:12px}.song-card{width:220px;height:315px}.card-art{height:237px}.card-bottom{height:78px}} @media (max-width:800px){.site-header{height:70px;padding:13px 19px}.desktop-nav{display:none}.menu-toggle{display:flex}.header-stream{padding:11px 13px;font-size:9px}.brand{width:87px}.brand-big{font-size:14px}.brand-mondo{font-size:28px}.brand-crown{right:0}.mobile-menu{top:70px}.hero{height:100svh;min-height:730px}.hero-word{font-size:clamp(100px,22vw,170px);top:22%}.hero-word-big{left:1%}.hero-word-mondo{right:-12%;top:34%;font-size:clamp(95px,19vw,165px)}.hero-crown{right:10%;top:16%;width:70px}.hero-portrait-wrap{height:82%;bottom:-11%;left:50%}.hero-copy{left:5%;bottom:16%;max-width:53%;width:290px}.hero-copy h2{font-size:clamp(28px,4.4vw,41px)}.hero-copy p{font-size:10px}.hero-buttons{gap:7px}.button-primary,.button-secondary{font-size:10px;padding:11px 14px;min-height:40px}.hero-album{right:4%;bottom:18%;width:125px;transform:rotate(6deg)}.album-art-fallback{font-size:27px}.scroll-cue{bottom:38px}.tracks-section{height:250vh}.tracks-heading{top:17%}.tracks-heading h2{font-size:clamp(48px,8vw,70px)}.tracks-heading p{font-size:9px}.track-deck{top:45%}.track-progress{bottom:6%}.video-heading h2{font-size:10vw}.about-layout{grid-template-columns:1fr 1fr;gap:0}.about-main h2{font-size:8vw}.about-photo-frame{height:410px}.about-photo-frame>img{height:128%;bottom:-44%}.about-squiggle{font-size:73px}.footer{grid-template-columns:1fr 1fr}.footer>span{display:none}.footer>a:not(.footer-brand){text-align:right}} @media (max-width:600px){.intro-top{top:27px}.intro-tag{font-size:9px}.intro-skip{font-size:9px;padding:11px 12px}.intro-content{bottom:18%;left:6%;right:6%}.intro-title{font-size:clamp(88px,23vw,142px);margin:20px 0}.intro-subtitle{font-size:12px}.intro-crown{font-size:50px;left:71%}.intro-actions{gap:8px;margin-top:27px}.button-white,.button-outline-white{font-size:9px;padding:15px}.intro-bottom{font-size:8px;bottom:29px}.hero{min-height:670px;max-height:none}.hero-sky{background:radial-gradient(ellipse at 18% 26%,#fff8e5 0,transparent 40%),linear-gradient(145deg,#f3f6f5 0%,#9ad8fd 58%,#15579f 100%)}.skyline{height:70%;width:180%;left:-38%;opacity:.72}.hero-word-big{left:-4%;top:17%;font-size:38vw}.hero-word-mondo{right:-4%;top:34%;font-size:23.5vw}.hero-crown{top:15%;right:15%;width:60px}.spray-one{left:35%;top:34%}.hero-portrait-wrap{height:84%;bottom:-14%}.hero-copy{bottom:14%;left:5%;max-width:57%;width:57%;z-index:7}.hero-copy .mini-rule{font-size:8px;gap:8px;margin-bottom:10px}.hero-copy h2{font-size:clamp(23px,6.3vw,38px);line-height:.95;margin-bottom:9px}.hero-copy p{font-size:8px;line-height:1.6;margin-bottom:15px;max-width:195px}.hero-buttons{gap:7px;flex-direction:column;align-items:start}.button-primary,.button-secondary{font-size:9px;gap:8px;padding:8px 12px;min-height:36px}.play-triangle,.play-ring{width:18px;height:18px;font-size:8px}.hero-album{bottom:19%;right:4%;width:100px;box-shadow:0 0 10px #fecb5e8c}.album-topline{font-size:6px}.hero-album-bottom strong{font-size:10px}.hero-album-bottom span{font-size:7px}.album-art-fallback{font-size:23px}.scroll-cue{bottom:23px;gap:4px}.scroll-cue small{font-size:8px}.bottom-tagline{display:none}.tracks-section{height:auto;min-height:0}.tracks-sticky{position:relative;min-height:760px;height:auto;padding-bottom:135px}.tracks-heading{position:relative;left:auto;right:auto;top:auto;padding:75px 6% 0;display:block}.tracks-heading h2{font-size:clamp(52px,12.5vw,80px)}.tracks-heading p{margin:15px 0 12px;max-width:260px;text-align:left;line-height:1.5}.tracks-outline{top:160px;font-size:22vw}.track-deck{position:relative;top:auto;left:auto;overflow-x:auto;width:100%;padding:30px 7vw 30px;scroll-snap-type:x mandatory;scroll-padding-inline:7vw;overscroll-behavior-x:contain;scrollbar-width:thin;transform:none!important;gap:19px}.song-card{width:min(62vw,250px);height:330px;transform:none!important;scroll-snap-align:center}.card-art{height:248px}.card-bottom{height:82px}.card-art-text{font-size:39px}.track-progress{left:7%;bottom:45px;gap:12px}.track-progress p{display:none}.progress-track{width:110px}.deck-actions{right:7%;bottom:37px}.track-scroll-instruction{display:none}.video-heading{display:block}.video-heading h2{font-size:15vw}.video-heading p{text-align:left;max-width:none;margin-top:26px}.video-card{min-height:360px;height:430px}.video-card>img{object-position:50% 38%}.video-big-title{top:14%;font-size:14vw}.title-asterisk{font-size:40px}.big-play{height:72px;width:72px;font-size:20px}.video-kicker{font-size:9px}.video-bottom{font-size:9px;gap:16px}.about-section{padding:70px 7vw 80px}.about-kicker{font-size:9px}.about-layout{grid-template-columns:1fr}.about-main h2{font-size:clamp(76px,16vw,120px)}.about-main p{font-size:16px}.about-photo-frame{margin:45px auto 0;height:440px;width:min(85vw,380px)}.about-photo-frame>img{height:128%;bottom:-50%}.footer{grid-template-columns:1fr;padding:55px 7vw 33px;gap:24px}.footer>a:not(.footer-brand){text-align:left;margin:0}.footer-credit{margin-top:6px}.player{width:calc(100% - 16px);bottom:8px;border-radius:12px;gap:8px;padding:10px}.player-art{width:44px;height:44px;font-size:21px}.player-meta>strong{font-size:18px}.player-label{font-size:7px;letter-spacing:.04em}.player-buttons{gap:2px}.player-buttons button{font-size:13px}.player-buttons .player-main-button{width:35px;height:35px;font-size:12px}.player-apple{display:none}.player-timeline{gap:4px}.player-timeline input{min-width:40px}.player-buttons .player-close{font-size:13px}.video-dialog{width:97vw}.modal-top{font-size:9px;padding:10px}.video-dialog>a{font-size:10px}.toast{bottom:108px}} @media(max-width:380px){.header-stream{font-size:8px}.hero-word-big{top:21%}.hero-word-mondo{top:38%}.hero-copy{bottom:15%}.hero-album{bottom:21%;width:88px}.hero-portrait-wrap{height:81%}.song-card{width:235px}} @media(max-width:360px){ .site-header{padding-left:10px;padding-right:10px} .header-actions{gap:7px} .brand{width:77px} .brand-big{font-size:13px}.brand-mondo{font-size:25px} .header-stream{font-size:7.5px;padding:8px 9px;gap:6px} } @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.hero-portrait-wrap,.hero-word-big,.hero-word-mondo,.hero-sky,.skyline{transform:none!important}.hero-portrait-wrap{transform:translateX(-50%)!important}.track-deck{transform:none!important}.tracks-section{height:auto}.tracks-sticky{position:relative;height:auto;min-height:700px}.track-deck{position:relative;overflow-x:auto;top:225px;padding:40px 8vw;width:100%;scroll-snap-type:x mandatory}.song-card{transform:none!important}.tracks-heading{top:75px}.track-progress{bottom:40px}} @keyframes introZoom{from{transform:scale(1.2)}to{transform:scale(1.03)}}@keyframes scrollDot{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:.1}}@keyframes portraitReveal{from{opacity:.1;filter:blur(13px);scale:1.065}to{opacity:1;filter:blur(0);scale:1}}@keyframes wordPop{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}} .actual-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.77;filter:saturate(1.12)}.song-card:has(.actual-cover) .card-art-text{font-size:36px;text-shadow:2px 4px #000,0 0 15px #0009}.song-card:has(.actual-cover) .card-art:after{display:none} /* Crovixa V3 — reference-analyzed film → portrait → artist page transition. Reference timestamps show a sharp edit at ~8.7s, hero reaches medium shot by ~9.1s, and captions/cards appear around ~9.3–9.6s. The real Big Mondo footage and his approved cutout are distinct original assets. All transition layers are composited, and the final portrait is the SAME DOM image used after the transition: no visual asset swapping in the handoff. */ .intro{transition:none!important;overscroll-behavior:contain;background:#050c17} .intro-photo{inset:0;background:#0b2534 url('../assets/intro-chorus-poster.webp') center center/cover no-repeat;animation:none;transform:none} .intro-media{inset:0;transform:none;filter:none;transition:opacity .15s ease-out;opacity:0} .intro-media.is-playing{opacity:1} .intro-media video{height:100%;width:100%;object-fit:cover;display:block} .intro-vignette{background:linear-gradient(180deg,#07111e48,transparent 21%,transparent 75%,#07111e80);pointer-events:none} .intro-noise{opacity:.045;background-image:repeating-linear-gradient(0deg,#fff3 0 1px,transparent 1px 7px);background-size:100% 7px} .intro-top{top:28px} .intro-tag{font-size:10px;letter-spacing:.18em;text-shadow:0 2px 8px #030918} .intro-skip{background:#111e2b45;border-color:#fafcffaa} .intro-bottom{align-items:center;gap:14px;bottom:29px;z-index:6;text-shadow:0 2px 8px #071321;letter-spacing:.13em} .intro-film-label{font-size:9px;letter-spacing:.2em;max-width:39%} .intro-scroll-hint{appearance:none;border:0;background:transparent;color:#fff;font:800 10px var(--sans);letter-spacing:.25em;display:flex;align-items:center;gap:14px;padding:12px;white-space:nowrap} .intro-scroll-hint .ui-icon{font-size:18px;animation:scrollDot 1.5s infinite} .intro-right{display:flex;align-items:center;gap:12px} .intro-count{color:#fff;font:800 10px var(--sans);letter-spacing:.14em} .intro-sound{border:1px solid #f1f7ff9e;backdrop-filter:blur(9px);border-radius:100px;background:#08244860;color:white;font:800 10px var(--sans);letter-spacing:.1em;padding:11px 14px} .intro-progress{height:2px;background:#ffffff33;z-index:7} .intro-progress>div{background:#fff7e3;transition:width .08s linear} .intro-fallback{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding:26px;max-width:440px;width:min(88vw,440px);background:#09204bde;border:1px solid #fff8;box-shadow:0 20px 80px #0008;backdrop-filter:blur(15px)} .intro-fallback span{font:900 12px var(--sans);letter-spacing:.15em;color:var(--gold)} .intro-fallback p{margin:18px auto;line-height:1.55;font-size:15px} .intro-fallback .button-white{border-radius:100px;justify-content:center} /* One cut, no dissolve from video: the hero's tightly framed portrait appears on frame zero with an editorial light backdrop, then a 460ms camera pullback. */ .intro.match-cut{opacity:0!important;filter:none!important;transform:none!important;transition:opacity 0.025s steps(1,end)!important;pointer-events:none} .intro.is-precut .intro-top,.intro.is-precut .intro-bottom,.intro.is-precut .intro-progress{opacity:0;transition:opacity .14s ease-out} /* The matte sits above all poster background layers, below only the real subject. It stops the blue skyline and oversized lettering from appearing too early. */ .hero-cinematic-matte{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background: radial-gradient(ellipse at 50% 28%,#ffffff 5%,#e9f4f5 65%,#d9e9ee 100%);overflow:hidden} .hero-cinematic-matte:before{content:"";position:absolute;inset:0;background: repeating-linear-gradient(135deg,#24365b0b 0 2px,transparent 2px 15px), radial-gradient(#202c3d0b .9px,transparent 1px);background-size:auto,7px 7px;opacity:.47} .hero-matte-type{font:900 clamp(190px,32vw,690px)/.8 var(--display);position:absolute;left:50%;top:41%;transform:translate(-50%,-50%) scaleX(1.09);color:#162f5111;white-space:nowrap;letter-spacing:-.07em;user-select:none} .hero-matte-mark{position:absolute;right:17%;top:20%;font-size:64px;color:#1c458b21;transform:rotate(25deg)} .hero-portrait-wrap{z-index:4} .hero-portrait-wrap picture{transform-origin:50% 19%;display:block;backface-visibility:hidden} .hero-copy{z-index:6} .hero-album{z-index:6} .hero-scroll-cue{z-index:7} .hero.cinematic-enter .hero-cinematic-matte{animation:cinematicMatte .76s linear both;will-change:opacity} .hero.cinematic-enter .hero-portrait-wrap picture{animation:cinematicPullback .53s cubic-bezier(.25,.3,.18,1) both;will-change:transform} .hero.cinematic-enter .hero-word-big{animation:cinematicWord .57s ease-out .34s both} .hero.cinematic-enter .hero-word-mondo{animation:cinematicWord .62s ease-out .41s both} .hero.cinematic-enter .hero-copy{animation:cinematicLeft .50s cubic-bezier(.16,.72,.24,1) .59s both} .hero.cinematic-enter .hero-album{animation:cinematicAlbum .56s cubic-bezier(.17,.8,.2,1) .70s both} .hero.cinematic-enter .hero-crown,.hero.cinematic-enter .hero-spray{animation:cinematicUI .53s ease-out .56s both} .hero.cinematic-enter .scroll-cue,.hero.cinematic-enter .bottom-tagline,.hero.cinematic-enter .hero-replay{animation:cinematicUI .45s ease-out .95s both} body.post-intro-transition .site-header{animation:cinematicUI .52s ease-out .63s both} @keyframes cinematicPullback{ 0%{transform:scale(3.48) translate3d(0,.8%,0);filter:contrast(1.02)} 40%{transform:scale(1.53) translate3d(0,0,0);filter:contrast(1.008)} 88%{transform:scale(.997) translate3d(0,0,0);filter:contrast(1)} 100%{transform:scale(1) translate3d(0,0,0);filter:contrast(1)} } @keyframes cinematicMatte{ 0%,34%{opacity:1} 72%{opacity:.14} 100%{opacity:0} } @keyframes cinematicWord{0%{opacity:0;clip-path:inset(0 0 100% 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}} @keyframes cinematicLeft{0%{opacity:0;translate:-20px 15px}100%{opacity:1;translate:0 0}} @keyframes cinematicAlbum{0%{opacity:0;translate:28px 19px;rotate:3deg}100%{opacity:1;translate:0 0;rotate:0deg}} @keyframes cinematicUI{0%{opacity:0}100%{opacity:1}} .hero-replay{position:absolute;z-index:8;right:4.9%;bottom:40px;color:white;background:#0b265c70;border:1px solid #e4f5ffb4;backdrop-filter:blur(9px);border-radius:50px;padding:10px 12px;letter-spacing:.11em;font:900 9px var(--sans);text-shadow:0 2px 6px #0008;transition:background .25s,transform .25s} .hero-replay:hover{background:#116cf1;transform:translateY(-3px)} /* Slightly calmer composition: retain the approved blue/yellow direction while easing the V2 drop shadows and glowing artwork into an editorial balance. */ .hero-word-big{text-shadow:3px 5px 0 #043f9d;filter:drop-shadow(0 3px #0d3a82b9)} .hero-word-mondo{text-shadow:3px 5px 0 #ba7b11;filter:drop-shadow(0 3px #0d3a82b9)} .hero-album{box-shadow:0 11px 28px #06214866,0 0 0 1px #ffe7a576;backdrop-filter:blur(8px)} @media(max-width:800px){ .hero.cinematic-enter .hero-portrait-wrap picture{animation-name:cinematicPullbackMobile} .hero-replay{right:15px;bottom:23px;font-size:8px} } @keyframes cinematicPullbackMobile{0%{transform:scale(2.45) translate3d(0,2%,0)}45%{transform:scale(1.20)}100%{transform:scale(1)}} @media(max-width:600px){ .intro-top{left:5%;right:5%;top:19px}.intro-tag{font-size:8px;max-width:63%;line-height:1.4} .intro-bottom{left:5%;right:5%;bottom:27px;display:grid;grid-template-columns:1fr auto;row-gap:8px} .intro-film-label{grid-column:1/-1;max-width:none}.intro-scroll-hint{grid-row:2;justify-self:start;padding-left:0;font-size:9px} .intro-right{grid-row:2;justify-self:end}.intro-count{display:none}.intro-sound{padding:8px 10px} .hero.cinematic-enter .hero-copy{animation-delay:.52s}.hero.cinematic-enter .hero-album{animation-delay:.57s} .hero-replay{bottom:63px;right:10px;padding:8px 10px} .hero-matte-type{font-size:58vw} } @media(prefers-reduced-motion:reduce){ .intro{display:none!important} .hero.cinematic-enter .hero-portrait-wrap picture,.hero.cinematic-enter .hero-copy,.hero.cinematic-enter .hero-album, .hero.cinematic-enter .hero-word,.hero.cinematic-enter .hero-replay,body.post-intro-transition .site-header, .hero.cinematic-enter .hero-cinematic-matte{animation:none!important} .hero-replay{display:none} } /* Gallery handoff — the real scroll surface enters with the diagonal editorial reveal seen in the reference, rather than a hard horizontal section break. */ .tracks-section{z-index:5} .tracks-section:before{content:"";position:absolute;left:0;right:0;top:-17vh;height:17vh; background:linear-gradient(112deg,#2b1155,#210c48 53%,#251045 100%); clip-path:polygon(0% 100%,100% 0%,100% 100%);pointer-events:none;z-index:1;opacity:var(--gallery-wipe-alpha,0)} .song-card button{border-color:#f7e4ad;box-shadow:0 2px 0 #ceb778,0 14px 29px #0906238f,0 0 18px #efcd8b31} .song-card button:hover,.song-card button:focus-visible{box-shadow:0 0 0 2px #ffe5a885,0 16px 39px #090623aa,0 0 24px #efcd8b61} .preview-ribbon{display:none} @media(max-width:600px){.tracks-section:before{top:-10vh;height:10vh}} /* --------------------------------------------------------------------------- CROVIXA V3.1 — Continuous scroll story (Awwwards JJettas motion reference) The sticky hero and the pinned gallery are one normal document-flow sequence. No proprietary page assets/code from the reference are used. Native scroll position is the timeline, so reverse scrolling reverses the choreography. The gallery clips over the hero with its diagonal leading edge. --------------------------------------------------------------------------- */ .experience-story{position:relative;isolation:isolate;z-index:1} .experience-story>.hero{position:sticky;top:0;z-index:0;--hero-exit:0} .experience-story>.tracks-section{position:relative;z-index:2;--gallery-entry:0;--gallery-progress:0} .hero-exit-wash{position:absolute;inset:0;z-index:9;pointer-events:none; background:linear-gradient(180deg,transparent 0%,#081c4c30 50%,#110e40bb 100%); opacity:calc(var(--hero-exit,0) * .88);will-change:opacity} /* Extend the first dark frame upward to make a genuine diagonal overpaint, not a triangular border that appears after the hero has disappeared. */ .experience-story>.tracks-section:before{top:-22svh;height:22svh;opacity:var(--gallery-entry,0); background:linear-gradient(115deg,#291257 0%,#230d49 50%,#1c093e 100%); clip-path:polygon(0 96%,0 100%,100% 100%,100% 4%); pointer-events:none;transform:translateZ(0)} /* Light glint across the dividing surface is only visible as it enters. */ .experience-story>.tracks-section:after{content:"";position:absolute;top:-22svh;left:0;right:0;height:22svh; background:linear-gradient(118deg,transparent 0%,transparent 49.5%,#9d64fa4c 50%,transparent 50.5%); pointer-events:none;z-index:2;opacity:calc(var(--gallery-entry,0)*.8)} .tracks-outline{transform:translate3d(calc(var(--gallery-progress,0) * -2vw),0,0)} .tracks-heading{transform:translate3d(0,calc(var(--gallery-progress,0)*-1.5vh),0)} .song-card{backface-visibility:hidden;contain:layout style;} .song-card button{backface-visibility:hidden;transform-style:preserve-3d} /* No heavy 3D animation on touch/reduced-motion; keep the actual cards usable. */ @media(max-width:600px){ .experience-story>.hero{position:relative;top:auto} .experience-story>.tracks-section:before{top:-11svh;height:11svh;clip-path:polygon(0 95%,0 100%,100% 100%,100% 6%)} .experience-story>.tracks-section:after{top:-11svh;height:11svh} .hero-exit-wash{display:none} } @media(prefers-reduced-motion:reduce){ .experience-story>.hero{position:relative;top:auto} .experience-story>.tracks-section:before{display:none} .experience-story>.tracks-section:after{display:none} .hero-exit-wash{display:none} .tracks-outline,.tracks-heading{transform:none!important} } /* Use clip rather than a new horizontal scroll container; otherwise browser overflow propagation can disable position:sticky on desktop. */ body{overflow-x:clip} /* Mobile hero polish: keep the replay and exploration controls out of each other's hit targets and away from the main artist information. */ @media(max-width:600px){ .hero-replay{top:83px;right:12px;bottom:auto;z-index:10;padding:8px 11px;font-size:8px} .scroll-cue{bottom:12px;left:50%;width:max-content;max-width:85vw; flex-direction:row;gap:9px;background:#0b2357d9;border:1px solid #ffffff75; border-radius:40px;padding:9px 13px;backdrop-filter:blur(9px);z-index:10} .scroll-cue .scroll-mouse{display:none} .scroll-cue small{font-size:9px;letter-spacing:.13em} .scroll-cue .down-arrow{font-size:15px} } /* ═══════════════════════════════════════════════════════════════════════ CROVIXA V4 / FRAME-ACCURATE, SOUND-FIRST FILM + PORTRAIT / ORIGINAL BUILD Cinematic inspiration only: no external site's script, design files or media. ═══════════════════════════════════════════════════════════════════════ */ /* Legibility is not negotiable: all of BIG and all of MONDO sit INSIDE hero. */ .hero-word-big{left:3.7vw;top:22%;font-size:clamp(112px,15.0vw,255px)} .hero-word-mondo{right:4.2vw;top:23.6%;font-size:clamp(105px,14.1vw,248px)} .hero-word{letter-spacing:-.060em;will-change:transform} /* Broadcast-era texture: interlaced lines, restrained CRT grille and grain. Overlays do not obscure faces, playback or the real color grade. */ .intro{background:#031124} .intro-media{filter:saturate(1.055) contrast(1.048)} .intro-media.is-playing video{animation:crvxCinemaPush 9.4s linear both;transform-origin:50% 46%} @keyframes crvxCinemaPush{from{transform:scale(1.015)}to{transform:scale(1.072)}} .intro-broadcast{position:absolute;inset:0;z-index:3;pointer-events:none;isolation:isolate; background:repeating-linear-gradient(to bottom,rgba(2,10,30,.14) 0px,rgba(2,10,30,.14) 1px,transparent 2px,transparent 5px), repeating-linear-gradient(to right,rgba(255,63,77,.025) 0,rgba(255,63,77,.025) 1px,transparent 1px,transparent 3px), radial-gradient(ellipse at center,transparent 42%,rgba(2,11,27,.20) 100%); mix-blend-mode:multiply;opacity:.64} .intro-broadcast:before{content:"";position:absolute;inset:-50%;opacity:.13;mix-blend-mode:screen; background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".75" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".65"/%3E%3C/svg%3E'); background-size:180px 180px;animation:crvxNoise 1.05s steps(7) infinite} @keyframes crvxNoise{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-2%,2%)}75%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}} .broadcast-slug,.broadcast-timecode{position:absolute;display:block;bottom:85px;left:5.2%;color:rgba(255,255,255,.55);font:700 9px/1.3 var(--sans);letter-spacing:.27em;mix-blend-mode:normal;text-shadow:0 2px 7px #010c1f} .broadcast-timecode{left:auto;right:5.2%} .broadcast-timecode b{color:#ffce37;font-size:12px} .intro-noise{opacity:.035} .intro-vignette{z-index:4;background:linear-gradient(180deg,#06112744,transparent 18%,transparent 77%,#03102979),radial-gradient(ellipse at center,transparent 63%,#07112945 100%)} .intro-top,.intro-bottom,.intro-progress{z-index:6} .intro-audio-label{font:800 10px var(--sans);letter-spacing:.16em;color:#fff;white-space:nowrap} .intro-fallback{z-index:12;background:linear-gradient(145deg,#0b2554f4,#081b3ded);border-radius:18px;box-shadow:0 25px 120px #010713da,inset 0 0 0 1px #fff2;padding:38px 30px} .intro-fallback span:first-child{letter-spacing:.22em} .intro-fallback p{max-width:310px;font-size:14px;line-height:1.7;font-weight:650;margin:22px auto} .intro-fallback .button-white{min-width:220px;justify-content:center;background:var(--gold);border-color:var(--gold)} /* A true abrupt video edit, followed by an optical pullback and staged reveal. */ .intro.match-cut{opacity:0!important;transition:opacity .033s steps(1,end)!important;filter:none!important;transform:none!important} .hero-portrait-wrap picture{transform-origin:49.5% 20%;} .hero.cinematic-enter .hero-portrait-wrap picture{animation:crvxHeroDolly .78s cubic-bezier(.16,.77,.17,1) both} @keyframes crvxHeroDolly{ 0%{transform:translate3d(0,1.3%,0) scale(3.58);filter:contrast(1.03)} 12%{transform:translate3d(0,1.2%,0) scale(3.42);filter:contrast(1.025)} 55%{transform:translate3d(0,.2%,0) scale(1.19);filter:contrast(1)} 83%{transform:translate3d(0,0,0) scale(.983)} 100%{transform:translate3d(0,0,0) scale(1)} } .hero.cinematic-enter .hero-cinematic-matte{animation:crvxIrisWithdraw .80s cubic-bezier(.2,.55,.18,1) both} @keyframes crvxIrisWithdraw{ 0%,20%{opacity:1;clip-path:circle(140% at 50% 30%)} 65%{opacity:.68;clip-path:circle(65% at 50% 36%)} 100%{opacity:0;clip-path:circle(0% at 50% 40%)} } .hero-cut-flash{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0; background:radial-gradient(ellipse at 51% 30%,#fffdf3,#f0f9fe80 75%,transparent);mix-blend-mode:screen} .hero.cinematic-enter .hero-cut-flash{animation:crvxExposure .28s ease-out both} @keyframes crvxExposure{0%{opacity:.43}14%{opacity:.17}48%{opacity:.045}100%{opacity:0}} .hero.cinematic-enter .hero-word-big{animation:crvxWordReveal .55s cubic-bezier(.15,.72,.25,1) .38s both} .hero.cinematic-enter .hero-word-mondo{animation:crvxWordReveal .59s cubic-bezier(.15,.72,.25,1) .46s both} @keyframes crvxWordReveal{0%{opacity:0;clip-path:inset(100% 0 0 0);translate:0 26px}100%{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}} .hero.cinematic-enter .hero-copy{animation:crvxCopySlide .66s cubic-bezier(.16,.75,.2,1) .65s both} .hero.cinematic-enter .hero-album{animation:crvxAlbumSlide .61s cubic-bezier(.16,.74,.22,1) .72s both} .hero.cinematic-enter .hero-crown,.hero.cinematic-enter .hero-spray{animation:cinematicUI .45s ease-out .62s both} .hero.cinematic-enter .scroll-cue,.hero.cinematic-enter .bottom-tagline,.hero.cinematic-enter .hero-replay{animation:cinematicUI .5s ease-out 1.05s both} body.post-intro-transition .site-header{animation:cinematicUI .49s ease-out .85s both} @keyframes crvxCopySlide{0%{opacity:0;translate:-30px 16px}100%{opacity:1;translate:0 0}} @keyframes crvxAlbumSlide{0%{opacity:0;translate:34px 28px;rotate:3deg}100%{opacity:1;translate:0 0;rotate:0deg}} /* Card-stage emergence is progress-controlled and fully reversible, not a time-based animation triggered once by intersection. */ .experience-story>.tracks-section:before{top:-28svh;height:28svh;clip-path:polygon(0 94%,0 100%,100% 100%,100% 0);background:linear-gradient(120deg,#24104b,#28105b 55%,#1d093d)} .experience-story>.tracks-section:after{top:-28svh;height:28svh;opacity:calc(var(--gallery-entry,0) * .75);background:linear-gradient(118deg,transparent 0%,transparent 49.65%,#ffc94964 50%,transparent 50.35%)} .track-deck{translate:0 var(--deck-rise,0px);opacity:var(--deck-opacity,1);will-change:transform,translate} .tracks-heading{translate:0 var(--heading-rise,0px);opacity:var(--heading-opacity,1);will-change:translate,opacity} .tracks-outline{opacity:calc(.12 + var(--gallery-entry,1) * .15)} .hero-exit-wash{background:linear-gradient(180deg,transparent 0%,#071b4538 40%,#1e0a4ace 100%)} @media(max-width:800px){ .hero-word-big{font-size:clamp(84px,19.8vw,158px);left:5.3%;top:19%} .hero-word-mondo{font-size:clamp(82px,17.5vw,153px);right:5%;top:31%} .hero.cinematic-enter .hero-portrait-wrap picture{animation-name:crvxHeroDollyMobile} @keyframes crvxHeroDollyMobile{0%{transform:scale(2.35)}18%{transform:scale(2.11)}63%{transform:scale(1.1)}100%{transform:scale(1)}} } @media(max-width:600px){ .hero-word-big{font-size:30.5vw;left:6%;top:17%} .hero-word-mondo{font-size:19.3vw;right:6%;top:34%} .intro-audio-label{font-size:8px;letter-spacing:.06em} .intro-broadcast .broadcast-slug,.intro-broadcast .broadcast-timecode{bottom:108px;font-size:7px} .tracks-heading,.track-deck{translate:0 0;opacity:1} .experience-story>.tracks-section:before{top:-12svh;height:12svh} .experience-story>.tracks-section:after{top:-12svh;height:12svh} } @media(prefers-reduced-motion:reduce){ .intro-broadcast:before,.intro-media.is-playing video{animation:none} .hero.cinematic-enter .hero-portrait-wrap picture,.hero.cinematic-enter .hero-cut-flash,.hero.cinematic-enter .hero-cinematic-matte{animation:none} .tracks-heading,.track-deck{translate:0 0;opacity:1} } /* V4.1 — verified official album art on every track card */ .card-art{background:#0f234a} .card-official-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .35s;transform:scale(1.01)} .song-card button:hover .card-official-cover,.song-card button:focus-visible .card-official-cover{transform:scale(1.065);filter:saturate(1.16)} .card-cover-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,12,32,.07) 0%,transparent 37%,rgba(10,16,45,.2) 62%,rgba(6,13,41,.9) 100%)} .card-art-text{z-index:2;font-size:clamp(24px,2vw,34px);line-height:.91;bottom:17px;right:12px;left:14px;text-shadow:0 2px 1px #010719,0 3px 12px #000,2px 2px #102049} .card-art-crown{z-index:2;opacity:.95;text-shadow:0 1px 12px #0008} .card-details{z-index:2;font-size:9px;color:#fff;letter-spacing:.12em;text-shadow:0 1px 6px #001} .card-art:before,.card-art:after{display:none} .song-card .card-bottom strong{font-size:17px;max-width:171px} /* Full-size visible YouTube player, not an offscreen audio extraction. */ /* =========================================================================== CROVIXA V4.2 — THE COLLECTIBLE PORTAL Scroll-scrubbed card reveal and Mondo TV transition. Original implementation. =========================================================================== */ /* A huge, transparent, continuous artist wordmark quietly slides behind the foreground portrait and solid BIG / MONDO titles. */ .hero-ambient-type{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;user-select:none;transform:translate3d(calc(var(--px,0) * -7px),calc(var(--py,0) * -4px),0)} .ambient-line{position:absolute;left:0;display:flex;gap:2.5rem;white-space:nowrap;font:900 clamp(70px,9.6vw,180px)/.8 var(--display);letter-spacing:.005em;width:max-content;will-change:transform;mix-blend-mode:soft-light} .ambient-line span{display:block;flex:none} .ambient-line--one{top:11%;color:rgba(255,255,255,.19);-webkit-text-stroke:1px rgba(22,84,142,.21);animation:mondoDriftLeft 39s linear infinite} .ambient-line--two{top:67%;color:transparent;-webkit-text-stroke:2px rgba(219,245,255,.21);font-size:clamp(47px,6.8vw,130px);animation:mondoDriftRight 48s linear infinite} .ambient-outline{position:absolute;top:34%;left:4%;font:900 clamp(160px,24vw,440px)/.86 var(--display);letter-spacing:-.065em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.07);transform:rotate(-7deg);white-space:nowrap} @keyframes mondoDriftLeft{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @keyframes mondoDriftRight{from{transform:translate3d(-46%,0,0)}to{transform:translate3d(0,0,0)}} /* Spotify embeds are tall enough to show track controls; users can always open full songs in Spotify. No claims about embed preview length. */ .song-video-stage{aspect-ratio:auto;min-height:352px;padding:12px;background:#0c1b37} .song-video-stage iframe{height:352px;min-height:352px;width:100%;aspect-ratio:auto;border-radius:13px} .song-dialog-actions{flex-wrap:wrap} .spotify-embed-note{font-size:10px;font-weight:600;line-height:1.5;color:#bdcee9;margin:0;padding:0 20px 12px;width:100%;text-align:center} /* THE BRIDGE — from card stack to full 16:9 video composition. */ .tv-bridge{height:380svh;position:relative;color:#fff;background:#19082d;isolation:isolate;z-index:2} .bridge-stage{--bridge-phase:0;--bridge-bg-light:0;--bridge-landing-opacity:0;--bridge-panel-alpha:1;--bridge-left:78vw;--bridge-top:51vh;--bridge-width:240px;--bridge-height:332px;--bridge-rotate:0deg;--bridge-z:6deg;--bridge-backlight:.2;--bridge-flare-alpha:0;--bridge-landing-rise:80px;position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;perspective:1600px;isolation:isolate;background:#18092b} .bridge-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 50%,rgba(118,66,180,.57),transparent 48%),radial-gradient(ellipse at 20% 90%,#4432ad44,transparent 48%),linear-gradient(140deg,#23113f,#120827);opacity:calc(1 - var(--bridge-bg-light));pointer-events:none} .bridge-stage:after{content:"";position:absolute;inset:0;background:var(--paper);opacity:var(--bridge-bg-light);z-index:4;pointer-events:none} .bridge-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:1;background-image:radial-gradient(#fff2 .8px,transparent .8px);background-size:8px 8px;opacity:calc(1 - var(--bridge-bg-light))} .bridge-word-wall{position:absolute;inset:8% -5% auto;display:flex;flex-direction:column;gap:7vh;color:rgba(168,125,233,.105);font:900 clamp(88px,17vw,300px)/.75 var(--display);letter-spacing:-.06em;white-space:nowrap;text-align:center;transform:translate3d(var(--bridge-word-offset,0vw),0,0);z-index:1;pointer-events:none} .bridge-word-wall span:last-child{-webkit-text-stroke:2px rgba(255,255,255,.10);color:transparent;transform:translateX(-9vw)} .bridge-side-label{position:absolute;left:5%;bottom:7%;font:900 10px var(--sans);letter-spacing:.24em;color:#dbc6fbcc;z-index:2;opacity:calc(1 - var(--bridge-bg-light))} .bridge-beam{position:absolute;left:-40%;top:36%;height:3px;width:180%;transform:rotate(-15deg) translateY(calc(var(--bridge-phase)*90px));background:linear-gradient(90deg,transparent,#d0aaff33,#fff9dc,transparent);filter:blur(8px);opacity:calc(1 - var(--bridge-bg-light));z-index:2;pointer-events:none} .bridge-flip-portal{position:absolute;left:var(--bridge-left);top:var(--bridge-top);width:var(--bridge-width);height:var(--bridge-height);transform:translate(-50%,-50%) rotateZ(var(--bridge-z));z-index:7;opacity:var(--bridge-panel-alpha);transform-style:preserve-3d;will-change:width,height,transform,opacity;pointer-events:none;filter:drop-shadow(0 30px 35px rgba(0,0,0,.42))} .bridge-flip-inner{position:relative;inset:0;width:100%;height:100%;transform:perspective(1400px) rotateY(var(--bridge-rotate));transform-style:preserve-3d;will-change:transform} .bridge-face{position:absolute;inset:0;border:2px solid #ffde7e;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:14px;box-shadow:0 0 0 5px #ffe48a27,0 0 42px #e6b76077,0 24px 66px #0007} .bridge-face--front{background:#0d1a41;display:flex;flex-direction:column} .bridge-front-art{position:relative;flex:1;min-height:0;overflow:hidden} .bridge-front-art img{width:100%;height:100%;object-fit:cover} .bridge-front-art:after{content:"";position:absolute;inset:25% 0 0;background:linear-gradient(transparent,#050a29d9)} .bridge-front-art span{position:absolute;bottom:12px;left:16px;font:900 clamp(23px,3vw,43px)/.86 var(--display);letter-spacing:-.015em;transform:skew(-6deg);z-index:1;text-shadow:2px 2px 12px #000} .bridge-front-foot{flex:none;min-height:66px;background:#0c1642;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px;font:900 10px var(--sans);letter-spacing:.1em} .bridge-front-foot strong{font:900 19px var(--display)}.bridge-front-foot small{color:var(--gold);font-size:24px} .bridge-face--back{transform:rotateY(180deg);background:#082d58} .bridge-back-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(1.06)} .bridge-back-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,29,91,.90),rgba(5,26,73,.17)),linear-gradient(0deg,#051231be,transparent 70%)} .bridge-back-title{position:absolute;z-index:2;left:7%;top:50%;transform:translateY(-50%);max-width:75%;display:flex;flex-direction:column;gap:12px} .bridge-back-title small{font-size:10px;font-weight:900;letter-spacing:.16em;color:#ffdf7a} .bridge-back-title strong{font:900 clamp(40px,7vw,134px)/.78 var(--display);letter-spacing:-.05em;color:white;text-shadow:5px 7px 0 #044cb0} .bridge-back-title strong span{color:var(--gold)} .bridge-back-title em{font-style:normal;letter-spacing:.13em;font-size:10px;font-weight:900} .bridge-back-marker{position:absolute;top:5%;right:4%;color:var(--gold);font-size:clamp(28px,4vw,70px)} .bridge-flare{position:absolute;z-index:8;inset:-13% -80%;pointer-events:none;background:linear-gradient(114deg,transparent 40%,#fff2b800 45%,#fff3c7db 50%,#fff3cb00 55%,transparent 60%);transform:skew(-12deg);mix-blend-mode:screen;opacity:var(--bridge-flare-alpha)} .bridge-phase-caption{position:absolute;z-index:3;bottom:8%;left:50%;transform:translateX(-50%);display:flex;gap:25px;color:#f9ecffdd;font:900 10px var(--sans);letter-spacing:.21em;white-space:nowrap;opacity:calc(1 - var(--bridge-bg-light));pointer-events:none} .bridge-phase-caption span:last-child{color:#ffd561} /* Mondo TV lives *inside* the same pinned scene, so the oversized flip lands directly into the full video poster instead of cutting to a new page. */ .tv-landing{position:absolute;inset:0;padding:6.4vh 7vw 3vh;display:flex;flex-direction:column;gap:3vh;z-index:8;color:#0e1b39;opacity:var(--bridge-landing-opacity);transform:translate3d(0,var(--bridge-landing-rise),0);pointer-events:none;will-change:transform,opacity} /* Keep video controls keyboard- and assistive-technology reachable while the scroll scene is staged; the visual landing still controls the presentation. */ .tv-landing :is(.director-clip,.tv-video-poster){pointer-events:auto} .tv-landing-heading{display:flex;align-items:end;justify-content:space-between;flex:none;min-height:25vh} .tv-landing-heading h2{font:900 clamp(65px,9vw,148px)/.76 var(--display);letter-spacing:-.047em;margin:8px 0 0;transform:skew(-5deg)} .tv-landing-heading h2 em{font-style:normal;color:var(--blue)} .tv-landing-heading .eyebrow{color:#2668bb} .tv-landing-heading p{text-align:right;font-size:10px;font-weight:900;letter-spacing:.13em;line-height:1.9;max-width:190px} .tv-video-frame{position:relative;flex:1;min-height:260px;overflow:hidden;border:1px solid #2b6597;box-shadow:0 10px 0 #ffd14a,0 25px 50px #10467722;background:#0c2253;isolation:isolate} .tv-video-poster{position:relative;display:block;width:100%;height:100%;padding:0;text-align:left;color:white;background:#082459;border:0;cursor:pointer} .tv-video-poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 37%;transition:transform .7s ease} .tv-video-poster:hover>img{transform:scale(1.055)} .tv-video-wash{position:absolute;inset:0;background:linear-gradient(95deg,#042c77d9,transparent 75%),linear-gradient(0deg,#031737ba,transparent 60%)} .tv-poster-title{position:absolute;top:18%;left:6%;z-index:2;font:900 clamp(55px,10.1vw,166px)/.78 var(--display);letter-spacing:-.05em;transform:skew(-6deg);text-shadow:5px 6px #1171d3} .tv-poster-title span{color:var(--gold);font-size:.5em;vertical-align:top;text-shadow:0 3px #e8ae21} .tv-poster-play{position:absolute;z-index:3;left:65%;top:54%;transform:translate(-50%,-50%);width:90px;height:90px;display:grid;place-items:center;background:var(--gold);color:#093c78;font-size:24px;border-radius:50%;box-shadow:0 0 0 14px #fff6c54a,0 0 45px #fff5a366;transition:transform .25s ease} .tv-video-poster:hover .tv-poster-play{transform:translate(-50%,-50%) scale(1.13)} .tv-poster-caption{position:absolute;z-index:2;bottom:22px;left:5%;right:5%;display:flex;justify-content:space-between;font:900 10px var(--sans);letter-spacing:.14em} .tv-landing-footer{display:flex;align-items:center;justify-content:space-between;flex:none;font-weight:900;font-size:10px;letter-spacing:.14em} .tv-landing-footer a{color:#0c5aa1;border-bottom:2px solid #0c5aa1;padding-bottom:5px} .tv-video-stage{position:absolute;inset:0;z-index:5;background:#080d1e} .tv-video-stage iframe{display:block;width:100%;height:100%;border:0} .tv-video-stage[hidden],.tv-video-poster[hidden]{display:none!important} @media(max-width:800px){ .tv-landing{padding:8vh 5vw 4vh} .tv-landing-heading{min-height:21vh} .tv-landing-heading h2{font-size:clamp(56px,11vw,104px)} .tv-poster-title{font-size:clamp(48px,11vw,112px)} .tv-poster-play{left:66%} } @media(max-width:600px){ .ambient-line--one{top:10%;font-size:24vw;color:rgba(255,255,255,.12)} .ambient-line--two{top:62%;font-size:15vw} .ambient-outline{top:34%;font-size:40vw;left:4%} .tv-bridge{height:auto;background:var(--paper)} .bridge-stage{height:auto;min-height:0;position:relative;overflow:visible;background:var(--paper)} .bridge-stage:before,.bridge-stage:after,.bridge-atmosphere,.bridge-word-wall,.bridge-side-label,.bridge-beam,.bridge-flip-portal,.bridge-phase-caption{display:none} .tv-landing{position:relative;inset:auto;opacity:1!important;transform:none!important;pointer-events:auto!important;padding:76px 5vw 68px;gap:25px;min-height:720px} .tv-landing-heading{display:block;min-height:0} .tv-landing-heading h2{font-size:clamp(65px,18vw,98px)} .tv-landing-heading p{text-align:left;margin-top:22px} .tv-video-frame{flex:auto;height:390px;min-height:390px} .tv-poster-title{font-size:clamp(42px,12vw,64px);top:13%;left:6%} .tv-poster-play{width:64px;height:64px;left:65%;top:60%;font-size:17px} .tv-poster-caption{font-size:8px;letter-spacing:.07em} .song-video-stage{min-height:244px} .song-video-stage iframe{height:252px;min-height:252px} } @media(prefers-reduced-motion:reduce){ .ambient-line{animation:none!important} .bridge-stage{background:var(--paper)} .bridge-atmosphere,.bridge-word-wall,.bridge-side-label,.bridge-beam,.bridge-flip-portal,.bridge-phase-caption,.bridge-stage:before,.bridge-stage:after{display:none} .tv-bridge{height:auto;background:var(--paper)} .bridge-stage{position:relative;height:auto;min-height:0} .tv-landing{position:relative;opacity:1!important;transform:none!important;pointer-events:auto!important;min-height:690px} } /* V4.2 final art direction corrections */ .site-header.is-dark{background:rgba(20,8,43,.90);color:#fff;box-shadow:0 1px 18px #0005;backdrop-filter:blur(20px)} .site-header.is-dark .brand{color:#fff;text-shadow:0 1px 10px #483a6c} .site-header.is-dark .desktop-nav a:after{background:var(--gold)} .site-header.is-dark .menu-toggle span{background:#fff} .site-header.is-dark .header-stream{border-color:#ffd055;background:#ffd055;color:#151e42} .bridge-stage:after{opacity:1;clip-path:circle(var(--bridge-spot-radius,0%) at 50% 59%);transition:none} .bridge-back-title{opacity:var(--bridge-type-opacity,1)} @media(max-width:600px){.site-header.is-dark{background:rgba(20,8,43,.95)}} @media(prefers-reduced-motion:reduce){.site-header.is-dark{background:#1e1040}.bridge-stage:after{display:none}} /* ========================================================================== CROVIXA V4.3 — ONE-CARD HERO → DECK TRANSFORMATION & IN-CARD PLAYBACK Storyboard: collectible lifts from hero's right side, catches light, flips, glides across the diagonal gallery seam, then becomes track 01. Driven by DOM geometry + normalized scroll, so reversing scroll reverses it. ========================================================================== */ .hero-album[role="button"]{cursor:pointer;transition:box-shadow .25s ease,filter .25s ease} .hero-album[role="button"]:hover,.hero-album[role="button"]:focus-visible{box-shadow:0 12px 42px #17326890,0 0 0 2px #ffe778;filter:brightness(1.12)} .hero-album-portal{ position:fixed;left:0;top:0;width:170px;height:210px;z-index:42; pointer-events:none;perspective:1200px;transform:translate(-50%,-50%); opacity:0;visibility:hidden;will-change:top,left,width,height,transform,opacity; filter:drop-shadow(0 26px 20px #020524a5); } .hero-album-portal-inner{height:100%;width:100%;position:relative;transform-style:preserve-3d; transform:rotateY(var(--portal-flip,0deg));will-change:transform} .hero-album-portal-face{backface-visibility:hidden;-webkit-backface-visibility:hidden; position:absolute;inset:0;padding:5.5%;border:2px solid #ffdc70; border-radius:10px;background:linear-gradient(135deg,#123467,#142044); box-shadow:0 0 0 2px #fff5c42b,0 0 34px #ffc54b76,inset 0 0 18px #ffffff16; display:flex;flex-direction:column;gap:3%;color:#fff;overflow:hidden} .hero-album-portal-face img{width:100%;min-height:0;flex:1;object-fit:cover;border:1px solid #ffe5a8; box-shadow:0 4px 17px #050515a8} .portal-top{font:900 clamp(7px,.85vw,12px) var(--sans);letter-spacing:.05em; display:flex;align-items:center;justify-content:space-between;color:#ffdd62} .portal-bottom{display:flex;flex-direction:column;gap:2px} .portal-bottom strong{font:900 clamp(13px,1.25vw,20px) var(--display);letter-spacing:.025em} .portal-bottom span{font:800 clamp(7px,.75vw,10px) var(--sans);letter-spacing:.05em;color:#ffda75} .portal-back{transform:rotateY(180deg);background:linear-gradient(145deg,#32185e,#0c2b78)} .portal-aura{position:absolute;inset:-25%;z-index:-1;pointer-events:none;border-radius:50%; background:radial-gradient(ellipse,#ffe48469 2%,#7498ff23 35%,transparent 67%); filter:blur(24px);opacity:var(--portal-aura,.3)} /* Keep the receiving card behind the travelling hero collectible until contact. */ .song-card:first-child{opacity:var(--first-card-opacity,1)} .song-card{position:relative;overflow:visible;z-index:1} .song-card.card-playing{z-index:30} .song-card.card-playing>.card-activate{box-shadow:0 0 0 3px #fff1af,0 0 42px #f6c96080,0 18px 48px #000b} .song-card .card-activate{cursor:pointer} .song-card .card-play{transition:transform .24s,background .24s} .song-card .card-activate:hover .card-play{transform:scale(1.17);background:#ffdc47;color:#062253} /* V4.5: the native Spotify player lives INSIDE the card face, never below it. */ .card-inline-player{ position:absolute;z-index:5;left:8px;right:8px;top:30%;height:94px; border:0;border-radius:12px;padding:0;margin:0;background:transparent; box-shadow:0 12px 35px #060c2acc;overflow:visible; } .card-inline-player[hidden]{display:none!important} .card-spotify-mount{width:100%;height:80px;border-radius:12px;overflow:hidden; background:#142846;display:flex;align-items:center;justify-content:center} .card-spotify-mount iframe{width:100%;height:80px;border:0;border-radius:12px;display:block} .card-spotify-mount .embed-loading{color:white;font:800 10px var(--sans);text-align:center;padding:7px} .card-spotify-fallback{display:block;position:absolute;right:3px;top:calc(100% - 8px); padding:5px 8px;border:1px solid #ffdb66;border-radius:999px; background:#0b2040;color:#ffe386;text-decoration:none; font:800 9px/1.1 var(--sans);letter-spacing:.02em;white-space:nowrap} .card-spotify-fallback[hidden]{display:none!important} .song-card.card-playing>.card-activate{box-shadow:0 0 0 2px #ffe49a,0 0 25px #ffc86088,0 14px 29px #0906238f} .song-card.card-playing .card-play{background:#ffdb54;color:#071b40} .song-card.card-loading .card-play{box-shadow:0 0 0 3px #ffda446b;animation:cardAwaitPulse 1.2s ease-in-out infinite} @keyframes cardAwaitPulse{50%{box-shadow:0 0 0 7px #ffda4419}} /* The compact player never changes the gallery card dimensions. */ .tracks-sticky{overflow:hidden} .song-card .card-activate .card-bottom{position:relative} @media(min-width:601px){.track-deck{top:41%}.track-progress{bottom:29px}.deck-actions{bottom:26px}} @media(max-width:600px){ .hero-album-portal{display:none!important} .song-card.card-playing{z-index:6} .card-inline-player{left:7px;right:7px;top:33%;height:80px} .card-spotify-fallback{font-size:8px} } @media(prefers-reduced-motion:reduce){ .hero-album-portal{display:none!important} .song-card.card-loading .card-play{animation:none} .song-card:first-child{opacity:1!important} } /* ========================================================================== CROVIXA V4.4 — LAST REAL MUSIC CARD FALLS AND FLIPS INTO MONDO TV Only the actual track 09 leaves the track deck; the reusable body-level portal contains a byte-for-byte visual copy of that same card. Its position is synchronized to scroll before the gallery leaves the viewport. ========================================================================== */ .bridge-flip-portal{ position:fixed!important; top:0;left:0;width:240px;height:335px; transform:translate(-50%,-50%) rotateZ(var(--bridge-z,-3deg)); z-index:68;visibility:hidden;opacity:0; pointer-events:none;will-change:top,left,width,height,opacity,transform; filter:drop-shadow(0 32px 37px #05061d80); } .bridge-flip-inner{transform:perspective(1400px) rotateY(var(--bridge-rotate,0deg)) rotateX(var(--bridge-tip,0deg));} .bridge-face--front{border:0;box-shadow:none;background:transparent;overflow:visible;border-radius:11px;} .bridge-face--front .bridge-track-visual{ position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden; border:1.5px solid #f7e4ad;border-radius:12px;color:white; background:#13113b; box-shadow:0 2px 0 #ceb778,0 14px 29px #0906238f,0 0 18px #efcd8b31; } .bridge-face--front .bridge-track-visual .card-art{width:100%;height:auto;flex:1;min-height:0;background:#0f234a;} .bridge-face--front .bridge-track-visual .card-bottom{height:80px;flex:0 0 80px;padding:13px 14px 12px;} .bridge-face--front .bridge-track-visual .card-art-text{ font:900 33px/.91 var(--display);bottom:17px;left:14px;right:12px;z-index:2; text-shadow:0 2px 1px #010719,0 3px 12px #000,2px 2px #102049; } .bridge-face--front .bridge-track-visual .card-art img{width:100%;height:100%;object-fit:cover;} .bridge-face--front .bridge-track-visual .card-bottom strong{font-size:17px;max-width:171px;} .bridge-face--front .bridge-track-visual .card-play{ position:absolute;right:9px;bottom:10px;width:33px;height:33px; border:1px solid #ffffff7d;border-radius:50%;display:grid;place-items:center; background:#15244bc9;color:#fff;font-size:12px; } /* The original card stays in the album until the traveling visual perfectly overlays it. Both opacities crossfade together to avoid a duplicate. */ .song-card:last-child{opacity:var(--last-card-departure,1);} .bridge-flip-portal .bridge-flare{opacity:var(--bridge-flare-alpha,0)} @media(max-width:600px){ .bridge-flip-portal{display:none!important} .song-card:last-child{opacity:1!important} } @media(prefers-reduced-motion:reduce){ .bridge-flip-portal{display:none!important} .song-card:last-child{opacity:1!important} } /* Mobile continuity beat: the real cloned track-09 visual crosses into Mondo TV once, without pinning or trapping the short phone viewport. */ .bridge-flip-portal.mobile-handoff-active{ display:block!important;position:fixed!important;z-index:70!important; pointer-events:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.42)); will-change:transform,opacity; } .bridge-stage.mobile-handoff-complete .tv-video-frame{animation:mobileTvArrival .48s ease-out both} @keyframes mobileTvArrival{0%{filter:brightness(.76);transform:scale(.975)}100%{filter:none;transform:none}} @media(prefers-reduced-motion:reduce){ .bridge-flip-portal.mobile-handoff-active{display:none!important} .bridge-stage.mobile-handoff-complete .tv-video-frame{animation:none} } /* =========================================================================== CROVIXA V4.6 — TV-to-real-life photo-story (scroll-scrubbed, 3 photographs) Source order: video poster -> shopping cart -> bicycle ride -> bicycle pose. All positions driven by one normalized scroll timeline; reverses naturally. =========================================================================== */ .about-story { position:relative; height:290svh; isolation:isolate; z-index:4; background:#111022; } .about-story-stage {position:sticky; top:0; height:100svh; min-height:580px; overflow:hidden; isolation:isolate; perspective:1600px; --story-yellow:0; --story-content:0; --story-ghost:1; --story-word:0; --story-dark:1; background:#140d29;} .about-story-dark {position:absolute;inset:0;opacity:var(--story-dark,1);background:radial-gradient(ellipse at 49% 44%,#49306d 0%,#1d1241 57%,#100d21 100%); z-index:0;} .about-story-dark:after {content:"";position:absolute;inset:0;background:radial-gradient(circle at 56% 45%,#ffffff0b 1px,transparent 1.2px);background-size:13px 13px;opacity:.7;} .about-story-yellow {position:absolute;inset:-2px;z-index:1;background:linear-gradient(125deg,#ffeb9d 0%,#ffd471 45%,#ffbe54 100%); clip-path:circle(calc(var(--story-yellow,0) * 150%) at 72% 62%); will-change:clip-path;} .about-story-grain {position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--story-content,0); background:radial-gradient(#fff9d3b8 1px,transparent 1.1px);background-size:12px 12px;} .story-faint-word {position:absolute;inset:auto 0 19%;z-index:2;pointer-events:none;text-align:center; font:900 clamp(95px,21vw,430px)/.8 var(--display);white-space:nowrap;letter-spacing:-.08em;color:#fff9ed;opacity:calc(.065 * (1 - var(--story-content,0))); transform:translate3d(calc(var(--story-word,0) * -9vw),0,0);} .story-pretitle {position:absolute;top:12vh;left:6.8%;right:6.8%;z-index:6;color:#fff1e8; display:flex;justify-content:space-between;gap:18px;letter-spacing:.2em;font:900 11px var(--sans);opacity:var(--story-ghost,1);pointer-events:none;} .story-picture-frame {position:absolute;left:0;top:0;z-index:7;transform-origin:center center;box-sizing:border-box; border:10px solid #fff9ed;background:#e9edf0;box-shadow:13px 16px 0 #ff805c,0 27px 65px #0e0a265e; width:260px;height:370px;margin:0;overflow:visible;visibility:hidden;opacity:0;backface-visibility:hidden;will-change:transform,width,height,opacity;} .story-picture-frame > img,.story-picture-face img {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;} .story-picture-turn{position:absolute;inset:0;transform:perspective(1300px) rotateY(var(--story-flip,0deg));transform-style:preserve-3d;will-change:transform;} .story-picture-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;} .story-picture-front{background:#123f7a;color:white;} .story-picture-front img{object-position:center 38%;} .story-picture-front:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#0c387bde,#06285e40 75%),linear-gradient(0deg,#031943d9,transparent 60%);} .story-picture-front strong{position:absolute;top:20%;left:6%;z-index:2;font:900 clamp(25px,5vw,78px)/.83 var(--display);letter-spacing:-.045em;text-shadow:3px 4px #1578c2;} .story-picture-front span{position:absolute;bottom:18px;left:18px;font:900 9px var(--sans);letter-spacing:.13em;z-index:2;} .story-picture-back{transform:rotateY(180deg);} .story-picture-back span,.story-picture-secondary figcaption{position:absolute;bottom:0;left:0;right:0;z-index:3;pointer-events:none; font:900 10px var(--sans);letter-spacing:.11em;color:#102342;background:linear-gradient(0deg,#fff8e9 0,#fff8e9da 70%,transparent 100%);padding:24px 10px 7px;} .story-picture-secondary img{object-position:center center;} .story-picture-secondary{z-index:8} #storyPhotoThree{z-index:9} .about-story-content {position:absolute;inset:0;z-index:5;padding:clamp(94px,12vh,130px) 7vw 25px;color:#101b36; opacity:var(--story-content,0); transform:translate3d(0,calc((1 - var(--story-content,0)) * 64px),0);will-change:opacity,transform;pointer-events:none;} .about-story-content.is-available{pointer-events:auto;} .about-story-content .about-kicker{font-size:11px;letter-spacing:.13em;border-color:#0c1a31;padding-bottom:17px;} .about-story-layout{height:calc(100% - 52px);display:grid;grid-template-columns:1fr 1fr;align-items:center;} .about-story-content .about-main{max-width:min(48vw,700px);} .about-story-content h2{font:900 clamp(80px,9vw,156px)/.79 var(--display);letter-spacing:-.055em;transform:skew(-5deg);margin:30px 0 23px;} .about-story-content h2 em{font-style:normal;color:#1764c9;} .about-story-content p{max-width:460px;font-size:clamp(15px,1.2vw,19px);line-height:1.6;font-weight:700;} .about-story-content .about-links{margin-top:32px;gap:19px;} .story-scroll-prompt{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);z-index:10;font:900 10px var(--sans);letter-spacing:.22em;color:#fff8e4; display:flex;align-items:center;gap:12px;opacity:var(--story-ghost,1);pointer-events:none;} .story-scroll-prompt .ui-icon{font-size:22px;animation:storyArrowBounce 1.6s ease-in-out infinite;} .about-story-stage:not(.is-story-visible) .story-scroll-prompt .ui-icon{animation-play-state:paused} @keyframes storyArrowBounce{50%{transform:translateY(6px)}} .story-chapter-footer{position:absolute;bottom:3%;left:7vw;right:7vw;z-index:6;display:flex;justify-content:space-between; font:900 9px var(--sans);letter-spacing:.18em;color:#3d2c3e;opacity:var(--story-content,0);pointer-events:none;} @media(max-width:1100px){ .about-story-content h2{font-size:clamp(65px,9vw,115px)} .about-story-content .about-main{max-width:48vw} } @media(max-width:800px){ .about-story{height:300svh} .about-story-stage{min-height:600px} .about-story-content{padding:95px 6vw 26px} .about-story-content h2{font-size:clamp(62px,10.5vw,100px)} .about-story-content .about-main{max-width:55vw} .about-story-content p{font-size:14px;max-width:320px} .story-pretitle{font-size:9px;top:11vh} } @media(max-width:600px){ .about-story{height:315svh} .about-story-stage{height:100svh;min-height:0} .about-story-content{padding:90px 7vw 25px} .about-story-content .about-kicker{font-size:8px;gap:10px} .about-story-content .about-main{max-width:100%;width:100%} .about-story-layout{height:auto;display:block} .about-story-content h2{font-size:clamp(66px,15vw,87px);margin:25px 0 12px;line-height:.77} .about-story-content p{font-size:12px;line-height:1.38;max-width:265px;margin:10px 0} .about-story-content .about-links{margin-top:15px;gap:12px} .about-story-content .about-links a{font-size:8px;padding-bottom:5px} .story-picture-frame{border-width:6px;box-shadow:7px 8px 0 #ff805c,0 18px 34px #0e0a2648} .story-pretitle{font-size:8px;letter-spacing:.1em;left:7%;right:7%;top:11vh} .story-faint-word{font-size:34vw;bottom:31%} .story-picture-front strong{font-size:36px} .story-picture-back span,.story-picture-secondary figcaption{font-size:7px;padding:16px 6px 4px} .story-chapter-footer{font-size:7px;bottom:15px} .story-scroll-prompt{font-size:8px} } @media(prefers-reduced-motion:reduce){ .about-story{height:100svh;min-height:750px} .about-story-stage{position:relative;min-height:750px;--story-content:1;--story-yellow:1;--story-ghost:0;} .about-story-yellow{clip-path:none} .story-picture-front,.story-scroll-prompt{display:none} .story-picture-frame{visibility:visible!important;opacity:1!important} .story-picture-turn{transform:rotateY(180deg)!important} .story-scroll-prompt .ui-icon{animation:none} } /* V4.7: Make Mondo TV and the photo chapter one continuous scene. The stage temporarily floats over the ACTUAL pinned TV poster as the visitor begins scrolling past it. No secondary blank/purple section is inserted. The same stage hands off to its normal sticky position at the About boundary. */ .about-story-stage.is-tv-prelude { position:fixed!important; top:0!important;left:0!important;right:0!important;bottom:0!important; width:100vw;height:100svh;min-height:0; background:transparent;z-index:34; pointer-events:none;isolation:isolate;overflow:hidden; } .about-story-stage.is-tv-prelude .about-story-content {pointer-events:none!important;} .about-story-stage.is-tv-prelude .story-pretitle {opacity:calc(var(--story-ghost,1) * var(--story-dark,0));} /* Keep the video controls underneath usable up until the photo-story starts. */ @media (prefers-reduced-motion:reduce){ .about-story-stage.is-tv-prelude{position:relative!important;width:100%;height:100svh;} } /* V4.7 polish: rotate the entire polaroid mat, not just the photograph. Without this, the empty unrotated backing becomes a huge blank rectangle as the photograph passes through 90 degrees. */ #storyPhotoOne{border:0;background:transparent;box-shadow:none;} #storyPhotoOne .story-picture-turn{ border:10px solid #fff9ed;box-sizing:border-box; background:transparent;box-shadow:13px 16px 0 #ff805c,0 27px 65px #0e0a265e; } @media(max-width:600px){ #storyPhotoOne .story-picture-turn{border-width:6px;box-shadow:7px 8px 0 #ff805c,0 18px 34px #0e0a2648;} } /* =========================================================================== CROVIXA V4.8 — LIVING MUSIC EXPERIENCE User-supplied, 40-second local previews; streaming links redirect to services. =========================================================================== */ .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} /* Keep the vertical-scrolling music chapter but make beat-responsive lighting. */ .track-deck{--sound-energy:0;--sound-bass:0} .track-deck:after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-10% -15%;opacity:calc(var(--sound-energy,0)*.5);background:radial-gradient(ellipse at 50% 50%,#96fcef44,transparent 66%);filter:blur(44px)} .song-card .card-activate{overflow:hidden} .song-card .card-bottom{padding:8px 12px 8px} .song-card .card-bottom small{font-size:8px;letter-spacing:.10em} .song-card .card-bottom strong{font-size:15px;margin-top:4px;line-height:1.01;max-width:170px} .song-card .card-play{bottom:17px;right:10px;width:34px;height:34px} .song-card .card-audio-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12)} .song-card .card-audio-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#66d5ff,#ffd347);transition:width .1s linear} .song-card .card-full-links{position:absolute;z-index:10;bottom:5px;left:12px;display:flex;gap:5px;pointer-events:auto} .song-card .card-full-links a{display:inline-flex;align-items:center;justify-content:center;padding:3px 5px;background:#f9edb5;border:1px solid #ffd24d;border-radius:3px;color:#071e42;font:900 7.2px/1 var(--sans);text-decoration:none;white-space:nowrap;letter-spacing:.02em;box-shadow:0 3px 9px #0005} .song-card .card-full-links a:hover,.song-card .card-full-links a:focus-visible{background:#fff;outline:2px solid #a3eaff;outline-offset:1px} .song-card .card-spectrum{position:absolute;z-index:3;right:12px;top:26%;height:38px;display:flex;align-items:center;gap:3px;opacity:0;transition:opacity .3s;pointer-events:none} .song-card .card-spectrum i{width:5px;height:14px;border-radius:5px;background:#ffe267;box-shadow:0 0 9px #e1f8ff;animation:none;transform-origin:center bottom} .song-card .card-spectrum i:nth-child(2){animation-duration:.47s;animation-delay:-.15s} .song-card .card-spectrum i:nth-child(3){animation-duration:.81s;animation-delay:-.24s} .song-card .card-spectrum i:nth-child(4){animation-duration:.58s;animation-delay:-.12s} .song-card .card-spectrum i:nth-child(5){animation-duration:.73s;animation-delay:-.37s} @keyframes crvxEqualize{from{height:5px}to{height:35px}} .song-card.card-playing .card-spectrum{opacity:1} .song-card.card-playing>.card-activate{box-shadow:0 0 0 3px #b0f9ff,0 0 calc(22px + var(--sound-energy,0)*70px) #59daeead,0 24px 60px #000a!important} .song-card.card-playing .card-official-cover{filter:brightness(calc(1 + var(--sound-energy,0)*.18)) saturate(1.18)} .song-card.card-playing .card-art:after{opacity:.8;transform:scale(calc(1 + var(--sound-bass,0)*.3))} .song-card.card-complete .card-audio-progress span{width:100%!important} /* Soundstage is part of the pinned gallery: no floating dropdown or expanding card. */ .soundstage{position:absolute;z-index:11;left:6%;right:6%;bottom:11.3%;padding:9px 13px;min-height:46px;display:flex;align-items:center;gap:12px;background:rgba(14,9,42,.94);border:1px solid #ffd45c60;border-radius:12px;box-shadow:0 8px 24px #0006;backdrop-filter:blur(16px);color:#fff} .soundstage-led{flex:none;background:#ffd94a;color:#101c46;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:19px;box-shadow:0 0 12px #ffcc3570} .soundstage-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .soundstage-info strong{font:900 12px var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff} .soundstage-info span{font:700 8px/1.4 var(--sans);letter-spacing:.04em;color:#ccbee0} .soundstage-wave{flex:none;height:27px;display:flex;align-items:center;gap:3px;opacity:.3} .soundstage-wave i{display:block;height:8px;width:3px;border-radius:4px;background:#5fdcf3;animation:crvxEqualize .7s ease-in-out infinite alternate} .soundstage-wave i:nth-child(2n){animation-duration:.48s;animation-delay:-.14s} .soundstage-wave i:nth-child(3n){animation-duration:.92s;animation-delay:-.23s} .soundstage.is-playing .soundstage-wave{opacity:1} .soundstage:not(.is-playing) .soundstage-wave i{animation-play-state:paused} .soundstage-timer{font:800 10px var(--sans);white-space:nowrap;letter-spacing:.07em} .soundstage-seek{width:82px;height:44px;flex:0 1 82px;margin:0;accent-color:#ffd94a;cursor:pointer;touch-action:pan-y} .soundstage-seek:disabled{cursor:not-allowed;opacity:.45} .soundstage-seek:focus-visible{outline:2px solid #8cd8ff;outline-offset:2px} .soundstage-platforms{display:flex;align-items:center;gap:7px} .soundstage-platforms a{background:#ffd84a;border-radius:50px;color:#111c3d;font:900 9px var(--sans);padding:9px 11px;white-space:nowrap;text-decoration:none} .soundstage-platforms a:last-child{background:#d5ebfe} .soundstage-platforms a:hover,.soundstage-platforms a:focus-visible{background:#fff;outline:2px solid #8cd8ff;outline-offset:2px} /* Director's Cut: one video stage, user-selected playable moments. */ .tv-landing{gap:1.65vh;padding-top:6vh} .tv-landing-heading{min-height:22vh} .director-rail{display:flex;align-items:center;gap:8px;min-height:40px;flex:none;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:3px;scrollbar-width:thin} .director-rail-label{color:#16335c;font:900 9px var(--sans);letter-spacing:.08em;margin-right:8px;white-space:nowrap} .director-clip{flex:none;white-space:nowrap;border:1px solid #9ab2d4;padding:9px 11px;background:#ffffffab;border-radius:90px;color:#102a53;font:900 9px var(--sans);letter-spacing:.06em;cursor:pointer;transition:background .2s,border-color .2s,transform .2s} .director-clip:hover,.director-clip:focus-visible{background:#ffeb97;transform:translateY(-2px)} .director-clip.is-active{background:#ffd748;border-color:#e3a72a;color:#0e2a50} .tv-video-stage video{display:block;width:100%;height:100%;object-fit:contain;background:#07172f} /* Living Polaroids: only settled images are interactive. */ .story-picture-frame.is-interactive{pointer-events:auto;cursor:pointer;transition:filter .24s ease} .story-picture-frame.is-interactive:hover,.story-picture-frame.is-interactive:focus-visible{filter:drop-shadow(0 0 16px #fff8c8);outline:3px solid #0d70c6;outline-offset:5px} .story-picture-frame.is-interactive img{filter:saturate(1.08)} .story-tap-tip{font:900 10px/1.5 var(--sans)!important;letter-spacing:.06em;max-width:360px;margin-top:16px!important;color:#115399} .story-tap-tip span{color:#1275e4} .living-video-dialog{position:fixed;max-width:min(530px,94vw);max-height:94dvh;width:94%;padding:0;border:2px solid #ffe271;border-radius:19px;overflow:hidden;background:linear-gradient(135deg,#07193d,#112f63);color:#fff;box-shadow:0 35px 80px #05091bdf} .living-video-dialog::backdrop{background:#070b21b8;backdrop-filter:blur(10px)} .living-modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 19px} .living-modal-header strong{font:900 16px var(--display);letter-spacing:.07em} .living-modal-header button{border:1px solid #ffffff72;color:#fff;border-radius:90px;background:transparent;padding:10px 14px;font:900 10px var(--sans);cursor:pointer} .living-modal-body{display:grid;place-items:center;background:#000;max-height:76dvh} .living-modal-body video{height:min(72dvh,720px);max-width:100%;aspect-ratio:9/16;object-fit:contain;background:#000} .living-modal-caption{display:block;padding:11px 18px;font:900 9px var(--sans);letter-spacing:.12em;color:#ffda64} /* Mondo Vault: the album becomes a free, non-account collectible experience. */ @media(max-width:1000px){ .soundstage{left:4%;right:4%;gap:8px} .soundstage-info span{display:none} .soundstage-platforms a{padding:8px;font-size:8px} .director-rail-label{display:none} } @media(max-width:600px){ .soundstage{position:relative;left:auto;right:auto;bottom:auto;margin:8px 6vw 5px;min-height:52px;gap:7px;padding:7px;flex-wrap:wrap} .soundstage-info{flex:1 1 120px} .soundstage-info strong{font-size:11px} .soundstage-wave{display:none} .soundstage-timer{font-size:9px} .soundstage-platforms{width:100%;justify-content:stretch} .soundstage-platforms a{flex:1;text-align:center;padding:8px;font-size:9px} .track-progress{bottom:20px} .deck-actions{bottom:20px} .song-card .card-full-links{bottom:4px} .tv-landing{gap:16px} .tv-video-frame{height:340px;min-height:340px} .director-rail{margin-top:-3px} .director-clip{padding:9px 10px} .story-tap-tip{font-size:8px!important;max-width:200px;margin-top:9px!important} .living-video-dialog{max-width:96vw} } @media(prefers-reduced-motion:reduce){ .song-card .card-spectrum i,.soundstage-wave i{animation:none} } /* The user has explicitly chosen to WATCH a Director's Cut clip: the moving photo-story overlay must not cover or intercept the video. */ body.director-active .about-story-stage.is-tv-prelude{ visibility:hidden!important;opacity:0!important;pointer-events:none!important; } /* CROVIXA V4.9 — SAFARI-SAFE FULL WORDMARKS Apple Safari can render skewed Impact glyphs wider than Chrome. Both words now receive a measured font fit and edge correction in js/app.js. The extra gutter covers WebKit glyph overhang, shadow and pointer parallax at extremes. */ .hero-word-big{ transform:skew(-9deg) rotate(-4deg) translate3d(calc(var(--px,0)*12px + var(--word-nudge-x,0px)),calc(var(--py,0)*10px),0); } .hero-word-mondo{ transform:skew(-9deg) rotate(-4deg) translate3d(calc(var(--px,0)*-11px + var(--word-nudge-x,0px)),calc(var(--py,0)*6px),0); } /* Video selectors are now strictly original music videos. */ .director-more{flex:none;margin-left:auto;white-space:nowrap;color:#536a8a;font:800 9px var(--sans);letter-spacing:.06em} @media(max-width:600px){.director-more{font-size:8px;letter-spacing:0}} /* Standards-compatible transforms for Safari. JS supplies typed pixel lengths; this avoids unsupported calc multiplication that can drop transforms. */ .hero-word-big{transform:skew(-9deg) rotate(-4deg) translate3d(calc(var(--big-shift-x,0px) + var(--word-nudge-x,0px)),var(--big-shift-y,0px),0)} .hero-word-mondo{transform:skew(-9deg) rotate(-4deg) translate3d(calc(var(--mondo-shift-x,0px) + var(--word-nudge-x,0px)),var(--mondo-shift-y,0px),0)} .hero-portrait-wrap{transform:translate3d(calc(-50% + var(--portrait-shift-x,0px)),var(--portrait-shift-y,0px),0) scale(1)} .hero-sky{transform:translate3d(var(--sky-shift-x,0px),var(--sky-shift-y,0px),0)} .skyline{transform:translate3d(var(--skyline-shift-x,0px),0,0)} .hero-crown{transform:rotate(-13deg) translate3d(var(--crown-shift-x,0px),0,0)} .hero-ambient-type{transform:translate3d(var(--ambient-shift-x,0px),var(--ambient-shift-y,0px),0)} @media(prefers-reduced-motion:reduce){ .hero-word-big,.hero-word-mondo{transform:none!important} .hero-portrait-wrap{transform:translateX(-50%)!important} .hero-sky,.skyline,.hero-ambient-type{transform:none!important} } /* V4.9 living-photo correction: the STILL is always the default image. Only the user tap attaches an MP4 and flips that same polaroid into video. */ .story-picture-front{background:#e7f3f9;color:#0b234a} .story-picture-front img{object-position:center 45%} .story-picture-front:before{background:linear-gradient(0deg,#0a295866,transparent 31%)} .story-picture-front strong,.story-picture-video-wash{display:none!important} .story-picture-front span{bottom:0;left:0;right:0;padding:22px 9px 6px;background:linear-gradient(0deg,#fef4ddeb,#fef4ddcc,transparent);color:#102342;font:900 10px var(--sans);letter-spacing:.07em;text-shadow:none} .story-picture-frame{cursor:pointer} .story-picture-frame .living-inline-player{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:#0b1d37;overflow:hidden;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-origin:center center;transform:perspective(900px) rotateY(-88deg) scale(.98);opacity:0;visibility:hidden;pointer-events:none;transition:transform .56s cubic-bezier(.19,.81,.21,1),opacity .20s ease,visibility .56s} #storyPhotoOne .living-inline-player{border:10px solid #fff9ed;box-shadow:13px 16px 0 #ff805c,0 27px 65px #0e0a265e} .story-picture-frame.is-video-playing .living-inline-player{transform:perspective(900px) rotateY(0) scale(1);opacity:1;visibility:visible;pointer-events:auto} .story-picture-frame .living-inline-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#07142e} .story-picture-frame .living-inline-close{position:absolute;right:7px;top:7px;z-index:2;background:#ffd64a;color:#0e2a54;border:1px solid #ffffffa3;border-radius:100%;width:32px;height:32px;font:900 24px/1 var(--sans);cursor:pointer;display:grid;place-items:center;box-shadow:0 5px 15px #0008} .story-picture-frame .living-inline-close:hover,.story-picture-frame .living-inline-close:focus-visible{background:#fff;outline:2px solid #ffdf76;outline-offset:2px} .story-picture-frame .living-inline-caption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#081e47db,transparent);font:800 8px/1.4 var(--sans);letter-spacing:.1em;color:#fff;padding:20px 7px 7px;text-align:center;pointer-events:none} .story-picture-frame.is-video-playing>.story-picture-turn,.story-picture-frame.is-video-playing>img,.story-picture-frame.is-video-playing>figcaption{opacity:0;transition:opacity .15s ease .23s} .story-picture-frame:not(.is-video-playing)>.story-picture-turn,.story-picture-frame:not(.is-video-playing)>img,.story-picture-frame:not(.is-video-playing)>figcaption{opacity:1;transition:opacity .14s ease .18s} .story-picture-frame.is-video-playing{filter:drop-shadow(0 0 15px #79d6ff99)} @media(max-width:600px){#storyPhotoOne .living-inline-player{border-width:6px;box-shadow:7px 8px 0 #ff805c,0 18px 34px #0e0a2648}.story-picture-frame .living-inline-close{width:28px;height:28px;font-size:19px}.story-picture-frame .living-inline-caption{font-size:6.5px;padding:15px 4px 5px}} @media(prefers-reduced-motion:reduce){.story-picture-frame .living-inline-player{transition:none}.story-picture-frame.is-video-playing>.story-picture-turn,.story-picture-frame.is-video-playing>img,.story-picture-frame.is-video-playing>figcaption{transition:none}} /* BIG MONDO WORLD: PUBLIC LAUNCH STYLING — final production overrides */ /* Larger hero typography remains legible in WebKit and Chromium; spare outer margins prevent Safari italic stroke from clipping the G or final O. */ .hero-word-big {left:clamp(30px,4.6vw,90px);top:21.7%;font-size:clamp(100px,14.5vw,252px);transform-origin:left center} .hero-word-mondo {right:clamp(32px,4.6vw,90px);top:23%;font-size:clamp(85px,13.0vw,229px);transform-origin:right center} @media(max-width:850px){ .hero-word-big{font-size:clamp(87px,23vw,168px);left:6%} .hero-word-mondo{font-size:clamp(74px,16.6vw,132px);right:6%} } @media(max-width:600px){ .hero-word-big{font-size:30.5vw;left:8%;top:17%} .hero-word-mondo{font-size:19.3vw;right:8%;top:34%} } /* Player is a single small now-playing token outside the music-card artwork. Spotify and Apple Music remain independently accessible on EVERY card. */ .soundstage{position:absolute;z-index:12;top:12%;bottom:auto;right:6%;left:auto;width:360px;max-width:46vw; height:44px;min-height:0;padding:6px 10px;gap:8px;border-radius:40px; box-shadow:0 8px 25px #10082d80;background:#1b1141ec; opacity:0;visibility:hidden;pointer-events:none;transition:opacity .23s ease,visibility .23s} .soundstage.has-track{opacity:1;visibility:visible;pointer-events:auto} .soundstage-led{width:25px;height:25px;font-size:16px} .soundstage-info{flex:1 1 auto;min-width:0} .soundstage-info strong{font-size:12px;letter-spacing:.03em} .soundstage-info span{display:none!important} .soundstage-timer{font-size:10px;letter-spacing:.02em} .soundstage-wave{display:flex;gap:2px;height:22px} .soundstage-wave i{width:2px;max-height:22px} .soundstage-platforms{display:none!important} @media(max-width:1000px){.soundstage{left:auto;right:4%;max-width:52vw;width:330px}} @media(max-width:600px){ .soundstage{position:absolute;bottom:65px;top:auto;left:auto;right:12px;margin:0;padding:5px 9px; width:min(300px,calc(100vw - 24px));max-width:calc(100vw - 24px);min-height:0;height:46px;flex-wrap:nowrap} .soundstage-info{min-width:0;flex:1 1 auto} .soundstage-info strong{font-size:10px} .soundstage-timer{font-size:9px} .soundstage-seek{width:72px;flex-basis:72px;height:44px} .soundstage-wave{display:none} } /* Remove leftover template/prototype UI elements not relevant to a real site. */ .preview-ribbon,.bridge-side-label,.bridge-phase-caption{display:none!important} /* Preserve the actual last music card's fall-into-Mondo TV sequence. */ @media(prefers-reduced-motion:reduce){.soundstage{transition:none}} /* CROVIXA V4.9.1 — Mondo TV cinematic theater / no black side gutters. YouTube serves a true 16:9 player. The *entire* video viewport is 16:9 rather than an iframe stretched into a very wide horizontal strip. This keeps every frame and YouTube's own controls visible, without cropping. A faint matched visual halo fills the surrounding editorial space. */ .tv-landing{ isolation:isolate; --tv-backdrop:url('/assets/big-mondo-forest-photo.webp'); padding:clamp(25px,3.6svh,48px) clamp(25px,5vw,90px) clamp(18px,2.6svh,32px); gap:clamp(8px,1.12svh,15px); } .tv-landing:before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(90deg,#f7f4eee8,#e3f0fbcb,#f7f4eedd),var(--tv-backdrop); background-position:center;background-size:cover;filter:saturate(1.35); opacity:.34; } .tv-landing-heading{min-height:clamp(108px,15svh,168px)} .tv-landing-heading h2{font-size:clamp(58px,7.7vw,120px)} .tv-landing-heading p{align-self:end;margin-bottom:9px} .tv-video-frame{ position:relative;align-self:center;flex:0 0 auto; width:min(100%,115svh);height:auto;aspect-ratio:16 / 9;min-height:0; margin:0 auto;overflow:hidden; border:1px solid #4c87ba; background:#16416c; box-shadow:0 8px 0 #ffd343,0 23px 60px #17437258,0 0 0 9px #b5d8f22b; } .tv-video-stage{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; overflow:hidden;background:#1b4977; } .tv-video-stage:before{ content:'';position:absolute;inset:-20px;z-index:0;pointer-events:none; background-image:linear-gradient(90deg,#114170b0,#0c3352aa),var(--tv-backdrop); background-position:center;background-size:cover; filter:blur(22px) saturate(1.25);transform:scale(1.08); } .tv-video-stage iframe{ position:relative;z-index:2;display:block; width:100%;height:100%;max-width:100%;max-height:100%; aspect-ratio:16 / 9;border:0;background:#122e55; } .tv-video-stage:after{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none; box-shadow:inset 0 0 0 1px #d5f0ff30; } .tv-video-poster{background:#174b83} @media(max-width:800px){ .tv-landing-heading{min-height:clamp(116px,18svh,182px)} .tv-landing-heading h2{font-size:clamp(54px,10.5vw,104px)} .tv-video-frame{width:100%;max-width:100%} } @media(max-width:600px){ .tv-landing{padding:66px 5vw 58px;gap:19px;min-height:0} .tv-landing-heading{min-height:0} .tv-landing-heading h2{font-size:clamp(61px,17.5vw,90px)} .tv-landing-heading p{margin-bottom:0} .tv-video-frame{ align-self:stretch;width:100%;height:auto;min-height:0; aspect-ratio:16 / 9;flex:0 0 auto; box-shadow:0 6px 0 #ffd343,0 16px 30px #17437251; } .tv-video-poster>img{object-position:center center} .tv-poster-title{font-size:clamp(34px,9vw,60px)} .tv-poster-play{width:55px;height:55px;top:62%} .tv-poster-caption{font-size:7px} } @media(prefers-reduced-motion:reduce){ .tv-landing{min-height:0} .tv-landing:before,.tv-video-stage:before{filter:none} /* Don't allow the hero wordmark fit routine to shrink to a transient 16px computed value when an entrance animation is suppressed. */ .hero-word-big{font-size:clamp(100px,14.5vw,252px)!important} .hero-word-mondo{font-size:clamp(85px,13vw,229px)!important} } @media(prefers-reduced-motion:reduce) and (max-width:850px){ .hero-word-big{font-size:clamp(87px,23vw,168px)!important} .hero-word-mondo{font-size:clamp(74px,16.6vw,132px)!important} } @media(prefers-reduced-motion:reduce) and (max-width:600px){ .hero-word-big{font-size:30.5vw!important} .hero-word-mondo{font-size:19.3vw!important} } /* Final small-screen optical adjustment: Safari keeps the full last O visible. */ @media(max-width:600px){.hero-word-mondo{font-size:20.5vw}} @media(prefers-reduced-motion:reduce) and (max-width:600px){.hero-word-mondo{font-size:20.5vw!important}} /* Keep the entire "WATCH IT. FEEL IT." headline clear of the fixed nav. Shorter, native-ratio cinema frame reserves that safe heading space. */ @media(min-width:601px){ .tv-landing{padding-top:clamp(80px,8.5svh,100px)} .tv-video-frame{width:min(100%,105svh)} } @media(max-width:600px){.tv-landing{padding-top:84px}} /* CROVIXA V4.9.2 — Native, unobscured YouTube image. Crying on the Creek is 16:9 in the user-supplied original 1080p master. Never place faux pillarbox/ambient panels on top of the video: they hide 44 percent of its actual picture, including performers and scenery. Color-matched atmospheric effects live BEHIND the video only. */ .tv-video-stage iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;border:0;} .tv-video-stage .tv-ambient-side{display:none!important;} /* The video-to-story chapter reveals from the actual video area. Suppress the generic KEEP SCROLLING overlay until there is a real photo stack onscreen. */ .about-story-stage.is-tv-prelude .story-scroll-prompt{ opacity:calc(var(--story-dark,0) * var(--story-ghost,0)); } /* CROVIXA V4.9.3 — Safari-proof artist words. Both SVG viewBoxes reserve horizontal overhang for skew, parallax & shadow; textLength forces the complete first G and final O into bounded shapes. No font-size measurement or browser-specific shrink-to-fit. */ .hero .hero-word{display:block;position:absolute;max-width:none;height:auto; overflow:visible;z-index:-1;pointer-events:none;user-select:none; white-space:normal;letter-spacing:0;font-size:unset!important; transform-origin:center center;filter:drop-shadow(3px 5px 0 #0d3a82a8)} .hero .hero-word text{font-family:Impact,'Arial Black',Arial,sans-serif; font-weight:1000;font-stretch:condensed;font-size:260px;letter-spacing:0; paint-order:stroke fill;stroke-linejoin:round} .hero .hero-word-big{width:clamp(190px,22.5vw,405px);aspect-ratio:520/290; left:clamp(31px,4.5vw,90px);right:auto;top:21.7%; color:#19a9ff;-webkit-text-stroke:unset;text-shadow:none; transform:skew(-7deg) rotate(-3deg) translate3d(var(--big-shift-x,0px),var(--big-shift-y,0px),0)} .hero .hero-word-big text{fill:#19a9ff;stroke:#1476bc;stroke-width:12px} .hero .hero-word-mondo{width:clamp(310px,38vw,700px);aspect-ratio:770/290; right:clamp(37px,5.1vw,100px);left:auto;top:23%; color:#ffd443;-webkit-text-stroke:unset;text-shadow:none; transform:skew(-7deg) rotate(-3deg) translate3d(var(--mondo-shift-x,0px),var(--mondo-shift-y,0px),0)} .hero .hero-word-mondo text{fill:#ffd443;stroke:#e8ae27;stroke-width:12px} @media(max-width:850px){ .hero .hero-word-big{width:37vw;left:5.5%;top:19.5%} .hero .hero-word-mondo{width:62vw;right:5.5%;top:32.5%} } @media(max-width:600px){ .hero .hero-word-big{width:43vw;left:7.5%;top:18%} .hero .hero-word-mondo{width:69vw;right:7%;top:34.5%} } @media(prefers-reduced-motion:reduce){ .hero .hero-word{transform:none!important} } /* CROVIXA V4.9.3 — spectrum-following Soundstage. JS writes real sample-derived pixel lengths and scalar CSS variables; no CSS multiplication unsupported by Safari. */ .song-card .card-beat-aura{position:absolute;z-index:1;inset:-22%;pointer-events:none; background:radial-gradient(ellipse at 54% 57%,#ffe9929c 0%,#61deff88 28%,transparent 67%); mix-blend-mode:screen;opacity:0;transform:scale(.88);transform-origin:center; transition:opacity .09s linear,transform .09s linear} .song-card .card-art-text,.song-card .card-spectrum{z-index:3} .song-card.card-playing .card-beat-aura{opacity:var(--beat-opacity,0);transform:scale(var(--beat-aura-scale,1))} .song-card.card-playing>.card-activate, .song-card.card-playing>.card-activate:hover, .song-card.card-playing>.card-activate:focus-visible{ transform:perspective(600px) rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg)) translateY(var(--beat-lift,0px)) scale(var(--beat-scale,1))!important; box-shadow:0 0 0 2px #ffe69a,0 0 var(--beat-glow,22px) #61e0ffc4,0 18px 40px #000a!important; } .song-card.card-playing .card-official-cover{filter:brightness(var(--beat-light,1)) saturate(1.20)} .song-card.card-playing .card-spectrum i,.soundstage.is-playing .soundstage-wave i{ animation:none!important;transition:height .065s linear} .song-card .card-spectrum i{height:6px} @media(prefers-reduced-motion:reduce){ .song-card.card-playing>.card-activate{transform:none!important} .song-card.card-playing .card-beat-aura{opacity:0!important} .song-card.card-playing .card-official-cover{filter:none!important} } /* Crovixa V4.9.4 — clean editorial story and browser-safe video opening. */ .footer{grid-template-columns:1fr 1fr} .footer>span{justify-self:end;text-align:right} @media(max-width:800px){.footer{grid-template-columns:1fr 1fr}} @media(max-width:600px){.footer{grid-template-columns:1fr}.footer>span{display:none}} /* The photos remain clickable; no numbers, captions or callouts on the frames. */ .story-chapter-footer,.story-picture-face>span,.story-picture-frame>figcaption,.living-inline-caption{display:none!important} .intro-hear-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 13px;border-radius:30px;border:1px solid #ffffffb5;background:#ffe05a;color:#11234a;font:900 10px/1.15 var(--sans);letter-spacing:.09em;box-shadow:0 6px 25px #081a3480;cursor:pointer;white-space:nowrap} .intro-hear-button:hover{background:#fff6cf} .intro-hear-button:focus-visible{outline:3px solid white;outline-offset:3px} .intro-hear-button[hidden]{display:none!important} @media(max-width:600px){.intro-hear-button{font-size:8px;padding:9px 10px}.intro-audio-label{display:none}.intro-right{gap:5px}} /* Mobile QA: preserve the approved styling while meeting a 44px touch target. */ @media(max-width:800px){ .intro-skip,.brand,.header-stream,.menu-toggle,.hero-replay,.scroll-cue,.button-primary,.button-secondary,.director-clip{min-height:44px} .menu-toggle{min-width:44px} .mobile-menu a{min-height:44px;align-items:center} .tv-landing-footer a,.about-links a{display:inline-flex;align-items:center;min-height:44px} } /* V5.0.3 MOBILE QA — keep the full MONDO title readable above the portrait, preserve the desktop collectible handoff, and give horizontally swiped music cards enough internal headroom for their border and focus glow. */ /* Patch 7: the cream menu must not inherit the music section's white header foreground when the fixed header switches to its dark scrolled state. */ .mobile-menu, .mobile-menu a{ color:#102040; } @media(max-width:600px){ .hero .hero-word-mondo{ width:64vw; right:3.5%; top:18.7%; } .hero-crown{top:13%;right:44%} .hero-album-portal{display:block!important} .track-deck{ padding-top:58px; padding-bottom:38px; margin-top:-28px; scroll-padding-inline:7vw; } .song-card{height:360px} .song-card .card-bottom{height:112px} .song-card .card-full-links{bottom:8px;gap:7px} .song-card .card-full-links a{min-height:44px;padding:9px 9px;font-size:9px;border-radius:5px} } @media(prefers-reduced-motion:reduce) and (max-width:600px){ .hero-album-portal{display:none!important} } /* Landscape phones still use the native-swipe mobile runtime, even when their CSS width is wider than portrait tablets. Keep the hero usable in one short viewport and show the touch navigation instead of tiny desktop links. */ @media (pointer:coarse) and (orientation:landscape) and (max-height:500px) and (max-width:950px){ .site-header{height:60px;padding:8px max(18px,env(safe-area-inset-right)) 8px max(18px,env(safe-area-inset-left))} .desktop-nav{display:none} .menu-toggle{display:flex;min-width:44px;min-height:44px} .header-stream{padding:9px 12px;font-size:9px;min-height:44px} .brand{width:82px;min-height:44px} .brand-big{font-size:13px}.brand-mondo{font-size:26px} .mobile-menu{top:60px;max-height:calc(100svh - 60px);overflow:auto;padding:16px 24px;gap:6px} .mobile-menu a{min-height:44px;font-size:24px;align-items:center} .hero{height:100svh;min-height:390px;max-height:none} .hero-word{top:18%;font-size:19vw} .hero-word-big{left:1%} .hero .hero-word-mondo{top:25%;right:2%;width:auto;font-size:14vw} .hero-crown{top:14%;right:37%;width:52px} .hero-portrait-wrap{height:118%;bottom:-42%} .hero-copy{left:3.5%;bottom:7%;max-width:34%;width:34%} .hero-copy .mini-rule{font-size:7px;margin-bottom:7px} .hero-copy h2{font-size:clamp(20px,3.7vw,31px);margin-bottom:7px} .hero-copy p{font-size:7px;line-height:1.35;margin-bottom:8px} .hero-buttons{gap:5px} .button-primary,.button-secondary{min-height:44px;padding:7px 10px;font-size:8px} .hero-album{right:3%;bottom:8%;width:86px} .hero-replay{right:3%;bottom:12px;min-height:44px} .scroll-cue{display:none} .tracks-section{height:auto;min-height:0} .tracks-sticky{position:relative;height:auto;min-height:540px;padding-bottom:92px} .tracks-heading{position:relative;top:auto;left:auto;right:auto;display:block;padding:58px 5% 0} .tracks-heading h2{font-size:clamp(44px,8vw,68px)} .tracks-heading p{margin:10px 0 0;text-align:left;max-width:300px} .track-deck{position:relative;top:auto;left:auto;overflow-x:auto;width:100%;padding:35px 5vw 28px;transform:none!important;scroll-snap-type:x mandatory;overscroll-behavior-x:contain} .song-card{height:360px;transform:none!important;scroll-snap-align:center} .song-card .card-art{height:248px} .song-card .card-bottom{height:112px} .song-card .card-full-links{bottom:8px;gap:7px} .song-card .card-full-links a{min-height:44px;padding:9px 9px;font-size:9px;border-radius:5px} .track-progress{left:5%;bottom:27px}.deck-actions{right:5%;bottom:19px} } @supports(padding-top:env(safe-area-inset-top)){ @media(max-width:800px){ .site-header{padding-top:max(13px,env(safe-area-inset-top));height:calc(70px + env(safe-area-inset-top))} .mobile-menu{top:calc(70px + env(safe-area-inset-top))} } } /* V5.0.3 MOBILE QA 3 — iOS Safari substitutes U+2733 with Apple's green emoji tile even when a text-variation selector is present. This monochrome vector mask cannot enter the emoji font path and inherits each approved ink color. */ .crovixa-star{ display:inline-block; width:.88em; height:.88em; flex:none; vertical-align:-.06em; background:currentColor; -webkit-mask:url('../assets/starburst.svg') center/contain no-repeat; mask:url('../assets/starburst.svg') center/contain no-repeat; } .ambient-line .crovixa-star{margin:0 .06em} .brand-crown.crovixa-star,.hero-matte-mark.crovixa-star, .hero-spray.crovixa-star,.bridge-back-marker.crovixa-star{display:block} .intro-tag .crovixa-star{color:var(--gold);margin:0 8px} .bottom-tagline .crovixa-star{color:#ffc649} .tv-poster-title .crovixa-star{color:var(--gold);font-size:.5em;vertical-align:top} .story-tap-tip .crovixa-star{color:#1275e4} /* V5.0.3 MOBILE QA 4 — separate the two foreground hero words. BIG sits immediately below the fixed header with a measured gap above MONDO. */ @media(max-width:600px){ .hero .hero-word-big{top:10%;width:41.5vw} } @media(max-width:340px){ .hero .hero-word-big{top:10.5%} } /* V5.0.3 MOBILE QA 5 — controls never depend on emoji-capable Unicode glyphs. Monochrome masks inherit the exact button/link color on Safari and desktop. */ .ui-icon{ display:inline-block; width:1em; height:1em; flex:none; vertical-align:-.12em; background:currentColor; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain; mask-position:center; mask-repeat:no-repeat; mask-size:contain; } .ui-icon-play{-webkit-mask-image:url('../assets/icon-play.svg');mask-image:url('../assets/icon-play.svg')} .ui-icon-ne{-webkit-mask-image:url('../assets/icon-arrow-ne.svg');mask-image:url('../assets/icon-arrow-ne.svg')} .ui-icon-down{-webkit-mask-image:url('../assets/icon-arrow-down.svg');mask-image:url('../assets/icon-arrow-down.svg')} .ui-icon-right{-webkit-mask-image:url('../assets/icon-arrow-right.svg');mask-image:url('../assets/icon-arrow-right.svg')} .ui-icon-left{-webkit-mask-image:url('../assets/icon-arrow-right.svg');mask-image:url('../assets/icon-arrow-right.svg');transform:rotate(180deg)} .ui-icon-replay{-webkit-mask-image:url('../assets/icon-replay.svg');mask-image:url('../assets/icon-replay.svg')} .ui-icon-pause{background:linear-gradient(90deg,currentColor 0 31%,transparent 31% 69%,currentColor 69% 100%)} .header-stream .ui-icon,.intro-skip .ui-icon,.button-white .ui-icon{font-size:1.1em} .play-triangle .ui-icon,.play-ring .ui-icon{font-size:1em} .card-play .ui-icon{font-size:1.15em} .tv-poster-play .ui-icon{font-size:.86em} .round-arrow{display:grid;place-items:center} .round-arrow .ui-icon{font-size:1.15em} .hero-replay{display:inline-flex;align-items:center;gap:6px} .hero-replay .ui-icon{font-size:1.05em} .down-arrow{display:inline-grid;place-items:center} .mobile-menu a,.tv-landing-footer a,.about-links a{display:inline-flex;align-items:center;gap:.45em} .song-card .card-full-links a{gap:2px} .track-scroll-instruction .ui-icon{font-size:18px;margin-top:8px;color:var(--gold)} /* V5.0.3 MOBILE QA 8 — Crovixa full-scene parity. Phones retain the desktop scroll narrative: sticky hero, diagonal gallery blade, pinned card choreography, reversible Track 09 flip, theater reveal, photo story and Encore. Only the composition scales to the viewport. */ .track-deck{ transform:translate3d(var(--deck-x,0px),0,0)!important; } .song-card{ transform:translateY(var(--rise,0px)) rotate(var(--tilt,0deg))!important; } @media(max-width:600px){ .experience-story>.hero{position:sticky;top:0} .hero-exit-wash{display:block} .experience-story>.tracks-section:before{ top:-28svh;height:28svh; clip-path:polygon(0 94%,0 100%,100% 100%,100% 0); transform:none } .experience-story>.tracks-section:after{top:-28svh;height:28svh;transform:none} .tracks-section{height:305svh;min-height:0} .tracks-sticky{position:sticky;top:0;height:100svh;min-height:0;padding-bottom:0;overflow:hidden} .tracks-heading{ position:absolute;left:6%;right:6%;top:10%;padding:0;display:block; translate:0 var(--heading-rise,0px);opacity:var(--heading-opacity,1) } .tracks-heading h2{font-size:clamp(44px,12vw,68px)} .tracks-heading p{margin:10px 0 0;max-width:270px;text-align:left;line-height:1.45} .tracks-outline{top:16%;font-size:22vw} .track-deck{ position:absolute;top:42%;left:0;overflow:visible;width:max-content; padding:0 0 0 7vw;margin:0;gap:19px;scroll-snap-type:none; overscroll-behavior:auto;scrollbar-width:auto;touch-action:pan-y; translate:0 var(--deck-rise,0px);opacity:var(--deck-opacity,1) } .song-card{width:min(62vw,250px);height:360px;scroll-snap-align:none} .song-card:last-child{opacity:var(--last-card-departure,1)!important} .track-progress{left:7%;bottom:4%;gap:12px} .track-progress p{display:none} .deck-actions{right:7%;bottom:3%} .track-scroll-instruction{display:block;top:40%;right:3%;font-size:8px} .tv-bridge{height:380svh;position:relative;background:#19082d} .bridge-stage{ position:sticky;top:0;height:100svh;min-height:0;overflow:hidden; background:#18092b;perspective:1600px } .bridge-stage:before,.bridge-stage:after, .bridge-atmosphere,.bridge-word-wall,.bridge-beam{display:block} .bridge-flip-portal{display:block!important} .ambient-line--one{top:10%;font-size:24vw;color:rgba(255,255,255,.12)} .ambient-line--two{top:62%;font-size:15vw} .ambient-outline{top:34%;font-size:40vw;left:4%} .tv-landing{ position:absolute;inset:0;z-index:8;display:flex;min-height:0; padding:84px 5vw 42px;gap:16px; opacity:var(--bridge-landing-opacity)!important; transform:translate3d(0,var(--bridge-landing-rise),0)!important; pointer-events:var(--tv-pointer-events,none)!important } .tv-landing-heading{display:block;min-height:104px} .tv-landing-heading h2{font-size:clamp(55px,16vw,78px)} .tv-landing-heading p{margin:10px 0 0;text-align:left;font-size:8px;line-height:1.45} .tv-video-frame{align-self:stretch;width:100%;height:auto;min-height:0;aspect-ratio:16/9;flex:0 0 auto} .tv-landing-footer{font-size:8px} } @media(max-width:600px) and (max-height:650px){ /* Short iPhone viewports must remain a single cinematic frame. The earlier 670px floor pushed the secondary CTA and scroll cue below 320x568. */ .hero{height:100svh;min-height:0;max-height:none} .tracks-heading{top:9%} .tracks-heading h2{font-size:clamp(38px,11vw,48px)} .tracks-heading p{font-size:8px;line-height:1.3} .track-deck{top:36%} .song-card{height:300px} .song-card .card-art{height:208px} .song-card .card-bottom{height:92px} .about-story-content{z-index:10;padding:58px 5vw 8px} .about-story-content .about-main{max-width:100%} .about-story-content h2{font-size:clamp(46px,15vw,54px);margin:10px 0 6px;line-height:.78} .about-story-content p{font-size:9px;line-height:1.22;max-width:285px;margin:6px 0} .about-story-content .about-links{margin-top:4px;gap:7px} .about-story-content .about-links a{font-size:7px} .story-tap-tip{margin-top:3px} } @media (pointer:coarse) and (orientation:landscape) and (max-height:500px) and (max-width:950px){ .experience-story>.hero{position:sticky;top:0} .hero-exit-wash{display:block} .experience-story>.tracks-section:before{top:-28svh;height:28svh} .experience-story>.tracks-section:after{top:-28svh;height:28svh} .tracks-section{height:305svh;min-height:0} .tracks-sticky{position:sticky;top:0;height:100svh;min-height:0;padding-bottom:0;overflow:hidden} .tracks-heading{position:absolute;top:13%;left:5%;right:5%;padding:0;display:block} .track-deck{position:absolute;top:28%;left:0;overflow:visible;width:max-content;padding:0 0 0 5vw;margin:0;scroll-snap-type:none;touch-action:pan-y;gap:16px} .song-card{width:165px;height:238px;transform:translateY(var(--rise,0px)) rotate(var(--tilt,0deg))!important;scroll-snap-align:none} .song-card .card-art{height:150px} .song-card .card-bottom{height:88px} .song-card .card-art-text{font-size:25px} .song-card .card-bottom small{font-size:6px} .song-card .card-bottom strong{font-size:11px;max-width:118px} .song-card .card-full-links{bottom:5px;gap:4px} .song-card .card-full-links a{min-height:44px;padding:6px;font-size:7px} .song-card:last-child{opacity:var(--last-card-departure,1)!important} .tv-bridge{height:380svh;position:relative;background:#19082d} .bridge-stage{position:sticky;top:0;height:100svh;min-height:0;padding:0;overflow:hidden;background:#18092b} .bridge-stage:before,.bridge-stage:after,.bridge-atmosphere,.bridge-word-wall,.bridge-beam{display:block} .bridge-flip-portal{display:block!important} .tv-landing{position:absolute;inset:0;min-height:0;padding:62px 18px 18px;display:grid;grid-template-columns:minmax(180px,34%) 1fr;grid-template-rows:1fr auto;gap:10px 18px;opacity:var(--bridge-landing-opacity)!important;transform:translate3d(0,var(--bridge-landing-rise),0)!important;pointer-events:var(--tv-pointer-events,none)!important} .tv-landing-heading{grid-column:1;grid-row:1;display:block;min-height:0;align-self:center} .tv-landing-heading h2{font-size:clamp(43px,7vw,64px)} .tv-landing-heading p{font-size:7px;line-height:1.4;margin-top:10px;text-align:left} .tv-video-frame{grid-column:2;grid-row:1 / span 2;align-self:center;width:100%;height:auto;min-height:0;aspect-ratio:16/9} .tv-landing-footer{grid-column:1;grid-row:2;font-size:7px} .about-story-stage{height:100svh;min-height:0} .about-story-content{padding:67px 4vw 14px} .about-story-content .about-main{max-width:44vw} .about-story-content h2{font-size:clamp(42px,7vw,62px);margin:12px 0 7px} .about-story-content p{font-size:9px;line-height:1.25;max-width:330px;margin:6px 0} } @media(prefers-reduced-motion:reduce){ .track-deck{transform:none!important} .song-card{transform:none!important} .experience-story>.hero{position:relative} .hero-exit-wash{display:none} .bridge-flip-portal{display:none!important} .tracks-section{height:auto;min-height:0} .tracks-sticky{position:relative;height:auto;min-height:700px;padding-bottom:130px;overflow:hidden} .tracks-heading{position:absolute;top:70px;left:6%;right:6%;padding:0} .track-deck{position:relative;top:220px;left:auto;width:100%;overflow-x:auto;padding:40px 8vw;scroll-snap-type:x mandatory;touch-action:auto} .song-card{scroll-snap-align:center} .song-card:last-child{opacity:1!important} .tv-bridge{height:auto;background:var(--paper)} .bridge-stage{position:relative;height:auto;min-height:0;overflow:visible;background:var(--paper)} .bridge-stage:before,.bridge-stage:after,.bridge-atmosphere,.bridge-word-wall,.bridge-beam{display:none} .tv-landing{position:relative;inset:auto;min-height:690px;opacity:1!important;transform:none!important;pointer-events:auto!important} }