/* ============================================================ CODSHIPX AI R18-R11 CINEMATIC MASTER VISUAL LOCK Screenshot-derived optical tuning: Current artwork ~22% viewport width. Target premium presence ~55-60%. No generated images. No video replacement. No application UI modification. ============================================================ */ /* CODSHIPX_AI_R18_R11_BEGIN */ /* ------------------------------------------------------------ CINEMATIC STAGE ------------------------------------------------------------ */ .r7-r24-cinematic, .r7-r24-codi-entry{ overflow:hidden !important; background:#000 !important; } /* ------------------------------------------------------------ MASTER DESKTOP FRAME R10 = 2.65x R11 = 6.85x This is intentionally an OPTICAL crop of the large black area baked into the authored MP4 frame. ------------------------------------------------------------ */ .r7-r24-codi-entry video[data-codi-cinematic="1"], video[data-codi-cinematic="1"]{ position:absolute !important; left:50% !important; top:41.5% !important; width:100vw !important; height:100vh !important; height:100dvh !important; min-width:100vw !important; min-height:100vh !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:50% 50% !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; outline:0 !important; background:#000 !important; box-shadow:none !important; transform: translate3d(-50%,-50%,0) scale(6.85) !important; transform-origin:50% 50% !important; /* * Small finishing grade only. * Keeps enlarged green/blue details crisp and premium. */ filter: brightness(1.055) contrast(1.075) saturate(1.065) !important; opacity:1 !important; pointer-events:none !important; user-select:none !important; -webkit-user-drag:none !important; backface-visibility:hidden !important; will-change:transform !important; } /* ------------------------------------------------------------ FINAL PREMIUM VIGNETTE Dark cinema perimeter with a large clear visual centre. No visible player/card edge. ------------------------------------------------------------ */ .r7-r24-cinematic::before{ content:"" !important; position:absolute !important; inset:-2px !important; z-index:5 !important; pointer-events:none !important; background: linear-gradient( 180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.045) 10%, rgba(0,0,0,0) 23%, rgba(0,0,0,0) 72%, rgba(0,0,0,.055) 87%, rgba(0,0,0,.24) 100% ), radial-gradient( ellipse 86% 78% at 50% 48%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 57%, rgba(0,0,0,.035) 68%, rgba(0,0,0,.14) 84%, rgba(0,0,0,.38) 100% ) !important; } /* ------------------------------------------------------------ CENTRAL AI ENERGY DEPTH Very subtle CSS-only bloom. ------------------------------------------------------------ */ .r7-r24-cinematic::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:4 !important; pointer-events:none !important; background: radial-gradient( circle at 50% 47%, rgba(127,255,55,.045) 0%, rgba(103,255,49,.018) 14%, rgba(58,255,37,.005) 29%, transparent 45% ), radial-gradient( ellipse 58% 38% at 50% 48%, rgba(45,82,255,.012) 0%, transparent 72% ) !important; opacity:.70 !important; mix-blend-mode:screen !important; } /* ------------------------------------------------------------ POWER LANKA SAFE FOOTER Preserve R10 branding but refine optical spacing. ------------------------------------------------------------ */ .r7-r24-codi-entry::before{ content:"POWERED BY" !important; position:absolute !important; left:calc(50% - 8px) !important; bottom:29px !important; z-index:20 !important; display:block !important; color:rgba(181,190,201,.56) !important; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size:10px !important; font-weight:500 !important; letter-spacing:.115em !important; line-height:1 !important; white-space:nowrap !important; transform:translateX(-100%) !important; pointer-events:none !important; } .r7-r24-codi-entry::after{ content:"POWER LANKA" !important; position:absolute !important; left:calc(50% + 2px) !important; bottom:28px !important; z-index:20 !important; display:block !important; color:rgba(255,255,255,.94) !important; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.06em !important; line-height:1 !important; white-space:nowrap !important; pointer-events:none !important; text-shadow: 0 0 16px rgba(255,255,255,.04) !important; } /* ------------------------------------------------------------ LARGE DESKTOP 1800px+ viewport class ------------------------------------------------------------ */ @media (min-width:1800px) and (min-height:850px){ .r7-r24-codi-entry video[data-codi-cinematic="1"], video[data-codi-cinematic="1"]{ top:41.5% !important; transform: translate3d(-50%,-50%,0) scale(7.05) !important; } } /* ------------------------------------------------------------ NORMAL DESKTOP ------------------------------------------------------------ */ @media (min-width:1400px) and (max-width:1799px){ .r7-r24-codi-entry video[data-codi-cinematic="1"], video[data-codi-cinematic="1"]{ top:41.5% !important; transform: translate3d(-50%,-50%,0) scale(6.85) !important; } } /* ------------------------------------------------------------ 1366x768 / LOWER HEIGHT LAPTOP Enough cinematic scale without over-cropping compact screens. ------------------------------------------------------------ */ @media (min-width:901px) and (max-height:820px){ .r7-r24-codi-entry video[data-codi-cinematic="1"], video[data-codi-cinematic="1"]{ top:42.5% !important; transform: translate3d(-50%,-50%,0) scale(6.20) !important; } .r7-r24-codi-entry::before{ bottom:20px !important; } .r7-r24-codi-entry::after{ bottom:19px !important; } } /* ------------------------------------------------------------ TABLET LANDSCAPE ------------------------------------------------------------ */ @media (max-width:900px) and (orientation:landscape){ .r7-r24-codi-entry video[data-codi-cinematic="1"], video[data-codi-cinematic="1"]{ top:44% !important; transform: translate3d(-50%,-50%,0) scale(4.30) !important; } } /* ------------------------------------------------------------ PORTRAIT TABLET Portrait object-fit:cover already creates significant horizontal zoom, so do not apply desktop-level scaling. ------------------------------------------------------------ */ @media (max-width:900px) and (orientation:portrait){ .r7-r24-codi-entry video[data-codi-cinematic="1"], video[data-codi-cinematic="1"]{ top:50% !important; object-position:50% 50% !important; transform: translate3d(-50%,-50%,0) scale(1.78) !important; } } /* ------------------------------------------------------------ PHONE ------------------------------------------------------------ */ @media (max-width:520px){ .r7-r24-codi-entry video[data-codi-cinematic="1"], video[data-codi-cinematic="1"]{ top:50% !important; object-position:50% 50% !important; transform: translate3d(-50%,-50%,0) scale(1.60) !important; } .r7-r24-codi-entry::before{ left:calc(50% - 6px) !important; bottom:18px !important; font-size:8px !important; } .r7-r24-codi-entry::after{ left:calc(50% + 1px) !important; bottom:17px !important; font-size:9px !important; } } /* ------------------------------------------------------------ REDUCED MOTION Playback lifecycle remains owned by existing application. ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ .r7-r24-codi-entry video[data-codi-cinematic="1"], video[data-codi-cinematic="1"]{ will-change:auto !important; } } /* CODSHIPX_AI_R18_R11_END */