.iphone-mockup{position:relative;width:100%;height:100%}.iphone-mockup--rotated{perspective:var(--perspective,1000px);transform-style:preserve-3d}.iphone-mockup--rotated .iphone-mockup-canvas{transform:rotateX(var(--rotate-x,0deg)) rotateY(var(--rotate-y,0deg)) rotate(var(--rotate-z,0deg));transform-style:preserve-3d}.iphone-mockup--rotated .iphone-mockup-shadow{transform:translateZ(-1px) rotateX(calc(var(--rotate-x, 0deg) * .5)) scaleX(calc(1 + var(--rotate-y, 0deg) / 100));filter:blur(calc(2px + abs(var(--rotate-x, 0deg)) / 10))}.iphone-mockup-canvas{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center}.iphone-mockup-shadow{position:absolute;z-index:0;bottom:calc(-7px + var(--shadow-bottom-offset, 0px));left:0;opacity:0;animation:iphone-shadow-fade-in 1.5s ease-out .5s forwards}.iphone-mockup-shadow img{width:100%;height:auto}@keyframes iphone-shadow-fade-in{0%{opacity:0}to{opacity:1}}.iphone-mockup-video-container{position:absolute;opacity:0;pointer-events:none}.iphone-mockup-controls{display:flex;flex-direction:column;gap:12px;position:absolute;bottom:30px;right:-37px;z-index:2}.iphone-mockup-controls button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background-color:var(--surface-secondary);border:none;color:var(--text-primary);border-radius:50%;cursor:pointer;transition:opacity .15s ease-in-out}.iphone-mockup-controls button:hover{opacity:.7}.iphone-mockup--card{display:flex;overflow:hidden}.iphone-mockup--card .iphone-mockup-canvas{position:relative}.iphone-mockup--card.iphone-mockup--padded .iphone-mockup-canvas{padding:30px}.iphone-mockup--card.iphone-mockup--cropped-top .iphone-mockup-canvas{object-position:top;padding-top:0}.iphone-mockup--card.iphone-mockup--cropped-bottom .iphone-mockup-canvas{object-position:bottom;padding-bottom:0}@media (max-width:768px){.iphone-mockup-controls{flex-direction:row;bottom:-40px;right:50%;transform:translateX(50%)}}@container (min-width: 580px){.iphone-mockup--card.iphone-mockup--padded .iphone-mockup-canvas{padding:40px}}