/*-------------------------------------------------------------- # DODPM Hero - Final Clean Version --------------------------------------------------------------*/ /* === APPROACH SECTION === */ #approach.approach { padding: 80px 0; } /* === BASE SECTION === */ #portfolio-details.dodpm { position: relative; display: flex; justify-content: center; align-items: center; height: 500px; min-height: 500px; overflow: hidden; background-color: #000; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.25) 2px, transparent 4px), url(../img/portfolio/portfolio-page-hero-dodpm.png); background-size: 40px 40px, cover; background-position: -1px -1px, center; background-repeat: repeat, no-repeat; } /* === BACKGROUND GRADIENTS - BOTTOM LAYER === */ #portfolio-details.dodpm::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%), radial-gradient(circle, rgb(0 18 54 / 75%) 0%, rgb(0 1 4 / 75%) 100%), linear-gradient(to right, rgb(24 40 72 / 99%) 0%, rgb(0 37 121 / 97%) 100%); background-size: 1px 500px, cover, cover; background-position: center center, center center, center center; background-repeat: no-repeat, no-repeat, no-repeat; } /* === CANVAS WRAPPER - MIDDLE LAYER === */ #portfolio-details.dodpm .canvas-wrapper { position: absolute; inset: 0; z-index: 4; opacity: .45; pointer-events: none; } #portfolio-details.dodpm::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: radial-gradient(circle, rgb(0 18 54 / 75%) 0%, rgb(0 1 4 / 75%) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 65px), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.5) 5px, transparent 5px, transparent 100px), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.55) 1px, transparent 1px, transparent 100px), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(to bottom, rgba(192, 192, 192, 0.15) 0px, rgba(0, 255, 255, 0.35) 500px, transparent 4px, transparent 8px), url(../img/portfolio/jetf35c.png), linear-gradient(to right, rgba(30, 144, 255, 0.005) 1px, transparent 1px), linear-gradient(to bottom, rgba(192, 192, 192, 0.005) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px); background-size: cover, 1px 500px, 500px 3px, 30px 5px, 30px 15px, 30px 5px, 30px 5px, 2px 100%, 200%, 60px 80px, 60px 80px, 20px 40px, 20px 40px; background-position: center center, center center, 0 255px, 0 255px, 0 232px, 0 238px, 0 255px, 0 0, center 190px, 4px 0, 0 0, 0 0, 0 0; background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat, no-repeat, repeat, repeat, repeat, repeat; } /* === CANVAS ELEMENT === */ canvas#bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* === STATIC CIRCLE === */ #portfolio-details.dodpm .circle { position: absolute; width: 260px; height: 260px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; overflow: visible; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; pointer-events: none; background: radial-gradient(circle at center, white 0%, rgba(255, 255, 255, 0) 50%); background-size: 400px 400px; background-repeat: no-repeat; background-position: center; } /* === OUTER CIRCLE === */ #portfolio-details.dodpm .circle::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 280px; height: 280px; border: 1px solid rgba(255, 255, 255, 1); border-radius: 50%; opacity: 0.1; background: radial-gradient(circle at center, white 100%, rgba(255, 255, 255, 1) 100%); background-size: 400px 400px; background-repeat: no-repeat; background-position: center; } /* === INNER PULSE === */ #portfolio-details.dodpm .circle::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; animation: pulse-size 10s infinite ease-in-out; background: radial-gradient(circle at center, white 100%, rgba(255, 255, 255, 1) 100%); background-size: 400px 400px; background-repeat: no-repeat; background-position: center; } @keyframes pulse-size { 0%, 100% { width: 5px; height: 5px; opacity: 0; background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%); } 50% { width: 160px; height: 160px; opacity: 0.45; background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%); } } /* === SVG MORPHING SHAPE === */ #portfolio-details.dodpm svg { position: relative; width: 10%; height: auto; display: block; z-index: 4; } #portfolio-details.dodpm path { stroke: #fff; stroke-width: 0.01px; stroke-opacity: 0.1; fill-opacity: 0.95; } /* === TWINKLING DOTS === */ #portfolio-details.dodpm .dot { position: absolute; width: 2px; height: 2px; border-radius: 50%; pointer-events: none; z-index: 6; animation: twinkle 4s ease-in-out infinite; background-color: rgba(255, 255, 255, 0.4); } #portfolio-details.dodpm .dot:nth-child(2n) { animation-duration: 8s; animation-delay: 0.5s; } #portfolio-details.dodpm .dot:nth-child(3n) { animation-duration: 5s; animation-delay: 1s; background-color: rgba(92, 225, 230, 0.3); } #portfolio-details.dodpm .dot:nth-child(5n) { width: 3px; height: 3px; background-color: rgba(255, 49, 49, 0.3); } @keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } } /*-------------------------------------------------------------- # DODPM Hero - Final Clean Version --------------------------------------------------------------*/ /* === APPROACH SECTION === */ #approach.approach { padding: 80px 0; } /* === BASE SECTION === */ #portfolio-details.dodpm { position: relative; display: flex; justify-content: center; align-items: center; height: 500px; min-height: 500px; overflow: hidden; background-color: #000; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.25) 2px, transparent 4px), url(../img/portfolio/portfolio-page-hero-dodpm.png); background-size: 40px 40px, cover; background-position: -1px -1px, center; background-repeat: repeat, no-repeat; } /* === BACKGROUND GRADIENTS - BOTTOM LAYER === */ #portfolio-details.dodpm::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ "), url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ "), url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ "),/*url('data:image/svg+xml;utf8,'), url('data:image/svg+xml;utf8,'), url('data:image/svg+xml;utf8,'), */ linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%), radial-gradient(circle, rgb(0 18 54 / 75%) 0%, rgb(0 1 4 / 75%) 100%), linear-gradient(to right, rgb(24 40 72 / 99%) 0%, rgb(0 37 121 / 97%) 100%); background-size: /* ADD SIZES FOR THE THREE INDICATORS */ 50px 50px, /* indicator 1 */ 50px 50px, /* indicator 2 */ 50px 50px, /* indicator 3 */ 1px 500px, cover, cover; background-position: /* ADD POSITIONS FOR THE THREE INDICATORS - Adjust these to match jet features */ 8% 50%, /* indicator 1 - cockpit */ 29% 50%, /* indicator 2 - engine */ 24% 90%, /* indicator 3 - wing */ center center, center center, center center; background-repeat: /* ADD NO-REPEAT FOR THE THREE INDICATORS */ no-repeat, /* indicator 1 */ no-repeat, /* indicator 2 */ no-repeat, /* indicator 3 */ no-repeat, no-repeat, no-repeat; } /* === CANVAS WRAPPER - MIDDLE LAYER === */ #portfolio-details.dodpm .canvas-wrapper { position: absolute; inset: 0; z-index: 4; pointer-events: none; filter: opacity(0.5); } /* === GRID OVERLAY - TOP LAYER ====================== Needed for lines to show above the bursting bubbles === */ #portfolio-details.dodpm::after { content: ""; position: absolute; inset: 0; z-index: 3; opacity: .3; pointer-events: none; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 65px), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.5) 5px, transparent 5px, transparent 100px), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.55) 1px, transparent 1px, transparent 100px), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(to bottom, rgba(192, 192, 192, 0.15) 0px, rgba(0, 255, 255, 0.35) 500px, transparent 4px, transparent 8px), /* ADD THESE THREE INDICATOR SVGs BEFORE THE JET IMAGES */ /*url('data:image/svg+xml;utf8,'),*/ /*url('data:image/svg+xml;utf8,'),*/ /*url('data:image/svg+xml;utf8,'), url('data:image/svg+xml;utf8,'), url('data:image/svg+xml;utf8,'),*/ url(../img/portfolio/jetf35c.png), /*url(../img/portfolio/jetf35cP.png),*/ url(../img/portfolio/jetDash4.png), url(../img/portfolio/jetDash5.png), linear-gradient(to right, rgba(30, 144, 255, 0.005) 1px, transparent 1px), linear-gradient(to bottom, rgba(192, 192, 192, 0.005) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px); background-size: 1px 500px, 500px 3px, 30px 5px, 30px 15px, 30px 5px, 30px 5px, 2px 100%, 29%, 15%, 15%, 60px 80px, 60px 80px, 20px 40px, 20px 40px; background-position: center center, 0 255px, 0 255px, 0 232px, 0 238px, 0 255px, 0 0, 5.25% center, 79% 20px, 79% 280px, 4px 0, 0 0, 0 0, 0 0; background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat; } /* === CANVAS ELEMENT === */ canvas#bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* === STATIC CIRCLE === */ #portfolio-details.dodpm .circle { position: absolute; width: 260px; height: 260px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; overflow: visible; border: 1px solid #ffd242; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at center, white 0%, rgba(255, 255, 255, 0) 50%); background-size: 400px 400px; background-repeat: no-repeat; background-position: center; } /* BEGIN of NEw Ani */ /* ===== ENGINE ANIMATION - FLEXIBLE VERSIONS ===== */ /* Choose the version that matches how many images you want to use */ /* ============================================ VERSION 1: ALL 4 IMAGES (12 seconds total, 3s each) ============================================ */ /* Uncomment this section to use all 4 images */ /* .engine-1 { background-image: url(../img/portfolio/eng-ani-1.png); animation: showEngine1-of4 12s infinite; } .engine-2 { background-image: url(../img/portfolio/eng-ani-2.png); animation: showEngine2-of4 12s infinite; } .engine-3 { background-image: url(../img/portfolio/eng-ani-3.png); animation: showEngine3-of4 12s infinite; } .engine-4 { background-image: url(../img/portfolio/eng-ani-4.png); animation: showEngine4-of4 12s infinite; } @keyframes showEngine1-of4 { 0% { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; } 100% { opacity: 0; } } @keyframes showEngine2-of4 { 0% { opacity: 0; } 25% { opacity: 0; } 26% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } @keyframes showEngine3-of4 { 0% { opacity: 0; } 50% { opacity: 0; } 51% { opacity: 1; } 75% { opacity: 1; } 76% { opacity: 0; } 100% { opacity: 0; } } @keyframes showEngine4-of4 { 0% { opacity: 0; } 75% { opacity: 0; } 76% { opacity: 1; } 100% { opacity: 1; } } */ /* ============================================ VERSION 2: ONLY 3 IMAGES (12 seconds total, 4s each) Uses engines 1, 2, 3 ============================================ */ /* Uncomment this section to use only 3 images */ /* .engine-1 { background-image: url(../img/portfolio/eng-ani-1.png); animation: showEngine1-of3 12s infinite; } .engine-2 { background-image: url(../img/portfolio/eng-ani-2.png); animation: showEngine2-of3 12s infinite; } .engine-3 { background-image: url(../img/portfolio/eng-ani-3.png); animation: showEngine3-of3 12s infinite; } @keyframes showEngine1-of3 { 0% { opacity: 1; } 33% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } } @keyframes showEngine2-of3 { 0% { opacity: 0; } 33% { opacity: 0; } 34% { opacity: 1; } 66% { opacity: 1; } 67% { opacity: 0; } 100% { opacity: 0; } } @keyframes showEngine3-of3 { 0% { opacity: 0; } 66% { opacity: 0; } 67% { opacity: 1; } 100% { opacity: 1; } } */ /* ============================================ VERSION 3: ONLY 2 IMAGES (12 seconds total, 6s each) Uses engines 1, 2 ============================================ */ /* Uncomment this section to use only 2 images */ /* .engine-1 { background-image: url(../img/portfolio/eng-ani-1.png); animation: showEngine1-of2 12s infinite; } .engine-2 { background-image: url(../img/portfolio/eng-ani-2.png); animation: showEngine2-of2 12s infinite; } @keyframes showEngine1-of2 { 0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } @keyframes showEngine2-of2 { 0% { opacity: 0; } 50% { opacity: 0; } 51% { opacity: 1; } 100% { opacity: 1; } } */ /* ============================================ VERSION 4: FASTER 3 IMAGES (9 seconds total, 3s each) Uses engines 1, 2, 3 with faster cycle ============================================ */ /* Uncomment this section for faster 3-image cycle */ .engine-1 { background-image: url(../img/portfolio/eng-ani-1.png); animation: showEngine1-fast3 6s infinite; } .engine-2 { background-image: url(../img/portfolio/eng-ani-2.png); animation: showEngine2-fast3 6s infinite; } .engine-3 { background-image: url(../img/portfolio/eng-ani-33.png); background-size: 50%; animation: showEngine3-fast3 6s infinite; } @keyframes showEngine1-fast3 { 0% { opacity: 1; } 33% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } } @keyframes showEngine2-fast3 { 0% { opacity: 0; } 33% { opacity: 0; } 34% { opacity: 1; } 66% { opacity: 1; } 67% { opacity: 0; } 100% { opacity: 0; } } @keyframes showEngine3-fast3 { 0% { opacity: 0; } 66% { opacity: 0; } 67% { opacity: 1; } 100% { opacity: 1; } } /* ===== BASE ENGINE STYLING ===== */ #portfolio-details.dodpm .circle { position: absolute; width: 260px; height: 260px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; overflow: hidden; border: 1px solid #ffd24275; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at center, white 0%, rgba(255, 255, 255, 0) 50%); background-size: 400px 400px; background-repeat: no-repeat; background-position: center; } #portfolio-details.dodpm .circle .engine { position: absolute; inset: 0; z-index: 5; background-size: 175px 175px; background-repeat: no-repeat; background-position: center; } #portfolio-details.dodpm .circle .engine.engine-1 { background-size: 200px 140px; } #portfolio-details.dodpm .circle .engine.engine-2 { background-size: 200px 200px; } #portfolio-details.dodpm .circle .engine.engine-3 { background-size: 210px 145px; } /* ===== OUTER CIRCLE ===== */ #portfolio-details.dodpm .circle::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 280px; height: 280px; border: 1px solid rgb(173 152 53); border-radius: 50%; opacity: 0.60; z-index: 1; background: radial-gradient(circle at center, #631818 100%, rgb(126 0 0) 100%); background-size: 400px 400px; background-repeat: no-repeat; background-position: center; } /* ===== INNER PULSE ===== */ #portfolio-details.dodpm .circle::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; z-index: 2; animation: pulse-size 10s infinite ease-in-out; background: radial-gradient(circle at center, white 100%, rgba(255, 255, 255, 1) 100%); background-size: 400px 400px; background-repeat: no-repeat; background-position: center; } @keyframes pulse-size { 0%, 100% { width: 5px; height: 5px; opacity: 0; background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%); } 50% { width: 160px; height: 160px; opacity: 0.45; background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%); } } .half-circle { /* ===== Adjustable values ===== */ --diameter: 600px; --thickness: 3px; --color: #ffd3009c; /* positioning */ --x: 50%; --y: 20%; /* rotation */ --rotate: 45deg; position: absolute; left: var(--x); top: var(--y); width: var(--diameter); height: calc(var(--diameter) / 2); background: var(--color); z-index: 8; border-radius: var(--diameter) var(--diameter) 0 0; /* transform */ transform: translate(-50%, -50%) rotate(var(--rotate)); transform-origin: center bottom; -webkit-mask: radial-gradient( circle at center bottom, transparent calc(50% - var(--thickness)), black calc(50% - var(--thickness)), black 50%, transparent 50% ); mask: radial-gradient( circle at center bottom, transparent calc(50% - var(--thickness)), black calc(50% - var(--thickness)), black 50%, transparent 50% ); } .half-circle::after { content: ""; display: block; position: absolute; /* ===== Adjustable values ===== */ --diameter: 620px; --thickness: 10px; --color: #c000009c; /* positioning */ --x: 50%; --y: 20%; /* rotation */ --rotate: 45deg; position: absolute; left: var(--x); top: var(--y); width: var(--diameter); height: calc(var(--diameter) / 2); background: var(--color); z-index: 8; border-radius: var(--diameter) var(--diameter) 0 0; /* transform */ transform: translate(-50%, -50%) rotate(var(--rotate)); transform-origin: center bottom; -webkit-mask: radial-gradient( circle at center bottom, transparent calc(50% - var(--thickness)), black calc(50% - var(--thickness)), black 50%, transparent 50% ); mask: radial-gradient( circle at center bottom, transparent calc(50% - var(--thickness)), black calc(50% - var(--thickness)), black 50%, transparent 50% ); } /* ADD THIS: Keyframe for clockwise rotation */ @keyframes rotate-circles { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Update individual placements - remove rotation since animation handles it */ .indicator-1 { margin-top: 100px; margin-left: -396px; /* Remove: transform: rotate(-20deg); - animation will handle rotation */ } .indicator-2 { margin-top: -156px; margin-left: -200px; /* Remove: transform: rotate(0deg); */ } .indicator-3 { margin-top: 220px; margin-left: 40px; /* Remove: transform: rotate(20deg); */ } /*Circke if Circles*/ .circle-of-circles { /* You can position this container anywhere */ position: relative; width: 240px; height: 240px; z-index: 10; display: flex; align-items: center; justify-content: center; } /* Adjustable design values */ .circle-track { --dot-size: 8px; --dot-color: red; --circle-diameter: 200px; position: relative; width: var(--circle-diameter); height: var(--circle-diameter); } .circle-track .dot { position: absolute; width: var(--dot-size); height: var(--dot-size); background-color: var(--dot-color); border-radius: 50%; /* Center each dot on its coordinate */ transform: translate(-50%, -50%); } /* === SVG MORPHING SHAPE === */ #portfolio-details.dodpm svg { position: relative; width: 10%; height: auto; display: block; z-index: 0; } #portfolio-details.dodpm path { stroke: #fff; stroke-width: 0.01px; stroke-opacity: 0.1; fill-opacity: 0.95; } /* === TWINKLING DOTS === */ #portfolio-details.dodpm .dot { position: absolute; width: 2px; height: 2px; border-radius: 50%; pointer-events: none; z-index: 6; animation: twinkle 24s ease-in-out infinite; background-color: rgba(255, 255, 255, 0.4); } #portfolio-details.dodpm .dot:nth-child(2n) { animation-duration: 4s; animation-delay: 0.5s; } #portfolio-details.dodpm .dot:nth-child(3n) { animation-duration: 5s; animation-delay: 1s; background-color: rgba(92, 225, 230, 0.3); } #portfolio-details.dodpm .dot:nth-child(5n) { width: 3px; height: 3px; background-color: rgba(255, 49, 49, 0.3); } @keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } } /*-------------------------------------------------------------- # Animated Sphere — sits behind .circle (z-index 5) and above canvas-wrapper (z-index 4) --------------------------------------------------------------*/ /* ============================================================ ADJUSTABLE SPHERE VALUES ============================================================ */ #portfolio-details.dodpm { --sphere-size: 430px; /* match or slightly exceed .circle size */ --spin-duration: 12s; /* one full clockwise rotation */ --spin-direction: normal; /* normal = CW | reverse = CCW */ --mask-inner-stop: 2%; /* transparent hole start (keep at 0%) */ --mask-outer-stop: 99%; /* hollow to this % of radius */ --sphere-glow-color: rgba(255, 170, 20, 0.45); --sphere-glow-spread: 32px; --sphere-opacity: 0.20; /* overall sphere opacity */ } /* ============================================================ SPHERE WRAPPER ============================================================ */ #portfolio-details.dodpm .sphere-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--sphere-size); height: var(--sphere-size); border-radius: 50%; overflow: hidden; /* Stack: above canvas-wrapper (z-index 4), below .circle (z-index 5) */ z-index: 4; pointer-events: none; opacity: var(--sphere-opacity); /* Spin */ animation: sphere-spin var(--spin-duration) linear infinite var(--spin-direction); /* Outer glow */ filter: drop-shadow(0 0 var(--sphere-glow-spread) var(--sphere-glow-color)); /* Hollow mask: transparent core → opaque shell */ -webkit-mask-image: radial-gradient( circle at center, transparent var(--mask-inner-stop), black var(--mask-outer-stop) ); mask-image: radial-gradient( circle at center, transparent var(--mask-inner-stop), black var(--mask-outer-stop) ); } #portfolio-details.dodpm .sphere-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } /* ============================================================ SPIN KEYFRAME ============================================================ */ @keyframes sphere-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /*-------------------------------------------------------------- # Media Queries --------------------------------------------------------------*/ /* === MOBILE/TABLET (992px and below) - 320px height === */ @media (max-width: 992px) { #portfolio-details.dodpm { height: 320px; min-height: 320px; } #portfolio-details.dodpm::before { background-size: 1px 320px, cover, cover; } @media (max-width: 992px) { #portfolio-details.dodpm::after { background-size: 1px 500px, 500px 3px, 30px 5px, 30px 15px, 30px 5px, 30px 5px, 2px 100%, 30px 30px, /* smaller indicators on mobile */ 30px 30px, 30px 30px, 160%, 18%, 30px 40px, 30px 40px, 10px 20px, 10px 20px; background-position: center center, 0 175px, 0 175px, 0 152px, 0 158px, 0 175px, 0 0, /* Adjust indicator positions for mobile */ 106% 48%, 109% 45%, 112% 50%, 109% center, 84% 174px, 4px 0, 0 0, 0 0, 0 0; } /* === BACKGROUND GRADIENTS - BOTTOM LAYER === */ #portfolio-details.dodpm::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%), radial-gradient(circle, rgb(0 18 54 / 75%) 0%, rgb(0 1 4 / 75%) 100%), linear-gradient(to right, rgb(24 40 72 / 99%) 0%, rgb(0 37 121 / 97%) 100%); background-size: 1px 500px, cover, cover; background-position: center center, center center, center center; background-repeat: no-repeat, no-repeat, no-repeat; } } #portfolio-details.dodpm svg { width: 35%; } #portfolio-details.dodpm .circle { /* width: 160px; height: 160px; opacity: .2; filter: blur(1px);*/ } #portfolio-details.dodpm .circle::after { width: 250px; height: 250px; opacity: 0.25; } @keyframes pulse-size { 0%, 100% { width: 5px; height: 5px; opacity: 0; background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%); } 50% { width: 220px; height: 220px; opacity: 0.45; background: radial-gradient(circle, rgba(255, 120, 206, 1) 0%, rgba(255, 255, 255, 0) 70%); } } #portfolio-details.dodpm .circle::after { opacity: .80; } .half-circle { /* ===== Adjustable values ===== */ --diameter: 388px; --thickness: 3px; --color: #c000009c; /* positioning */ --x: 50%; --y: 20%; /* rotation */ --rotate: 45deg; position: absolute; left: var(--x); top: var(--y); width: var(--diameter); height: calc(var(--diameter) / 2); background: var(--color); z-index: 8; border-radius: var(--diameter) var(--diameter) 0 0; /* transform */ transform: translate(-50%, -50%) rotate(var(--rotate)); transform-origin: center bottom; -webkit-mask: radial-gradient( circle at center bottom, transparent calc(50% - var(--thickness)), black calc(50% - var(--thickness)), black 50%, transparent 50% ); mask: radial-gradient( circle at center bottom, transparent calc(50% - var(--thickness)), black calc(50% - var(--thickness)), black 50%, transparent 50% ); } #portfolio-details.dodpm { --sphere-size: 180px; --sphere-glow-spread: 20px; } }