/* Frontend styles for Self-Hosted Reels (minimal wrapper) */
:root { --vh: 1vh; }
.reel-thumbnails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; }
@media (max-width: 768px) { .reel-thumbnails { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; } }
.thumb { position: relative; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: #222 center/cover no-repeat; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.thumb:hover { transform: scale(1.03); opacity: 0.95; }
.thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 1; }

/* Fullscreen */
.reel-gallery { position: fixed; inset: 0; width: 100%; height: calc(var(--vh) * 100); background: #000; overflow: hidden; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.reel-gallery.active { opacity: 1; pointer-events: auto; }
.reel-item { position: absolute; inset: 0; width: 100%; height: calc(var(--vh) * 100); display: flex; align-items: center; justify-content: center; background: #000; transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.reel-item video { width: auto; height: 100%; aspect-ratio: 9/16; object-fit: contain; }
@media (max-width: 768px) { .reel-item video { width: 100%; height: 100%; object-fit: cover; } }
.close-reels { position: fixed; top: 10px; right: 10px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff; cursor: pointer; z-index: 10000; background: rgba(0,0,0,0.3); border-radius: 50%; transition: background 0.25s ease, transform 0.15s ease; }
.close-reels:hover { background: rgba(255,255,255,0.1); transform: scale(1.1); }
.scroll-hint { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-size: 15px; animation: bounce 1.2s infinite; text-shadow: 0 0 6px rgba(255,255,255,0.6); z-index: 10000; opacity: 1; transition: opacity 0.5s ease; }
.scroll-hint.hidden { opacity: 0; pointer-events: none; }
@keyframes bounce { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-6px); } }