/*
Theme Name: Pablo Vimeo
Author: Pablo Iacovone
Version: 1.4 (Mobile Stills + Desktop Cine)
*/

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#000; color:#fff; font-family: Helvetica, Arial, sans-serif; }
a{ color: inherit; text-decoration:none; }

/* LAYOUT GENERAL */
.home-wrapper{ width:100%; min-height:100vh; }
.videos{ width:100%; }
.video-item{ margin-bottom:48px; }
.video-title{ margin-top:12px; font-size:18px; font-weight:normal; letter-spacing:0.02em; }

/* --- DESKTOP (Mayor a 900px) --- */
@media (min-width: 901px){
  /* Entrada suave del sitio solo en desktop */
  body { animation: siteFadeIn 1.5s ease-out forwards; opacity: 0; }
  @keyframes siteFadeIn { to { opacity: 1; } }

  /* Layout Sidebar */
  :root{ --sidebar-w: 320px; --gap: 48px; --pad-x: 48px; --pad-y: 40px; --top: 24px; }
  .home-wrapper{ padding: var(--pad-y) var(--pad-x); }
  .sidebar{ position: fixed; left: var(--pad-x); top: var(--top); width: var(--sidebar-w); height: calc(100vh - (var(--top)*2)); display:flex; flex-direction:column; z-index: 50; }
  body.admin-bar .sidebar{ top: calc(var(--top) + 32px); height: calc(100vh - (var(--top)*2) - 32px); }
  .videos{ margin-left: calc(var(--sidebar-w) + var(--gap)); max-width: 1100px; }
  .sidebar-bottom{ margin-top:auto; }

  /* OCULTAR Elementos Mobile */
  .mobile-only{ display: none !important; }
  
  /* ESTILO CARDS DESKTOP (Con Animación) */
  .video-card {
    position:relative;
    opacity: 0; /* Empieza invisible */
    transform: translateY(60px);
    will-change: opacity, transform;
    transition: opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1), transform 2s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .video-card.is-on { opacity: 1; transform: translateY(0); }

  /* VIDEO EMBED */
  .video-embed{ position: relative; width: 100%; padding-top: 56.25%; background:#000; overflow:hidden; }
  .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
  .video-click{ position:absolute; inset:0; z-index:5; }
}

/* --- MOBILE (Menor o igual a 900px) --- */
@media (max-width: 900px){
  .home-wrapper{ padding: 22px 18px; display:flex; flex-direction:column; gap: 28px; }
  .sidebar{ position: static; width:auto; height:auto; margin-bottom: 20px;}
  .videos{ margin-left:0; max-width:100%; }

  /* Sidebar simple */
  .sidebar-top h1{ font-size:18px; margin-bottom:5px; }
  .sidebar-bottom{ font-size:13px; line-height:1.6; opacity:0.8; }
  
  /* OCULTAR Elementos Desktop */
  .desktop-only{ display: none !important; }
  
  /* MOSTRAR Elementos Mobile (Stills) */
  .mobile-only{ display: block !important; }

  /* STILLS IMG */
  .mobile-still img{
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  
  /* CERO ANIMACIÓN EN MOBILE (Carga sólida) */
  .video-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* TIPOGRAFIA COMUN */
.sidebar-top h1{ font-weight:bold; letter-spacing:0.04em; }
.sidebar-top p{ font-size:14px; opacity:0.85; }
.video-title a{ color:#fff !important; }
.video-title a:hover{ opacity:0.75; }